style:仓储管理-入库/出库-产品名称下拉框改为级联

main
黄伟杰 24 hours ago
parent a7331d5154
commit 3287fa3770

@ -37,20 +37,17 @@
<el-table-column label="产品名称" min-width="180">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.productId`" :rules="formRules.productId" class="mb-0px!">
<el-select
<el-cascader
v-model="row.productId"
:options="productCascaderOptions"
:props="productCascaderProps"
:show-all-levels="false"
clearable
filterable
@change="onChangeProduct($event, row)"
placeholder="请选择产品"
>
<el-option
v-for="item in productList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
class="!w-100%"
/>
</el-form-item>
</template>
</el-table-column>
@ -156,6 +153,36 @@ const productList = ref<ProductVO[]>([]) // 产品列表
const warehouseList = ref<WarehouseVO[]>([]) //
const defaultWarehouse = ref<WarehouseVO>(undefined) //
const productCascaderProps = {
emitPath: false,
value: 'value',
label: 'label',
children: 'children'
}
const productCascaderOptions = computed(() => {
const map = new Map<number | string, { value: number | string; label: string; children: any[] }>()
for (const item of productList.value) {
const categoryKey = item.categoryId ?? item.categoryName ?? ''
const categoryLabel = item.categoryName ?? String(categoryKey)
if (!map.has(categoryKey)) {
map.set(categoryKey, {
value: categoryKey,
label: categoryLabel,
children: []
})
}
const group = map.get(categoryKey)
if (group) {
group.children.push({
value: item.id,
label: item.name
})
}
}
return Array.from(map.values())
})
/** 初始化设置入库项 */
watch(
() => props.items,

@ -37,20 +37,17 @@
<el-table-column label="产品名称" min-width="180">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.productId`" :rules="formRules.productId" class="mb-0px!">
<el-select
<el-cascader
v-model="row.productId"
:options="productCascaderOptions"
:props="productCascaderProps"
:show-all-levels="false"
clearable
filterable
@change="onChangeProduct($event, row)"
placeholder="请选择产品"
>
<el-option
v-for="item in productList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
class="!w-100%"
/>
</el-form-item>
</template>
</el-table-column>
@ -156,6 +153,36 @@ const productList = ref<ProductVO[]>([]) // 产品列表
const warehouseList = ref<WarehouseVO[]>([]) //
const defaultWarehouse = ref<WarehouseVO>(undefined) //
const productCascaderProps = {
emitPath: false,
value: 'value',
label: 'label',
children: 'children'
}
const productCascaderOptions = computed(() => {
const map = new Map<number | string, { value: number | string; label: string; children: any[] }>()
for (const item of productList.value) {
const categoryKey = item.categoryId ?? item.categoryName ?? ''
const categoryLabel = item.categoryName ?? String(categoryKey)
if (!map.has(categoryKey)) {
map.set(categoryKey, {
value: categoryKey,
label: categoryLabel,
children: []
})
}
const group = map.get(categoryKey)
if (group) {
group.children.push({
value: item.id,
label: item.name
})
}
}
return Array.from(map.values())
})
/** 初始化设置出库项 */
watch(
() => props.items,

Loading…
Cancel
Save