hyyfClient/src/views/BioSafety/PersonAdmin.vue

<!--
 * @Author: your name
 * @Date: 2021-09-16 11:27:35
 * @LastEditTime: 2021-09-23 18:06:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hyyfClient\src\views\BioSafety\PersonAdmin.vue
-->
<template>
  <div class="person-admin">
    <!-- 顶部的按钮选择 -->
    <head-btns 
      :btnNames="btnNames" 
      :btnSelected="btnSelected"
      @btnSelected="getBtnSelected">
    </head-btns>

    <!-- 筛选条件 -->
    <query-conditions :formItems="formItems" :propFormData="propFormData" @getQueryParams="handleQuery"></query-conditions>

    <!-- 表格 -->
    <new-table :title="title" :listData="listData" :tableItems="tableItems" :shows="tableShows">
      <template v-slot:right>
        <template v-if="btnSelected === 1">
          <div>
            <el-button size="mini">添加人员</el-button>
            <el-button size="mini">添加区域</el-button>
          </div>
        </template>
        <template v-else-if="btnSelected === 2">
          <div>
            <el-button size="mini">黑名单</el-button>
          </div>
        </template>
        <template v-else>
          <div>
            <el-button size="mini">黑名单</el-button>
          </div>
        </template>
      </template>
    </new-table>
  </div>
</template>

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

import { formItems, propFormData } from './personAdmin/queryCondition.config'
import { titles, tableItems, tableShows } from './personAdmin/table.config'

export default {
  name: "PersonAdmin",
  components: {
    HeadBtns,
    QueryConditions,
    NewTable
  },
  data() {
    return {
      btnNames: [ // 按钮情况
        { id: 1, name: '档案管理' },
        { id: 2, name: '人脸门禁' },
        { id: 3, name: '赶猪监管' }
      ],
      btnSelected: 1, // 选中的按钮
      formItems: [], // 传给 QueryCondition 组件的 formItems
      propFormData: {}, // 传给 QueryCondition 组件的 propFormData
      title: '', // 传给 BioTable 组件的 title
      listData: [], // 传给 BioTable 组件的表格展示的值 listData
      tableItems: [], // 传给 BioTable 组件的表格的列表 tableItems
      tableShows: {}
    }
  },
  mounted() {
    this.formItems = formItems[this.btnSelected - 1]
    this.propFormData = propFormData[this.btnSelected - 1]
    this.title = titles[this.btnSelected - 1]
    this.tableItems = tableItems[this.btnSelected - 1]
    this.tableShows = tableShows
  },
  methods: {
    // 获取选中的按钮情况
    getBtnSelected(id) {
      this.btnSelected = id
      this.formItems = formItems[id - 1]
      this.propFormData = propFormData[id - 1]
      this.title = titles[id - 1]
      this.tableItems = tableItems[id - 1]
    },
    // 获取查询条件
    handleQuery(params) {
      console.log(params)
    }
  },
}
</script>

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