增加一列剩余可入库箱数

wms-vue/src/components/duochaxun/Liaoxiangjiankong.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div class="div1">
 
@@ -63,7 +62,9 @@
         :data="tableData"
         id="educe-table"
         ref="tableData"
-        style="width: 100%;">
+        style="width: 100%;"
+        :span-method="objectSpanMethod"
+    >
       <el-table-column
           type="selection"
           width="55">
@@ -140,6 +141,16 @@
         </template>
       </el-table-column>
 
+      <el-table-column
+          label="剩余可入库箱数"
+          width="110"
+          align="center"
+      >
+        <template slot-scope="scope">
+          <span style="font-weight: bold">{{ syQty }}</span>
+        </template>
+      </el-table-column>
+
     </el-table>
     <el-pagination
         @size-change="handleSizeChange"
@@ -156,6 +167,7 @@
 
 <script>
 import {downloadExcel} from '@/util/excelUtils';
+
 export default {
   data() {
     return {
@@ -222,6 +234,12 @@ export default {
   }, computed: {
     MaxHeight() {
       return window.innerHeight - 240 + "px";
+    },
+    syQty() {
+      // 计算满在库和空在库的合计
+      let mzkSum = this.tableData.reduce((total, row) => total + (Number(row.mzk) || 0), 0);
+      let kzkSum = this.tableData.reduce((total, row) => total + (Number(row.kzk) || 0), 0);
+      return 30500 - mzkSum - kzkSum;
     }
   },
   mounted: function () {
@@ -359,6 +377,23 @@ export default {
       this.isShow = false;
       this.param = {};
     },
+    objectSpanMethod({row, column, rowIndex, columnIndex}) {
+      // 普通行的“剩余数量”列合并
+      if (column.label === '剩余可入库箱数') {
+        if (rowIndex === 0) {
+          return {
+            rowspan: this.tableData.length,
+            colspan: 1
+          };
+        } else if (rowIndex > 0 && rowIndex < this.tableData.length) {
+          return {
+            rowspan: 0,
+            colspan: 0
+          };
+        }
+      }
+      // 其余情况默认
+    }
   }
 }
 </script>