style(warehouse): toggle bulk delete mode and fix batch generate modal layout
This commit is contained in:
@ -72,15 +72,27 @@
|
|||||||
<el-dialog v-model="warehouseDialogVisible" title="库位管理" width="700px" :close-on-click-modal="false">
|
<el-dialog v-model="warehouseDialogVisible" title="库位管理" width="700px" :close-on-click-modal="false">
|
||||||
<div class="warehouse-dialog">
|
<div class="warehouse-dialog">
|
||||||
<div class="warehouse-header">
|
<div class="warehouse-header">
|
||||||
|
<!-- 非批量模式 -->
|
||||||
|
<template v-if="!isBulkDeleteMode">
|
||||||
<el-button type="primary" @click="handleAddTopLevel" :icon="Plus">
|
<el-button type="primary" @click="handleAddTopLevel" :icon="Plus">
|
||||||
新增顶级区域
|
新增顶级区域
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button type="success" @click="openBatchGenerate" :icon="Plus">
|
<el-button type="success" @click="openBatchGenerate" :icon="Plus">
|
||||||
批量生成
|
批量生成
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button type="danger" @click="handleBatchDelete" :disabled="selectedIds.length === 0" :icon="Delete">
|
<el-button type="danger" @click="isBulkDeleteMode = true" :icon="Delete">
|
||||||
批量删除 {{ selectedIds.length > 0 ? `(${selectedIds.length})` : '' }}
|
批量删除
|
||||||
</el-button>
|
</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>
|
</div>
|
||||||
<el-scrollbar height="450px">
|
<el-scrollbar height="450px">
|
||||||
<el-tree
|
<el-tree
|
||||||
@ -90,7 +102,7 @@
|
|||||||
:props="treeProps"
|
:props="treeProps"
|
||||||
:expand-on-click-node="false"
|
:expand-on-click-node="false"
|
||||||
:default-expand-all="false"
|
:default-expand-all="false"
|
||||||
show-checkbox
|
:show-checkbox="isBulkDeleteMode"
|
||||||
@check="handleTreeCheck"
|
@check="handleTreeCheck"
|
||||||
>
|
>
|
||||||
<template #default="{ node, data }">
|
<template #default="{ node, data }">
|
||||||
@ -152,7 +164,7 @@
|
|||||||
</el-dialog>
|
</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 :model="batchGenerateForm" label-width="100px">
|
||||||
<el-form-item label="父级库位">
|
<el-form-item label="父级库位">
|
||||||
<el-input :value="batchGenerateForm.parentName" disabled />
|
<el-input :value="batchGenerateForm.parentName" disabled />
|
||||||
@ -161,20 +173,20 @@
|
|||||||
<el-divider>层级规则(按顺序生成)</el-divider>
|
<el-divider>层级规则(按顺序生成)</el-divider>
|
||||||
<div v-for="(rule, index) in batchGenerateForm.rules" :key="index" class="rule-item">
|
<div v-for="(rule, index) in batchGenerateForm.rules" :key="index" class="rule-item">
|
||||||
<el-row :gutter="10">
|
<el-row :gutter="10">
|
||||||
<el-col :span="6">
|
<el-col :span="5">
|
||||||
<el-input v-model="rule.prefix" placeholder="前缀" />
|
<el-input v-model="rule.prefix" placeholder="前缀" />
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="5">
|
<el-col :span="6">
|
||||||
<el-input-number v-model="rule.start" :min="1" placeholder="起始" style="width: 100%" />
|
<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>
|
||||||
<el-col :span="5">
|
<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>
|
||||||
<el-col :span="4">
|
<el-col :span="2">
|
||||||
<el-input-number v-model="rule.pad" :min="1" :max="5" placeholder="补零" style="width: 100%" />
|
<el-button type="danger" :icon="Delete" @click="batchGenerateForm.rules.splice(index, 1)" style="width: 100%" />
|
||||||
</el-col>
|
|
||||||
<el-col :span="4">
|
|
||||||
<el-button type="danger" :icon="Delete" @click="batchGenerateForm.rules.splice(index, 1)" />
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
@ -203,7 +215,7 @@ import { useRouter } from 'vue-router'
|
|||||||
// 1. 引入 User Store
|
// 1. 引入 User Store
|
||||||
import { useUserStore } from '@/stores/user'
|
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 { getPrinterConfig, updatePrinterConfig } from '@/api/common/print'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { getWarehouseTree, createWarehouse, updateWarehouse, deleteWarehouse, batchDeleteWarehouse, batchGenerateWarehouse } from '@/api/common/warehouse'
|
import { getWarehouseTree, createWarehouse, updateWarehouse, deleteWarehouse, batchDeleteWarehouse, batchGenerateWarehouse } from '@/api/common/warehouse'
|
||||||
@ -302,11 +314,20 @@ const locationLoading = ref(false)
|
|||||||
|
|
||||||
// 批量删除相关
|
// 批量删除相关
|
||||||
const selectedIds = ref<number[]>([])
|
const selectedIds = ref<number[]>([])
|
||||||
|
const isBulkDeleteMode = ref(false)
|
||||||
|
|
||||||
const handleTreeCheck = (data: any, checked: any) => {
|
const handleTreeCheck = (data: any, checked: any) => {
|
||||||
selectedIds.value = checked.checkedKeys
|
selectedIds.value = checked.checkedKeys
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const cancelBatchMode = () => {
|
||||||
|
isBulkDeleteMode.value = false
|
||||||
|
selectedIds.value = []
|
||||||
|
if (treeRef.value) {
|
||||||
|
treeRef.value.setCheckedKeys([])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const handleBatchDelete = async () => {
|
const handleBatchDelete = async () => {
|
||||||
if (selectedIds.value.length === 0) {
|
if (selectedIds.value.length === 0) {
|
||||||
ElMessage.warning('请先选择要删除的库位')
|
ElMessage.warning('请先选择要删除的库位')
|
||||||
@ -323,7 +344,7 @@ const handleBatchDelete = async () => {
|
|||||||
const res = await batchDeleteWarehouse(selectedIds.value)
|
const res = await batchDeleteWarehouse(selectedIds.value)
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
ElMessage.success('批量删除成功')
|
ElMessage.success('批量删除成功')
|
||||||
selectedIds.value = []
|
cancelBatchMode()
|
||||||
await loadWarehouseTree()
|
await loadWarehouseTree()
|
||||||
} else {
|
} else {
|
||||||
ElMessage.error(res.msg || '删除失败')
|
ElMessage.error(res.msg || '删除失败')
|
||||||
|
|||||||
Reference in New Issue
Block a user