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

@ -327,16 +327,15 @@
</el-col>
<el-col :span="6">
<el-form-item label="库位" prop="warehouse_location">
<el-autocomplete
v-model="form.warehouse_location"
:fetch-suggestions="querySearchLocation"
placeholder="例如: A-01-02"
style="width: 100%"
clearable
:trigger-on-focus="true"
>
<template #default="{ item }"><div style="font-weight: 500">{{ item.value }}</div></template>
</el-autocomplete>
<el-cascader
v-model="form.warehouse_location"
:options="warehouseOptions"
:props="{ value: 'full_path', label: 'name', children: 'children', checkStrictly: true, emitPath: false }"
placeholder="请选择库位"
style="width: 100%"
clearable
filterable
/>
</el-form-item>
</el-col>
</el-row>
@ -653,6 +652,7 @@ import {
getFilterOptions
} from '@/api/inbound/buy'
import {getLabelPreview, executePrint} from '@/api/common/print'
import { getWarehouseTree } from '@/api/common/warehouse'
import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue'
import { useUserStore } from '@/stores/user'
@ -782,6 +782,9 @@ const cameraRef = ref<InstanceType<typeof WebRtcCamera> | null>(null)
const currentCameraField = ref<'arrival_photo' | 'inspection_report'>('arrival_photo')
const inspection_report_url = ref('')
// 库位级联选择器数据
const warehouseOptions = ref<any[]>([])
const advancedFilterVisible = ref(false)
const advancedConditions = ref([{ field: '', operator: '', value: '' }])
const fieldOptions = computed(() => {
@ -1227,6 +1230,18 @@ const fetchOptions = async () => {
}
}
// 加载库位树数据
const loadWarehouseTree = async () => {
try {
const res = await getWarehouseTree()
if (res.code === 200) {
warehouseOptions.value = res.data || []
}
} catch (e) {
console.error('加载库位树失败', e)
}
}
const resetQuery = () => {
queryParams.keyword = ''
queryParams.category = ''
@ -1524,6 +1539,7 @@ onMounted(() => {
initColumnPermissions()
fetchData()
fetchOptions()
loadWarehouseTree()
})
</script>