【质检计划】成品检验，选择物品信息增加全选功能

src/views/inspectionPlan/components/stokledger.vue

@@ -1,13 +1,24 @@
 <template>
-  <ele-modal :visible.sync="visible" title="物品信息" width="80%" :close-on-click-modal="true"
-    :close-on-press-escape="false"  :maxable="true"
-    append-to-body>
+  <ele-modal
+    :visible.sync="visible"
+    title="物品信息"
+    width="80%"
+    :close-on-click-modal="true"
+    :close-on-press-escape="false"
+    :maxable="true"
+    append-to-body
+  >
     <el-form :model="searchForm" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="6">
           <el-form-item label="列表维度:" prop="dimension">
             <template>
-              <el-select style="width: 100%" @change="changeDimensionHandler" v-model="dimension" placeholder="请选择">
+              <el-select
+                style="width: 100%"
+                @change="changeDimensionHandler"
+                v-model="dimension"
+                placeholder="请选择"
+              >
                 <!-- <el-option label="物料维度" value="4"> </el-option> -->
                 <el-option label="包装维度" value="3"> </el-option>
                 <el-option label="批次维度" value="2"> </el-option>
@@ -18,51 +29,100 @@
         </el-col>
         <el-col :span="6">
           <el-form-item label="物品编码:">
-            <el-input type="text" placeholder="搜索物品编码" v-model="searchForm.categoryCode"></el-input>
+            <el-input
+              type="text"
+              placeholder="搜索物品编码"
+              v-model="searchForm.categoryCode"
+            ></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="物品名称:">
-            <el-input type="text" placeholder="搜索物品名称" v-model="searchForm.categoryName"></el-input>
+            <el-input
+              type="text"
+              placeholder="搜索物品名称"
+              v-model="searchForm.categoryName"
+            ></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="批次号:">
-            <el-input type="text" placeholder="搜索批次号" v-model="searchForm.batchNo"></el-input>
+            <el-input
+              type="text"
+              placeholder="搜索批次号"
+              v-model="searchForm.batchNo"
+            ></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="刻码">
-            <el-input type="text" placeholder="搜索物品刻码" v-model="searchForm.engrave"></el-input>
+            <el-input
+              type="text"
+              placeholder="搜索物品刻码"
+              v-model="searchForm.engrave"
+            ></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="物料代号">
-            <el-input type="text" placeholder="搜索物料代号" v-model="searchForm.materielDesignation"></el-input>
+            <el-input
+              type="text"
+              placeholder="搜索物料代号"
+              v-model="searchForm.materielDesignation"
+            ></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="发货码">
-            <el-input type="text" placeholder="搜索发货码" v-model="searchForm.barcodes"></el-input>
+            <el-input
+              type="text"
+              placeholder="搜索发货码"
+              v-model="searchForm.barcodes"
+            ></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="牌号">
-            <el-input type="text" placeholder="搜索牌号" v-model="searchForm.brandNum"></el-input>
+            <el-input
+              type="text"
+              placeholder="搜索牌号"
+              v-model="searchForm.brandNum"
+            ></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="仓库">
-            <el-select clearable style="width: 100%" v-model="searchForm.warehouseId" placeholder="请选择">
-              <el-option v-for="item in warehouseList" :label="item.name" :value="item.id" :key="item.id">
+            <el-select
+              clearable
+              style="width: 100%"
+              v-model="searchForm.warehouseId"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in warehouseList"
+                :label="item.name"
+                :value="item.id"
+                :key="item.id"
+              >
               </el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="所属工厂" prop="factoryId">
-            <el-select filterable placeholder="请选择" v-model="searchForm.factoryId" clearable class="w100">
-              <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            <el-select
+              filterable
+              placeholder="请选择"
+              v-model="searchForm.factoryId"
+              clearable
+              class="w100"
+            >
+              <el-option
+                v-for="item in factoryList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
             </el-select>
           </el-form-item>
         </el-col>
@@ -70,74 +130,213 @@
         <el-col>
           <div style="float: right">
             <el-button type="primary" @click="doSearch">搜索</el-button>
-            <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
+            <el-button icon="el-icon-refresh-left" @click="reset"
+              >重置</el-button
+            >
           </div>
         </el-col>
       </el-row>
     </el-form>
     <el-container class="assets-dialog">
       <el-aside width="200px" class="wrapper-assets">
