1

src/styles/index.scss

@@ -14,7 +14,7 @@ body {
 }
 .content-app{
   width: 100%;
-  padding: 0 24px 0 24px;
+  padding: 0 24px 15px 24px;
   background: #dfe3ea;
 }
 

src/views/securityCheck/components/securityCheckHeader.vue

@@ -108,11 +108,11 @@
         <a-form-item style="margin-right: 16px">
           <a-button size="small" type="primary" @click="search">查询</a-button>
         </a-form-item>
-        <a-form-item style="margin-right: 24px">
+        <!-- <a-form-item style="margin-right: 24px">
           <a-button size="small" class="btn-white" @click="resetSearch"
             >重置</a-button
           >
-        </a-form-item>
+        </a-form-item> -->
       </template>
       <template v-if="withExportButton">
         <a-form-item>

src/views/securityCheck/components/securityCheckTable.vue

@@ -7,7 +7,11 @@
       :data-source="tableData"
       :columns="columns"
       :row-key="rowKey"
-      :row-selection="withSelection ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange } : null"
+      :row-selection="
+        withSelection
+          ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange }
+          : null
+      "
       :rowClassName="rowClassName"
       bordered
     >
@@ -17,14 +21,10 @@
         slot-scope="text, record"
       >
         <div class="column-operate">
-          <span
-            class="cell-operate-edit"
-            @click="editRow(record)"
-          >修改</span>
-          <span
-            class="cell-operate-delete"
-            @click="deleteRow(record)"
-          >删除</span>
+          <span class="cell-operate-edit" @click="editRow(record)">修改</span>
+          <span class="cell-operate-delete" @click="deleteRow(record)"
+            >删除</span
+          >
         </div>
       </template>
     </a-table>
@@ -33,84 +33,98 @@
 
 <script>
 export default {
-  name: 'SecurityCheckTable',
+  name: "SecurityCheckTable",
   props: {
     height: {
       type: [Number, String],
-      default: '50vh'
+      default: "50vh",
     },
     tableCols: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     tableData: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     rowKey: {
       type: String,
-      default: 'key'
+      default: "key",
     },
     withSelection: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showSummary: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
-      selectedRowKeys: []
-    }
+      selectedRowKeys: [],
+    };
   },
   computed: {
     columns() {
-      return this.tableCols.map(col => {
+      return this.tableCols.map((col) => {
         if (col.clickHandler) {
           col.customCell = () => {
             return {
-              class: 'cell-click',
+              class: "cell-click",
               on: {
-                click: col.clickHandler
-              }
+                click: col.clickHandler,
+              },
+            };
+          };
+        }
+        if (col.children) {
+          col.children.forEach((res) => {
+            if (res.clickHandler) {
+              res.customCell = () => {
+                return {
+                  class: "cell-click",
+                  on: {
+                    click: res.clickHandler,
+                  },
+                };
+              };
             }
-          }
+          });
         }
-        return col
-      })
+        return col;
+      });
     },
     tableWrapperHeight() {
-      return typeof this.height === 'number' ? this.height + 'px' : this.height
+      return typeof this.height === "number" ? this.height + "px" : this.height;
     },
     withOperateColumn() {
-      return this.columns.find(col => col.dataIndex === 'operation')
-    }
+      return this.columns.find((col) => col.dataIndex === "operation");
+    },
   },
   methods: {
     onSelectChange(selectedRowKeys, selectedRows) {
       // console.log(selectedRowKeys)
-      this.selectedRowKeys = selectedRowKeys
+      this.selectedRowKeys = selectedRowKeys;
     },
     rowClassName(index) {
       if (index.index % 2 == 0) {
-        return 'warning-row'
+        return "warning-row";
       } else {
-        return 'warning-rows'
+        return "warning-rows";
       }
     },
     editRow(row) {
-      console.log('edit')
+      console.log("edit");
     },
     deleteRow(row) {
-      console.log('delete')
+      console.log("delete");
     },
     clickHandler(index) {
-      console.log(index)
-    }
-  }
-}
+      console.log(index);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -124,7 +138,7 @@ export default {
       }
       .ant-table-column-title {
         font-size: 14px;
-        font-family: Helvetica, 'Microsoft YaHei';
+        font-family: Helvetica, "Microsoft YaHei";
         color: #101116;
         font-weight: bold;
       }
