表格高度

src/components/newTable/NewTable.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-18 16:30:17
- * @LastEditTime: 2021-09-26 14:04:41
+ * @LastEditTime: 2021-09-26 14:53:37
  * @LastEditors: Please set LastEditors
  * @Description: 表格的封装
  * @FilePath: \hyyfClient\src\components\NewTable.vue
@@ -18,7 +18,7 @@
       </div>
     </div>
     <div class="content">
-      <el-table :data="listData" border>
+      <el-table :data="listData" border :height="height">
 
         <el-table-column 
           v-if="shows.showSelect" 
@@ -64,6 +64,10 @@ export default {
     tableItems: {
       type: Array,
       required: true
+    },
+    height: { // 表格高度控制
+      type: Number,
+      default: 500
     }
   },
 }
@@ -83,6 +87,7 @@ export default {
     padding: 10px 24px 10px 18px;
     display: flex;
     justify-content: space-between;
+    height: 50px;
   }
   /* 左边 */
   .header>.left {

src/views/BioSafety/CarAdmin.vue

@@ -1,13 +1,104 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-09-13 17:52:31
+ * @LastEditTime: 2021-09-26 14:23:00
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \hyyfClient\src\views\BioSafety\CarAdmin.vue
+-->
 <template>
-  <div>这是车辆管理</div>
+  <div class="car-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>
+          </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 './carAdmin/queryCondition.config'
+import { titles, tableItems, tableShows } from './carAdmin/table.config'
+
 export default {
-  name: "CarAdmin"
+  name: "CarAdmin",
+  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>
-
+.car-admin {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+}
 </style>

src/views/BioSafety/DeadPig.vue

@@ -1,13 +1,65 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-09-16 11:27:35
+ * @LastEditTime: 2021-09-26 14:47:56
+ * @LastEditors: your name
+ * @Description: In User Settings Edit
+ * @FilePath: \hyyfClient\src\views\BioSafety\DeadPig.vue
+-->
 <template>
-  <div>死猪管理</div>
+  <div class="dead-pig">
+    <!-- 筛选条件 -->
+    <query-conditions :formItems="formItems" :propFormData="propFormData" @getQueryParams="handleQuery"></query-conditions>
+
+    <!-- 表格 -->
+    <new-table :title="title" :listData="listData" :tableItems="tableItems" :shows="tableShows"></new-table>
+  </div>
 </template>
 
 <script>
+import QueryConditions from 'components/bioSafety/QueryConditions'
+import NewTable from 'components/newTable/NewTable'
+
+import { formItems, propFormData } from './deadPig/queryCondition.config'
+import { title, tableItems, tableShows } from './deadPig/table.config'
+
 export default {
-  name: "DeadPig"
+  name: "DeadPig",
+  components: {
+    QueryConditions,
+    NewTable
+  },
+  data() {
+    return {
+      formItems: [], // 传给 QueryCondition 组件的 formItems
+      propFormData: {}, // 传给 QueryCondition 组件的 propFormData
+      title: '', // 传给 BioTable 组件的 title
+      listData: [], // 传给 BioTable 组件的表格展示的值 listData
+      tableItems: [], // 传给 BioTable 组件的表格的列表 tableItems
+      tableShows: {}
+    }
+  },
+  mounted() {
+    this.formItems = formItems
+    this.propFormData = propFormData
+    this.title = title
+    this.tableItems = tableItems
+    this.tableShows = tableShows
+  },
+  methods: {
+    // 获取查询条件
+    handleQuery(params) {
+      console.log(params)
+    }
+  },
 }
 </script>
 
 <style scoped>
-
+.dead-pig {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+}
 </style>

src/views/BioSafety/PersonAdmin.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-16 11:27:35
- * @LastEditTime: 2021-09-26 14:06:45
+ * @LastEditTime: 2021-09-26 14:32:00
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \hyyfClient\src\views\BioSafety\PersonAdmin.vue

src/views/BioSafety/StiflingAdmin.vue

@@ -1,15 +1,66 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-09-16 11:27:35
+ * @LastEditTime: 2021-09-26 14:55:04
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \hyyfClient\src\views\BioSafety\StiflingAdmin.vue
+-->
 <template>
-  <div>
-    熏蒸监管
+  <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"></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: "StiflingAdmin"
+  name: "PersonAdmin",
+  components: {
+    QueryConditions,
+    NewTable
+  },
+  data() {
+    return {
+      formItems: [], // 传给 QueryCondition 组件的 formItems
+      propFormData: {}, // 传给 QueryCondition 组件的 propFormData
+      title: '', // 传给 BioTable 组件的 title
+      listData: [], // 传给 BioTable 组件的表格展示的值 listData
+      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)
+    }
+  },
 }
 </script>
 
 <style scoped>
