duxingchen/KCGL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(warehouse): toggle bulk delete mode and fix batch generate modal layout

Browse Source
This commit is contained in:
DXC
2026-04-02 11:00:33 +08:00
parent e28326b2e4
commit da0f94dfb3
1 changed files with 43 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
inventory-web/src/views/dashboard/index.vue
View File

@ -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">
<!-- 非批量模式 -->
<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="handleBatchDelete" :disabled="selectedIds.length === 0" :icon="Delete">
批量删除 {{ selectedIds.length > 0 ? `(${selectedIds.length})` : '' }}
<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 || '删除失败')