@@ -140,7 +154,7 @@ export default {
       }
       td {
         font-size: 14px;
-        font-family: Helvetica, 'Microsoft YaHei';
+        font-family: Helvetica, "Microsoft YaHei";
         color: #101116;
         &.cell-click {
           color: #2d67e3;

src/views/securityCheck/views/agentHome.vue

@@ -2,7 +2,11 @@
   <!-- 代理人信息统计 -->
   <div class="content-app">
     <div class="up">
-      <SecurityCheckHeader title="代理人信息统计" @change="change" />
+      <SecurityCheckHeader
+        title="代理人信息统计"
+        @change="change"
+        :withExportButton="false"
+      />
     </div>
     <div class="comprehensive">
       <a-row :gutter="16">

src/views/securityCheck/views/agentTable.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="table-wrapper">
-    <header
-      ref="tableWrapperHeader"
-      class="table-header-wrapper"
-    >
+    <header ref="tableWrapperHeader" class="table-header-wrapper">
       <SecurityCheckHeader
         title="代理人信息统计"
         @change="changeHandler"
@@ -22,117 +19,139 @@
 </template>
 
 <script>
-import SecurityCheckHeader from '../components/securityCheckHeader.vue'
-import SecurityCheckTable from '../components/securityCheckTable.vue'
+import SecurityCheckHeader from "../components/securityCheckHeader.vue";
+import SecurityCheckTable from "../components/securityCheckTable.vue";
 export default {
   components: { SecurityCheckHeader, SecurityCheckTable },
   data() {
     return {
-      tableHeight: '50vh',
+      tableHeight: "50vh",
       tableCols: [
         {
-          dataIndex: 'index',
-          key: 'index',
-          title: '序号'
+          dataIndex: "index",
+          key: "index",
+          title: "序号",
         },
         {
-          dataIndex: 'level',
-          key: 'level',
-          title: '等级'
+          dataIndex: "level",
+          key: "level",
+          title: "等级",
         },
         {
-          dataIndex: 'cargoCount',
-          key: 'cargoCount',
-          title: '货物件数'
+          dataIndex: "cargoCount",
+          key: "cargoCount",
+          title: "货物件数",
+          clickHandler: () => {
+            this.$router.push({
+              path: "/waybillTable",
+            });
+          },
         },
         {
-          dataIndex: 'unpackCount',
-          key: 'unpackCount',
-          title: '开箱件数',
+          dataIndex: "unpackCount",
+          key: "unpackCount",
+          title: "开箱件数",
           clickHandler: () => {
             this.$router.push({
-              path: '/waybillTable'
-            })
-          }
+              path: "/waybillTable",
+            });
+          },
         },
         {
-          dataIndex: 'unpackResult',
-          key: 'unpackResult',
-          title: '开箱结果',
+          dataIndex: "unpackResult",
+          key: "unpackResult",
+          title: "开箱结果",
           children: [
             {
-              dataIndex: 'release',
-              key: 'release',
-              title: '放行'
+              dataIndex: "release",
+              key: "release",
+              title: "放行",
+              clickHandler: () => {
+                this.$router.push({
+                  path: "/waybillTable",
+                });
+              },
             },
             {
-              dataIndex: 'reject',
-              key: 'reject',
-              title: '拒运'
+              dataIndex: "reject",
+              key: "reject",
+              title: "拒运",
+              clickHandler: () => {
+                this.$router.push({
+                  path: "/waybillTable",
+                });
+              },
             },
             {
-              dataIndex: 'turnOver',
-              key: 'turnOver',
-              title: '移交'
-            }
-          ]
-        }
+              dataIndex: "turnOver",
+              key: "turnOver",
+              title: "移交",
+              clickHandler: () => {
+                this.$router.push({
+                  path: "/waybillTable",
+                });
+              },
+            },
+          ],
+        },
       ],
       tableData: [
         {
           index: 1,
-          level: '高风险',
+          level: "高风险",
           cargoCount: 100,
           unpackCount: 10,
           release: 5,
           reject: 3,
-          turnOver: 2
+          turnOver: 2,
         },
         {
           index: 1,
-          level: '普通',
+          level: "普通",
           cargoCount: 300,
           unpackCount: 30,
           release: 15,
           reject: 9,
-          turnOver: 6
+          turnOver: 6,
         },
         {
           index: 1,
-          level: '低风险',
+          level: "低风险",
           cargoCount: 100,
           unpackCount: 10,
           release: 5,
           reject: 3,
-          turnOver: 2
-        }
-      ]
-    }
+          turnOver: 2,
+        },
+      ],
+    };
   },
   mounted() {
-    this.setTableHeight()
-    window.addEventListener('resize', this.setTableHeight)
+    this.setTableHeight();
+    window.addEventListener("resize", this.setTableHeight);
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.setTableHeight)
+    window.removeEventListener("resize", this.setTableHeight);
   },
   methods: {
     changeHandler() {
       this.$router.push({
-        path: './agent'
-      })
+        path: "./agent",
+      });
     },
     searchHandler(arr) {
-      console.log(arr)
+      console.log(arr);
     },
     setTableHeight() {
-      const topBarHeight = 80
-      const headerHeight = this.$refs['tableWrapperHeader'].offsetHeight
-      const footerBlackHeight = 24
-      this.tableHeight = `calc(100vh - ${topBarHeight + headerHeight + footerBlackHeight}px)`
-    }
-  }
-}
+      const topBarHeight = 80;
+      const headerHeight = this.$refs["tableWrapperHeader"].offsetHeight;
+      const footerBlackHeight = 24;
+      this.tableHeight = `calc(100vh - ${
+        topBarHeight + headerHeight + footerBlackHeight
+      }px)`;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/views/securityCheck/views/cargoCharts.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="content-app">
     <div class="up">
