修改表格组件

src/views/securityCheck/components/nestTableColumn.vue

@@ -1,85 +0,0 @@
-<template>
-  <a-table-column
-    v-if="col.children && col.children.length"
-    :prop="col[propName]"
-    :label="col[labelName]"
-    :width="col.width"
-    show-overflow-tooltip
-  >
-    <NestTableColumn
-      v-for="childCol in col.children"
-      :key="childCol[propName]"
-      :col="childCol"
-      :prop-name="propName"
-      :label-name="labelName"
-    />
-  </a-table-column>
-  <a-table-column
-    v-else
-    :prop="col[propName]"
-    :label="col[labelName]"
-    :width="col.width"
-    show-overflow-tooltip
-  >
-    <template slot-scope="scope">
-      <span
-        v-if="col.clickHandler"
-        class="cell-click"
-        @click="col.clickHandler"
-        >{{ scope.row[col[propName]] }}</span
-      >
-      <span v-else>{{ scope.row[col[propName]] }}</span>
-    </template>
-  </a-table-column>
-  <!-- <a-table-column
-    :prop="col[propName]"
-    :label="col[labelName]"
-  >
-    <template v-for="childCol in col.children">
-      <NestTableColumn
-        v-if="childCol.children && childCol.children.length"
-        :key="childCol[propName]"
-        :col="childCol"
-        :prop-name="propName"
-        :label-name="labelName"
-      />
-      <a-table-column
-        v-else
-        :key="childCol[propName]"
-        :prop="childCol[propName]"
-        :label="childCol[labelName]"
-      >
-        <template slot-scope="scope">
-          <span
-            v-if="childCol.clickHandler"
-            class="cell-click"
-          >{{ scope.row[childCol[propName]] }}</span>
-          <span v-else>{{ scope.row[childCol[propName]] }}</span>
-        </template>
-      </a-table-column>
-    </template>
-  </a-table-column> -->
-</template>
-
-<script>
-export default {
-  name: "NestTableColumn",
-  props: {
-    col: {
-      type: Object,
-      required: true,
-    },
-    propName: {
-      type: String,
-      default: "prop",
-    },
-    labelName: {
-      type: String,
-      default: "label",
-    },
-  },
-};
-</script>
-
-<style>
-</style>

src/views/securityCheck/components/securityCheckTable.vue

@@ -1,153 +1,132 @@
 <template>
   <div
-    v-loading="loading"
     class="security-check-table-wrapper"
     :style="{ height: tableWrapperHeight }"
   >
     <a-table
-      ref="table"
       :data-source="tableData"
-      :columns="tableCols"
-      stripeed
-      fited
+      :columns="columns"
+      :row-key="rowKey"
+      :row-selection="withSelection ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange } : null"
       bordered
-      height="100%"
     >
-      <template v-if="withSelection">
-        <a-table-column type="selection" width="35" />
-      </template>
-      <template v-for="col in cols">
-        <NestTableColumn :key="col.prop" :col="col" />
-      </template>
-      <template v-if="withOperateColumn">
-        <a-table-column label="操作" class-name="column-operate" :width="130">
-          <template slot-scope="scope">
-            <span class="cell-operate-edit" @click="editRow(scope.row)"
-              >修改</span
-            >
-            <span class="cell-operate-delete" @click="deleteRow(scope.row)"
-              >删除</span
-            >
-          </template>
-        </a-table-column>
+      <template
+        v-if="withOperateColumn"
+        slot="operation"
+        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>
+        </div>
       </template>
     </a-table>
   </div>
 </template>
 
 <script>
