feat: 优化库位树UI层级颜色,并将入库页面库位输入升级为级联选择器

This commit is contained in:
DXC
2026-03-06 14:52:47 +08:00
parent 359b8a8345
commit 7201b658fb
7 changed files with 341 additions and 20 deletions

View File

@ -84,13 +84,31 @@
<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
:type="getLevelButtonType(node.level, 'add')"
link
size="small"
@click="handleAddChild(data)"
:icon="Plus"
>
新增下级
</el-button>
<el-button type="warning" link size="small" @click="handleEdit(data)" :icon="Edit">
<el-button
:type="getLevelButtonType(node.level, 'edit')"
link
size="small"
@click="handleEdit(data)"
:icon="Edit"
>
编辑
</el-button>
<el-button type="danger" link size="small" @click="handleDelete(data)" :icon="Delete">
<el-button
:type="getLevelButtonType(node.level, 'delete')"
link
size="small"
@click="handleDelete(data)"
:icon="Delete"
>
删除
</el-button>
</span>
@ -195,6 +213,21 @@ const savePrinterConfig = async () => {
}
// ==================== 库位管理相关 ====================
// 根据层级返回按钮颜色类型
const getLevelButtonType = (level: number, action: string) => {
// 层级颜色映射
const levelColors: Record<number, Record<string, string>> = {
0: { add: 'primary', edit: 'info', delete: 'danger' }, // 顶级: 蓝/灰/红
1: { add: 'success', edit: 'warning', delete: 'danger' }, // 二级: 绿/橙/红
2: { add: 'warning', edit: 'info', delete: 'danger' }, // 三级: 橙/灰/红
}
// 4级及以上统一使用危险色
if (level >= 3) {
return 'danger'
}
return levelColors[level]?.[action] || 'primary'
}
const warehouseDialogVisible = ref(false)
const treeRef = ref()
const treeData = ref<any[]>([])