【染损报表】基础页面完成（缺少可视化图）

src/views/reportForms/dye-loss-table.vue

@@ -61,10 +61,9 @@
       <a-button type="primary" @click="handleExportXls('染损报表')" icon="download">导出</a-button>
     </div>
 
-    <!-- table区域  rowKey="id" :scroll="{ x: 1500 }"-->
+    <!-- 合计 table  rowKey="id" :scroll="{ x: 1500 }"  -->
     <div>
       <a-table
-        ref="tableInfo"
         bordered
         :row-key="record => record.id"
         :columns="dyeLossColumns"
@@ -72,10 +71,9 @@
         :loading="loading"
         :pagination="ipagination"
         @change="handleTableChange"
-        :footer="totalShow"
-        :scroll="{ x: 1500 }"
+        ref="table"
+        :footer="totalFooterShow"
       >
-
       </a-table>
     </div>
   </a-card>
@@ -93,7 +91,6 @@ export default {
 
   data() {
     // let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} /> // 省略
-
     return {
       description: '染损报表',
       // 表头
@@ -140,10 +137,38 @@ export default {
         { title: '染损', width: 120, dataIndex: 'dyeLoss', className: 'replacecolor' }
       ],
       dyeLossData: [
-        { orderQuantity: '10', purchaseInQuantity: '10', materialsOutQuantity: '10', verificationNum: '10' },
-        { orderQuantity: '20', purchaseInQuantity: '20', materialsOutQuantity: '20', verificationNum: '20' },
-        { orderQuantity: '30', purchaseInQuantity: '30', materialsOutQuantity: '30', verificationNum: '30' },
-        { orderQuantity: '40', purchaseInQuantity: '40', materialsOutQuantity: '40', verificationNum: '40' }
+        {
+          materialNum: '1901000890',
+          materialName: '春夏女装印花袋鼠袋拉毛绒布带帽衫',
+          orderQuantity: '10',
+          purchaseInQuantity: '10',
+          materialsOutQuantity: '10',
+          verificationNum: '10'
+        },
+        {
+          materialNum: '3801000890',
+          materialName: '女装印花袋鼠袋拉毛绒布带帽衫',
+          orderQuantity: '20',
+          purchaseInQuantity: '20',
+          materialsOutQuantity: '20',
+          verificationNum: '20'
+        },
+        {
+          materialNum: '1901034590',
+          materialName: '鼠袋拉毛绒布带帽衫',
+          orderQuantity: '30',
+          purchaseInQuantity: '30',
+          materialsOutQuantity: '30',
+          verificationNum: '30'
+        },
+        {
+          materialNum: '4901000890',
+          materialName: '毛绒布带帽衫',
+          orderQuantity: '40',
+          purchaseInQuantity: '40',
+          materialsOutQuantity: '40',
+          verificationNum: '40'
+        }
       ],
       loading: false, // 表格加载
       // 查询条件
@@ -157,23 +182,24 @@ export default {
     }
   },
   created() {
-    // 渲染订单销售列表
+    // 渲染染损报表列表
   },
-  methods: {
-    // 同步
-    synchronization() {},
 
-    // 查询按钮
-    searchQuery() {
-      // 渲染订单销售列表
-    },
-    searchReset() {
-      // console.log('>>>>重置')
-      this.queryParam = {}
-      // 重新渲染订单销售列表
-    },
-    totalShow(data) {
-      console.log('染损报表 ----合计')
+  computed: {
+    // 构建合计数据
+    dyeLossDataSource() {
+      const summary = Object.assign({}, this.dyeLossData[0])
+      for (const attr in summary) {
+        summary[attr] = '合计'
+        break
+      }
+      return [summary]
+    }
+  },
+  methods: {
+    // 合计行
+    totalFooterShow(data) { // 后端传递的合计的数据
+      console.log('染损报表----合计行')
       console.log('data', data)
       return (
         <a-table
@@ -181,43 +207,27 @@ export default {
           bordered={false}
           pagination={false}
           columns={this.dyeLossColumns}
-          dataSource={this.footerData || []}
+          dataSource={this.dyeLossDataSource || []}
           showHeader={false}
         ></a-table>
       )
-    }
+    },
 
-    // 分页、排序、筛选变化时触发
-    // handleTableChange(pagination, filters, sorter) {
-    //   // console.log('当前页信息>>>>',pagination)
-    //   this.queryParam.pageNo = pagination.current
-    //   // this.getOrderList()
-    // }
-  },
-  watched: {
-    dyeLossData(val) {
-      // 同步表与 footer
-      let dom = this.$refs.tableInfo.$el.querySelectAll('.ant-table-body')[0]
-      dom.addEventListener(
-        'scroll',
-        () => {
-          this.$refs.tableInfo.$el.querySelectAll('.ant-table-body')[1].scrollLeft = dom.scrollLeft
-        },
-        true
-      )
+    // 同步
+    synchronization() {},
+
+    // 查询按钮
+    searchQuery() {
+      // 渲染染损列表
+    },
+    searchReset() {
+      // console.log('>>>>重置')
+      this.queryParam = {}
     }
   },
-  computed: {
-    // dyeLossDataSource() {
-    //   // 所有物料 对应单元格数量 合计
-    //   const total = Object.assign({}, this.dyeLossData[0])
-    //   for (const attr in total) {
-    //     total[attr] = '合计'
-    //     break
-    //   }
-    //   return [total]
-    // }
-  },
+
+  watched: {},
+
   mounted() {}
 }
 </script>
@@ -236,6 +246,10 @@ export default {
 // /deep/ th.replacecolor {
 //   background-color: #ccc;
 // }
+
+/deep/ .ant-table-footer .ant-table.body {
+  // overflow: hidden !important;
+}
 /deep/ .ant-table.ant-table-bordered .ant-table-footer {
   border: none;
   padding: 0;