权限管理

src/views/permission/account/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="system-menu-container layout-padding">
 		<ProTable ref="tableRef" :request-api="sysuserPageGet" :columns="columns" :pagination="true"
-			:tool-button="false" :initParam="initParam">
+			:tool-button="true" :initParam="initParam">
 			<template #tools>
 				<el-button v-auth="'permission:account:add'" type="primary" icon="ele-Plus" @click="onOpenMenu()"> 新增
 				</el-button>
@@ -141,6 +141,9 @@ const columns = ref([
 		prop: 'account',
 		label: '账号',
 		align: 'center',
+		search: {
+			el: 'input',
+		},
 	},
 	{
 		prop: 'roleNames',

src/views/permission/role/dialog.vue

@@ -21,11 +21,6 @@
 							<el-input v-model="state.ruleForm.code" maxlength="32" placeholder="请输入角色标识" clearable></el-input>
 						</el-form-item>
 					</el-col> -->
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="排序" prop="sort">
-							<el-input-number v-model="state.ruleForm.sort" controls-position="right" placeholder="请输入排序" class="w100" />
-						</el-form-item>
-					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 						<el-form-item label="角色状态" prop="status">
 							<el-switch
@@ -43,7 +38,7 @@
 							<el-input v-model="state.ruleForm.remark" type="textarea" placeholder="请输入角色描述" maxlength="200"></el-input>
 						</el-form-item>
 					</el-col>
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="state.ruleForm.id != 0">
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="菜单权限" prop="menus">
 							<el-tree
 								ref="treeRef"
@@ -86,25 +81,23 @@ const treeRef = ref();
 const rules = reactive({
 	name: [{ required: true, message: '请输入角色名称' }],
 	code: [{ required: true, message: '请输入角色标识' }],
-	sort: [{ required: true, message: '请输入排序' }],
+	menus: [
-	// menus: [
+		{
-	// 	{
+			validator: (rule, value, callback) => {
-	// 		validator: (rule, value, callback) => {
+				if ((value ?? []).length === 0) {
-	// 			if ((value ?? []).length === 0) {
+					callback(new Error('请为角色分配权限'));
-	// 				callback(new Error('请为角色分配权限'));
+					return;
-	// 				return;
+				}
-	// 			}
+				callback();
-	// 			callback();
+			},
-	// 		},
+		},
-	// 	},
+	],
-	// ],
 });
 
 //表单状态
 const state = reactive({
 	ruleForm: {
 		status: 0,
-		sort: 100,
 		code: 10000,
 	},
 	menuData: [],
@@ -116,6 +109,22 @@ const state = reactive({
 	},
 });
 
+// 重置表单和权限选择
+const resetForm = () => {
+	state.ruleForm = {
+		id: 0,
+		name: '',
+		code: 10000,
+		status: 0,
+		remark: '',
+		menus: [],
+	};
+	nextTick(() => {
+		roleDialogFormRef.value?.resetFields();
+		treeRef.value?.setCheckedKeys([]);
+	});
+};
+
 // 打开弹窗
 const openDialog = async (row) => {
 	console.log(row);
@@ -123,21 +132,21 @@ const openDialog = async (row) => {
 	state.dialog.loading = true;
 	const { data: menus } = await sysmenuTreeselectGet();
 	state.menuData = menus ?? [];
+	
 	if (row != null) {
 		state.ruleForm = { ...row };
 		const { data } = await sysroleGetrolemenuGet({ id: row.id });
 		state.ruleForm.menus = data ?? [];
 		state.dialog.title = '修改角色';
 		state.dialog.submitTxt = '修 改';
+		nextTick(() => {
 			treeRef.value?.setCheckedKeys(data ?? []);
+		});
 	} else {
-		state.ruleForm.id = 0;
+		// 新增角色时完全重置表单和权限
+		resetForm();
 		state.dialog.title = '新增角色';
 		state.dialog.submitTxt = '新 增';
-		// 重置表单
-		nextTick(() => {
-			roleDialogFormRef.value?.resetFields();
-		});
 	}
 	state.dialog.loading = false;
 };
@@ -151,26 +160,22 @@ const onCancel = () => {
 };
 // 提交
 const onSubmit = async () => {
-	if (state.ruleForm.id != 0) {
+	state.ruleForm.menus = treeRef.value?.getCheckedKeys() ?? [];
-		state.ruleForm.menus = treeRef.value.getCheckedKeys();
-	}
 	roleDialogFormRef.value?.validate(async (v) => {
 		if (v) {
-			const { succeeded } = state.ruleForm.id === 0 ? await sysroleAddPost(state.ruleForm) : await sysroleEditPut(state.ruleForm);
+			const { succeeded, data } = state.ruleForm.id === 0 
+				? await sysroleAddPost(state.ruleForm) 
+				: await sysroleEditPut(state.ruleForm);
 			if (succeeded) {
-				if (state.ruleForm.id != 0) {
+				// 无论是新增还是修改，都需要授予菜单权限
+				const roleId = state.ruleForm.id === 0 ? data : state.ruleForm.id;
 				await sysroleGrantpermissionPost({
-						id: state.ruleForm.id,
+					id: roleId,
 					menuIds: state.ruleForm.menus,
 				});
-					ElMessage.success('修改成功');
+				ElMessage.success(state.ruleForm.id === 0 ? '新增成功' : '修改成功');
 				closeDialog();
 				emit('refresh');
-				} else {
-					ElMessage.success('新增成功');
-					closeDialog();
-					emit('refresh');
-				}
 			}
 		}
 	});

src/views/permission/role/index.vue

@@ -35,29 +35,24 @@ const columns = reactive([
 	{
 		type: 'index',
 		label: '序号',
-		width: 60,
 	},
 	{
 		prop: 'name',
 		label: '角色名称',
 		search: { el: 'input' },
-		width: 200,
 	},
 	// {
 	// 	prop: 'code',
 	// 	label: '角色标识',
 	// },
-	{
-		prop: 'sort',
-		label: '排序',
-	},
 	{
 		prop: 'status',
 		label: '状态',
 	},
 	{
-		prop: 'createdTime',
+		prop: 'remark',
-		label: '创建时间',
+		label: '角色描述',
+		showOverflowTooltip: true,
 	},
 	{
 		prop: 'action',