DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(仓库管理): 实现两级懒加载树结构并重构库位选择组件

Browse Source 
- 在 actualWarehouse.js 中新增两级树结构 API
- 重构 real.vue 使用懒加载方式展示仓库树
- 将 ActualWarehouseSelect 组件从 el-select 改为 el-cascader 实现级联选择
- 优化树形表格的展开逻辑和加载性能
This commit is contained in:
砂糖
2025-11-25 10:58:32 +08:00
parent 5d4eac555a
commit 67dbb34c28
3 changed files with 180 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
klp-ui/src/api/wms/actualWarehouse.js
View File

@@ -70,3 +70,12 @@ export function delActualWarehouse(actualWarehouseId) {
method: 'delete'
})
}
// 获取两级的树结构
export function treeActualWarehouseTwoLevel(query) {
return request({
url: '/wms/actualWarehouse/levelTwo',
method: 'get',
params: query
})
}

249
klp-ui/src/components/KLPService/ActualWarehouseSelect/index.vue
View File

@@ -1,56 +1,46 @@
<template>
<div :class="['actual-warehouse-select', { 'is-block': block }]" :style="wrapperStyle">
<el-select
v-model="innerValue"
<div
:class="['actual-warehouse-select', { 'is-block': block }]"
:style="wrapperStyle"
>
<el-cascader
ref="cascader"
v-model="innerPath"
:props="cascaderProps"
:placeholder="placeholder"
:clearable="clearable"
filterable
:filter-method="handleFilter"
:disabled="disabled"
size="small"
class="actual-warehouse-select__inner"
:show-all-levels="true"
:emit-path="true"
style="width: 100%;"
@change="handleChange"
@visible-change="handleVisibleChange"
>
<el-option
v-for="option in displayOptions"
:key="option.actualWarehouseId"
:label="option.fullLabel"
:value="option.actualWarehouseId"
>
<div class="option-content">
<span class="level-tag">{{ levelLabels[option.level] }}</span>
<span class="option-text">{{ option.fullLabel }}</span>
</div>
</el-option>
</el-select>
/>
</div>
</template>
<script>
import { listActualWarehouseTree } from '@/api/wms/actualWarehouse';
const LEVEL_LABELS = {
1: '一级',
2: '二级',
3: '三级'
};
import { listActualWarehouse } from '@/api/wms/actualWarehouse';
export default {
name: 'ActualWarehouseSelect',
props: {
// 对外仍然是「单个 ID」，即第三级 actualWarehouseId
value: {
type: [Number, String, null],
default: null
},
placeholder: {
type: String,
default: '请选择实际库区/库位'
default: '请选择实际库位'
},
clearable: {
type: Boolean,
default: true
},
// 已经不再显示“最高级”
showTop: {
type: Boolean,
default: false
},
block: {
type: Boolean,
default: false
@@ -59,99 +49,147 @@ export default {
type: [String, Number],
default: 240
},
disabled: {
type: Boolean,
default: false
size: {
type: String,
default: 'small'
}
},
data() {
return {
innerValue: this.value,
flatOptions: [],
displayOptions: [],
levelLabels: LEVEL_LABELS
// 级联组件内部使用的「路径值」，例如 [一级ID, 二级ID, 三级ID]
innerPath: [],
// 记录所有已加载节点（如果后面要根据 ID 反查路径，可复用）
allLoadedNodes: []
};
},
computed: {
wrapperStyle() {
const widthValue = this.block ? '100%' : (typeof this.width === 'number' ? `${this.width}px` : this.width);
const widthValue = this.block
? '100%'
: (typeof this.width === 'number' ? `${this.width}px` : this.width);
return { width: widthValue };
},
// el-cascader 的 props 配置
cascaderProps() {
return {
lazy: true,
lazyLoad: this.loadNode, // 懒加载方法
checkStrictly: false, // 只允许选叶子节点
value: 'value',
label: 'label',
children: 'children'
};
}
},
watch: {
// 外部把 value 置空时，同步清空面板
value(val) {
this.innerValue = val;
if (val == null || val === '') {
this.innerPath = [];
}
}
},
created() {
this.fetchTree();
},
methods: {
async fetchTree() {
try {
const res = await listActualWarehouseTree();
this.flatOptions = this.flattenTree(res.data || []);
this.displayOptions = [...this.flatOptions];
} catch (error) {
console.error('获取实际库区树失败', error);
}
},
/**
* 级联懒加载
* node.level:
* 0：根（还没选任何东西，parentId = 0 -> 加载一级）
* 1：一级节点，加载二级
* 2：二级节点，加载三级（三级设为叶子，不再展开）
*/
loadNode(node, resolve) {
const { level, value } = node;
flattenTree(nodes, parentPath = [], level = 1) {
const result = [];
nodes.forEach(node => {
const path = [...parentPath, node.actualWarehouseName];
const current = {
actualWarehouseId: node.actualWarehouseId,
parentId: node.parentId || 0,
level,
fullLabel: path.join(' / '),
descendantIds: [],
children: node.children || []
};
result.push(current);
if (node.children && node.children.length) {
const children = this.flattenTree(node.children, path, level + 1);
children.forEach(child => {
current.descendantIds.push(child.actualWarehouseId);
current.descendantIds.push(...child.descendantIds);
});
result.push(...children);
}
});
return result;
},
handleFilter(keyword) {
const text = (keyword || '').trim();
if (!text) {
this.displayOptions = [...this.flatOptions];
// 超过第三级就不再加载
if (level >= 3) {
resolve([]);
return;
}
const matchedIds = new Set();
this.flatOptions.forEach(option => {
if (option.fullLabel.includes(text)) {
matchedIds.add(option.actualWarehouseId);
option.descendantIds.forEach(id => matchedIds.add(id));
}
const parentId = level === 0 ? 0 : value;
listActualWarehouse({ parentId }).then(res => {
const list = (res.data || []).map(item => {
const nextLevel = level + 1;
const isLeafLevel = nextLevel >= 3; // 第三级为叶子，不能再展开
const nodeData = {
value: item.actualWarehouseId,
label: item.actualWarehouseName,
leaf: isLeafLevel,
// 只有第三级可选；一、二级全部 disabled
disabled: nextLevel == 3 && !item.isEnabled,
// 保留原始数据和层级
raw: item,
level: nextLevel
};
this.registerNode(nodeData);
return nodeData;
});
resolve(list);
}).catch(err => {
console.error('加载仓库树失败：', err);
resolve([]);
});
this.displayOptions = this.flatOptions.filter(option => matchedIds.has(option.actualWarehouseId));
},
handleVisibleChange(visible) {
if (!visible) {
this.displayOptions = [...this.flatOptions];
/** 把节点放进缓存数组里，后面如需扩展可用 */
registerNode(node) {
const id = node.value;
const idx = this.allLoadedNodes.findIndex(
n => String(n.value) === String(id)
);
if (idx === -1) {
this.allLoadedNodes.push(node);
} else {
this.$set(this.allLoadedNodes, idx, {
...this.allLoadedNodes[idx],
...node
});
}
},
handleChange(val) {
this.$emit('input', val);
const node = this.flatOptions.find(option => option.actualWarehouseId === val);
this.$emit('select', node);
/**
* 选中变化：
* value 是路径数组，如 [一级ID, 二级ID, 三级ID]
* 我们对外只抛最后一个（第三级）ID
*/
handleChange(value) {
if (!Array.isArray(value) || value.length === 0) {
this.$emit('input', null);
this.$emit('select', null);
return;
}
const leafId = value[value.length - 1];
// 拿到当前选中节点，获取完整路径信息
const nodes = this.$refs.cascader.getCheckedNodes();
let payload = null;
if (nodes && nodes.length > 0) {
const node = nodes[0];
const pathNodes = node.path || [];
payload = {
id: leafId,
pathIds: pathNodes.map(n => n.value),
pathLabels: pathNodes.map(n => n.label),
// 原始 data（如果需要后台做别的处理可以用）
rawPath: pathNodes.map(n => n.data || n.raw || {})
};
}
this.$emit('input', leafId);
this.$emit('select', payload);
},
/** 外部刷新：如果以后需要强制重载，可以扩展这里（目前不需要缓存） */
refresh() {
this.fetchTree();
this.innerPath = [];
this.allLoadedNodes = [];
// el-cascader 的懒加载不需要预载，这里清空即可
}
}
};
@@ -160,30 +198,15 @@ export default {
<style scoped>
.actual-warehouse-select {
display: inline-block;
width: 100%;
}
.actual-warehouse-select.is-block {
width: 100%;
}
.actual-warehouse-select__inner {
/* 让级联宽度占满容器，其他高度、边框等跟 el-select 共用全局 .el-input__inner 样式 */
.actual-warehouse-select .el-cascader {
width: 100%;
}
.option-content {
display: flex;
align-items: center;
gap: 8px;
}
.level-tag {
font-size: 12px;
color: #909399;
width: 34px;
}
.option-text {
font-size: 13px;
color: #606266;
}
</style>

39
klp-ui/src/views/wms/warehouse/real.vue
View File

@@ -65,8 +65,11 @@
:data="filteredTreeData"
row-key="actualWarehouseId"
:default-expand-all="isExpandAll"
:expand-row-keys="expandRowKeys"
class="warehouse-table"
:tree-props="{ children: 'children' }"
lazy
:load="handleLoad"
>
<el-table-column label="层级" align="center">
<template slot-scope="scope">
@@ -331,10 +334,12 @@ import {
addActualWarehouse,
updateActualWarehouse,
createActualWarehouseHierarchy,
importActualWarehouse
importActualWarehouse,
treeActualWarehouseTwoLevel
} from "@/api/wms/actualWarehouse";
import QRCode from "../print/components/QRCode.vue";
import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
import { listActualWarehouse } from "../../../api/wms/actualWarehouse";
const LEVELS = [1, 2, 3];
const LEVEL_LABELS = {
@@ -350,7 +355,7 @@ export default {
return {
showSearch: true,
loading: false,
isExpandAll: true,
isExpandAll: false,
warehouseTree: [],
filteredCache: [],
nodeIndex: {},
@@ -416,6 +421,9 @@ export default {
return this.warehouseTree;
}
return this.filterTree(this.warehouseTree, keyword, levelFilter);
},
expandRowKeys() {
return this.warehouseTree.map(item => item.actualWarehouseId);
}
},
created() {
@@ -442,9 +450,17 @@ export default {
},
getTreeData() {
this.loading = true;
listActualWarehouseTree({ actualWarehouseName: this.queryParams.keyword })
treeActualWarehouseTwoLevel({ actualWarehouseName: this.queryParams.keyword })
.then(res => {
const list = res.data || [];
const list = res.data.map(item => {
// 便利item的children中的每一项
item.children = item.children || [];
item.children.forEach(child => {
delete child.children;
child.hasChildren = true;
});
return item;
}) || [];
this.decorateTree(list);
})
.finally(() => {
@@ -500,6 +516,21 @@ export default {
this.toggleTreeRows(this.filteredTreeData, this.isExpandAll);
});
},
handleLoad(treeData, treeNode, resolve) {
console.log(treeData, treeNode);
listActualWarehouse({ parentId: treeData.actualWarehouseId })
.then(res => {
const list = res.data.map(item => {
item.hasChildren = false;
item.level = treeData.level + 1;
return item;
}) || [];
resolve(list);
})
.catch(() => {
resolve([]);
});
},
toggleTreeRows(nodes, expand) {
const table = this.$refs.treeTable;
if (!table || !Array.isArray(nodes)) return;