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

feat(仓库管理): 实现实际仓库的懒加载功能

Browse Source 
- 在WarehouseTree组件中为实际仓库类型添加懒加载支持
- 重构ActualWarehouseSelect组件实现树形选择器的懒加载
- 在real.vue页面中使用懒加载表格展示仓库数据
- 优化表单验证和操作逻辑，提升用户体验
This commit is contained in:
砂糖
2025-11-24 15:45:08 +08:00
parent 6113798ac7
commit 473067220a
3 changed files with 269 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<template>
<div style="width: 100%; max-width: 200px;">
<div style="width: 100%; max-width: 300px;">
<treeselect
:max-height="200"
v-model="innerValue"
@@ -7,9 +7,8 @@
:normalizer="normalizer"
:placeholder="placeholder"
:clearable="clearable"
:disable-branch-nodes="true"
:show-count="true"
search-nested
:load-options="loadOptions"
@input="onInput"
/>
</div>
@@ -19,15 +18,14 @@
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { listActualWarehouse } from '@/api/wms/actualWarehouse';
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect';
export default {
name: 'ActualWarehouseSelect',
components: { Treeselect },
props: {
value: {
type: [Number, String, null],
type: [Number, String, null], // 仅保留单选类型
default: null
},
placeholder: {
@@ -40,72 +38,119 @@ export default {
},
showTop: {
type: Boolean,
default: true // 是否显示顶级节点
default: true // 是否显示顶级节点（actualWarehouseId=0）
}
},
data() {
return {
warehouseOptions: [],
innerValue: this.value,
list: []
warehouseOptions: [], // 初始选项（含未加载子节点的节点，标记 children: null）
loadedChildren: {}, // 缓存已加载的子节点：key=父节点ID，value=子节点数组
allLoadedNodes: [] // 存储所有已加载的节点，用于快速查找完整对象
};
},
watch: {
value(val) {
this.innerValue = val;
}
},
},
mounted() {
this.loadOptions();
this.initOptions();
},
methods: {
loadOptions() {
listActualWarehouse().then(response => {
this.list = response.data.map(item => ({
...item,
isDisabled: !item.isEnabled
}));
const options = [];
if (this.showTop) {
const top = { actualWarehouseId: 0, actualWarehouseName: '顶级节点', children: [] };
top.children = this.handleTree(response.data, 'actualWarehouseId', 'parentId');
options.push(top);
} else {
options.push(...this.handleTree(response.data, 'actualWarehouseId', 'parentId'));
}
this.warehouseOptions = options;
});
},
handleTree(data, id, parentId) {
const cloneData = JSON.parse(JSON.stringify(data));
return cloneData.filter(father => {
const branchArr = cloneData.filter(child => father[id] === child[parentId]);
if (branchArr.length > 0) father.children = branchArr;
return father[parentId] === 0 || father[parentId] === null;
});
},
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
/** 初始化顶级选项 */
initOptions() {
// 重置状态
this.loadedChildren = {};
this.allLoadedNodes = [];
this.warehouseOptions = [];
if (this.showTop) {
// 显示顶级节点：标记 children: null 表示需要懒加载子节点
const topNode = {
actualWarehouseId: 0,
actualWarehouseName: '顶级节点',
children: null, // 关键：标记为未加载子节点
isDisabled: false
};
this.warehouseOptions.push(topNode);
this.allLoadedNodes.push(topNode);
} else {
// 不显示顶级节点：直接加载 parentId=0 的节点作为顶级（初始标记为未加载）
this.warehouseOptions.push({
actualWarehouseId: 'temp-parent-0', // 临时父节点ID（仅用于触发首次加载）
actualWarehouseName: '加载中...',
children: null,
isDisabled: true
});
// 触发首次加载 parentId=0 的节点
this.loadOptions({
action: LOAD_CHILDREN_OPTIONS,
parentNode: { id: 0 },
callback: (children) => {
this.warehouseOptions = children;
}
});
}
},
/** 懒加载核心方法 */
loadOptions({ action, parentNode, callback, instanceId }) {
// 仅处理 "加载子节点" 动作
if (action !== LOAD_CHILDREN_OPTIONS) {
callback();
return;
}
console.log('加载子节点请求参数：', parentNode);
const parentId = parentNode.actualWarehouseId; // 当前父节点ID（对应 actualWarehouseId）
// 2. 调用接口加载子节点（parentId 作为查询条件）
listActualWarehouse({ parentId }).then(response => {
const children = response.data.map(item => ({
...item,
isDisabled: !item.isEnabled, // 禁用未启用的节点
children: item.hasChildren ?? true ? null : [] // 有子节点则标记 children: null（需懒加载），否则空数组
}));
// 如果没有子节点了，则不添加children属性
if (children.length === 0) {
delete parentNode.children;
callback()
return;
}
// 5. 给父节点赋值子节点（treeselect 自动渲染）
parentNode.children = children;
// 6. 回调通知加载成功
callback();
}).catch((error) => {
console.error('加载子节点失败：', error);
callback(new Error('加载失败，请重试'));
});
},
/** 节点格式标准化 */
normalizer(node) {
return {
id: node.actualWarehouseId,
label: node.actualWarehouseName,
children: node.children
id: node.actualWarehouseId, // 节点唯一ID
label: node.actualWarehouseName, // 显示文本
children: node.children, // 子节点（null=未加载，[]=无节点）
isDisabled: node.isDisabled, // 是否禁用
raw: node // 保留原始节点数据，方便后续查找
};
},
/** 选中值变化时触发（仅单选） */
onInput(val) {
// 选中顶级节点时，返回null
if (val === 0) {
this.$emit('input', 0);
this.innerValue = 0;
} else {
this.$emit('input', val);
// 查找完整的实际仓库对象
const actualWarehouse = this.list.find(item => item.actualWarehouseId === val);
this.$emit('change', actualWarehouse);
}
this.$emit('input', val);
},
/** 外部刷新方法（如需重新加载数据可调用） */
refresh() {
this.initOptions();
}
}
};
</script>
</script>