-        <AssetTree ref="treeList" :treeIds="treeIds" @handleNodeClick="handleNodeClick" />
+        <AssetTree
+          ref="treeList"
+          :treeIds="treeIds"
+          @handleNodeClick="handleNodeClick"
+        />
       </el-aside>
       <el-main>
-        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" height="50vh" border row-key="id"
-          style="width: 100%" :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
-          @selection-change="handleSelectionChange" :header-cell-class-name="hideHeaderCheckbox">
-          <el-table-column  type="selection":reserve-selection="true" width="55" align="center"
-            fixed="left" :selectable="(row) => dimension != 3 ?  true : checkSelectable(row)">
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          height="50vh"
+          border
+          row-key="id"
+          style="width: 100%"
+          :header-cell-style="{ background: '#F0F3F3', border: 'none' }"
+          @selection-change="handleSelectionChange"
+          :header-cell-class-name="hideHeaderCheckbox"
+        >
+          <el-table-column
+            type="selection"
+            :reserve-selection="true"
+            width="55"
+            align="center"
+            fixed="left"
+            :selectable="
+              (row) => (dimension != 3 ? true : checkSelectable(row))
+            "
+          >
           </el-table-column>
           <el-table-column label="序号" type="index" width="50" fixed="left">
           </el-table-column>
-          <el-table-column v-if="dimension != 4" label="抽取数量" type="index" width="100">
+          <el-table-column
+            v-if="dimension != 4"
+            label="抽取数量"
+            type="index"
+            width="100"
+          >
             <template slot-scope="{ row }">
-              <el-input type="text" placeholder="请输入" v-model="row.outboundNum" @input="handleInput(row, $event)"
-                :disabled="dimension == '3'"></el-input>
+              <el-input
+                type="text"
+                placeholder="请输入"
+                v-model="row.outboundNum"
+                @input="handleInput(row, $event)"
+                :disabled="dimension == '3'"
+              ></el-input>
             </template>
           </el-table-column>
-          <el-table-column prop="categoryCode" label="物品编码" min-width="120" fixed="left"
-            :show-overflow-tooltip="true"></el-table-column>
-          <el-table-column prop="categoryName" width="200" label="物品名称" fixed="left"
-            :show-overflow-tooltip="true"></el-table-column>
-          <el-table-column prop="brandNum" label="牌号" :show-overflow-tooltip="true"></el-table-column>
-          <el-table-column prop="categoryModel" label="型号" :show-overflow-tooltip="true"></el-table-column>
-          <el-table-column prop="specification" label="规格" :show-overflow-tooltip="true"></el-table-column>
+          <el-table-column
+            prop="categoryCode"
+            label="物品编码"
+            min-width="120"
+            fixed="left"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
+          <el-table-column
+            prop="categoryName"
+            width="200"
+            label="物品名称"
+            fixed="left"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
+          <el-table-column
+            prop="brandNum"
+            label="牌号"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
+          <el-table-column
+            prop="categoryModel"
+            label="型号"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
+          <el-table-column
+            prop="specification"
+            label="规格"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
           <template v-if="dimension == 1">
-            <el-table-column v-for="(item, index) in newColumns" :label="item.label" :align="item.align"
-              :prop="item.prop" :show-overflow-tooltip="item.showOverflowTooltip"></el-table-column>
+            <el-table-column
+              v-for="(item, index) in newColumns"
+              :label="item.label"
+              :align="item.align"
+              :prop="item.prop"
+              :show-overflow-tooltip="item.showOverflowTooltip"
+            ></el-table-column>
           </template>
-          <el-table-column v-else prop="batchNo" label="批次号" key="batchNo" min-width="80"></el-table-column>
+          <el-table-column
+            v-else
+            prop="batchNo"
+            label="批次号"
+            key="batchNo"
+            min-width="80"
+          ></el-table-column>
           <el-table-column prop="level" label="级别"></el-table-column>
