From 485758196361820c91c63fe85e461c813e08e7b3 Mon Sep 17 00:00:00 2001
From: DXC <duxingchen@iris-rs.cn>
Date: Tue, 17 Mar 2026 13:13:28 +0800
Subject: [PATCH] refactor: implement unified batch selection mode for clean
 table UI

---
 inventory-web/src/views/material/list.vue | 132 +++++++++++-----------
 1 file changed, 63 insertions(+), 69 deletions(-)

diff --git a/inventory-web/src/views/material/list.vue b/inventory-web/src/views/material/list.vue
index 2e53196..ba6fd0e 100644
--- a/inventory-web/src/views/material/list.vue
+++ b/inventory-web/src/views/material/list.vue
@@ -118,44 +118,31 @@
             <el-icon style="margin-right: 5px"><Download /></el-icon>导出库存统计
           </el-button>
 
-          <!-- 批量设置预警按钮 (需要 edit_warning 权限) -->
-          <template v-if="userStore.hasPermission('material_list:edit_warning')">
-            <!-- 常规状态 -->
+          <!-- 批量操作按钮 (需要相应权限) -->
+          <template v-if="!isBatchMode">
             <el-button
-                v-if="!isBatchMode"
+                v-if="userStore.hasPermission('material_list:edit_warning')"
                 type="warning"
                 plain
-                @click="enterBatchMode"
+                @click="enterBatchMode('warning')"
                 style="margin-right: 10px"
             >
               <el-icon style="margin-right: 5px"><Bell /></el-icon>批量设置预警
             </el-button>
-            <!-- 批量模式 -->
-            <template v-if="isBatchMode">
-              <el-button
-                  type="warning"
-                  :disabled="selectedItems.length === 0"
-                  @click="handleBatchSetWarning"
-                  style="margin-right: 10px"
-              >
-                确认批量设置 (已选 {{ selectedItems.length }} 项)
-              </el-button>
-              <el-button plain @click="exitBatchMode" style="margin-right: 10px">
-                退出批量操作
-              </el-button>
-            </template>
+            <el-button
+                v-if="userStore.hasPermission('material_list:operation')"
+                type="danger"
+                plain
+                @click="enterBatchMode('inspection')"
+                style="margin-right: 10px"
+            >
+              <el-icon style="margin-right: 5px"><CircleCheck /></el-icon>批量质检设置
+            </el-button>
+          </template>
+          <template v-else>
+            <el-button @click="cancelBatchMode">取消选择</el-button>
+            <el-button type="primary" @click="confirmBatchSelection">确认勾选</el-button>
           </template>
-
-          <!-- 批量质检设置按钮 (需要 operation 权限) -->
-          <el-button
-              v-if="userStore.hasPermission('material_list:operation')"
-              type="danger"
-              plain
-              @click="openBatchInspectionDialog"
-              style="margin-right: 10px"
-          >
-            <el-icon style="margin-right: 5px"><CircleCheck /></el-icon>批量质检设置
-          </el-button>
 
           <el-button v-if="userStore.hasPermission('material_list:operation')" type="primary" @click="handleAdd" style="margin-right: 10px">
             <el-icon style="margin-right: 5px"><Plus /></el-icon>新增
@@ -695,14 +682,53 @@ const handleSelectionChange = (selection: MaterialBaseVO[]) => {
 
 // 批量操作模式
 const isBatchMode = ref(false);
-const enterBatchMode = () => {
+const batchActionType = ref(''); // 'warning' | 'inspection'
+
+const enterBatchMode = (actionType: string) => {
+  batchActionType.value = actionType;
   selectedItems.value = [];
   isBatchMode.value = true;
+  tableRef.value?.clearSelection();
 };
-const exitBatchMode = () => {
-  selectedItems.value = [];
-  tableRef.value?.clearSelection();  // 清除表格勾选状态
+
+const cancelBatchMode = () => {
   isBatchMode.value = false;
+  batchActionType.value = '';
+  tableRef.value?.clearSelection();
+  selectedItems.value = [];
+};
+
+const confirmBatchSelection = () => {
+  const selected = tableRef.value?.getSelectionRows() || [];
+  if (selected.length === 0) {
+    return ElMessage.warning('请先勾选需要操作的物料');
+  }
+
+  // 根据操作类型路由到对应的业务弹窗
+  if (batchActionType.value === 'inspection') {
+    inspectionDialog.selectedIds = selected.map((row: any) => row.id);
+    inspectionDialog.selectedCount = selected.length;
+    inspectionForm.isInspectionRequired = false;
+    inspectionDialog.visible = true;
+  } else if (batchActionType.value === 'warning') {
+    // 打开预警设置弹窗
+    warningDialog.selectedIds = selected.map((row: any) => row.id);
+    warningDialog.selectedCount = selected.length;
+    warningForm.isEnabled = false;
+    warningForm.redThreshold = undefined;
+    warningForm.yellowThreshold = undefined;
+    warningDialog.title = '批量设置预警';
+    warningDialog.visible = true;
+  }
+
+  // 关闭批量模式
+  isBatchMode.value = false;
+  batchActionType.value = '';
+};
+
+// 兼容旧的 exitBatchMode
+const exitBatchMode = () => {
+  cancelBatchMode();
 };
 
 // 预警设置相关
@@ -1234,26 +1260,6 @@ const handleDelete = (row: MaterialBaseVO) => {
 
 // --- 预警设置函数 ---
 
-// 批量设置预警
-const handleBatchSetWarning = () => {
-  if (selectedItems.value.length === 0) {
-    ElMessage.warning('请先勾选需要设置预警的物料');
-    return;
-  }
-
-  // 使用已选中的行
-  warningDialog.selectedIds = selectedItems.value.map((row: MaterialBaseVO) => row.id);
-  warningDialog.selectedCount = selectedItems.value.length;
-
-  // 重置表单
-  warningForm.isEnabled = false;
-  warningForm.redThreshold = undefined;
-  warningForm.yellowThreshold = undefined;
-
-  warningDialog.title = '批量设置预警';
-  warningDialog.visible = true;
-};
-
 // 单条设置预警
 const handleSetSingleWarning = (row: MaterialBaseVO) => {
   warningDialog.selectedIds = [row.id];
@@ -1307,21 +1313,6 @@ const submitWarning = async () => {
   }
 };
 
-// 打开批量质检设置对话框
-const openBatchInspectionDialog = () => {
-  // 获取当前勾选的物料
-  const selected = tableRef.value?.getSelectionRows() || [];
-  if (selected.length === 0) {
-    ElMessage.warning('请先勾选需要设置质检的物料');
-    return;
-  }
-
-  inspectionDialog.selectedIds = selected.map((row: MaterialBaseVO) => row.id);
-  inspectionDialog.selectedCount = selected.length;
-  inspectionForm.isInspectionRequired = false;  // 默认重置为否
-  inspectionDialog.visible = true;
-};
-
 // 提交批量质检设置
 const submitBatchInspection = async () => {
   if (inspectionDialog.selectedIds.length === 0) {
@@ -1338,6 +1329,9 @@ const submitBatchInspection = async () => {
 
     ElMessage.success('批量质检设置成功');
     inspectionDialog.visible = false;
+    // 清理批量模式状态
+    isBatchMode.value = false;
+    batchActionType.value = '';
     selectedItems.value = [];
     tableRef.value?.clearSelection();
     getList();