54
klp-ui/src/components/KLPService/WarehouseTree/index.vue
View File

@@ -1,16 +1,7 @@
<template>
<el-tree
v-loading="loading"
:data="treeData"
:props="treeProps"
node-key="warehouseId"
highlight-current
@node-click="handleNodeClick"
:expand-on-click-node="false"
:default-expand-all="true"
class="stock-tree"
/>
<el-tree v-loading="loading" :data="treeData" :props="treeProps" node-key="warehouseId" highlight-current
@node-click="handleNodeClick" :expand-on-click-node="false"
:lazy="this.warehouseType === 'real'" :load="loadChildren" class="stock-tree" />
</template>
<script>
@@ -45,16 +36,28 @@ export default {
}
},
methods: {
loadChildren(node, resolve) {
console.log(node);
if (node.level === 0) {
// resolve(this.handleTree(this.treeData, 'warehouseId', 'parentId'));
} else {
listActualWarehouse({ parentId: node.data.actualWarehouseId }).then(response => {
resolve(response.data.map(item => ({
...item,
warehouseLabel: item.actualWarehouseName
})));
});
}
},
getWarehouseTree() {
this.loading = true;
if (this.warehouseType === 'real') {
listActualWarehouse({ pageSize: 1000 }).then(response => {
this.treeData = response.rows.map(item => ({
listActualWarehouse({ parentId: 0 }).then(response => {
this.treeData = response.data.map(item => ({
...item,
warehouseLabel: item.actualWarehouseName
}))
this.loading = false;
// this.treeData = [{ warehouseName: '全部', value: undefined }, ...this.handleTree(response.rows, 'warehouseId', 'parentId')];
});
} else {
listWarehouse().then(response => {
@@ -63,7 +66,6 @@ export default {
warehouseLabel: item.warehouseName
}))
this.loading = false;
// this.treeData = [{ warehouseName: '全部', value: undefined }, ...this.handleTree(response.data, 'warehouseId', 'parentId')];
});
}
},
@@ -80,22 +82,4 @@ export default {
}
}
};
</script>
<!-- <style scoped>
.stock-tree-card {
height: 100%;
border: none;
box-shadow: none;
}
.stock-tree-title {
font-weight: bold;
font-size: 16px;
padding: 8px 0;
}
.stock-tree {
min-height: 500px;
max-height: 80vh;
overflow-y: auto;
}
</style> -->
</script>

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

@@ -34,7 +34,7 @@
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
@@ -61,18 +61,26 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<!-- 懒加载树形表格核心配置：lazy + load + ref -->
<el-table
v-if="refreshTable"
ref="treeTable"
v-loading="loading"
:data="actualWarehouseList"
row-key="actualWarehouseId"
:default-expand-all="isExpandAll"
lazy
:load="loadChildren"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column label="库位编码" align="center" prop="actualWarehouseCode" />
<el-table-column label="库位名称" align="center" prop="actualWarehouseName" />
<el-table-column label="占用状态" align="center" prop="isEnabled">
<template slot-scope="scope">
<el-tag :type="scope.row.isEnabled === 1 ? 'success' : 'danger'">
{{ scope.row.isEnabled === 1 ? '空闲' : '占用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="同级排序号" align="center" prop="sortNo" />
<!-- <el-table-column label="是否启用" align="center" prop="isEnabled" /> -->
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
@@ -102,7 +110,8 @@
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="父节点" prop="parentId">
<treeselect :max-height="200" v-model="form.parentId" :options="actualWarehouseOptions" :normalizer="normalizer" placeholder="请选择父节点ID" />
<ActualWarehouseSelect v-model="form.parentId"></ActualWarehouseSelect>
<!-- <treeselect :max-height="200" v-model="form.parentId" :options="actualWarehouseOptions" :normalizer="normalizer" placeholder="请选择父节点ID" /> -->
</el-form-item>
<el-form-item label="库位编码" prop="actualWarehouseCode">
<el-input v-model="form.actualWarehouseCode" placeholder="请输入实际库区/库位编码" />
@@ -111,11 +120,8 @@
<el-input v-model="form.actualWarehouseName" placeholder="请输入实际库区/库位名称" />
</el-form-item>
<el-form-item label="排序" prop="sortNo">
<el-input v-model="form.sortNo" placeholder="请输入同级排序号" />
<el-input v-model="form.sortNo" type="number" placeholder="请输入同级排序号" />
</el-form-item>
<!-- <el-form-item label="是否启用" prop="isEnabled">
<el-input v-model="form.isEnabled" placeholder="请输入是否启用" />
</el-form-item> -->
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
@@ -130,23 +136,25 @@
<script>
import { listActualWarehouse, getActualWarehouse, delActualWarehouse, addActualWarehouse, updateActualWarehouse } from "@/api/wms/actualWarehouse";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
// import Treeselect from "@riophae/vue-treeselect";
// import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
export default {
name: "ActualWarehouse",
components: {
Treeselect
// Treeselect,
ActualWarehouseSelect
},
data() {
return {
// 按钮loading
buttonLoading: false,
// 遮罩层
// 遮罩层（仅控制根节点加载）
loading: true,
// 显示搜索条件
showSearch: true,
// 实际库区/库位自关联表格数据
// 根节点数据（懒加载模式下仅存储当前层级数据）
actualWarehouseList: [],
// 实际库区/库位自关联树选项
actualWarehouseOptions: [],
@@ -154,13 +162,11 @@ export default {
title: "",
// 是否显示弹出层
open: false,
// 是否展开，默认全部展开
isExpandAll: true,
// 重新渲染表格状态
refreshTable: true,
// 查询参数
// 是否全部展开（懒加载下仅控制已加载节点）
isExpandAll: false,
// 查询参数（核心：parentId用于懒加载子节点）
queryParams: {
parentId: undefined,
parentId: 0, // 初始加载根节点（parentId=0）
actualWarehouseCode: undefined,
actualWarehouseName: undefined,
actualWarehouseType: undefined,
@@ -171,22 +177,63 @@ export default {
form: {},
// 表单校验
rules: {
actualWarehouseCode: [{ required: true, message: "请输入库位编码", trigger: "blur" }],
actualWarehouseName: [{ required: true, message: "请输入库位名称", trigger: "blur" }],
sortNo: [{ required: true, type: "number", message: "请输入有效排序号", trigger: "blur" }]
}
};
},
created() {
this.getList();
this.getList(); // 初始加载根节点
},
methods: {
/** 查询实际库区/库位自关联列表 */
/** 加载根节点数据（parentId=0） */
getList() {
this.loading = true;
// 强制设置parentId=0，加载根节点
this.queryParams.parentId = 0;
listActualWarehouse(this.queryParams).then(response => {
this.actualWarehouseList = this.handleTree(response.data, "actualWarehouseId", "parentId");
// 为根节点添加hasChildren标识（后端未返回时默认true，确保显示展开按钮）
this.actualWarehouseList = response.data.map(node => ({
...node,
hasChildren: node.hasChildren ?? true // 双问号兼容null/undefined
}));
this.loading = false;
}).catch(() => {
this.loading = false;
});
},
/** 转换实际库区/库位自关联数据结构 */
/** 懒加载子节点核心方法（Element UI自带回调） */
loadChildren(treeData, treeNode, resolve) {
// treeNode：当前展开的父节点对象，treeNode.data为父节点数据
console.log(treeNode, resolve);
const parentId = treeData.actualWarehouseId;
// 构造子节点查询参数（继承当前查询条件，仅修改parentId）
const childParams = {
...this.queryParams,
parentId: parentId // 关键：用父节点ID作为子节点查询条件
};
// 显示节点加载状态
treeNode.loading = true;
// 调用接口加载子节点
listActualWarehouse(childParams).then(response => {
const children = response.data.map(node => ({
...node,
hasChildren: node.hasChildren ?? false // 子节点默认可能无下级，根据实际业务调整
}));
treeNode.loading = false;
resolve(children); // 回调返回子节点数据，表格自动渲染
}).catch(() => {
treeNode.loading = false;
resolve([]); // 加载失败返回空数组
});
},
/** 转换实际库区/库位自关联数据结构（下拉树用） */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
@@ -197,122 +244,147 @@ export default {
children: node.children
};
},
/** 查询实际库区/库位自关联下拉树结构 */
getTreeselect() {
listActualWarehouse().then(response => {
this.actualWarehouseOptions = [];
const data = { actualWarehouseId: 0, actualWarehouseName: '顶级节点', children: [] };
data.children = this.handleTree(response.data, "actualWarehouseId", "parentId");
this.actualWarehouseOptions.push(data);
// /** 查询实际库区/库位自关联下拉树结构 */
// getTreeselect() {
// listActualWarehouse().then(response => {
// this.actualWarehouseOptions = [];
// const data = { actualWarehouseId: 0, actualWarehouseName: '顶级节点', children: [] };
// data.children = this.handleTree(response.data, "actualWarehouseId", "parentId");
// this.actualWarehouseOptions.push(data);
// });
// },
// 树形结构处理（仅下拉树用，懒加载表格无需）
handleTree(data, id, parentId, children = 'children') {
const result = [];
const map = {};
data.forEach(item => {
map[item[id]] = item;
});
data.forEach(item => {
const parent = map[item[parentId]];
if (parent) {
(parent[children] || (parent[children] = [])).push(item);
} else {
result.push(item);
}
});
return result;
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
actualWarehouseId: null,
parentId: null,
parentId: 0, // 默认顶级节点
actualWarehouseCode: null,
actualWarehouseName: null,
actualWarehouseType: 1,
sortNo: 0,
isEnabled: null,
delFlag: null,
remark: null,
createTime: null,
createBy: null,
updateTime: null,
updateBy: null
remark: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
/** 搜索按钮操作（重新加载根节点 + 清空已加载子节点） */
handleQuery() {
this.getList();
// 清空表格已加载的子节点缓存
if (this.$refs.treeTable) {
this.$refs.treeTable.store.clearNodes();
}
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd(row) {
this.reset();
this.getTreeselect();
if (row != null && row.actualWarehouseId) {
// this.getTreeselect();
// 若从节点操作栏点击新增，设置父节点为当前节点ID
if (row?.actualWarehouseId) {
this.form.parentId = row.actualWarehouseId;
} else {
this.form.parentId = 0;
}
this.open = true;
this.title = "添加实际库区/库位自关联";
},
/** 展开/折叠操作 */
/** 展开/折叠所有已加载节点 */
toggleExpandAll() {
this.refreshTable = false;
const treeTable = this.$refs.treeTable;
if (!treeTable) return;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
if (this.isExpandAll) {
treeTable.expandAll(); // 展开所有已加载节点
} else {
treeTable.collapseAll(); // 折叠所有节点
}
},
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.loading = true;
this.reset();
this.getTreeselect();
if (row != null) {
this.form.parentId = row.actualWarehouseId;
}
// this.getTreeselect();
getActualWarehouse(row.actualWarehouseId).then(response => {
this.loading = false;
this.loading = false;
this.form = response.data;
this.open = true;
this.title = "修改实际库区/库位自关联";
}).catch(() => {
this.loading = false;
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.actualWarehouseId != null) {
updateActualWarehouse(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
} else {
addActualWarehouse(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
this.buttonLoading = true;
const request = this.form.actualWarehouseId
? updateActualWarehouse(this.form)
: addActualWarehouse(this.form);
request.then(response => {
this.$modal.msgSuccess(this.form.actualWarehouseId ? "修改成功" : "新增成功");
this.open = false;
this.getList(); // 新增/修改后刷新根节点
}).catch(() => {
this.$modal.msgError(this.form.actualWarehouseId ? "修改失败" : "新增失败");
}).finally(() => {
this.buttonLoading = false;
});
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal.confirm('是否确认删除实际库区/库位自关联编号为"' + row.actualWarehouseId + '"的数据项？').then(() => {
this.loading = true;
this.$modal.confirm(`是否确认删除实际库区/库位自关联【${row.actualWarehouseName}】？`).then(() => {
return delActualWarehouse(row.actualWarehouseId);
}).then(() => {
this.loading = false;
this.getList();
this.getList(); // 删除后刷新根节点
if (this.$refs.treeTable) {
this.$refs.treeTable.store.clearNodes();
}
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
}).catch(() => {});
}
}
};
</script>
</script>