1

src/views/securityCheck/components/securityCheckTable.vue

@@ -25,124 +25,221 @@
         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>
+    <template>
+      <!-- <a-table
+        class="footerTable"
+        :columns="tableCols"
+        bordered
+        :data-source="footerDate"
+        :rowClassName="rowClassName"
+        :pagination="pagination"
+      ></a-table> -->
+      <a-table
+        :data-source="footerDate"
+        :columns="columns"
+        class="footerTable"
+        :row-key="rowKey"
+        :row-selection="
+          withSelection
+            ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange }
+            : null
+        "
+        :rowClassName="rowClassName"
+        bordered
+        :pagination="pagination"
+        @change="handleTableChange"
+        :loading="loading"
+        :scroll="{ y: 650 }"
+      >
+        <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>
+    </template>
   </div>
 </template>
 
 <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,
     },
     loading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showSummary: {
       type: Boolean,
-      default: false
+      default: false,
     },
     pagination: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
+    footerDate: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
-      selectedRowKeys: []
-    }
+      selectedRowKeys: [],
+      columnfot: [],
+    };
   },
   computed: {
     columns() {
       function setClickHandler(columns) {
-        return columns.map(col => {
+        return columns.map((col) => {
           if (col.clickHandler) {
             col.customCell = (row, rowIndex) => {
               return {
-                class: 'cell-click',
+                class: "cell-click",
                 on: {
                   click: () => {
-                    col.clickHandler(row, rowIndex)
-                  }
-                }
-              }
-            }
+                    col.clickHandler(row, rowIndex);
+                  },
+                },
+              };
+            };
           }
           if (col.children) {
-            setClickHandler(col.children)
+            setClickHandler(col.children);
           }
-          return col
-        })
+          return col;
+        });
       }
-      return setClickHandler(this.tableCols)
+      return setClickHandler(this.tableCols);
     },
     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);
     },
     handleTableChange(pagination, filters, sorter) {
-      this.$emit('handleTableChange', pagination)
-    }
-  }
-}
+      this.$emit("handleTableChange", pagination);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .security-check-table-wrapper {
   width: 100%;
+  ::v-deep .footerTable .ant-table-thead {
+    display: none;
+  }
+  ::v-deep .footerTable .ant-table-tbody .ant-table-row {
+    background-color: #fff;
+    padding: 9px 16px;
+  }
+  ::v-deep .footerTable {
+    .ant-table {
+      width: 100%;
+      .ant-table-thead {
+        th {
+          padding: 18px 12px;
+        }
+        .ant-table-column-title {
+          font-size: 14px;
+          font-family: Helvetica, "Microsoft YaHei";
+          color: #101116;
+          font-weight: bold;
+        }
+      }
+      .ant-table-tbody {
+        .warning-row {
+          background-color: #f3f5f8;
+          padding: 9px 16px;
+        }
+        .warning-rows {
+          background-color: #fff;
+          padding: 9px 16px;
+        }
+        td {
+          font-size: 14px;
+          font-family: Helvetica, "Microsoft YaHei";
+          color: #101116;
+          &.cell-click {
+            color: #2d67e3;
+            cursor: pointer;
+          }
+        }
+        .column-operate {
+          span {
+            cursor: pointer;
+            &:not(:last-child) {
+              margin-right: 25px;
+            }
+            &.cell-operate-edit {
+              color: #2d67e3;
+            }
+            &.cell-operate-delete {
+              color: #ea4545;
+            }
+          }
+        }
+      }
+    }
+  }
   ::v-deep .ant-table {
     width: 100%;
     .ant-table-thead {
@@ -151,7 +248,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;
       }
@@ -167,7 +264,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/agentTable.vue

@@ -9,6 +9,7 @@
     </header>
     <main>
       <SecurityCheckTable
+        :footerDate="footerDate"
         :table-cols="tableCols"
         :table-data="tableData"
         row-key="index"
@@ -145,6 +146,17 @@ export default {
         startTime: "", //开始时间
         endTime: "", //结束时间
       },
+      footerDate: [
+        {
+          no: "合计",
+          risk: "",
+          num: "",
+          kxsNum: "",
+          fxNum: "",
+          jyNum: "",
+          yjNum: "",
+        },
+      ],
     };
   },
   created() {

src/views/securityCheck/views/cargoRelevanceTable.vue

@@ -12,6 +12,7 @@
     </header>
     <main>
       <SecurityCheckTable
+        :footerDate="footerDate"
         :table-cols="tableCols"
         :table-data="tableData"
         row-key="index"
@@ -221,6 +222,11 @@ export default {
         },
       ],
       tableData: [],
+      footerDate: [
+        {
+          flightLine: "合计",
+        },
+      ],
       FormData: {
         beginDate: "",
         endDate: "",

src/views/securityCheck/views/cargoTable.vue

@@ -9,6 +9,7 @@
     </header>
     <main>
       <SecurityCheckTable
+        :footerDate="footerDate"
         :table-cols="tableCols"
         :table-data="tableData"
         row-key="index"
@@ -131,6 +132,11 @@ export default {
           ],
         },
       ],
+      footerDate: [
+        {
+          no: "合计",
+        },
+      ],
       tableData: [],
       FormData: {
         destination: "", // 目的站