-import NestTableColumn from "./nestTableColumn.vue";
-
 export default {
-  name: "SecurityCheckTable",
-  components: { NestTableColumn },
+  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'
     },
     withSelection: {
       type: Boolean,
-      default: false,
+      default: false
     },
     showSummary: {
       type: Boolean,
-      default: false,
-    },
-    withOperateColumn: {
-      type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
   data() {
     return {
-      loading: false,
-      cols: [],
-      data: [],
-    };
+      selectedRowKeys: []
+    }
   },
   computed: {
-    tableWrapperHeight() {
-      return typeof this.height === "number" ? this.height + "px" : this.height;
-    },
-  },
-  watch: {
-    tableCols: {
-      handler(val) {
-        this.cols = val;
-      },
-      deep: true,
-      immediate: true,
+    columns() {
+      return this.tableCols.map(col => {
+        if (col.clickHandler) {
+          col.customCell = () => {
+            return {
+              class: 'cell-click',
+              on: {
+                click: col.clickHandler
+              }
+            }
+          }
+        }
+        return col
+      })
     },
-    tableData: {
-      handler(val) {
-        this.data = val;
-      },
-      deep: true,
-      immediate: true,
+    tableWrapperHeight() {
+      return typeof this.height === 'number' ? this.height + 'px' : this.height
     },
-  },
-  updated() {
-    this.$refs["table"].doLayout();
+    withOperateColumn() {
+      return this.columns.find(col => col.dataIndex === 'operation')
+    }
   },
   methods: {
+    onSelectChange(selectedRowKeys, selectedRows) {
+      // console.log(selectedRowKeys)
+      this.selectedRowKeys = selectedRowKeys
+    },
     editRow(row) {
-      console.log("edit");
+      console.log('edit')
     },
     deleteRow(row) {
-      console.log("delete");
+      console.log('delete')
     },
-  },
-};
+    clickHandler(index) {
+      console.log(index)
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 .security-check-table-wrapper {
   width: 100%;
-  ::v-deep .ant-table-column-title {
-    font-size: 14px;
-    font-family: Helvetica, "Microsoft YaHei";
-    color: #101116;
-    font-weight: bold;
-  }
   ::v-deep .ant-table {
     width: 100%;
-    .ant-table__cell {
-      .cell {
-        // padding: 0 19px;
+    .ant-table-column-title {
+      font-size: 14px;
+      font-family: Helvetica, 'Microsoft YaHei';
+      color: #101116;
+      font-weight: bold;
+    }
+    .ant-table-tbody {
+      td {
         font-size: 14px;
-        font-family: Helvetica, "Microsoft YaHei";
+        font-family: Helvetica, 'Microsoft YaHei';
         color: #101116;
-      }
-      &.ant-table-column--selection .cell {
-        padding: 0;
-        text-align: center;
-      }
-    }
-    .ant-table__header {
-      .ant-table__cell {
-        > .cell {
-          font-weight: bold;
-        }
-        &:not(.is-leaf) > .cell {
-          text-align: center;
+        &.cell-click {
+          color: #2d67e3;
+          cursor: pointer;
         }
       }
-    }
-    .ant-table__body {
-      .cell .cell-click {
-        color: #2d67e3;
-        cursor: pointer;
-      }
-      .column-operate .cell {
+      .column-operate {
         span {
           cursor: pointer;
           &:not(:last-child) {

src/views/securityCheck/views/agentTable.vue

@@ -31,20 +31,24 @@ export default {
       tableHeight: '50vh',
       tableCols: [
         {
-          prop: 'index',
-          label: '序号'
+          dataIndex: 'index',
+          key: 'index',
+          title: '序号'
         },
         {
-          prop: 'level',
-          label: '等级'
+          dataIndex: 'level',
+          key: 'level',
+          title: '等级'
         },
         {
-          prop: 'cargoCount',
-          label: '货物件数'
+          dataIndex: 'cargoCount',
+          key: 'cargoCount',
+          title: '货物件数'
         },
         {
-          prop: 'unpackCount',
-          label: '开箱件数',
+          dataIndex: 'unpackCount',
+          key: 'unpackCount',
+          title: '开箱件数',
           clickHandler: () => {
             this.$router.push({
               path: '/waybillTable'
@@ -52,20 +56,24 @@ export default {
           }
         },
         {
-          prop: 'unpackResult',
-          label: '开箱结果',
+          dataIndex: 'unpackResult',
+          key: 'unpackResult',
+          title: '开箱结果',
           children: [
             {
-              prop: 'release',
-              label: '放行'
+              dataIndex: 'release',
+              key: 'release',
+              title: '放行'
             },
             {
-              prop: 'reject',
-              label: '拒运'
+              dataIndex: 'reject',
+              key: 'reject',
+              title: '拒运'
             },
             {
-              prop: 'turnOver',
-              label: '移交'
+              dataIndex: 'turnOver',
+              key: 'turnOver',
+              title: '移交'
             }
           ]
         }

src/views/securityCheck/views/cargoRelevanceTable.vue

@@ -11,6 +11,7 @@
       <SecurityCheckTable
         :table-cols="tableCols"
         :table-data="tableData"
+        row-key="destination"
         :height="tableHeight"
         show-summary
       />

src/views/securityCheck/views/cargoTable.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="table-wrapper">
-    <header ref="tableWrapperHeader" class="table-header-wrapper">
+    <header
+      ref="tableWrapperHeader"
+      class="table-header-wrapper"
+    >
       <SecurityCheckHeader
         title="航空货物综合统计"
         @change="changeHandler"
@@ -11,6 +14,7 @@
       <SecurityCheckTable
         :table-cols="tableCols"
         :table-data="tableData"
+        row-key="index"
         :height="tableHeight"
         show-summary
       />
@@ -19,130 +23,135 @@
 </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: [
         {
-          prop: "index",
-          title: "序号",
-          key: "name",
+          dataIndex: 'index',
+          key: 'index',
+          title: '序号'
         },
         {
-          prop: "level",
-          title: "等级",
+          dataIndex: 'level',
+          key: 'level',
+          title: '等级'
         },
         {
-          prop: "cargoCount",
-          title: "货物件数",
+          dataIndex: 'cargoCount',
+          key: 'cargoCount',
+          title: '货物件数'
         },
         {
-          prop: "unpackCount",
-          title: "开箱件数",
+          dataIndex: 'unpackCount',
+          key: 'unpackCount',
+          title: '开箱件数',
           clickHandler: () => {
             this.$router.push({
-              path: "/waybillTable",
-            });
-          },
+              path: '/waybillTable'
+            })
+          }
         },
         {
-          prop: "unpackResult",
-          title: "开箱结果",
+          dataIndex: 'unpackResult',
+          key: 'unpackResult',
+          title: '开箱结果',
           children: [
             {
-              prop: "release",
-              title: "放行",
+              dataIndex: 'release',
+              key: 'release',
+              title: '放行'
             },
             {
-              prop: "reject",
-              title: "拒运",
+              dataIndex: 'reject',
+              key: 'reject',
+              title: '拒运'
             },
             {
-              prop: "turnOver",
-              title: "移交",
-            },
-          ],
-        },
+              dataIndex: 'turnOver',
+              key: 'turnOver',
+              title: '移交'
+            }
+          ]
+        }
       ],
       tableData: [
         {
           index: 1,
-          name: "高风险等级",
+          level: '高风险等级',
           cargoCount: 100,
           unpackCount: 10,
           release: 5,
           reject: 3,
-          turnOver: 2,
+          turnOver: 2
         },
         {
           index: 2,
-          name: "严控级",
+          level: '严控级',
           cargoCount: 100,
           unpackCount: 10,
           release: 5,
           reject: 3,
-          turnOver: 2,
+          turnOver: 2
         },
         {
           index: 3,
-          name: "普通级",
+          level: '普通级',
           cargoCount: 100,
           unpackCount: 10,
           release: 5,
           reject: 3,
-          turnOver: 2,
+          turnOver: 2
         },
         {
           index: 4,
-          name: "优先级",
+          level: '优先级',
           cargoCount: 100,
           unpackCount: 10,
           release: 5,
           reject: 3,
-          turnOver: 2,
+          turnOver: 2
         },
         {
           index: 5,
-          name: "低风险等级",
+          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/waybillTable.vue

@@ -18,6 +18,7 @@
       <SecurityCheckTable
         :table-cols="tableCols"
         :table-data="tableData"
+        row-key="waybillNo"
         :height="tableHeight"
         with-selection
         with-operate-column
@@ -36,75 +37,98 @@ export default {
       tableHeight: '50vh',
       tableCols: [
         {
-          prop: 'waybillNo',
-          label: '运单号'
+          dataIndex: 'waybillNo',
+          key: 'waybillNo',
+          title: '运单编号'
         },
         {
-          prop: 'source',
-          label: '运单来源'
+          dataIndex: 'mainWaybillNo',
+          key: 'mainWaybillNo',
+          title: '航空主运单编号'
         },
         {
-          prop: 'flightNo',
-          label: '航班号'
+          dataIndex: 'subWaybillNo',
+          key: 'subWaybillNo',
+          title: '运单编号'
         },
         {
-          prop: 'importance',
-          label: '警卫/重点航班'
+          dataIndex: 'cargoName',
+          key: 'cargoName',
+          title: '品名描述'
         },
         {
-          prop: 'flightDate',
-          label: '航班日期'
+          dataIndex: 'agent',
+          key: 'agent',
+          title: '交货发货代理人'
         },
         {
-          prop: 'cargoName',
-          label: '货品名'
+          dataIndex: 'agentLevel',
+          key: 'agentLevel',
+          title: '代理人诚信等级'
         },
         {
-          prop: 'agent',
-          label: '代理人编码',
-          width: 118
+          dataIndex: 'originAirport',
+          key: 'originAirport',
+          title: '始发站'
         },
         {
-          prop: 'agentLevel',
-          label: '代理人信用等级'
+          dataIndex: 'destinationAirport',
+          key: 'destinationAirport',
+          title: '目的地机场'
         },
         {
-          prop: 'cargoDangerLevel',
-          label: '货物风险等级'
+          dataIndex: 'flightNo',
+          key: 'flightNo',
+          title: '航班号'
         },
         {
-          prop: 'comprehensiveDangerLevel',
-          label: '综合风险等级'
+          dataIndex: 'dangerLevel',
+          key: 'dangerLevel',
+          title: '综合风险等级'
         },
         {
-          prop: 'hasDealed',
-          label: '处理状态'
+          dataIndex: 'cargoDangerLevel',
+          key: 'cargoDangerLevel',
+          title: '货物风险等级'
         },
         {
-          prop: 'hasPushed',
-          label: '推送状态'
+          dataIndex: 'securityChannel',
+          key: 'securityChannel',
+          title: '安检通道号'
         },
         {
-          prop: 'createTime',
-          label: '创建时间',
-          width: 160
+          dataIndex: 'count',
+          key: 'count',
+          title: '安检件数'
+        },
+        {
+          dataIndex: 'weight',
+          key: 'weight',
+          title: '重量'
+        },
+        {
+          dataIndex: 'operation',
+          key: 'operation',
+          title: '操作',
+          scopedSlots: { customRender: 'operation' }
         }
       ],
       tableData: [
         {
           waybillNo: '784-33818776',
-          source: 'ALMS',
-          flightNo: 'CZ8023',
-          importance: 'N',
-          flightDate: '2022-04-02',
+          mainWaybillNo: '000',
+          subWaybillNo: '111',
           cargoName: '手机保护套',
           agent: 'ETA2013031000',
           agentLevel: 'B',
+          originAirport: 'PEK',
+          destinationAirport: 'CTU',
+          flightNo: 'CZ8023',
+          dangerLevel: '普通',
           cargoDangerLevel: '普通',
-          comprehensiveDangerLevel: '普通',
-          hasDealed: '已处理',
-          hasPushed: '已推送',
-          createTime: '2022-04-02 15:17:18'
+          securityChannel: '1',
+          count: 10,
+          weight: 10
         }
       ]
     }