From 600388ff5bf9becfb6c550b4d09df08290bd0741 Mon Sep 17 00:00:00 2001
From: lynn <lynnlinyong@qq.com>
Date: Mon, 5 May 2025 22:19:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=9B=98=E7=82=B9=E8=AE=A1?=
 =?UTF-8?q?=E5=88=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/inventorys/stocktaking.vue | 286 ++++++++++++++++++---------
 1 file changed, 188 insertions(+), 98 deletions(-)

diff --git a/src/views/inventorys/stocktaking.vue b/src/views/inventorys/stocktaking.vue
index 2000111..45cf99c 100644
--- a/src/views/inventorys/stocktaking.vue
+++ b/src/views/inventorys/stocktaking.vue
@@ -170,30 +170,55 @@
         </Select>
         <Button type="primary" style="margin-left: 10px" @click="searchMaterials">查询</Button>
         <Button style="margin-left: 10px" @click="resetMaterialSearch">重置</Button>
-      </div>
-      <Table 
+            </div>
+      <el-table 
         ref="materialTable"
-        :columns="materialColumns" 
         :data="materialList" 
-        :loading="materialModal.loading"
-        @on-select="handleSelect"
-        @on-select-all="handleSelectAll"
-        @on-selection-change="handleSelectionChange"
+        v-loading="materialModal.loading"
+        @select="handleSelect"
+        @select-all="handleSelectAll"
         row-key="id"
       >
-        <template slot-scope="{ row, index }" slot="action">
-          <div style="display: flex; gap: 8px; justify-content: center;">
-            <Button 
-              :type="isSelected(row) ? 'warning' : 'success'" 
-              size="small"
-              style="border-radius: 6px;"
-              @click="toggleMaterialSelection(row, index)"
-            >
-              {{ isSelected(row) ? '移出计划' : '加入计划' }}
-            </Button>
-          </div>
-        </template>
-      </Table>
+        <el-table-column
+          type="selection"
+          width="55">
+        </el-table-column>
+        <el-table-column
+          prop="zichanmingcheng"
+          label="物资名称">
+        </el-table-column>
+        <el-table-column
+          prop="guigexinghao"
+          label="规格型号">
+        </el-table-column>
+        <el-table-column
+          prop="jiliangdanwei"
+          label="单位">
+        </el-table-column>
+        <el-table-column
+          prop="inventorys_total"
+          label="当前库存">
+          <template slot-scope="scope">
+            {{ scope.row.inventorys_total === null ? '0' : scope.row.inventorys_total }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          width="100">
+          <template slot-scope="scope">
+            <div style="display: flex; gap: 8px; justify-content: center;">
+              <el-button 
+                :type="isSelected(scope.row) ? 'warning' : 'success'" 
+                size="small"
+                style="border-radius: 6px;"
+                @click="toggleMaterialSelection(scope.row, scope.$index)"
+              >
+                {{ isSelected(scope.row) ? '移出计划' : '加入计划' }}
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
       <div class="pagination-container">
         <el-pagination
           @size-change="handleMaterialPageSizeChange"
@@ -204,7 +229,7 @@
           layout="total, sizes, prev, pager, next, jumper"
           :total="materialModal.total"
         />
-      </div>
+                </div>
       <template slot="footer">
         <Button @click="materialModal.visible = false">取消</Button>
         <Button type="primary" @click="handleMaterialSubmit">确定</Button>
@@ -426,7 +451,9 @@ export default {
         currentPlanId: '',
         pageIndex: 1,
         pageSize: 10,
-        total: 0
+        total: 0,
+        selectedMaterialIds: new Set(),
+        isInitialLoad: true
       },
       materialList: [],
       materialColumns: [
@@ -481,8 +508,7 @@ export default {
           key: 'status',
           width: 100
         }
-      ],
-      linkedMaterialIds: []
+      ]
     }
   },
   mounted() {
@@ -801,79 +827,115 @@ export default {
       }
     },
 
