hyyfClient/src/views/BioSafety/StiflingAdmin.vue

<!--
 * @Author: your name
 * @Date: 2021-09-16 11:27:35
 * @LastEditTime: 2021-09-26 15:23:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hyyfClient\src\views\BioSafety\StiflingAdmin.vue
-->
<template>
  <div class="stifling-admin">
    <!-- 筛选条件 -->
    <query-conditions :formItems="formItems" :propFormData="propFormData" @getQueryParams="handleQuery"></query-conditions>

    <!-- 表格 -->
    <new-table :title="title" :listData="listData" :tableItems="tableItems" :shows="tableShows" :height="height" @selectionChange="handleSelectChange">
      <!-- 按钮 -->
      <template v-slot:handler="scope">
        <el-button @click="handleClick(scope.row)">删除</el-button>
      </template>
    </new-table>
  </div>
</template>

<script>
import QueryConditions from 'components/bioSafety/QueryConditions'
import NewTable from 'components/newTable/NewTable'

import { formItems, propFormData } from './stiflingAdmin/queryCondition.config'
import { title, tableItems, tableShows } from './stiflingAdmin/table.config'

export default {
  name: "PersonAdmin",
  components: {
    QueryConditions,
    NewTable
  },
  data() {
    return {
      formItems: [], // 传给 QueryCondition 组件的 formItems
      propFormData: {}, // 传给 QueryCondition 组件的 propFormData
      title: '', // 传给 BioTable 组件的 title
      // listData: [], // 传给 BioTable 组件的表格展示的值 listData
      listData: [
        {
          place: '一一一',
          startTime: '2222',
          endTime: '3333',
          long: '4444'
        }
      ],
      tableItems: [], // 传给 BioTable 组件的表格的列表 tableItems
      tableShows: {},
      height: 550
    }
  },
  mounted() {
    this.formItems = formItems
    this.propFormData = propFormData
    this.title = title
    this.tableItems = tableItems
    this.tableShows = tableShows
  },
  methods: {
    // 获取查询条件
    handleQuery(params) {
      console.log(params)
    },
    handleClick(row) {
      console.log(row)
    },
    handleSelectChange(rows) {
      console.log(rows)
    }
  },
}
</script>

<style scoped>
.stifling-admin {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}
</style>