"feat: 1-实现动态层级树形库位管理功能
2 - 首页新增库位设置按钮和树形管理弹窗
3 - 后端添加 SysWarehouseLocation 模型和 CRUD API
4 - 树形结构支持无限层级，自动计算 full_path
5 - 修复 product.vue 中 defaultColumns 未定义 bug
This commit is contained in:
@ -5,6 +5,9 @@
|
||||
<div class="card-header">
|
||||
<span class="title">👋 欢迎回来，{{ userStore.username }}</span>
|
||||
<div style="display: flex; align-items: center; gap: 10px;">
|
||||
<el-button type="primary" plain size="small" @click="openWarehouseDialog" :icon="Location" class="warehouse-btn">
|
||||
库位设置
|
||||
</el-button>
|
||||
<el-tag type="success">系统运行正常</el-tag>
|
||||
<el-button type="info" plain size="small" @click="openPrinterDialog" :icon="Setting" class="printer-btn">
|
||||
打印设置
|
||||
@ -36,6 +39,7 @@
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 打印机配置弹窗 -->
|
||||
<el-dialog v-model="printerDialogVisible" title="打印机 IP 配置" width="500px">
|
||||
<el-form :model="printerForm" label-width="120px">
|
||||
<el-form-item label="标签打印机 IP">
|
||||
@ -59,6 +63,63 @@
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 库位管理弹窗 -->
|
||||
<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>
|
||||
</div>
|
||||
<el-scrollbar height="450px">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="treeData"
|
||||
node-key="id"
|
||||
:props="treeProps"
|
||||
:expand-on-click-node="false"
|
||||
:default-expand-all="true"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<div class="tree-node">
|
||||
<span class="node-label">{{ node.label }}</span>
|
||||
<span class="node-actions">
|
||||
<el-button type="primary" link size="small" @click="handleAddChild(data)" :icon="Plus">
|
||||
新增下级
|
||||
</el-button>
|
||||
<el-button type="warning" link size="small" @click="handleEdit(data)" :icon="Edit">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="danger" link size="small" @click="handleDelete(data)" :icon="Delete">
|
||||
删除
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 新增/编辑库位弹窗 -->
|
||||
<el-dialog v-model="locationFormVisible" :title="locationFormTitle" width="400px">
|
||||
<el-form :model="locationForm" label-width="80px">
|
||||
<el-form-item label="上级库位">
|
||||
<el-input :value="locationForm.parentName" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" required>
|
||||
<el-input v-model="locationForm.name" placeholder="请输入库位名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="启用状态">
|
||||
<el-switch v-model="locationForm.is_enabled" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="locationFormVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveLocation" :loading="locationLoading">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -68,9 +129,10 @@ import { useRouter } from 'vue-router'
|
||||
// 1. 引入 User Store
|
||||
import { useUserStore } from '@/stores/user'
|
||||
// 引入需要的图标
|
||||
import { Box, TrendCharts, ShoppingCart, Operation, Setting } from '@element-plus/icons-vue'
|
||||
import { Box, TrendCharts, ShoppingCart, Operation, Setting, Location, Plus, Edit, Delete } from '@element-plus/icons-vue'
|
||||
import { getPrinterConfig, updatePrinterConfig } from '@/api/common/print'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getWarehouseTree, createWarehouse, updateWarehouse, deleteWarehouse } from '@/api/common/warehouse'
|
||||
|
||||
const router = useRouter()
|
||||
// 2. 实例化 store
|
||||
@ -132,6 +194,141 @@ const savePrinterConfig = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 库位管理相关 ====================
|
||||
const warehouseDialogVisible = ref(false)
|
||||
const treeRef = ref()
|
||||
const treeData = ref<any[]>([])
|
||||
const treeProps = {
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
}
|
||||
|
||||
// 库位表单
|
||||
const locationFormVisible = ref(false)
|
||||
const locationFormTitle = ref('')
|
||||
const locationForm = reactive({
|
||||
id: undefined as number | undefined,
|
||||
parent_id: null as number | null,
|
||||
parentName: '无（顶级）',
|
||||
name: '',
|
||||
is_enabled: true
|
||||
})
|
||||
const locationLoading = ref(false)
|
||||
|
||||
// 打开库位管理弹窗
|
||||
const openWarehouseDialog = async () => {
|
||||
await loadWarehouseTree()
|
||||
warehouseDialogVisible.value = true
|
||||
}
|
||||
|
||||
// 加载库位树
|
||||
const loadWarehouseTree = async () => {
|
||||
try {
|
||||
const res = await getWarehouseTree()
|
||||
if (res.code === 200) {
|
||||
treeData.value = res.data || []
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
// 新增顶级区域
|
||||
const handleAddTopLevel = () => {
|
||||
locationForm.id = undefined
|
||||
locationForm.parent_id = null
|
||||
locationForm.parentName = '无（顶级）'
|
||||
locationForm.name = ''
|
||||
locationForm.is_enabled = true
|
||||
locationFormTitle.value = '新增顶级库位'
|
||||
locationFormVisible.value = true
|
||||
}
|
||||
|
||||
// 新增下级
|
||||
const handleAddChild = (data: any) => {
|
||||
locationForm.id = undefined
|
||||
locationForm.parent_id = data.id
|
||||
locationForm.parentName = data.full_path || data.name
|
||||
locationForm.name = ''
|
||||
locationForm.is_enabled = true
|
||||
locationFormTitle.value = `新增下级库位：${data.name}`
|
||||
locationFormVisible.value = true
|
||||
}
|
||||
|
||||
// 编辑
|
||||
const handleEdit = (data: any) => {
|
||||
locationForm.id = data.id
|
||||
locationForm.parent_id = data.parent_id
|
||||
locationForm.parentName = data.parent_id ? data.parent_full_path || '无（顶级）' : '无（顶级）'
|
||||
locationForm.name = data.name
|
||||
locationForm.is_enabled = data.is_enabled
|
||||
locationFormTitle.value = `编辑库位：${data.name}`
|
||||
locationFormVisible.value = true
|
||||
}
|
||||
|
||||
// 删除
|
||||
const handleDelete = async (data: any) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除库位「${data.name}」吗？${data.children && data.children.length > 0 ? '该操作将同时删除所有子库位。' : ''}`,
|
||||
'警告',
|
||||
{ type: 'warning', confirmButtonText: '确定', cancelButtonText: '取消' }
|
||||
)
|
||||
|
||||
const res = await deleteWarehouse(data.id)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('删除成功')
|
||||
await loadWarehouseTree()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '删除失败')
|
||||
}
|
||||
} catch (e) {
|
||||
// 用户取消
|
||||
}
|
||||
}
|
||||
|
||||
// 保存库位
|
||||
const saveLocation = async () => {
|
||||
if (!locationForm.name.trim()) {
|
||||
ElMessage.warning('请输入库位名称')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
locationLoading.value = true
|
||||
const payload: any = {
|
||||
name: locationForm.name.trim(),
|
||||
is_enabled: locationForm.is_enabled
|
||||
}
|
||||
|
||||
if (locationForm.parent_id) {
|
||||
payload.parent_id = locationForm.parent_id
|
||||
}
|
||||
|
||||
let res
|
||||
if (locationForm.id) {
|
||||
// 编辑
|
||||
payload.id = locationForm.id
|
||||
res = await updateWarehouse(payload)
|
||||
} else {
|
||||
// 新增
|
||||
res = await createWarehouse(payload)
|
||||
}
|
||||
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('保存成功')
|
||||
locationFormVisible.value = false
|
||||
await loadWarehouseTree()
|
||||
} else {
|
||||
ElMessage.error(res.msg || '保存失败')
|
||||
}
|
||||
} catch (e) {
|
||||
ElMessage.error('请求异常')
|
||||
} finally {
|
||||
locationLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 统一跳转函数
|
||||
const handleNav = (path: string) => {
|
||||
router.push(path)
|
||||
@ -197,4 +394,26 @@ const handleNav = (path: string) => {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 库位管理弹窗样式 */
|
||||
.warehouse-dialog {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.warehouse-header {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.node-label {
|
||||
font-size: 14px;
|
||||
}
|
||||
.node-actions {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user