生物安全的人员管理

src/components/bioSafety/Btns.vue

@@ -0,0 +1,57 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-09-18 09:55:44
+ * @LastEditTime: 2021-09-18 16:11:18
+ * @LastEditors: Please set LastEditors
+ * @Description: 生物安全 - 顶部的三个按钮组件
+ * @FilePath: \hyyfClient\src\components\bioSafety\Btns.vue
+-->
+<template>
+  <div class="bio-safety-btns">
+    <el-button 
+      v-for="item in btnNames" 
+      :key="item.id"
+      :type="item.id === selected? 'primary': ''"
+      @click="handleClick(item.id)">
+      {{ item.name }}
+    </el-button>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    // 传入按钮的数组，格式为 [{ name: '按钮名称', id: '区别三个按钮的标识符' }, {}]
+    btnNames: {
+      type: Array,
+      required: true
+    },
+    btnSelected: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      selected: undefined
+    }
+  },
+  mounted() {
+    this.selected = this.btnSelected
+  },
+  methods: {
+    /**
+     * @description: 切换选中按钮的颜色，传出按钮的选中情况
+     * @param {*} id: 按钮的唯一标识符
+     */    
+    handleClick(id) {
+      this.selected = id
+      this.$emit('btnSelected', id)
+    }
+  },
+}
+</script>
+<style scoped>
+  .bio-safety-btns {
+    margin-bottom: 20px;
+  }
+</style>

src/views/BioSafety/PersonAdmin.vue

@@ -1,13 +1,86 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-09-16 11:27:35
+ * @LastEditTime: 2021-09-18 17:10:56
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \hyyfClient\src\views\BioSafety\PersonAdmin.vue
+-->
 <template>
-  <div>这是人员管理</div>
+  <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"></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 } from './personAdmin/table.config'
+
 export default {
-  name: "PersonAdmin"
+  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
+    }
+  },
+  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]
+  },
+  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>

src/views/BioSafety/personAdmin/queryCondition.config.js

@@ -0,0 +1,80 @@
+/*
+ * @Author: your name
+ * @Date: 2021-09-18 15:19:29
+ * @LastEditTime: 2021-09-18 15:40:21
+ * @LastEditors: Please set LastEditors
+ * @Description: 筛选条件的 formItems 和 propFormData
+ * @FilePath: \hyyfClient\src\views\BioSafety\personAdmin\queryCondition.config.js
+ */
+const formItems1 = [
+  {
+    type: 'input',
+    label: '输入搜索：',
+    placeholder: '请输入姓名',
+    field: 'name'
+  },
+  {
+    type: 'select',
+    label: '职务：',
+    placeholder: '请选择职务',
+    field: 'role',
+    options: []
+  },
+  {
+    type: 'select',
+    label: '负责区域：',
+    placeholder: '请选择区域',
+    field: 'region',
+    options: []
+  }
+]
+
+const propFormData1 = {
+  name: '',
+  role: '',
+  region: ''
+}
+
+const formItems2 = [
+  {
+    type: 'input',
+    label: '输入搜索：',
+    placeholder: '请输入姓名',
+    field: 'name'
+  },
+  {
+    type: 'datepicker',
+    label: '时间：',
+    placeholder: ['开始时间', '结束时间'],
+    field: 'time'
+  }
+]
+
+const propFormData2 = {
+  name: '',
+  time: []
+}
+
+const formItems3 = [
+  {
+    type: 'input',
+    label: '输入搜索：',
+    placeholder: '请输入姓名',
+    field: 'name'
+  },
+  {
+    type: 'select',
+    label: '负责区域：',
+    placeholder: '请选择区域',
+    field: 'region',
+    options: []
+  }
+]
+
+const propFormData3 = {
+  name: '',
+  region: ''
+}
+
+export const formItems = [formItems1, formItems2, formItems3]
+export const propFormData = [propFormData1, propFormData2, propFormData3]

src/views/BioSafety/personAdmin/table.config.js

@@ -0,0 +1,66 @@
+/*
+ * @Author: your name
+ * @Date: 2021-09-18 16:06:51
+ * @LastEditTime: 2021-09-18 17:27:48
+ * @LastEditors: Please set LastEditors
+ * @Description: 表格的配置
+ * @FilePath: \hyyfClient\src\views\BioSafety\personAdmin\table.config.js
+ */
+export const titles = ['人员列表', '门禁记录', '人员列表']
+
+const tableItems1 = [
+  {
+    prop: 'serialNumber',
+    label: '编号',
+    minWidth: '100',
+    slotName: 'serialNumber'
+  },
+  {
+    prop: 'photo',
+    label: '人员图片',
+    minWidth: '150',
+    slotName: 'photo'
+  },
+  {
+    prop: 'name',
+    label: '姓名',
+    minWidth: '150',
+    slotName: 'name'
+  },
+  {
+    prop: 'phone',
+    label: '联系电话',
+    minWidth: '150',
+    slotName: 'phone'
+  },
+  {
+    prop: 'region',
+    label: '负责区域',
+    minWidth: '150',
+    slotName: 'region'
+  },
+  {
+    prop: 'role',
+    label: '职位',
+    minWidth: '100',
+    slotName: 'role'
+  },
+  {
+    prop: 'account',
+    label: '账号',
+    minWidth: '150',
+    slotName: 'account'
+  },
+  {
+    prop: 'password',
+    label: '密码',
+    minWidth: '150',
+    slotName: 'password'
+  },
+  {
+    label: '操作',
+    minWidth: '150',
+    slotName: 'handler'
+  }
+]
+export const tableItems = [tableItems1]

vue.config.js

@@ -1,4 +1,5 @@
 const CompressionWebpackPlugin = require("compression-webpack-plugin");
+const path = require('path')
 const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
 module.exports = {
   publicPath: './', // 相对于 HTML 页面（目录相同）
@@ -25,7 +26,11 @@ module.exports = {
         })
       )
     }
-
+    config.resolve.alias = {
+      '@': path.resolve(__dirname, 'src'),
+      'components': '@/components',
+      'views': '@/views'
+    }
   },
   css: {
     loaderOptions: {