-      <SecurityCheckHeader title="航空货物关联统计" @change="change" />
+      <SecurityCheckHeader
+        title="航空货物关联统计"
+        @change="change"
+        :withExportButton="false"
+      />
     </div>
     <div class="content_top">
       <div class="header">

src/views/securityCheck/views/cargoRelevanceTable.vue

@@ -37,6 +37,11 @@ export default {
           dataIndex: "totalCount",
           key: "totalCount",
           title: "总件数",
+          clickHandler: () => {
+            this.$router.push({
+              path: "/waybillTable",
+            });
+          },
         },
         {
           dataIndex: "highRisk",
@@ -47,6 +52,11 @@ export default {
               dataIndex: "highRiskCount",
               key: "highRiskCount",
               title: "件数",
+              clickHandler: () => {
+                this.$router.push({
+                  path: "/waybillTable",
+                });
+              },
             },
             {
               dataIndex: "highRiskRatio",
@@ -58,12 +68,17 @@ export default {
         {
           dataIndex: "lowRisk",
           key: "lowRisk",
-          label: "低风险货物等级",
+          title: "低风险货物等级",
           children: [
             {
               dataIndex: "lowRiskCount",
               key: "lowRiskCount",
               title: "件数",
+              clickHandler: () => {
+                this.$router.push({
+                  path: "/waybillTable",
+                });
+              },
             },
             {
               dataIndex: "lowRiskRatio",
@@ -83,6 +98,11 @@ export default {
               key: "priorityCount",
               prop: "priorityCount",
               title: "件数",
+              clickHandler: () => {
+                this.$router.push({
+                  path: "/waybillTable",
+                });
+              },
             },
             {
               dataIndex: "priorityRatio",
@@ -103,6 +123,11 @@ export default {
               key: "normalCount",
               prop: "normalCount",
               title: "件数",
+              clickHandler: () => {
+                this.$router.push({
+                  path: "/waybillTable",
+                });
+              },
             },
             {
               dataIndex: "normalRatio",
@@ -123,6 +148,11 @@ export default {
               key: "strictCount",
               prop: "strictCount",
               title: "件数",
+              clickHandler: () => {
+                this.$router.push({
+                  path: "/waybillTable",
+                });
+              },
             },
             {
               dataIndex: "strictRatio",

src/views/securityCheck/views/cargoStatisticsHome.vue

@@ -2,7 +2,11 @@
   <!-- 航空货物综合统计 -->
   <div class="content-app">
     <div class="up">
-      <SecurityCheckHeader title="航空货物综合统计" @change="change" />
+      <SecurityCheckHeader
+        title="航空货物综合统计"
+        @change="change"
+        :withExportButton="false"
+      />
     </div>
     <div class="comprehensive">
       <a-row :gutter="16">

src/views/securityCheck/views/cargoTable.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="table-wrapper">
-    <header
-      ref="tableWrapperHeader"
-      class="table-header-wrapper"
-    >
+    <header ref="tableWrapperHeader" class="table-header-wrapper">
       <SecurityCheckHeader
         title="航空货物综合统计"
         @change="changeHandler"
@@ -23,135 +20,157 @@
 </template>
 
 <script>
-import SecurityCheckHeader from '../components/securityCheckHeader.vue'
-import SecurityCheckTable from '../components/securityCheckTable.vue'
+import SecurityCheckHeader from "../components/securityCheckHeader.vue";
+import SecurityCheckTable from "../components/securityCheckTable.vue";
 export default {
   components: { SecurityCheckHeader, SecurityCheckTable },
   data() {
     return {
-      tableHeight: '50vh',
+      tableHeight: "50vh",
       tableCols: [
         {
-          dataIndex: 'index',
-          key: 'index',
-          title: '序号'
+          dataIndex: "index",
+          key: "index",
+          title: "序号",
         },
         {
-          dataIndex: 'level',
-          key: 'level',
-          title: '等级'
+          dataIndex: "level",
+          key: "level",
+          title: "等级",
         },
         {
-          dataIndex: 'cargoCount',
-          key: 'cargoCount',
-          title: '货物件数'
+          dataIndex: "cargoCount",
+          key: "cargoCount",
+          title: "货物件数",
+          clickHandler: () => {
+            this.$router.push({
+              path: "/waybillTable",
+            });
+          },
         },
         {
-          dataIndex: 'unpackCount',
-          key: 'unpackCount',
-          title: '开箱件数',
+          dataIndex: "unpackCount",
+          key: "unpackCount",
+          title: "开箱件数",
           clickHandler: () => {
             this.$router.push({
-              path: '/waybillTable'
-            })
-          }
+              path: "/waybillTable",
+            });
+          },
         },
         {
-          dataIndex: 'unpackResult',
-          key: 'unpackResult',
-          title: '开箱结果',
+          dataIndex: "unpackResult",
+          key: "unpackResult",
+          title: "开箱结果",
           children: [
             {
-              dataIndex: 'release',
-              key: 'release',
-              title: '放行'
+              dataIndex: "release",
+              key: "release",
+              title: "放行",
+              clickHandler: () => {
+                this.$router.push({
+                  path: "/waybillTable",
+                });
+              },
             },
             {
-              dataIndex: 'reject',
-              key: 'reject',
-              title: '拒运'
+              dataIndex: "reject",
+              key: "reject",
+              title: "拒运",
+              clickHandler: () => {
+                this.$router.push({
+                  path: "/waybillTable",
+                });
+              },
             },
             {
-              dataIndex: 'turnOver',
-              key: 'turnOver',
-              title: '移交'
-            }
-          ]
-        }
+              dataIndex: "turnOver",
+              key: "turnOver",
+              title: "移交",
+              clickHandler: () => {
+                this.$router.push({
+                  path: "/waybillTable",
+                });
+              },
+            },
+          ],
+        },
       ],
       tableData: [
         {
           index: 1,
-          level: '高风险等级',
+          level: "高风险等级",
           cargoCount: 100,
           unpackCount: 10,
           release: 5,
           reject: 3,
-          turnOver: 2
+          turnOver: 2,
         },
         {
           index: 2,
-          level: '严控级',
+          level: "严控级",
           cargoCount: 100,
           unpackCount: 10,
           release: 5,
           reject: 3,
-          turnOver: 2
+          turnOver: 2,
         },
         {
           index: 3,
-          level: '普通级',
+          level: "普通级",
           cargoCount: 100,
           unpackCount: 10,
           release: 5,
           reject: 3,
-          turnOver: 2
+          turnOver: 2,
         },
         {
           index: 4,
-          level: '优先级',
+          level: "优先级",
           cargoCount: 100,
           unpackCount: 10,
           release: 5,
           reject: 3,
-          turnOver: 2
+          turnOver: 2,
         },
         {
           index: 5,
-          level: '低风险等级',
+          level: "低风险等级",
           cargoCount: 100,
           unpackCount: 10,
           release: 5,
           reject: 3,
-          turnOver: 2
-        }
-      ]
-    }
+          turnOver: 2,
+        },
+      ],
+    };
   },
   mounted() {
-    this.setTableHeight()
-    window.addEventListener('resize', this.setTableHeight)
+    this.setTableHeight();
+    window.addEventListener("resize", this.setTableHeight);
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.setTableHeight)
+    window.removeEventListener("resize", this.setTableHeight);
   },
   methods: {
     changeHandler() {
       this.$router.push({
-        path: './cargoStatistics'
-      })
+        path: "./cargoStatistics",
+      });
     },
     searchHandler(arr) {
-      console.log(arr)
+      console.log(arr);
     },
     setTableHeight() {
-      const topBarHeight = 80
-      const headerHeight = this.$refs['tableWrapperHeader'].offsetHeight
-      const footerBlackHeight = 24
-      this.tableHeight = `calc(100vh - ${topBarHeight + headerHeight + footerBlackHeight}px)`
-    }
-  }
-}
+      const topBarHeight = 80;
+      const headerHeight = this.$refs["tableWrapperHeader"].offsetHeight;
+      const footerBlackHeight = 24;
+      this.tableHeight = `calc(100vh - ${
+        topBarHeight + headerHeight + footerBlackHeight
+      }px)`;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/views/securityCheck/views/comprehensiveHome.vue