-          <el-table-column prop="measureQuantity" label="计量数量" width="120"></el-table-column>
-          <el-table-column prop="measureUnit" label="计量单位" width="90"></el-table-column>
-          <el-table-column prop="weight" label="重量" min-width="120"></el-table-column>
-          <el-table-column prop="weightUnit" label="重量单位" min-width="120"></el-table-column>
-          <el-table-column v-if="dimension == 3" prop="packageNo" label="包装编码" min-width="120"
-            :show-overflow-tooltip="true"></el-table-column>
-          <el-table-column v-if="dimension == 3" prop="packingQuantity" label="包装数量" min-width="120"
-            :show-overflow-tooltip="true"></el-table-column>
-          <el-table-column v-if="dimension == 3" prop="packingUnit" label="包装单位" min-width="120"
-            :show-overflow-tooltip="true"></el-table-column>
-          <el-table-column v-if="dimension == 3 || dimension == 4" label="发货条码" prop="barcodes" width="80"
-            :show-overflow-tooltip="true"></el-table-column>
-          <el-table-column v-if="dimension == 4" prop="no" label="物料编码" min-width="120"
-            :show-overflow-tooltip="true"></el-table-column>
-          <el-table-column v-if="dimension == 3 || dimension == 4" prop="materielDesignation" label="物料代号"
-            min-width="100"></el-table-column>
-          <el-table-column v-if="dimension == 3 || dimension == 4" prop="clientCode" label="客户代号"
-            min-width="100"></el-table-column>
-          <el-table-column v-if="dimension == 3 || dimension == 4" prop="engrave" label="刻码"
-            min-width="120"></el-table-column>
-          <el-table-column v-if="dimension == 3 || dimension == 4" prop="warehouseName" label="仓库" min-width="200"
-            :show-overflow-tooltip="true"></el-table-column>
-          <el-table-column prop="supplierName" label="供应商" min-width="200"
-            :show-overflow-tooltip="true"></el-table-column>
-          <el-table-column prop="supplierCode" label="供应商代号" min-width="200"
-            :show-overflow-tooltip="true"></el-table-column>
+          <el-table-column
+            prop="measureQuantity"
+            label="计量数量"
+            width="120"
+          ></el-table-column>
+          <el-table-column
+            prop="measureUnit"
+            label="计量单位"
+            width="90"
+          ></el-table-column>
+          <el-table-column
+            prop="weight"
+            label="重量"
+            min-width="120"
+          ></el-table-column>
+          <el-table-column
+            prop="weightUnit"
+            label="重量单位"
+            min-width="120"
+          ></el-table-column>
+          <el-table-column
+            v-if="dimension == 3"
+            prop="packageNo"
+            label="包装编码"
+            min-width="120"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
+          <el-table-column
+            v-if="dimension == 3"
+            prop="packingQuantity"
+            label="包装数量"
+            min-width="120"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
+          <el-table-column
+            v-if="dimension == 3"
+            prop="packingUnit"
+            label="包装单位"
+            min-width="120"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
+          <el-table-column
+            v-if="dimension == 3 || dimension == 4"
+            label="发货条码"
+            prop="barcodes"
+            width="80"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
+          <el-table-column
+            v-if="dimension == 4"
+            prop="no"
+            label="物料编码"
+            min-width="120"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
+          <el-table-column
+            v-if="dimension == 3 || dimension == 4"
+            prop="materielDesignation"
+            label="物料代号"
+            min-width="100"
+          ></el-table-column>
+          <el-table-column
+            v-if="dimension == 3 || dimension == 4"
+            prop="clientCode"
+            label="客户代号"
+            min-width="100"
+          ></el-table-column>
+          <el-table-column
+            v-if="dimension == 3 || dimension == 4"
+            prop="engrave"
+            label="刻码"
+            min-width="120"
+          ></el-table-column>
+          <el-table-column
+            v-if="dimension == 3 || dimension == 4"
+            prop="warehouseName"
+            label="仓库"
+            min-width="200"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
+          <el-table-column
+            prop="supplierName"
+            label="供应商"
+            min-width="200"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
+          <el-table-column
+            prop="supplierCode"
+            label="供应商代号"
+            min-width="200"
+            :show-overflow-tooltip="true"
+          ></el-table-column>
         </el-table>
         <div style="text-align: right; padding: 10px">
-          <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
-            :page-sizes="[5, 10, 20, 50]" :page-size.sync="searchForm.size" :current-page.sync="searchForm.pageNum"
-            @current-change="handleCurrentChange" @size-change="handleSizeChange">
+          <el-pagination
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            :page-sizes="[5, 10, 20, 50]"
+            :page-size.sync="searchForm.size"
+            :current-page.sync="searchForm.pageNum"
+            @current-change="handleCurrentChange"
+            @size-change="handleSizeChange"
+          >
           </el-pagination>
         </div>
       </el-main>
