增加一列剩余可入库箱数

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

@@ -1,4 +1,3 @@
-
 <template>
   <div class="div1">
 
@@ -7,7 +6,7 @@
         <el-row :gutter="24">
           <el-col :span="4">
             <el-form-item label="类型:">
-              <el-select v-model="param.ct_code"  multiple filterable placeholder="请选择类型" style="width: 100%;">
+              <el-select v-model="param.ct_code" multiple filterable placeholder="请选择类型" style="width: 100%;">
                 <el-option
                     v-for="item in typess"
                     :key="item.label"
@@ -20,8 +19,8 @@
           </el-col>
 
           <el-col :span="4">
-            <el-form-item  label="是否在库:" >
+            <el-form-item label="是否在库:">
-              <el-select v-model="param.agvFlag" clearable placeholder="请选择是否在库"  >
+              <el-select v-model="param.agvFlag" clearable placeholder="请选择是否在库">
                 <el-option
                     v-for="item in agvFlag"
                     :key="item.label"
@@ -33,19 +32,19 @@
             </el-form-item>
           </el-col>
 
-<!--          <el-col :span="4">-->
+          <!--          <el-col :span="4">-->
-<!--            <el-form-item  label="状态:" >-->
+          <!--            <el-form-item  label="状态:" >-->
-<!--              <el-select v-model="param.s_status" multiple filterable placeholder="请选择状态"  >-->
+          <!--              <el-select v-model="param.s_status" multiple filterable placeholder="请选择状态"  >-->
-<!--                <el-option-->
+          <!--                <el-option-->
-<!--                    v-for="item in Sstatus"-->
+          <!--                    v-for="item in Sstatus"-->
-<!--                    :key="item.label"-->
+          <!--                    :key="item.label"-->
-<!--                    :label="item.values"-->
+          <!--                    :label="item.values"-->
-<!--                    :value="item.values"-->
+          <!--                    :value="item.values"-->
-<!--                >-->
+          <!--                >-->
-<!--                </el-option>-->
+          <!--                </el-option>-->
-<!--              </el-select>-->
+          <!--              </el-select>-->
-<!--            </el-form-item>-->
+          <!--            </el-form-item>-->
-<!--          </el-col>-->
+          <!--          </el-col>-->
 
         </el-row>
 
@@ -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">
@@ -80,10 +81,10 @@
       <el-table-column
           label="类型"
           width="100"
-          >
+      >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
-            <span>{{ scope.row.code}}</span>
+            <span>{{ scope.row.code }}</span>
           </div>
         </template>
       </el-table-column>
@@ -91,10 +92,10 @@
       <el-table-column
           label="总数"
           width="100"
-          >
+      >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
-            <span>{{ scope.row.zs}}</span>
+            <span>{{ scope.row.zs }}</span>
           </div>
         </template>
       </el-table-column>
@@ -102,20 +103,20 @@
       <el-table-column
           width="100"
           label="满不在库"
-          >
+      >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
-            <span>{{ scope.row.mbzk}}</span>
+            <span>{{ scope.row.mbzk }}</span>
           </div>
         </template>
       </el-table-column>
       <el-table-column
           label="满在库"
           width="100"
-          >
+      >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
-            <span>{{ scope.row.mzk}}</span>
+            <span>{{ scope.row.mzk }}</span>
           </div>
         </template>
       </el-table-column>
@@ -125,7 +126,7 @@
       >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
-            <span>{{ scope.row.kbzk}}</span>
+            <span>{{ scope.row.kbzk }}</span>
           </div>
         </template>
       </el-table-column>
@@ -135,11 +136,21 @@
       >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
-            <span>{{ scope.row.kzk}}</span>
+            <span>{{ scope.row.kzk }}</span>
           </div>
         </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"
@@ -155,12 +166,13 @@
 </template>
 
 <script>
-import { downloadExcel } from '@/util/excelUtils';
+import {downloadExcel} from '@/util/excelUtils';
+
 export default {
   data() {
     return {
       tableloding: false,
-      isShow:false,//是否展示全部搜索条件
+      isShow: false,//是否展示全部搜索条件
       tableData: [],
 
       pageSize: 50,
@@ -198,13 +210,13 @@ export default {
       agvFlag: [{
         values: '是',
         label: 1,
-      },{
+      }, {
         values: '否',
         label: 0,
       }
       ],
       //状态
-      Sstatus:[
+      Sstatus: [
         {
           values: 'FREE',
           label: 1,
@@ -219,17 +231,23 @@ export default {
         },
       ],
     }
-  },computed:{
+  }, computed: {
-    MaxHeight(){
+    MaxHeight() {
-      return  window.innerHeight - 240 +"px";
+      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 () {
     this.queryUser();
     //this.Typess();
-  },updated() {
+  }, updated() {
     this.$nextTick(() => {
-      if(this.$refs.tableData!=null){
+      if (this.$refs.tableData != null) {
         this.$refs.tableData.doLayout()
       }
 
@@ -322,16 +340,16 @@ export default {
             }
 
             // eslint-disable-next-line no-unused-vars
-          },err=>{
+          }, err => {
-            this.tableloding=false;
+            this.tableloding = false;
           })
 
     },
-    find(){
+    find() {
-      this.pageNum=1;
+      this.pageNum = 1;
       this.queryUser();
     },
-    down(){
+    down() {
       this.downExcel();
     },
     downExcel() {
@@ -345,20 +363,37 @@ export default {
             this.tableloding = false;
           });
     },
-    Allquesr(){
+    Allquesr() {
       //查询按钮
-      if(this.checked){
+      if (this.checked) {
-        this.isShow=true;
+        this.isShow = true;
-      }else {
+      } else {
-        this.isShow=false;
+        this.isShow = false;
       }
     },
     rest() {
       //条件查询重置
-      this.checked=false;
+      this.checked = false;
-      this.isShow=false;
+      this.isShow = false;
-      this.param={};
+      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>