-    async showInventorySelectModal(planId) {
+    showInventorySelectModal(planId) {
       this.materialModal.currentPlanId = planId
       this.materialModal.visible = true
       this.materialModal.pageIndex = 1
-      this.linkedMaterialIds = [] // 重置已关联物资ID
-      this.selectedRows = [] // 重置选中行
-      
-      // 获取已关联的物资ID列表
-      try {
-        const res = await getStocktakingPlanLinkList({ material_infos_plan_id: planId })
-        if (res && res.list && res.list.data) {
-          this.linkedMaterialIds = res.list.data.map(item => item.material_info_id)
-        }
-      } catch (error) {
-        console.error('获取已关联物资失败:', error)
-      }
-      
-      // 等待数据加载完成后再搜索物资
-      await this.$nextTick()
       this.searchMaterials()
     },
-    isSelected(row) {
-      return this.linkedMaterialIds.includes(row.id)
-    },
-    handleSelectionChange(selection) {
-      this.selectedRows = selection
+    isSelected(item) {
+      // console.log('isSelected called', item.id)
+      // console.log('materialModal.selectedMaterialIds', this.materialModal.selectedMaterialIds)
+      // console.log('this.materialModal.selectedMaterialIds.has(item.id)',  this.materialModal.selectedMaterialIds.has(item.id))
+      return this.materialModal.selectedMaterialIds.has(item.id);
     },
-    handleSelect(selection, row) {
-      console.log('handleSelect called', selection, row) // 添加调试日志
-      this.selectedRows = selection
-      // 同步更新 planMaterials
-      const planId = this.materialModal.currentPlanId
-      if (!this.planMaterials[planId]) {
-        this.planMaterials[planId] = []
-      }
+    handleSelect(selection, item) {
+      console.log('handleSelect called', selection, item);
       
-      if (selection.includes(row)) {
-        if (!this.planMaterials[planId].includes(row.id)) {
-          this.planMaterials[planId].push(row.id)
+      // 更新选中状态集合
+      const planId = this.materialModal.currentPlanId;
+      if (planId) {
+        if (selection.includes(item)) {
+          this.materialModal.selectedMaterialIds.add(item.id);
+        } else {
+          this.materialModal.selectedMaterialIds.delete(item.id);
         }
-      } else {
-        this.planMaterials[planId] = this.planMaterials[planId].filter(id => id !== row.id)
+        
+        // 更新界面
+        this.$nextTick(() => {
+          if (this.$refs.materialTable) {
+            this.materialList.forEach(row => {
+              this.$refs.materialTable.toggleRowSelection(row, this.materialModal.selectedMaterialIds.has(row.id));
+            });
+          }
+        });
       }
     },
+
+    //   console.log('handleSelectionChange called', selection);
+      
+    //   // 如果是初始加载，跳过处理
+    //   if (this.materialModal.isInitialLoad) {
+    //     this.materialModal.isInitialLoad = false;
+    //     return;
+    //   }
+      
+    //   // 更新选中状态集合
+    //   const planId = this.materialModal.currentPlanId;
+    //   if (planId) {
+    //     // 更新界面
+    //     this.$nextTick(() => {
+    //       if (this.$refs.materialTable) {
+    //         this.materialList.forEach(row => {
+    //           this.$refs.materialTable.toggleRowSelection(row, this.materialModal.selectedMaterialIds.has(row.id));
+    //         });
+    //       }
+    //     });
+    //   }
+    // },
     handleSelectAll(selection) {
-      console.log('handleSelectAll called', selection) // 添加调试日志
-      this.selectedRows = selection
-      const planId = this.materialModal.currentPlanId
-      if (!this.planMaterials[planId]) {
-        this.planMaterials[planId] = []
-      }
+      console.log('handleSelectAll called', selection);
       
-      // 更新 planMaterials
-      this.planMaterials[planId] = selection.map(item => item.id)
+      const planId = this.materialModal.currentPlanId;
+      if (planId) {
+        // 更新选中状态集合
+        if (selection.length > 0) {
+          // 全选：将所有当前页的项添加到选中集合
+          this.materialList.forEach(item => {
+            this.materialModal.selectedMaterialIds.add(item.id);
+          });
+        } else {
+          // 取消全选：从选中集合中移除当前页的所有项
+          this.materialList.forEach(item => {
+            this.materialModal.selectedMaterialIds.delete(item.id);
+          });
+        }
+        
+        // 更新界面
+        this.$nextTick(() => {
+          if (this.$refs.materialTable) {
+            // 更新复选框状态
+            this.materialList.forEach(row => {
+              this.$refs.materialTable.toggleRowSelection(row, this.materialModal.selectedMaterialIds.has(row.id));
+            });
+          }
+        });
+      }
     },
-    toggleMaterialSelection(row, index) {
-      // 确保表格实例存在
-      if (!this.$refs.materialTable) return
-
-      if (this.isSelected(row)) {
-        // 如果当前是"移出计划"状态
-        this.$refs.materialTable.toggleSelect(index)
-        this.selectedRows = this.selectedRows.filter(item => item.id !== row.id)
-        this.linkedMaterialIds = this.linkedMaterialIds.filter(id => id !== row.id)
+    toggleMaterialSelection(item, index) {
+      console.log('toggleMaterialSelection called', item, index);
+      
+      // 更新选中状态
+      if (!this.isSelected(item)) {
+        console.log('Adding to plan');
+        this.materialModal.selectedMaterialIds.add(item.id);
       } else {
-        // 如果当前是"加入计划"状态
-        this.$refs.materialTable.toggleSelect(index)
-        this.selectedRows.push(row)
-        this.linkedMaterialIds.push(row.id)
+        console.log('Removing from plan');
+        this.materialModal.selectedMaterialIds.delete(item.id);
       }
+      
+      // 更新界面
+      this.$nextTick(() => {
+        if (this.$refs.materialTable) {
+          this.materialList.forEach(row => {
+            this.$refs.materialTable.toggleRowSelection(row, this.materialModal.selectedMaterialIds.has(row.id));
+          });
+        }
+      });
     },
     async searchMaterials() {
-      this.materialModal.loading = true
+      this.materialModal.loading = true;
+      this.materialModal.isInitialLoad = true;  // 重置标志
       try {
         const data = {
           page_size: this.materialModal.pageSize,
@@ -887,7 +949,7 @@ export default {
           'filter[1][key]': 'wuzileixing',
           'filter[1][op]': 'eq',
           'filter[1][value]': '一物一码'
-        }
+        };
         const res = await request({
           url: '/api/admin/material-infos/index',
           method: 'post',
@@ -895,25 +957,31 @@ export default {
           headers: {
             'Content-Type': 'application/x-www-form-urlencoded'
           }
-        })
+        });
         if (res && res.data) {
-          this.materialList = res.data
-          this.selectedRows = [] // 重置选中状态
-          this.materialModal.total = res.total || 0
+          this.materialList = res.data;
+          this.materialModal.total = res.total || 0;
           
-          // 等待表格渲染完成后再设置选中状态
-          await this.$nextTick()
-          if (this.$refs.materialTable) {
-            this.materialList.forEach((item, index) => {
-              if (this.linkedMaterialIds.includes(item.id)) {
-                this.$refs.materialTable.toggleSelect(index, true)
-                this.selectedRows.push(item)
-              }
-            })
+          // 初始化选中状态
+          const planId = this.materialModal.currentPlanId;
+          if (planId) {
+            // 如果是第一次加载，初始化选中状态
+            if (this.materialModal.selectedMaterialIds.size === 0) {
+              this.materialList.forEach(item => {
+                if (item.material_infos_plan && 
+                    item.material_infos_plan.length > 0 && 
+                    item.material_infos_plan[0].material_infos_plan_id === planId) {
+                  console.log('item.id', item.id)
+                  this.materialModal.selectedMaterialIds.add(item.id);
+                }
+              });
+            }
+
+            console.log('this.materialModal.selectedMaterialIds', this.materialModal.selectedMaterialIds)
           }
         }
       } finally {
-        this.materialModal.loading = false
+        this.materialModal.loading = false;
       }
     },
     async batchAddMaterials() {
@@ -1037,18 +1105,21 @@ export default {
     },
     async handleMaterialSubmit() {
       const planId = this.materialModal.currentPlanId;
-      // 直接用当前选中的行
-      const selectedMaterialIds = this.selectedRows.map(row => row.id);
       if (!planId) {
         this.$Message.error('未找到计划ID');
         return;
       }
-      // 构建 formdata
+
+      // 获取当前选中的物资ID
+      const selectedMaterialIds = Array.from(this.materialModal.selectedMaterialIds);
+      
+      // 构建formdata
       const formData = new FormData();
       formData.append('id', planId);
       selectedMaterialIds.forEach((materialId, index) => {
         formData.append(`material_infos_plan_links[${index}][material_info_id]`, materialId);
       });
+
       try {
         await saveStocktakingPlan(formData);
         this.$Message.success('物资关联成功');
@@ -1073,6 +1144,25 @@ export default {
       this.detailModal.pageIndex = 1;
       this.viewInventoryDetail(this.detailModal.data.id);
     }
+  },
+  watch: {
+    'materialModal.loading': {
+      handler(newVal, oldVal) {
+        // 当loading从true变为false时，说明表格加载完成
+        if (oldVal === true && newVal === false) {
+          this.$nextTick(() => {
+            if (this.$refs.materialTable) {
+              this.materialList.forEach((item, index) => {
+                if (this.materialModal.selectedMaterialIds.has(item.id)) {
+                  this.$refs.materialTable.toggleRowSelection(item, true);
+                  console.log('item.id1111111111111111111111', item.id)
+                }
+              });
+            }
+          });
+        }
+      }
+    }
   }
 }
 </script>