更新代码

resources/admin/src/pages/auth/permissions/index.vue

@@ -1,20 +1,27 @@
 <template>
-	<div class="pages permission-page">
+	<div class="pages-sidebar-layout permission-page">
 		<div class="left-box">
 			<div class="header">
-				<a-input v-model:value="menuFilterText" placeholder="搜索菜单..." allow-clear @change="handleMenuSearch">
+				<a-input v-model:value="menuFilterText" placeholder="搜索权限..." allow-clear @change="handleMenuSearch">
 					<template #prefix>
 						<SearchOutlined style="color: rgba(0, 0, 0, 0.45)" />
 					</template>
 				</a-input>
 			</div>
 			<div class="body">
-				<a-tree v-model:selectedKeys="selectedMenuKeys" v-model:checkedKeys="checkedMenuKeys"
-					:tree-data="filteredMenuTree" :field-names="{ title: 'title', key: 'id', children: 'children' }"
-					showLine checkable :check-strictly="true" :expand-on-click-node="false" @select="onMenuSelect"
+				<a-tree
+					v-model:selectedKeys="selectedMenuKeys"
+					v-model:checkedKeys="checkedMenuKeys"
+					:tree-data="filteredMenuTree"
+					:field-names="{ title: 'title', key: 'id', children: 'children' }"
+					show-line
+					checkable
+					:check-strictly="false"
+					:expand-on-click-node="false"
+					@select="onMenuSelect"
 					@check="onMenuCheck">
 					<template #icon="{ dataRef }">
-						<FolderOutlined v-if="dataRef.children" />
+						<ApartmentOutlined v-if="dataRef.children" />
 						<FileOutlined v-else />
 					</template>
 					<template #title="{ dataRef }">
@@ -23,22 +30,14 @@
 					</template>
 				</a-tree>
 			</div>
-			<div class="footer">
-				<a-space>
-					<a-button type="primary" @click="handleAdd(null)">
-						<template #icon><PlusOutlined /></template>
-						新增
-					</a-button>
-					<a-button danger @click="handleDeleteBatch">
-						<template #icon><DeleteOutlined /></template>
-						删除
-					</a-button>
-				</a-space>
-			</div>
 		</div>
 		<div class="right-box">
 			<div class="header">
 				<div class="title">{{ selectedMenu?.title || '请选择权限节点' }}</div>
+				<a-button type="link" size="small" @click="handleRefresh">
+					<template #icon><ReloadOutlined /></template>
+					刷新
+				</a-button>
 			</div>
 			<div class="body">
 				<save-form v-if="selectedMenu" :menu="menuTree" :menu-id="selectedMenu.id" :parent-id="parentId"
@@ -52,8 +51,14 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { message, Modal } from 'ant-design-vue'
-import { SearchOutlined, FolderOutlined, FileOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue'
-import saveForm from './save.vue'
+import {
+	SearchOutlined,
+	ReloadOutlined,
+	ApartmentOutlined,
+	FileOutlined,
+	PlusOutlined
+} from '@ant-design/icons-vue'
+import saveForm from './components/SaveForm.vue'
 import authApi from '@/api/auth'
 
 defineOptions({
@@ -84,7 +89,19 @@ const loadMenuTree = async () => {
 	}
 }
 
-// 权限搜索
+// 刷新
+const handleRefresh = () => {
+	loadMenuTree()
+	if (selectedMenu.value) {
+		// 重新获取当前选中的权限详情
+		const menuNode = findMenuNode(menuTree.value, selectedMenu.value.id)
+		if (menuNode) {
+			selectedMenu.value = menuNode
+		}
+	}
+}
+
+// 搜索权限
 const handleMenuSearch = (e) => {
 	const keyword = e.target?.value || ''
 	menuFilterText.value = keyword
@@ -141,7 +158,7 @@ const findParentId = (tree, id) => {
 	return null
 }
 
-// 权限选择事件
+// 限制选择事件
 const onMenuSelect = (selectedKeys, { selected }) => {
 	if (selected) {
 		const menuId = selectedKeys[0]
@@ -154,7 +171,7 @@ const onMenuSelect = (selectedKeys, { selected }) => {
 	}
 }
 
-// 权限勾选事件
+// 限制勾选事件
 const onMenuCheck = (checkedKeys, info) => {
 	console.log('checkedKeys:', checkedKeys, 'info:', info)
 }
@@ -249,86 +266,6 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .permission-page {
-	display: flex;
-	flex-direction: row;
-	height: 100%;
-	padding: 0;
-
-	.left-box {
-		width: 300px;
-		border-right: 1px solid #f0f0f0;
-		display: flex;
-		flex-direction: column;
-		background: #fff;
-
-		.header {
-			padding: 12px 16px;
-			border-bottom: 1px solid #f0f0f0;
-			background: #fafafa;
-			height: 56px;
-		}
-
-		.body {
-			flex: 1;
-			overflow-y: auto;
-			padding: 12px;
-
-			.tree-node-title {
-				flex: 1;
-			}
-
-			.tree-node-add {
-				margin-left: 8px;
-				color: #999;
-				display: none;
-
-				&:hover {
-					color: #1890ff;
-				}
-			}
-
-			:deep(.ant-tree-node-content-wrapper) {
-				width: 100%;
-
-				&:hover {
-					.tree-node-add {
-						display: inline-block;
-					}
-				}
-			}
-		}
-
-		.footer {
-			padding: 12px 16px;
-			border-top: 1px solid #f0f0f0;
-			background: #fafafa;
-		}
-	}
-
-	.right-box {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-
-		.header {
-			padding: 16px 24px;
-			border-bottom: 1px solid #f0f0f0;
-			background: #fff;
-			height: 56px;
-
-			.title {
-				font-size: 18px;
-				font-weight: 500;
-				color: #333;
-			}
-		}
-
-		.body {
-			flex: 1;
-			overflow-y: auto;
-			background: #f5f5f5;
-		}
-	}
+	@extend .pages-sidebar-layout;
 }
 </style>