@@ -274,7 +473,7 @@ export default {
         } else {
           finalValue = singleDotValue;
         }
-        return row.outboundNum = finalValue;
+        return (row.outboundNum = finalValue);
       } else {
         row.outboundNum = row.measureQuantity;
       }
@@ -316,16 +515,16 @@ export default {
         this.total = data.count;
       }
       console.log(this.tableData);
-      this.updateProductOutboundNums(this.tableData)
+      this.updateProductOutboundNums(this.tableData);
     },
     updateProductOutboundNums(list) {
-      console.log(this.productLists, 'this.productLists')
+      console.log(this.productLists, 'this.productLists');
 
       if (this.dimension == 1) {
         //物品层
         for (let i = 0; i < list.length; i++) {
           const item = list[i];
-          const matchedProduct = this.productLists.find(product => {
+          const matchedProduct = this.productLists.find((product) => {
             const isMatch = product.categoryId === item.categoryId;
             return isMatch;
           });
@@ -336,11 +535,10 @@ export default {
             console.warn('No match for item.id:', item.id);
           }
         }
-
       } else {
         for (let i = 0; i < list.length; i++) {
           const item = list[i];
-          const matchedProduct = this.productLists.find(product => {
+          const matchedProduct = this.productLists.find((product) => {
             const isMatch = product.id === item.id;
             return isMatch;
           });
@@ -352,7 +550,6 @@ export default {
           }
         }
       }
-
     },
     open(val) {
       this.productLists = val || [];
@@ -375,7 +572,7 @@ export default {
           return;
         }
       }
-      
+
       this.$emit('choose', this.selectionList, this.dimension);
       this.cancel();
     },
@@ -385,17 +582,18 @@ export default {
       this.visible = false;
     },
     handleSelectionChange(selection) {
-      if (this.dimension != 3 && selection.length > 1) {
-        // 单选模式下，如果选了多个，只保留最后一个
-        const lastSelected = selection[selection.length - 1];
-        this.$refs.multipleTable.clearSelection(); // 清空所有选中
-        this.$nextTick(() => {
-          this.$refs.multipleTable.toggleRowSelection(lastSelected, true); // 重新选中最后一个
-        });
-        this.selectionList = [lastSelected];
-      } else {
-        this.selectionList = selection;
-      }
+      // if (this.dimension != 3 && selection.length > 1) {
+      //   // 单选模式下，如果选了多个，只保留最后一个
+      //   const lastSelected = selection[selection.length - 1];
+      //   this.$refs.multipleTable.clearSelection(); // 清空所有选中
+      //   this.$nextTick(() => {
+      //     this.$refs.multipleTable.toggleRowSelection(lastSelected, true); // 重新选中最后一个
+      //   });
+      //   this.selectionList = [lastSelected];
+      // } else {
+      //   this.selectionList = selection;
+      // }
+      this.selectionList = selection;
     },
     handleNodeClick(data) {
       console.log(data);
@@ -432,17 +630,24 @@ export default {
     },
 
     checkSelectable(row, index) {
-        if (this.selectionList.length < 1) return true
-        let code = this.selectionList[0].categoryCode
-        return row.categoryCode === code
+      // if (this.selectionList.length < 1) return true;
+      // let code = this.selectionList[0].categoryCode;
+      // return row.categoryCode === code;
+      if (this.dimension === 3 && this.selectionList.length > 0) {
+        // 包装维度下，只能选择相同物品编码的行
+        let code = this.selectionList[0].categoryCode;
+        return row.categoryCode === code;
+      }
+      // 其他维度允许全选所有行
+      return true;
     },
 
     hideHeaderCheckbox({ column }) {
-      if (column.type === "selection") {
-        return "hide-header-checkbox";
-      }
-      return "";
-    },
+      // if (column.type === "selection") {
+      //   return "hide-header-checkbox";
+      // }
+      return '';
+    }
   }
 };
 </script>
@@ -460,7 +665,6 @@ export default {
   overflow: auto;
 }
 
-
 /* 隐藏表头的全选复选框 */
 .hide-header-checkbox .el-checkbox {
   display: none !important;