From c745c83145b5f864f58805eceea7c6f4e210b231 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A5=9E=E4=BB=99=E9=83=BD=E6=B2=A1=E7=94=A8?=
 <615206459@qq.com>
Date: Thu, 22 Aug 2024 15:35:01 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E8=8F=9C=E5=8D=95=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E3=80=91=E8=A7=A3=E5=86=B3=E5=AD=90=E9=9B=86=E8=BF=87=E5=A4=9A?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4=E5=B1=95=E5=BC=80=E5=8D=A1=E9=A1=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/base/views/menu/index.vue | 54 ++++++++++++++++++++++++---
 1 file changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/modules/base/views/menu/index.vue b/src/modules/base/views/menu/index.vue
index a0839a1..04da594 100644
--- a/src/modules/base/views/menu/index.vue
+++ b/src/modules/base/views/menu/index.vue
@@ -23,7 +23,14 @@
 		</cl-row>
 
 		<cl-row>
-			<cl-table ref="Table" row-key="id" @row-click="onRowClick">
+			<cl-table
+				ref="Table"
+				row-key="id"
+				lazy
+				:load="onChildrenLoad"
+				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+				@row-click="onRowClick"
+			>
 				<!-- 图标 -->
 				<template #column-icon="{ scope }">
 					<cl-svg :name="scope.row.icon" size="16px" style="margin-top: 5px" />
@@ -104,6 +111,13 @@ import MenuImp from "./components/imp.vue";
 import MenuExp from "./components/exp.vue";
 import AutoMenu from "/$/helper/components/auto-menu/index.vue";
 import AutoPerms from "/$/helper/components/auto-perms/index.vue";
+import { isEmpty } from "/@/modules/dict/utils";
+
+interface Item extends Eps.BaseSysMenuEntity {
+	children?: Item[];
+	_children?: Item[];
+	hasChildren?: boolean;
+}
 
 const { service, mitt } = useCool();
 const { menu } = useStore();
@@ -357,7 +371,7 @@ const Crud = useCrud(
 		service: service.base.sys.menu,
 		onRefresh(_, { render }) {
 			service.base.sys.menu.list().then((list) => {
-				render(deepTree(list));
+				render(onData(list));
 				menu.get();
 			});
 		}
@@ -372,15 +386,43 @@ function refresh(params?: any) {
 	Crud.value?.refresh(params);
 }
 
+// 解决子集过多导致展开卡顿
+function onData(list: Item[]) {
+	const data = deepTree(list);
+
+	// 递归处理
+	const deep = (arr: Item[]) => {
+		arr.forEach((e) => {
+			if (!isEmpty(e.children)) {
+				e.hasChildren = true;
+				e._children = e.children;
+				delete e.children;
+
+				deep(e._children!);
+			}
+		});
+	};
+
+	deep(data);
+
+	return data;
+}
+
+// 监听子节点数据的加载
+function onChildrenLoad(row: Item, treeNode: unknown, resolve: (data: Item[]) => void) {
+	resolve(row._children!);
+}
+
 // 行点击展开
-function onRowClick(row: any, column: any) {
-	if (column?.property && row.children) {
+function onRowClick(row: Item) {
+	if (row._children) {
+		row.children = row._children;
 		Table.value?.toggleRowExpansion(row);
 	}
 }
 
 // 子集新增
-function append({ type, id }: any) {
+function append({ type = 0, id }: Item) {
 	Crud.value?.rowAppend({
 		parentId: id,
 		parentType: type,
@@ -391,7 +433,7 @@ function append({ type, id }: any) {
 }
 
 // 设置权限
-function addPermission({ id }: any) {
+function addPermission({ id }: Item) {
 	Crud.value?.rowAppend({
 		parentId: id,
 		type: 2