角色管理权限设置

src/api/role/index.ts

@@ -6,37 +6,27 @@ import { baseUrlHost } from '../baseUrlHost';
  * 注意在写get请求时，参数是params，而不是data，要标注好
  * 
  * 登录api接口集合
- * @method getRoleList 获取角色列表
+ * @method getRoleList 获取分页角色列表
  * @method deleteRole 删除角色
  * @method saveRole 保存角色
  * @method updateRole 更新角色
+ * @method getroleListAll 获取全部角色
  * @method getRoleDetail 查询单个角色
  */
 
-export function RoleApi() {
+export function roleApi() {
 	return {
-		getRoleList: () => {
+		getRoleList: (params:object) => {
 			return request({
 				url: baseUrlHost + '/acGroup',
 				method: 'get',
+				params,
 			});
 		},
-		deleteRole: (id: Number) => {
+		addRole:(data:object) => {
 			return request({
-				url: baseUrlHost + `/acGroup/${id}`,
+				url:baseUrlHost + '/acGroup',
-				method: 'delete',
+				method:'post',
-			});
-		},
-		getRoleDetail: (id: Number) => {
-			return request({
-				url: baseUrlHost + `/acGroup/${id}`,
-				method: 'get',
-			});
-		},
-		saveRole: (data: object) => {
-			return request({
-				url: baseUrlHost + '/acGroup',
-				method: 'post',
 				data,
 			})
 		},
@@ -47,5 +37,23 @@ export function RoleApi() {
 				data,
 			})
 		},
+		getRoleDetail: (id: Number) => {
+			return request({
+				url: baseUrlHost + `/acGroup/${id}`,
+				method: 'get',
+			});
+		},
+		deleteRole: (id: Number) => {
+			return request({
+				url: baseUrlHost + `/acGroup/${id}`,
+				method: 'delete',
+			});
+		},
+		getroleListAll: () => {
+			return request({
+				url: baseUrlHost + `/acGroup/`,
+				method: 'get',
+			});
+		},
 	};
 }

src/api/roleaction/index.ts

@@ -0,0 +1,26 @@
+import request from '/@/utils/request';
+import { baseUrlHost } from '../baseUrlHost';
+
+/**
+ * 
+ * @method setUprolePermission 设置角色的权限
+ * @method checkRoleholdAbility 查询角色拥有功能
+ */
+
+export function roleactionApi(){
+  return {
+    setUprolePermission:(data:object) => {
+      return request({
+        url:baseUrlHost + '/acGroupAction/grantPurviews',
+        method: 'post',
+        data,
+      })
+    },
+    checkRoleholdAbility:(groupid:number) => {
+      return request({
+        url:baseUrlHost + '/acGroupAction/purviews/of/' + groupid,
+        method: 'get',
+      })
+    }
+  }
+}

src/api/roletype/index.ts

@@ -0,0 +1,25 @@
+import request from '/@/utils/request';
+import { baseUrlHost } from '../baseUrlHost';
+
+/**
+ * 
+ * @method getroleTypeALL 获取全部角色类型
+ * @method checkRoletypeTree 查询角色类型功能树
+ */
+
+export function roletypeApi(){
+  return {
+    getroleTypeALL:() => {
+      return request({
+        url:baseUrlHost + '/acGrouptype/all',
+        method: 'get',
+      })
+    },
+    checkRoletypeTree:(id:number) => {
+      return request({
+        url:baseUrlHost + '/acGrouptype/findByGrouptypeTree/' + id,
+        method: 'get',
+      })
+    }
+  }
+}

src/views/usermanage/role/dialog.vue

@@ -1,15 +1,15 @@
 <template>
 	<div class="system-role-dialog-container">
 		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
-			<el-form ref="roleDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
+			<el-form ref="roleDialogFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="90px">
 				<el-row :gutter="35">
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="角色名称">
+						<el-form-item label="角色名称" prop="name">
 							<el-input v-model="state.ruleForm.name" 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="角色标识">
+						<el-form-item label="角色标识" prop="acgroup">
 							<template #label>
 								<el-tooltip effect="dark" content="用于 `router/route.ts` meta.roles" placement="top-start">
 									<span>角色标识</span>
@@ -18,24 +18,21 @@
 							<el-input v-model="state.ruleForm.acgroup" 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="排序">
-							<el-input-number v-model="state.ruleForm.id" :min="0" :max="999" 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="角色状态">
-							<el-switch v-model="state.ruleForm.state" inline-prompt active-text="启" inactive-text="禁"></el-switch>
+							<el-switch v-model="state.ruleForm.show" inline-prompt active-text="启" inactive-text="禁"></el-switch>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="角色描述">
+						<el-form-item label="角色描述" prop="description">
 							<el-input v-model="state.ruleForm.description" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
-						<el-form-item label="菜单权限">
+						<el-form-item label="角色权限" v-if="state.dialog.type === 'edit'" >
-							<el-tree :data="state.menuData" :props="state.menuProps" show-checkbox class="menu-data-tree" />
+							<el-tree  v-loading="state.loadingTree" :props="state.props" :data="state.treeData" show-checkbox node-key="actioncode"
+								default-expand-all :default-checked-keys="state.ruleForm.checkTree" ref="tree" class="menu-data-tree" @check="handleCheckChange">
+							</el-tree>
 						</el-form-item>
 					</el-col>
 				</el-row>
@@ -51,26 +48,58 @@
 </template>
 
 <script setup lang="ts" name="systemRoleDialog">
-import { reactive, ref } from 'vue';
+import { onMounted, reactive, ref , nextTick } from 'vue';
+import { roletypeApi } from '/@/api/roletype';
+import { roleactionApi } from '/@/api/roleaction';
+import { ElMessage } from 'element-plus';
+import { roleApi } from '/@/api/role';
 
 // 定义子组件向父组件传值/事件
 const emit = defineEmits(['reset']);
 
+const roleapi = roleApi()
+
+const roletypeapi = roletypeApi();
+
+const roleactionapi = roleactionApi();
+
 // 定义变量内容
 const roleDialogFormRef = ref();
+const tree = ref();
 const state = reactive({
 	ruleForm: {
 		name: '', // 角色名称
 		acgroup: '', // 角色标识
 		id: 0, // 排序
-		state: true, // 角色状态
+		grouptypeid:0,//角色id
+		show: 0, // 角色状态
 		description: '', // 角色描述
+		checkTree: [],
 	},
-	menuData: [] as TreeType[],
+	data:{
-	menuProps: {
+		acgroup:'',
-		children: 'children',
+		name:'',
-		label: 'label',
 	},
+	props: {
+    label: function (data:any, node:any) {
+      if (node.level == 1) {
+        return data.modulename;
+      } else if (node.level == 2) {
+        return data.actionname;
+      }
+  },
+    children: "actions",
+  },
+	rules: {
+		name: { required: true, message: '请输入角色名称', trigger: 'blur' },
+		acgroup: { required: true, message: '请选择角色标识', trigger: 'blur' },
+		id: { required: true, message: '请输入角色id', trigger: 'change' },
+		// checkTree: { required: true, message: '请选择至少一个菜单权限', trigger: 'change' },
+	},
+	loadingTree: false,
+	//树型组
+	treeData: [],
+  //默认选中的树节点的id
 	dialog: {
 		isShowDialog: false,
 		type: '',
@@ -79,23 +108,79 @@ const state = reactive({
 	},
 });
 
+// Check event to update selected data
+const handleCheckChange = (data: any,checked: boolean,indeterminate: boolean) => {
+  console.log(data)
+	// const tree = roleDialogFormRef.value?.$refs.tree;
+  // if (!tree) {
+  //   console.error('el-tree instance is not available');
+  //   return;
+  // }
+}
+
 // 打开弹窗
-const openDialog = (type: string, row: any) => {
+const openDialog = async(type: string, row: any) => {
 	if (type === 'edit') {
-		state.ruleForm = row;
+		state.ruleForm = { ...row, show: row.show == 1 };
+		state.dialog.type = type
+		console.log(4444444,state.ruleForm);
 		state.dialog.title = '修改角色';
 		state.dialog.submitTxt = '修 改';
+		await getroletypeTree(state.ruleForm.grouptypeid);
 	} else {
+		resetForm();
 		state.dialog.title = '新增角色';
 		state.dialog.submitTxt = '新 增';
-		// 清空表单，此项需加表单验证才能使用
+		// console.log(state.ruleForm);
+		state.dialog.type = type
+		roleDialogFormRef.value?.resetFields();
+		nextTick(() => getroletypeTree(1));
+		//清空表单，此项需加表单验证才能使用
 		// nextTick(() => {
 		// 	roleDialogFormRef.value.resetFields();
 		// });
 	}
 	state.dialog.isShowDialog = true;
-	getMenuData();
+	
 };
+
+// 清空表单
+const resetForm = () => {
+  state.ruleForm = {
+    name: '',
+    acgroup: '',
+    id: 0,
+    grouptypeid: 0,
+    show: 0,
+    description: '',
+		checkTree:[]
+  };
+  // nextTick(() => {
+  //   const tree = roleDialogFormRef.value.$refs.tree;
+  //   if (tree) {
+  //     tree.setCheckedKeys([]);
+  //   }
+  // });
+};
+
+//获取角色功能树
+const getroletypeTree = async(grouptypeid:number) =>{
+	try{
+		state.loadingTree = true;
+		const resTree = await roletypeapi.checkRoletypeTree(grouptypeid)
+		state.treeData = resTree.data.modules;
+		if(state.dialog.type === 'edit'){
+			const res = await roleactionapi.checkRoleholdAbility(state.ruleForm.id)
+			state.ruleForm.checkTree = res.data
+		}
+	}catch(error){
+		ElMessage.error('请求失败!')
+		console.error(error);
+	}finally{
+		state.loadingTree = false
+	}
+};
+
 // 关闭弹窗
 const closeDialog = () => {
 	state.dialog.isShowDialog = false;
@@ -105,123 +190,106 @@ const onCancel = () => {
 	closeDialog();
 };
 // 提交
-const onSubmit = () => {
+const onSubmit = async() => {
-	closeDialog();
+	// closeDialog();
-	emit('reset');
+	// emit('reset');
-	// if (state.dialog.type === 'add') { }
+	roleDialogFormRef.value?.validate( async (valid: boolean) => {
-};
+		if(valid){
-// 获取菜单结构数据
+			state.ruleForm.show = state.ruleForm.show ? 1 : 0;
-const getMenuData = () => {
+			state.ruleForm.grouptypeid = 1;
-	state.menuData = [
+			let body = {
-		{
+				actions:tree.value.getCheckedKeys(true, false),
-			id: 1,
+				groupid:state.ruleForm.id
-			label: '系统管理',
+			}
-			children: [
+			if (state.dialog.type === 'add') {
-				{
+				try{
-					id: 11,
+					const param = {
-					label: '菜单管理',
+						acgroup:state.ruleForm.acgroup,
-					children: [
+						name:state.ruleForm.name
-						{
+					}
-							id: 111,
+					const res = await roleapi.addRole(param);
-							label: '菜单新增',
+					if (res?.success) {
-						},
+						try{
-						{
+							const data = await roleactionapi.setUprolePermission(body)
-							id: 112,
+							console.log(5555555,data);
-							label: '菜单修改',
+						}catch(error){
-						},
+							console.error(error)
-						{
+						}
-							id: 113,
+						emit('reset');
-							label: '菜单删除',
+						closeDialog();
-						},
+						ElMessage.success('角色新建成功！');
-						{
+
-							id: 114,
+						// 重置表单数据
-							label: '菜单查询',
+						Object.assign(state.ruleForm, {
-						},
+							name: '',
-					],
+							acgroup: '',
-				},
+							grouptypeid: 0,
-				{
+							show: 0,
-					id: 12,
+							description: '',
-					label: '角色管理',
+							checkTree: [],
-					children: [
+          	});
-						{
+					}
-							id: 121,
+				} catch(error){
-							label: '角色新增',
+					console.error(error);
-						},
+					ElMessage.error('角色新建失败！')
-						{
+				}
-							id: 122,
+			} else {
-							label: '角色修改',
+				try{
-						},
+					const res = await roleapi.updateRole(state.ruleForm);
-						{
+					if(res?.success){
-							id: 123,
+						try{
-							label: '角色删除',
+							const res = await roleactionapi.setUprolePermission(body)
-						},
+							console.log(5555555,res);
-						{
+							emit('reset');
-							id: 124,
+							ElMessage.success('角色修改成功！');
-							label: '角色查询',
+							closeDialog();
-						},
+						}catch(error){
-					],
+							ElMessage.error('角色权限修改失败!')
-				},
+							console.error
-				{
+						}
-					id: 13,
+						
-					label: '用户管理',
+					}
-					children: [
+				}catch(error){
-						{
+					ElMessage.error('角色修改失败！')
-							id: 131,
+					console.error(error)
-							label: '用户新增',
+				}
-						},
+			}
-						{
+		}
-							id: 132,
+	})
-							label: '用户修改',
+	// if (state.dialog.type === 'add') {
-						},
+	// 	roleDialogFormRef.value?.validate((valid: boolean) => {
-						{
+  //   if (valid) {
-							id: 133,
+  //     closeDialog();
-							label: '用户删除',
+  //     emit('reset');
-						},
+  //   } else {
-						{
+  //     ElMessage.error('请填写完整的表单信息');
-							id: 134,
+  //     return false;
-							label: '用户查询',
+  // 		}
-						},
+  // 	}); 
-					],
+	// }
-				},
+	// else{
-			],
+	// 	roleDialogFormRef.value?.validate((valid:boolean) => {
-		},
+	// 		if (valid) {
-		{
+  //     closeDialog();
-			id: 2,
+  //     emit('reset');
-			label: '权限管理',
+  //   } else {
-			children: [
+  //     ElMessage.error('请修改完整的表单信息');
-				{
+  //     return false;
-					id: 21,
+  // 		}
-					label: '前端控制',
+	// 	})
-					children: [
+	// }
-						{
-							id: 211,
-							label: '页面权限',
-						},
-						{
-							id: 212,
-							label: '页面权限',
-						},
-					],
-				},
-				{
-					id: 22,
-					label: '后端控制',
-					children: [
-						{
-							id: 221,
-							label: '页面权限',
-						},
-					],
-				},
-			],
-		},
-	];
 };
 
 // 暴露变量
 defineExpose({
 	openDialog,
 });
+
+//页面加载时
+onMounted(() =>{
+	// getroletypeTree(1)
+})
+
 </script>
 
 <style scoped lang="scss">

src/views/usermanage/role/index.vue

@@ -2,8 +2,8 @@
 	<div class="system-role-container layout-padding">
 		<div class="system-role-padding layout-padding-auto layout-padding-view">
 			<div class="system-user-search mb15">
-				<el-input v-model="state.tableData.param.search" size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input>
+				<el-input v-model="state.tableData.param.name" size="default" placeholder="请输入角色名称" style="max-width: 180px" clearable> </el-input>
-				<el-button size="default" type="primary" class="ml10">
+				<el-button size="default" type="primary" class="ml10" @click="getTableData">
 					<el-icon>
 						<ele-Search />
 					</el-icon>
@@ -20,11 +20,10 @@
 				<el-table-column type="index" label="序号" width="60" />
 				<el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
 				<el-table-column prop="acgroup" label="角色标识" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="id" label="排序" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="show" label="角色状态" show-overflow-tooltip>
-				<el-table-column prop="state" label="角色状态" show-overflow-tooltip>
 					<template #default="scope">
-						<el-tag type="success" v-if="scope.row.state">启用</el-tag>
+						<el-tag type="success" v-if="scope.row.show==1">启用</el-tag>
-						<el-tag type="info" v-else>禁用</el-tag>
+						<el-tag type="danger" v-else>禁用</el-tag>
 					</template>
 				</el-table-column>
 				<el-table-column prop="description" label="角色描述" show-overflow-tooltip></el-table-column>
@@ -59,12 +58,15 @@
 <script setup lang="ts" name="systemRole">
 import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
 import { ElMessageBox, ElMessage,TableColumnCtx } from 'element-plus';
-import { RoleApi } from '/@/api/role';
+import { roleApi } from '/@/api/role';
+import { roletypeApi } from '/@/api/roletype';
 
 // 引入组件
 const RoleDialog = defineAsyncComponent(() => import('/@/views/usermanage/role/dialog.vue'));
 
-const roleapi = RoleApi();
+const roleapi = roleApi();
+
+const roletypeapi = roletypeApi();
 
 // 定义变量内容
 const roleDialogRef = ref();
@@ -74,12 +76,13 @@ const state = reactive<SysRoleState>({
 		total: 0,
 		loading: false,
 		param: {
-			search: '',
+			name: '',
 			pageNum: 1,
 			pageSize: 10,
 		},
 	},
 });
+
 // 初始化表格数据
 const getTableData = async() => {
 	state.tableData.loading = true;
@@ -101,7 +104,13 @@ const getTableData = async() => {
 		const res = await roleapi.getRoleList(state.tableData.param);
 		// console.log(res.data);
 		if(res?.success){
-			state.tableData.data = res.data.records;
+			state.tableData.data = res.data.records.map((record:any) => {
+				return{
+					...record,
+					description:record.description || '无', //如果描述为空
+					serch:record.name
+				}
+			});
 			state.tableData.total = res.data.total;
 			// console.log(state.tableData.data);
 		}else{
@@ -115,14 +124,28 @@ const getTableData = async() => {
 			}, 500);
 	}
 };
+
+//查询角色
+const getroleDetail = async() =>{
+	try{
+		const res = await roleapi.getRoleDetail();
+	}catch(error){
+		console.error(error)
+	}
+};
+
 // 打开新增角色弹窗
 const onOpenAddRole = (type: string) => {
+
 	roleDialogRef.value.openDialog(type);
 };
 // 打开修改角色弹窗
 const onOpenEditRole = (type: string, row: Object) => {
+	console.log(row);
+	
 	roleDialogRef.value.openDialog(type, row);
 };
+
 // 删除角色
 const onRowDel = (row: any) => {
 	ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.name}”，是否继续?`, '提示', {
@@ -180,6 +203,7 @@ const onHandleCurrentChange = (val: number) => {
 // 页面加载时
 onMounted(() => {
 	getTableData();
+	// handleChange();
 });
 </script>