fix: 优化菜单管理

src/views/admin/system/menu/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
-			<el-row shadow="hover" v-show="showSearch" class="ml10">
+			<el-row v-show="showSearch" class="ml10">
 				<el-form :inline="true" :model="state.queryForm" ref="queryRef">
 					<el-form-item :label="$t('sysmenu.name')" prop="menuName">
 						<el-input :placeholder="$t('sysmenu.inputNameTip')" clearable style="max-width: 180px" v-model="state.queryForm.menuName" />
@@ -23,19 +23,22 @@
 						v-model:showSearch="showSearch"
 						class="ml10"
 						style="float: right; margin-right: 20px"
-						@queryTable="getDataList"
+						@queryTable="query"
 					></right-toolbar>
 				</div>
 			</el-row>
 			<el-table
 				ref="tableRef"
-				:data="state.dataList"
+				:data="tableList"
 				row-key="id"
 				style="width: 100%"
 				v-loading="state.loading"
 				border
 				:header-cell-style="tableStyle?.headerCellStyle"
 				:expand-row-keys="expandRowKeys"
+				lazy
+				:load="load"
+				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
 			>
 				<el-table-column :label="$t('sysmenu.name')" fixed prop="name" align="left" show-overflow-tooltip min-width="200" />
 				<el-table-column :label="$t('sysmenu.sortOrder')" prop="sortOrder" align="center" show-overflow-tooltip />
@@ -86,7 +89,7 @@
 				</el-table-column>
 			</el-table>
 		</div>
-		<MenuDialog @refresh="query()" ref="menuDialogRef" />
+		<MenuDialog @refresh="query" ref="menuDialogRef" />
 	</div>
 </template>
 
@@ -107,7 +110,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
 	createdIsNeed: false,
 	pageList: pageList,
 	queryForm: {
-		// parentId: -1,
+		parentId: "-1",
 		menuName: "",
 	},
 	isPage: false,
@@ -122,7 +125,7 @@ onMounted(async () => {
 const expandRowKeys = computed(() => {
 	const list = state.dataList
 	const arr: any[] = []
-	list?.forEach((item) => {
+	list?.map((item) => {
 		if (item.children && item.children.length) {
 			arr.push(item.id)
 		}
@@ -130,21 +133,6 @@ const expandRowKeys = computed(() => {
 	return arr
 })
 
-// 根据类型判断是否有子节点
-// const setHasChildren = (arr: any[]) => {
-// 	arr.forEach((item) => {
-// 		// 添加 hasChildren 属性
-// 		item.hasChildren = item.menuType !== "1"
-// 	})
-// }
-// const tableList = computed(() => {
-// 	const list = state.dataList
-// 	// if (Array.isArray(list)) {
-// 	// 	setHasChildren(list)
-// 	// }
-// 	return list
-// })
-
 // 打开新增菜单弹窗
 const onOpenAddMenu = (type?: string, row?: any) => {
 	menuDialogRef.value.openDialog(type, row)
@@ -159,35 +147,54 @@ const deleteMenuDisabled = (row: any) => {
 	return (row.children || []).length > 0
 }
 
-// 搜索事件
-const query = () => {
-	state.dataList = []
-	state.queryForm.parentId = undefined
-	getDataList()
-}
-
 // 清空搜索条件
 const resetQuery = () => {
 	queryRef.value.resetFields()
+	state.queryForm.parentId = "-1"
 	state.dataList = []
 	getDataList()
 }
 
-// const load = (row: any, treeNode: unknown, resolve: (date: any[]) => void) => {
-// 	const param = {
-// 		parentId: row.id,
-// 	}
-// 	pageList(param).then((res) => {
-// 		const childrenList = res.data
-// 		if (Array.isArray(childrenList)) {
-// 			setHasChildren(childrenList)
-// 		}
-// 		if (childrenList && childrenList.length) {
-// 			resolve(childrenList)
-// 		}
-// 	})
-// }
+const load = (row: any, treeNode: unknown, resolve: (date: any[]) => void) => {
+	const param = {
+		parentId: row.id,
+	}
+	pageList(param).then((res) => {
+		const childrenList = res.data
+		if (Array.isArray(childrenList)) {
+			setHasChildren(childrenList)
+		}
+		if (childrenList && childrenList.length) {
+			resolve(childrenList)
+		}
+	})
+}
 
+// 根据类型判断是否有子节点
+const setHasChildren = (arr: any[]) => {
+	arr.forEach((item) => {
+		// 添加 hasChildren 属性
+		item.hasChildren = item.menuType !== "1"
+	})
+}
+const tableList = computed(() => {
+	const list = state.dataList
+	if (Array.isArray(list)) {
+		setHasChildren(list)
+	}
+	return list
+})
+
+const query = () => {
+	state.dataList = []
+	if (state.queryForm.menuName) {
+		state.queryForm.parentId = ""
+	} else {
+		state.queryForm.parentId = "-1"
+	}
+
+	getDataList()
+}
 // 删除操作
 const handleDelete = async (row: any) => {
 	try {