From 4fef2b8afba85d8f2f8be70b85ffc105cfc4deda Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 13 三月 2026 11:49:12 +0800
Subject: [PATCH] 生产维护树形结构加载慢改成懒加载
---
src/api/basicData/newProduct.js | 8 ++
src/views/basicData/product/index.vue | 107 ++++++++++++++++++++++++++++++-----
src/views/productionPlan/productionPlan/index.vue | 8 ++
3 files changed, 104 insertions(+), 19 deletions(-)
diff --git a/src/api/basicData/newProduct.js b/src/api/basicData/newProduct.js
index 6ee80b3..c7793d9 100644
--- a/src/api/basicData/newProduct.js
+++ b/src/api/basicData/newProduct.js
@@ -9,6 +9,14 @@
params: query
})
}
+// 浜у搧鏍戞煡璇�2
+export function productTreeListQuery(query) {
+ return request({
+ url: '/productMaterial/listQuery',
+ method: 'get',
+ params: query
+ })
+}
// 浜у搧瀛愮被鏂板
export function addOrEditProduct(query) {
return request({
diff --git a/src/views/basicData/product/index.vue b/src/views/basicData/product/index.vue
index 32dad2b..2c62d41 100644
--- a/src/views/basicData/product/index.vue
+++ b/src/views/basicData/product/index.vue
@@ -6,7 +6,7 @@
style="width: 210px"
placeholder="杈撳叆鍏抽敭瀛楄繘琛屾悳绱�"
@change="searchFilter"
- @clear="searchFilter"
+ @clear="searchFilter1"
clearable
prefix-icon="Search" />
<el-button type="primary"
@@ -32,8 +32,7 @@
<div class="custom-tree-node">
<span class="tree-node-content">
<el-icon class="tree-icon">
- <component :is="data.children && data.children.length > 0
- ? node.expanded ? 'FolderOpened' : 'Folder' : 'Tickets'" />
+ <component :is="node.expanded ? 'FolderOpened' : 'Folder'" />
</el-icon>
<span class="tree-node-label">{{ data.label }}</span>
</span>
@@ -302,6 +301,7 @@
delProductModel,
modelListPage,
productTreeList,
+ productTreeListQuery,
addOrEditProductConfig,
updateOrEditProductConfig,
delProductConfig,
@@ -459,29 +459,20 @@
// 鏌ヨ浜у搧鏍�
const getProductTreeList = () => {
treeLoad.value = true;
- productTreeList()
+ productTreeList({ type: 2 })
.then(res => {
// 杞崲鏂扮殑鏁版嵁鏍煎紡
const newList = [];
expandedKeys.value = [];
for (const category of res.data) {
- // 娣诲姞鍒嗙被鑺傜偣
+ // 娣诲姞鍒嗙被鑺傜偣锛堝彧杩斿洖涓�灞傛暟鎹紝涓嶅寘鍚瓙鑺傜偣锛�
const categoryNode = {
label: category.configName,
id: category.configId,
isLeaf: false,
- children: category.materialList.map(item => ({
- id: item.id,
- isLeaf: true,
- label: item.materialName,
- inventoryCategoryId: item.inventoryCategoryId,
- materialTypeId: item.materialTypeId,
- remark: item.remark,
- baseUnit: item.baseUnit,
- })),
+ children: [], // 鍒濆鍖栦负绌烘暟缁勶紝鐐瑰嚮鏃跺啀鍔犺浇
};
newList.push(categoryNode);
- expandedKeys.value.push(category.configName);
}
list.value = newList;
treeLoad.value = false;
@@ -490,9 +481,64 @@
treeLoad.value = false;
});
};
+ const searchFilter1 = () => {
+ getProductTreeList();
+ };
// 杩囨护浜у搧鏍�
const searchFilter = () => {
- proxy.$refs.tree.filter(search.value);
+ if (!search.value) {
+ // 濡傛灉鎼滅储鍏抽敭瀛椾负绌猴紝閲嶆柊鍔犺浇鍘熷鏁版嵁
+ // getProductTreeList();
+ return;
+ }
+
+ treeLoad.value = true;
+ // 璋冪敤 productTreeListQuery 鎺ュ彛杩涜鎼滅储
+ productTreeListQuery({ materialName: search.value })
+ .then(res => {
+ // 澶勭悊杩斿洖鐨勬暟鎹�
+ const newList = [];
+ if (res.data && res.data.length > 0) {
+ for (const category of res.data) {
+ for (const item of list.value) {
+ if (item.id == category.configId) {
+ item.children = (category.materialList || []).map(item => ({
+ id: item.id,
+ isLeaf: true,
+ label: item.materialName,
+ inventoryCategoryId: item.inventoryCategoryId,
+ materialTypeId: item.materialTypeId,
+ remark: item.remark,
+ baseUnit: item.baseUnit,
+ }));
+ break;
+ }
+ }
+ // 杞崲鏁版嵁鏍煎紡
+ // const categoryNode = {
+ // label: category.configName,
+ // id: category.configId,
+ // isLeaf: false,
+ // children: (category.materialList || []).map(item => ({
+ // id: item.id,
+ // isLeaf: true,
+ // label: item.materialName,
+ // inventoryCategoryId: item.inventoryCategoryId,
+ // materialTypeId: item.materialTypeId,
+ // remark: item.remark,
+ // baseUnit: item.baseUnit,
+ // })),
+ // };
+ // newList.push(categoryNode);
+ }
+ }
+ // 浣跨敤 el-tree 鐨勫唴缃繃婊ゅ姛鑳芥悳绱�
+ proxy.$refs.tree.filter(search.value);
+ treeLoad.value = false;
+ })
+ .catch(err => {
+ treeLoad.value = false;
+ });
};
// 鎵撳紑浜у搧寮规
const openProDia = (type, data) => {
@@ -684,8 +730,35 @@
};
// 閫夋嫨浜у搧
const handleNodeClick = (val, node, el) => {
- // 鐐瑰嚮闈炲彾瀛愯妭鐐规椂锛屼笉鎵ц浠ヤ笅閫昏緫
+ // 鐐瑰嚮闈炲彾瀛愯妭鐐规椂锛屽姞杞藉瓙鑺傜偣鏁版嵁
if (!val.isLeaf) {
+ // 璋冪敤 productTreeListQuery 鎺ュ彛鑾峰彇瀛愯妭鐐规暟鎹�
+ // treeLoad.value = true;
+ productTreeListQuery({ materialTypeId: val.id })
+ .then(res => {
+ // 澶勭悊杩斿洖鐨勬暟鎹�
+ if (res.data && res.data.length > 0) {
+ const materialList = res.data[0].materialList || [];
+ // 杞崲瀛愯妭鐐规暟鎹牸寮�
+ const children = materialList.map(item => ({
+ id: item.id,
+ isLeaf: true,
+ label: item.materialName,
+ inventoryCategoryId: item.inventoryCategoryId,
+ materialTypeId: item.materialTypeId,
+ remark: item.remark,
+ baseUnit: item.baseUnit,
+ }));
+ // 鏇存柊鑺傜偣鐨勫瓙鑺傜偣
+ val.children = children;
+ // 灞曞紑鑺傜偣
+ node.expanded = true;
+ }
+ // treeLoad.value = false;
+ })
+ .catch(err => {
+ // treeLoad.value = false;
+ });
return;
}
// 鍒ゆ柇鏄惁涓哄彾瀛愯妭鐐�
diff --git a/src/views/productionPlan/productionPlan/index.vue b/src/views/productionPlan/productionPlan/index.vue
index 33dbeb0..88aedf3 100644
--- a/src/views/productionPlan/productionPlan/index.vue
+++ b/src/views/productionPlan/productionPlan/index.vue
@@ -349,7 +349,11 @@
productionPlanCombine,
} from "@/api/productionPlan/productionPlan.js";
import PIMTable from "./components/PIMTable.vue";
- import { modelListPage, productTreeList } from "@/api/basicData/newProduct.js";
+ import {
+ modelListPage,
+ productTreeList,
+ productTreeListQuery,
+ } from "@/api/basicData/newProduct.js";
const { proxy } = getCurrentInstance();
@@ -645,7 +649,7 @@
};
const fetchProductOptions = () => {
- return productTreeList().then(res => {
+ return productTreeList({ type: 2 }).then(res => {
productOptions.value = convertIdToValue(res.data);
return res;
});
--
Gitblit v1.9.3