-
+.stifling-admin {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+}
 </style>

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

@@ -0,0 +1,65 @@
+/*
+ * @Author: your name
+ * @Date: 2021-09-18 15:19:29
+ * @LastEditTime: 2021-09-26 14:20:47
+ * @LastEditors: Please set LastEditors
+ * @Description: 筛选条件的 formItems 和 propFormData
+ * @FilePath: \hyyfClient\src\views\BioSafety\personAdmin\queryCondition.config.js
+ */
+const formItems1 = [
+  {
+    type: 'input',
+    label: '输入搜索：',
+    placeholder: '请输入姓名/车牌号',
+    field: 'name'
+  }
+]
+
+const propFormData1 = {
+  name: ''
+}
+
+const formItems2 = [
+  {
+    type: 'select',
+    label: '位置：',
+    placeholder: '请选择位置',
+    field: 'region',
+    options: []
+  },
+  {
+    type: 'datepicker',
+    label: '时间：',
+    placeholder: ['开始时间', '结束时间'],
+    field: 'time'
+  }
+]
+
+const propFormData2 = {
+  region: '',
+  time: []
+}
+
+const formItems3 = [
+  {
+    type: 'select',
+    label: '输入搜索：',
+    placeholder: '请选择地点',
+    field: 'place',
+    options: []
+  },
+  {
+    type: 'datepicker',
+    label: '时间：',
+    placeholder: ['开始时间', '结束时间'],
+    field: 'time'
+  }
+]
+
+const propFormData3 = {
+  place: '',
+  time: []
+}
+
+export const formItems = [formItems1, formItems2, formItems3]
+export const propFormData = [propFormData1, propFormData2, propFormData3]

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

@@ -0,0 +1,141 @@
+/*
+ * @Author: your name
+ * @Date: 2021-09-18 16:06:51
+ * @LastEditTime: 2021-09-26 14:30:52
+ * @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: 'numPlate',
+    label: '车牌号',
+    minWidth: '150',
+    slotName: 'numPlate'
+  },
+  {
+    prop: 'driver',
+    label: '驾驶人',
+    minWidth: '150',
+    slotName: 'driver'
+  },
+  {
+    prop: 'usage',
+    label: '用途',
+    minWidth: '150',
+    slotName: 'usage'
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    minWidth: '100',
+    slotName: 'status'
+  },
+  {
+    prop: 'blacklist',
+    label: '黑名单',
+    minWidth: '150',
+    slotName: 'blacklist'
+  },
+  {
+    label: '操作',
+    minWidth: '150',
+    slotName: 'handler'
+  }
+]
+
+const tableItems2 = [
+  {
+    prop: 'place',
+    label: '洗消地点',
+    minWidth: '100',
+    slotName: 'place'
+  },
+  {
+    prop: 'photo',
+    label: '车辆图片',
+    minWidth: '150',
+    slotName: 'photo'
+  },
+  {
+    prop: 'startTime',
+    label: '开始时间',
+    minWidth: '150',
+    slotName: 'startTime'
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    minWidth: '150',
+    slotName: 'status'
+  },
+  {
+    prop: 'endTime',
+    label: '结束时间',
+    minWidth: '150',
+    slotName: 'endTime'
+  },
+  {
+    label: '操作',
+    minWidth: '150',
+    slotName: 'handler'
+  }
+]
+
+const tableItems3 = [
+  {
+    prop: 'place',
+    label: '烘干地点',
+    minWidth: '150',
+    slotName: 'place'
+  },
+  {
+    prop: 'photo',
+    label: '车辆图片',
+    minWidth: '150',
+    slotName: 'photo'
+  },
+  {
+    prop: 'startTime',
+    label: '开始时间',
+    minWidth: '150',
+    slotName: 'startTime'
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    minWidth: '150',
+    slotName: 'status'
+  },
+  {
+    prop: 'endTime',
+    label: '结束时间',
+    minWidth: '150',
+    slotName: 'endTime'
+  },
+  {
+    label: '操作',
+    minWidth: '150',
+    slotName: 'handler'
+  }
+]
+
+export const tableItems = [tableItems1, tableItems2, tableItems3]
+
+export const tableShows = {
+  showIndex: false, showSelect: true
+}

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

@@ -0,0 +1,21 @@
+/*
+ * @Author: your name
+ * @Date: 2021-09-18 15:19:29
+ * @LastEditTime: 2021-09-26 14:47:25
+ * @LastEditors: Please set LastEditors
+ * @Description: 筛选条件的 formItems 和 propFormData
+ * @FilePath: \hyyfClient\src\views\BioSafety\personAdmin\queryCondition.config.js
+ */
+export const formItems = [
+  {
+    type: 'select',
+    label: '位置：',
+    placeholder: '请选择位置',
+    field: 'place',
+    options: []
+  }
+]
+
+export const propFormData = {
+  place: ''
+}

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

