优化采购品目列表懒加载显示

src/api/finance/purchasingcategory.ts

@@ -18,17 +18,39 @@
 import request from '/@/utils/request';
 
 /**
- * 获取树形列表
+ * 获取树形列表（全量，数据量大时建议用懒加载接口）
  * @param params 查询参数
  */
 export function getTree(params?: any) {
-	return request({ 
+	return request({
 		url: '/purchase/purchasingcategory/tree',
 		method: 'get',
 		params
 	});
 }
 
+/**
+ * 获取树根节点（懒加载用）
+ */
+export function getTreeRoots() {
+	return request({
+		url: '/purchase/purchasingcategory/tree/roots',
+		method: 'get'
+	});
+}
+
+/**
+ * 获取子节点（懒加载用）
+ * @param parentCode 父节点编码
+ */
+export function getTreeChildren(parentCode: string) {
+	return request({
+		url: '/purchase/purchasingcategory/tree/children',
+		method: 'get',
+		params: { parentCode }
+	});
+}
+
 /**
  * 新增
  * @param obj 对象数据

src/views/finance/purchasingcategory/index.vue

@@ -21,12 +21,14 @@
           </div>
         </template>
 
-        <!-- 树形表格 -->
+        <!-- 树形表格（懒加载：仅首屏加载根节点，展开时再加载子节点） -->
         <el-table 
           ref="tableRef"
           :data="state.dataList" 
           v-loading="state.loading" 
           stripe
+          lazy
+          :load="loadTreeNode"
           :cell-style="tableStyle.cellStyle" 
           :header-cell-style="tableStyle.headerCellStyle"
           class="modern-table"
@@ -88,7 +90,7 @@
 <script setup lang="ts" name="PurchasingCategory">
 import { ref, reactive, defineAsyncComponent } from 'vue'
 import { BasicTableProps, useTable } from "/@/hooks/table";
-import { getTree, delObj } from "/@/api/finance/purchasingcategory";
+import { getTreeRoots, getTreeChildren, delObj } from "/@/api/finance/purchasingcategory";
 import { useMessage, useMessageBox } from "/@/hooks/message";
 import { List, Document, DocumentCopy, EditPen } from '@element-plus/icons-vue'
 
@@ -100,19 +102,40 @@ const tableRef = ref()
 const formDialogRef = ref()
 
 /**
- * 查询树形数据方法
+ * 查询树根节点（懒加载：首屏只加载根节点）
- * @param params - 查询参数
- * @returns Promise<any>
  */
-const queryTree = (params?: any) => {
+const queryTreeRoots = () => {
-  return getTree(params);
+  return getTreeRoots().then((res: any) => {
+    const list = res?.data ?? [];
+    return { data: Array.isArray(list) ? list : [] };
+  });
+};
+
+/**
+ * 懒加载子节点：展开某行时按需请求子节点
+ * @param row 当前行
+ * @param treeNode 树节点信息
+ * @param resolve 回调，传入子节点数组
+ */
+const loadTreeNode = (row: any, treeNode: any, resolve: (data: any[]) => void) => {
+  const parentCode = row?.code;
+  if (!parentCode) {
+    resolve([]);
+    return;
+  }
+  getTreeChildren(parentCode)
+    .then((res: any) => {
+      const list = res?.data ?? [];
+      resolve(Array.isArray(list) ? list : []);
+    })
+    .catch(() => resolve([]));
 };
 
 /**
  * 定义响应式表格数据
  */
 const state: BasicTableProps = reactive<BasicTableProps>({
-  pageList: queryTree,
+  pageList: queryTreeRoots,
   queryForm: {},
   isPage: false, // 树形表格不分页
 });