@@ -6,6 +6,7 @@
         :withSelect="false"
         :withInput="false"
         :withChangeButton="false"
+        :withExportButton="false"
       />
     </div>
     <div class="comprehensive_cont">

src/views/securityCheck/views/securityChannelHome.vue

@@ -7,6 +7,7 @@
         :withSelect="false"
         :withInput="false"
         :withChangeButton="false"
+        :withExportButton="false"
       />
     </div>
     <div class="comprehensive">

src/views/securityCheck/views/waybillTable.vue

@@ -1,15 +1,13 @@
 <template>
   <div class="table-wrapper">
-    <header
-      ref="tableWrapperHeader"
-      class="table-header-wrapper"
-    >
+    <header ref="tableWrapperHeader" class="table-header-wrapper">
       <SecurityCheckHeader
         title="运单管理"
         :with-change-button="false"
         :with-date-picker="false"
         :with-select="false"
-        :with-input="false"
+        :with-input="true"
+        searchPlaceholder="请输入搜索条件"
         :with-export-button="false"
         @search="searchHandler"
       />
@@ -18,146 +16,140 @@
       <SecurityCheckTable
         :table-cols="tableCols"
         :table-data="tableData"
-        row-key="waybillNo"
+        row-key="index"
         :height="tableHeight"