@@ -0,0 +1,39 @@
+/*
+ * @Author: your name
+ * @Date: 2021-09-18 16:06:51
+ * @LastEditTime: 2021-09-26 14:49:43
+ * @LastEditors: Please set LastEditors
+ * @Description: 表格的配置
+ * @FilePath: \hyyfClient\src\views\BioSafety\personAdmin\table.config.js
+ */
+export const title = '数据列表'
+
+export const tableItems = [
+  {
+    prop: 'startTime',
+    label: '开始时间',
+    minWidth: '100',
+    slotName: 'startTime'
+  },
+  {
+    prop: 'endTime',
+    label: '结束时间',
+    minWidth: '150',
+    slotName: 'endTime'
+  },
+  {
+    prop: 'location',
+    label: '位置',
+    minWidth: '150',
+    slotName: 'location'
+  },
+  {
+    label: '操作',
+    minWidth: '150',
+    slotName: 'handler'
+  }
+]
+
+export const tableShows = {
+  showIndex: false, showSelect: true
+}

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

@@ -0,0 +1,20 @@
+/*
+ * @Author: your name
+ * @Date: 2021-09-18 15:19:29
+ * @LastEditTime: 2021-09-26 14:35:13
+ * @LastEditors: Please set LastEditors
+ * @Description: 筛选条件的 formItems 和 propFormData
+ * @FilePath: \hyyfClient\src\views\BioSafety\personAdmin\queryCondition.config.js
+ */
+export const formItems = [
+  {
+    type: 'datepicker',
+    label: '时间：',
+    placeholder: ['开始时间', '结束时间'],
+    field: 'time'
+  }
+]
+
+export const propFormData = {
+  time: []
+}

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

@@ -0,0 +1,45 @@
+/*
+ * @Author: your name
+ * @Date: 2021-09-18 16:06:51
+ * @LastEditTime: 2021-09-26 14:38:57
+ * @LastEditors: Please set LastEditors
+ * @Description: 表格的配置
+ * @FilePath: \hyyfClient\src\views\BioSafety\personAdmin\table.config.js
+ */
+export const title = '数据列表'
+
+export const tableItems = [
+  {
+    prop: 'place',
+    label: '位置',
+    minWidth: '100',
+    slotName: 'place'
+  },
+  {
+    prop: 'startTime',
+    label: '开始时间',
+    minWidth: '150',
+    slotName: 'startTime'
+  },
+  {
+    prop: 'endTime',
+    label: '结束时间',
+    minWidth: '150',
+    slotName: 'endTime'
+  },
+  {
+    prop: 'long',
+    label: '耗时',
+    minWidth: '150',
+    slotName: 'long'
+  },
+  {
+    label: '操作',
+    minWidth: '150',
+    slotName: 'handler'
+  }
+]
+
+export const tableShows = {
+  showIndex: false, showSelect: true
+}