From da0f94dfb3c6641bd099f567af8a69670b33d289 Mon Sep 17 00:00:00 2001
From: DXC <duxingchen@iris-rs.cn>
Date: Thu, 2 Apr 2026 11:00:33 +0800
Subject: [PATCH] style(warehouse): toggle bulk delete mode and fix batch
 generate modal layout

---
 inventory-web/src/views/dashboard/index.vue | 65 ++++++++++++++-------
 1 file changed, 43 insertions(+), 22 deletions(-)

diff --git a/inventory-web/src/views/dashboard/index.vue b/inventory-web/src/views/dashboard/index.vue
index d8887ca..3751839 100644
--- a/inventory-web/src/views/dashboard/index.vue
+++ b/inventory-web/src/views/dashboard/index.vue
@@ -72,15 +72,27 @@
     <el-dialog v-model="warehouseDialogVisible" title="库位管理" width="700px" :close-on-click-modal="false">
       <div class="warehouse-dialog">
         <div class="warehouse-header">
-          <el-button type="primary" @click="handleAddTopLevel" :icon="Plus">
-            新增顶级区域
-          </el-button>
-          <el-button type="success" @click="openBatchGenerate" :icon="Plus">
-            批量生成
-          </el-button>
-          <el-button type="danger" @click="handleBatchDelete" :disabled="selectedIds.length === 0" :icon="Delete">
-            批量删除 {{ selectedIds.length > 0 ? `(${selectedIds.length})` : '' }}
-          </el-button>
+          <!-- 非批量模式 -->
+          <template v-if="!isBulkDeleteMode">
+            <el-button type="primary" @click="handleAddTopLevel" :icon="Plus">
+              新增顶级区域
+            </el-button>
+            <el-button type="success" @click="openBatchGenerate" :icon="Plus">
+              批量生成
+            </el-button>
+            <el-button type="danger" @click="isBulkDeleteMode = true" :icon="Delete">
+              批量删除
+            </el-button>
+          </template>
+          <!-- 批量模式 -->
+          <template v-else>
+            <el-button @click="cancelBatchMode" :icon="Close">
+              取消
+            </el-button>
+            <el-button type="danger" @click="handleBatchDelete" :disabled="selectedIds.length === 0" :icon="Delete">
+              确认删除 {{ selectedIds.length > 0 ? `(${selectedIds.length}项)` : '' }}
+            </el-button>
+          </template>
         </div>
         <el-scrollbar height="450px">
           <el-tree
@@ -90,7 +102,7 @@
             :props="treeProps"
             :expand-on-click-node="false"
             :default-expand-all="false"
-            show-checkbox
+            :show-checkbox="isBulkDeleteMode"
             @check="handleTreeCheck"
           >
             <template #default="{ node, data }">
@@ -152,7 +164,7 @@
     </el-dialog>
 
     <!-- 批量生成库位弹窗 -->
-    <el-dialog v-model="batchGenerateVisible" title="批量生成库位" width="600px">
+    <el-dialog v-model="batchGenerateVisible" title="批量生成库位" width="800px">
       <el-form :model="batchGenerateForm" label-width="100px">
         <el-form-item label="父级库位">
           <el-input :value="batchGenerateForm.parentName" disabled />
@@ -161,20 +173,20 @@
         <el-divider>层级规则（按顺序生成）</el-divider>
         <div v-for="(rule, index) in batchGenerateForm.rules" :key="index" class="rule-item">
           <el-row :gutter="10">
-            <el-col :span="6">
+            <el-col :span="5">
               <el-input v-model="rule.prefix" placeholder="前缀" />
             </el-col>
-            <el-col :span="5">
-              <el-input-number v-model="rule.start" :min="1" placeholder="起始" style="width: 100%" />
+            <el-col :span="6">
+              <el-input-number v-model="rule.start" :min="1" placeholder="起始" style="width: 100%" controls-position="right" />
+            </el-col>
+            <el-col :span="6">
+              <el-input-number v-model="rule.end" :min="1" placeholder="结束" style="width: 100%" controls-position="right" />
             </el-col>
             <el-col :span="5">
-              <el-input-number v-model="rule.end" :min="1" placeholder="结束" style="width: 100%" />
+              <el-input-number v-model="rule.pad" :min="1" :max="5" placeholder="补零" style="width: 100%" controls-position="right" />
             </el-col>
-            <el-col :span="4">
-              <el-input-number v-model="rule.pad" :min="1" :max="5" placeholder="补零" style="width: 100%" />
-            </el-col>
-            <el-col :span="4">
-              <el-button type="danger" :icon="Delete" @click="batchGenerateForm.rules.splice(index, 1)" />
+            <el-col :span="2">
+              <el-button type="danger" :icon="Delete" @click="batchGenerateForm.rules.splice(index, 1)" style="width: 100%" />
             </el-col>
           </el-row>
         </div>
@@ -203,7 +215,7 @@ import { useRouter } from 'vue-router'
 // 1. 引入 User Store
 import { useUserStore } from '@/stores/user'
 // 引入需要的图标
-import { Box, TrendCharts, ShoppingCart, Operation, Setting, Location, Plus, Edit, Delete } from '@element-plus/icons-vue'
+import { Box, TrendCharts, ShoppingCart, Operation, Setting, Location, Plus, Edit, Delete, Close } from '@element-plus/icons-vue'
 import { getPrinterConfig, updatePrinterConfig } from '@/api/common/print'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { getWarehouseTree, createWarehouse, updateWarehouse, deleteWarehouse, batchDeleteWarehouse, batchGenerateWarehouse } from '@/api/common/warehouse'
@@ -302,11 +314,20 @@ const locationLoading = ref(false)
 
 // 批量删除相关
 const selectedIds = ref<number[]>([])
+const isBulkDeleteMode = ref(false)
 
 const handleTreeCheck = (data: any, checked: any) => {
   selectedIds.value = checked.checkedKeys
 }
 
+const cancelBatchMode = () => {
+  isBulkDeleteMode.value = false
+  selectedIds.value = []
+  if (treeRef.value) {
+    treeRef.value.setCheckedKeys([])
+  }
+}
+
 const handleBatchDelete = async () => {
   if (selectedIds.value.length === 0) {
     ElMessage.warning('请先选择要删除的库位')
@@ -323,7 +344,7 @@ const handleBatchDelete = async () => {
     const res = await batchDeleteWarehouse(selectedIds.value)
     if (res.code === 200) {
       ElMessage.success('批量删除成功')
-      selectedIds.value = []
+      cancelBatchMode()
       await loadWarehouseTree()
     } else {
       ElMessage.error(res.msg || '删除失败')