-        with-selection
-        with-operate-column
+        show-summary
       />
     </main>
   </div>
 </template>
 
 <script>
-import SecurityCheckHeader from '../components/securityCheckHeader.vue'
-import SecurityCheckTable from '../components/securityCheckTable.vue'
+import SecurityCheckHeader from "../components/securityCheckHeader.vue";
+import SecurityCheckTable from "../components/securityCheckTable.vue";
 export default {
   components: { SecurityCheckHeader, SecurityCheckTable },
   data() {
     return {
-      tableHeight: '50vh',
+      tableHeight: "50vh",
       tableCols: [
         {
-          dataIndex: 'waybillNo',
-          key: 'waybillNo',
-          title: '运单编号',
-          width: 125
+          dataIndex: "waybillNo",
+          key: "waybillNo",
+          title: "运单编号",
+          width: 125,
         },
         {
-          dataIndex: 'mainWaybillNo',
-          key: 'mainWaybillNo',
-          title: '航空主运单编号',
-          width: 125
+          dataIndex: "mainWaybillNo",
+          key: "mainWaybillNo",
+          title: "航空主运单编号",
+          width: 125,
         },
         {
-          dataIndex: 'subWaybillNo',
-          key: 'subWaybillNo',
-          title: '运单编号',
-          width: 90
+          dataIndex: "subWaybillNo",
+          key: "subWaybillNo",
+          title: "运单编号",
+          width: 90,
         },
         {
-          dataIndex: 'cargoName',
-          key: 'cargoName',
-          title: '品名描述'
+          dataIndex: "cargoName",
+          key: "cargoName",
+          title: "品名描述",
         },
         {
-          dataIndex: 'agent',
-          key: 'agent',
-          title: '交货发货代理人',
-          width: 140
+          dataIndex: "agent",
+          key: "agent",
+          title: "交货发货代理人",
+          width: 140,
         },
         {
-          dataIndex: 'agentLevel',
-          key: 'agentLevel',
-          title: '代理人诚信等级',
-          width: 125
+          dataIndex: "agentLevel",
+          key: "agentLevel",
+          title: "代理人诚信等级",
+          width: 125,
         },
         {
-          dataIndex: 'originAirport',
-          key: 'originAirport',
-          title: '始发站'
+          dataIndex: "originAirport",
+          key: "originAirport",
+          title: "始发站",
         },
         {
-          dataIndex: 'destinationAirport',
-          key: 'destinationAirport',
-          title: '目的地机场'
+          dataIndex: "destinationAirport",
+          key: "destinationAirport",
+          title: "目的地机场",
         },
         {
-          dataIndex: 'flightNo',
-          key: 'flightNo',
-          title: '航班号'
+          dataIndex: "flightNo",
+          key: "flightNo",
+          title: "航班号",
         },
         {
-          dataIndex: 'dangerLevel',
-          key: 'dangerLevel',
-          title: '综合风险等级'
+          dataIndex: "dangerLevel",
+          key: "dangerLevel",
+          title: "综合风险等级",
         },
         {
-          dataIndex: 'cargoDangerLevel',
-          key: 'cargoDangerLevel',
-          title: '货物风险等级'
+          dataIndex: "cargoDangerLevel",
+          key: "cargoDangerLevel",
+          title: "货物风险等级",
         },
         {
-          dataIndex: 'securityChannel',
-          key: 'securityChannel',
-          title: '安检通道号'
+          dataIndex: "securityChannel",
+          key: "securityChannel",
+          title: "安检通道号",
         },
         {
-          dataIndex: 'count',
-          key: 'count',
-          title: '安检件数'
+          dataIndex: "count",
+          key: "count",
+          title: "安检件数",
         },
         {
-          dataIndex: 'weight',
-          key: 'weight',
-          title: '重量'
+          dataIndex: "weight",
+          key: "weight",
+          title: "重量",
         },
-        {
-          dataIndex: 'operation',
-          key: 'operation',
-          title: '操作',
-          scopedSlots: { customRender: 'operation' },
-          width: 120
-        }
       ],
       tableData: [
         {
-          waybillNo: '784-33818776',
-          mainWaybillNo: '000',
-          subWaybillNo: '111',
-          cargoName: '手机保护套',
-          agent: 'ETA2013031000',
-          agentLevel: 'B',
-          originAirport: 'PEK',
-          destinationAirport: 'CTU',
-          flightNo: 'CZ8023',
-          dangerLevel: '普通',
-          cargoDangerLevel: '普通',
-          securityChannel: '1',
+          waybillNo: "784-33818776",
+          mainWaybillNo: "000",
+          subWaybillNo: "111",
+          cargoName: "手机保护套",
+          agent: "ETA2013031000",
+          agentLevel: "B",
+          originAirport: "PEK",
+          destinationAirport: "CTU",
+          flightNo: "CZ8023",
+          dangerLevel: "普通",
+          cargoDangerLevel: "普通",
+          securityChannel: "1",
           count: 10,
-          weight: 10
-        }
-      ]
-    }
+          weight: 10,
+        },
+      ],
+    };
   },
   mounted() {
-    this.setTableHeight()
-    window.addEventListener('resize', this.setTableHeight)
+    this.setTableHeight();
+    window.addEventListener("resize", this.setTableHeight);
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.setTableHeight)
+    window.removeEventListener("resize", this.setTableHeight);
   },
   methods: {
     searchHandler(arr) {
-      console.log(arr)
+      console.log(arr);
     },
     setTableHeight() {
-      const topBarHeight = 80
-      const headerHeight = this.$refs['tableWrapperHeader'].offsetHeight
-      const footerBlackHeight = 24
-      this.tableHeight = `calc(100vh - ${topBarHeight + headerHeight + footerBlackHeight}px)`
-    }
-  }
-}
+      const topBarHeight = 80;
+      const headerHeight = this.$refs["tableWrapperHeader"].offsetHeight;
+      const footerBlackHeight = 24;
+      this.tableHeight = `calc(100vh - ${
+        topBarHeight + headerHeight + footerBlackHeight
+      }px)`;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>