重构KLPService组件目录结构,将原有组件迁移至formItems子目录并新增多个表单选择组件。主要变更包括: 1. 移除CategorySelect组件及相关引用 2. 新增CraftSelect、AmountSelect、VendorSelect等表单组件 3. 优化WarehouseSelect组件支持禁用状态 4. 重构ProductSelect和RawMaterialSelect为卡片式选择器 5. 新增统一导出机制支持按需导入 同时更新相关视图文件以适配新的组件结构,改进代码可维护性和复用性。
122 lines
2.6 KiB
Vue
122 lines
2.6 KiB
Vue
<template>
|
|
<el-select
|
|
v-model="selected"
|
|
:placeholder="placeholder"
|
|
:clearable="clearable"
|
|
:disabled="disabled"
|
|
:size="size"
|
|
filterable
|
|
@change="onChange"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="item in warehouseOptions"
|
|
:key="item.warehouseId"
|
|
:label="item.warehouseName"
|
|
:value="item.warehouseId"
|
|
:disabled="item.isEnabled == 0"
|
|
>
|
|
<span :style="{ paddingLeft: item.level * 20 + 'px' }">
|
|
{{ item.warehouseName }}
|
|
</span>
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
|
|
<script>
|
|
import { listWarehouse } from '@/api/wms/warehouse';
|
|
|
|
export default {
|
|
name: 'WarehouseSelect',
|
|
props: {
|
|
value: {
|
|
type: [Number, String, null],
|
|
default: null
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '请选择仓库'
|
|
},
|
|
clearable: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'mini'
|
|
},
|
|
showTop: {
|
|
type: Boolean,
|
|
default: false // 是否显示顶级节点
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
warehouseOptions: [],
|
|
selected: this.value
|
|
};
|
|
},
|
|
watch: {
|
|
value(val) {
|
|
this.selected = val;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loadOptions();
|
|
},
|
|
methods: {
|
|
loadOptions() {
|
|
listWarehouse().then(response => {
|
|
console.log('仓库API返回数据:', response);
|
|
const data = response.data || [];
|
|
console.log('处理后的数据:', data);
|
|
this.warehouseOptions = this.buildTreeOptions(data);
|
|
console.log('构建的树形选项:', this.warehouseOptions);
|
|
}).catch(error => {
|
|
console.error("加载仓库选项失败:", error);
|
|
this.warehouseOptions = [];
|
|
});
|
|
},
|
|
buildTreeOptions(data, parentId = null, level = 0) {
|
|
const options = [];
|
|
|
|
data.forEach(item => {
|
|
if (item.parentId === parentId) {
|
|
const option = {
|
|
warehouseId: item.warehouseId,
|
|
warehouseName: item.warehouseName,
|
|
level: level,
|
|
isEnabled: item.isEnabled,
|
|
};
|
|
|
|
// 递归构建子节点
|
|
const children = this.buildTreeOptions(data, item.warehouseId, level + 1);
|
|
if (children.length > 0) {
|
|
options.push(option);
|
|
options.push(...children);
|
|
} else {
|
|
options.push(option);
|
|
}
|
|
}
|
|
});
|
|
|
|
return options;
|
|
},
|
|
onChange(val) {
|
|
this.$emit('input', val);
|
|
this.$emit('change', val);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.el-select {
|
|
width: 100%;
|
|
}
|
|
</style>
|