feat: 封装下钻式库位选择器,并修复层级颜色识别问题

This commit is contained in:
DXC
2026-03-06 15:11:30 +08:00
parent 8aaf45468e
commit f9eb3e9646
5 changed files with 303 additions and 47 deletions

View File

@ -214,14 +214,14 @@ const savePrinterConfig = async () => {
// ==================== 库位管理相关 ====================
// 根据层级返回"新增下级"按钮颜色
// 第1层(顶级)=primary蓝色, 第2层=success绿色, 第3层=warning橙色, 第4层及以上=info灰
// el-tree中顶层节点level=1第1层=primary蓝色第2层=success绿色第3层=warning橙色第4层及以上=danger红
const getAddBtnType = (level: number) => {
const levelTypes: Record<number, string> = {
0: 'primary', // 第1层(顶级)
1: 'success', // 第2层
2: 'warning', // 第3层
1: 'primary', // 第1层(顶级)
2: 'success', // 第2层
3: 'warning', // 第3层
}
return levelTypes[level] || 'info' // 第4层及以上
return levelTypes[level] || 'danger' // 第4层及以上
}
const warehouseDialogVisible = ref(false)

View File

@ -327,21 +327,10 @@
</el-col>
<el-col :span="6">
<el-form-item label="库位" prop="warehouse_location">
<el-tree-select
<WarehouseSelector
v-model="form.warehouse_location"
:data="warehouseOptions"
:props="{ label: 'full_path', value: 'full_path', children: 'children' }"
placeholder="请选择库位"
style="width: 100%"
clearable
filterable
check-strictly
:render-after-expand="false"
>
<template #default="{ data }">
<span>{{ data.name }}</span>
</template>
</el-tree-select>
:options="warehouseOptions"
/>
</el-form-item>
</el-col>
</el-row>
@ -660,6 +649,7 @@ import {
import {getLabelPreview, executePrint} from '@/api/common/print'
import { getWarehouseTree } from '@/api/common/warehouse'
import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue'
import WarehouseSelector from '@/components/WarehouseSelector.vue'
import { useUserStore } from '@/stores/user'
// ------------------------------------

View File

@ -287,21 +287,10 @@
<el-row :gutter="24">
<el-col :span="6"><el-form-item label="SKU" prop="sku"><el-input v-model="form.sku" placeholder="自动生成" disabled /></el-form-item></el-col>
<el-col :span="6"><el-form-item label="库位" prop="warehouse_location">
<el-tree-select
<WarehouseSelector
v-model="form.warehouse_location"
:data="warehouseOptions"
:props="{ label: 'full_path', value: 'full_path', children: 'children' }"
placeholder="请选择库位"
style="width: 100%"
clearable
filterable
check-strictly
:render-after-expand="false"
>
<template #default="{ data }">
<span>{{ data.name }}</span>
</template>
</el-tree-select>
:options="warehouseOptions"
/>
</el-form-item></el-col>
<el-col :span="6"><el-form-item label="入库日期"><el-date-picker v-model="form.in_date" type="date" value-format="YYYY-MM-DD" style="width:100%" disabled /></el-form-item></el-col>
</el-row>
@ -528,6 +517,7 @@ import {
} from '@/api/inbound/product'
import { uploadFile, deleteFile } from '@/api/inbound/buy'
import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue'
import WarehouseSelector from '@/components/WarehouseSelector.vue'
import { getLabelPreview, executePrint } from '@/api/common/print'
import { getWarehouseTree } from '@/api/common/warehouse'
import { useUserStore } from '@/stores/user'

View File

@ -346,21 +346,10 @@
<el-col :span="6"><el-form-item label="编码/SKU" prop="sku"><el-input v-model="form.sku" placeholder="系统自动生成" disabled/></el-form-item></el-col>
<el-col :span="6"><el-form-item label="入库日期" prop="in_date"><el-date-picker v-model="form.in_date" type="date" value-format="YYYY-MM-DD" style="width:100%" disabled/></el-form-item></el-col>
<el-col :span="6"><el-form-item label="库位" prop="warehouse_location">
<el-tree-select
<WarehouseSelector
v-model="form.warehouse_location"
:data="warehouseOptions"
:props="{ label: 'full_path', value: 'full_path', children: 'children' }"
placeholder="请选择库位"
style="width: 100%"
clearable
filterable
check-strictly
:render-after-expand="false"
>
<template #default="{ data }">
<span>{{ data.name }}</span>
</template>
</el-tree-select>
:options="warehouseOptions"
/>
</el-form-item></el-col>
</el-row>
@ -592,6 +581,7 @@ import {
} from '@/api/inbound/semi'
import { uploadFile, deleteFile } from '@/api/inbound/buy'
import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue'
import WarehouseSelector from '@/components/WarehouseSelector.vue'
import {getLabelPreview, executePrint} from '@/api/common/print'
import { getWarehouseTree } from '@/api/common/warehouse'
import { useUserStore } from '@/stores/user'