diff --git a/src/api/finance/purchasingcategory.ts b/src/api/finance/purchasingcategory.ts index 3a6aef6..1653575 100644 --- a/src/api/finance/purchasingcategory.ts +++ b/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 对象数据 diff --git a/src/views/finance/purchasingcategory/index.vue b/src/views/finance/purchasingcategory/index.vue index 3a53343..709f019 100644 --- a/src/views/finance/purchasingcategory/index.vue +++ b/src/views/finance/purchasingcategory/index.vue @@ -21,12 +21,14 @@ - + 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 + * 查询树根节点(懒加载:首屏只加载根节点) */ -const queryTree = (params?: any) => { - return getTree(params); +const queryTreeRoots = () => { + 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({ - pageList: queryTree, + pageList: queryTreeRoots, queryForm: {}, isPage: false, // 树形表格不分页 });