菜单页面修改

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

@@ -4,12 +4,7 @@
 			<el-row shadow="hover" v-show="showSearch" class="ml10">
 				<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" 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"
-						/>
+						<el-input :placeholder="$t('sysmenu.inputNameTip')" clearable style="max-width: 180px" v-model="state.queryForm.menuName" />
 					</el-form-item>
 					<el-form-item>
 						<el-button @click="query" class="ml10" icon="search" type="primary">
@@ -34,24 +29,15 @@
 			</el-row>
 			<el-table
 				ref="tableRef"
-				:data="tableList"
-				lazy
-				:load="load"
-				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-				row-key="path"
+				:data="state.dataList"
+				row-key="id"
 				style="width: 100%"
 				v-loading="state.loading"
 				border
 				:header-cell-style="tableStyle?.headerCellStyle"
+				:expand-row-keys="expandRowKeys"
 			>
-				<el-table-column
-					:label="$t('sysmenu.name')"
-					fixed
-					prop="name"
-					align="left"
-					show-overflow-tooltip
-					min-width="200"
-				/>
+				<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 />
 				<el-table-column :label="$t('sysmenu.icon')" prop="icon" show-overflow-tooltip align="center">
 					<template #default="scope">
@@ -72,38 +58,17 @@
 						<el-tag type="info" v-else>关闭</el-tag>
 					</template>
 				</el-table-column>
-				<el-table-column
-					:label="$t('sysmenu.permission')"
-					:show-overflow-tooltip="true"
-					prop="permission"
-					align="center"
-				/>
+				<el-table-column :label="$t('sysmenu.permission')" :show-overflow-tooltip="true" prop="permission" align="center" />
 				<el-table-column :label="$t('common.action')" show-overflow-tooltip width="250" align="center">
 					<template #default="scope">
-						<el-button
-							icon="folder-add"
-							@click="onOpenAddMenu('add', scope.row)"
-							text
-							type="primary"
-							v-auth="'sys_menu_add'"
-						>
+						<el-button icon="folder-add" @click="onOpenAddMenu('add', scope.row)" text type="primary" v-auth="'sys_menu_add'">
 							{{ $t("common.addBtn") }}
 						</el-button>
-						<el-button
-							icon="edit-pen"
-							@click="onOpenEditMenu('edit', scope.row)"
-							text
-							type="primary"
-							v-auth="'sys_menu_edit'"
+						<el-button icon="edit-pen" @click="onOpenEditMenu('edit', scope.row)" text type="primary" v-auth="'sys_menu_edit'"
 							>{{ $t("common.editBtn") }}
 						</el-button>
 
-						<el-tooltip
-							icon="delete"
-							:content="$t('sysmenu.deleteDisabledTip')"
-							:disabled="!deleteMenuDisabled(scope.row)"
-							placement="top"
-						>
+						<el-tooltip icon="delete" :content="$t('sysmenu.deleteDisabledTip')" :disabled="!deleteMenuDisabled(scope.row)" placement="top">
 							<span style="margin-left: 12px">
 								<el-button
 									icon="delete"
@@ -140,9 +105,9 @@ const showSearch = ref(true)
 const queryRef = ref()
 const state: BasicTableProps = reactive<BasicTableProps>({
 	createdIsNeed: false,
-	pageList: pageList, // H
+	pageList: pageList,
 	queryForm: {
-		parentId: -1,
+		// parentId: -1,
 		menuName: "",
 	},
 	isPage: false,
@@ -154,21 +119,32 @@ onMounted(async () => {
 	getDataList()
 })
 
-// 根据类型判断是否有子节点
-const setHasChildren = (arr: any[]) => {
-	arr.forEach((item) => {
-		// 添加 hasChildren 属性
-		item.hasChildren = item.menuType !== "1"
-	})
-}
-const tableList = computed(() => {
+const expandRowKeys = computed(() => {
 	const list = state.dataList
-	if (Array.isArray(list)) {
-		setHasChildren(list)
-	}
-	return list
+	const arr: any[] = []
+	list?.forEach((item) => {
+		if (item.children && item.children.length) {
+			arr.push(item.id)
+		}
+	})
+	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)
@@ -197,20 +173,20 @@ const resetQuery = () => {
 	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 handleDelete = async (row: any) => {
@@ -229,11 +205,3 @@ const handleDelete = async (row: any) => {
 	}
 }
 </script>
-
-<style lang="scss" scoped>
-:deep() {
-	.el-table .row-expand-cover .cell .el-table__expand-icon {
-		display: none;
-	}
-}
-</style>