hjq/PixelAI-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

角色管理权限设置

Browse Source
This commit is contained in:
夕阳微笑1 2024-12-23 21:25:50 +08:00
parent ce617bf906
commit 77846d5360
5 changed files with 312 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/api/role/index.ts
View File

@ -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}`,
method: 'delete',
});
},
getRoleDetail: (id: Number) => {
return request({
url: baseUrlHost + `/acGroup/${id}`,
method: 'get',
});
},
saveRole: (data: object) => {
return request({
url: baseUrlHost + '/acGroup',
method: 'post',
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',
});
},
};
}

26
src/api/roleaction/index.ts Normal file
View File

@ -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',
})
}
}
}

25
src/api/roletype/index.ts Normal file
View File

@ -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',
})
}
}
}

334
src/views/usermanage/role/dialog.vue
View File

@ -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-tree :data="state.menuData" :props="state.menuProps" show-checkbox class="menu-data-tree" />
<el-form-item label="角色权限" v-if="state.dialog.type === 'edit'" >
<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[],
menuProps: {
children: 'children',
label: 'label',
data:{
acgroup:'',
name:'',
},
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 = () => {
closeDialog();
emit('reset');
// if (state.dialog.type === 'add') { }
};
// 获取菜单结构数据
const getMenuData = () => {
state.menuData = [
{
id: 1,
label: '系统管理',
children: [
{
id: 11,
label: '菜单管理',
children: [
{
id: 111,
label: '菜单新增',
},
{
id: 112,
label: '菜单修改',
},
{
id: 113,
label: '菜单删除',
},
{
id: 114,
label: '菜单查询',
},
],
},
{
id: 12,
label: '角色管理',
children: [
{
id: 121,
label: '角色新增',
},
{
id: 122,
label: '角色修改',
},
{
id: 123,
label: '角色删除',
},
{
id: 124,
label: '角色查询',
},
],
},
{
id: 13,
label: '用户管理',
children: [
{
id: 131,
label: '用户新增',
},
{
id: 132,
label: '用户修改',
},
{
id: 133,
label: '用户删除',
},
{
id: 134,
label: '用户查询',
},
],
},
],
},
{
id: 2,
label: '权限管理',
children: [
{
id: 21,
label: '前端控制',
children: [
{
id: 211,
label: '页面权限',
},
{
id: 212,
label: '页面权限',
},
],
},
{
id: 22,
label: '后端控制',
children: [
{
id: 221,
label: '页面权限',
},
],
},
],
},
];
const onSubmit = async() => {
// closeDialog();
// emit('reset');
roleDialogFormRef.value?.validate( async (valid: boolean) => {
if(valid){
state.ruleForm.show = state.ruleForm.show ? 1 : 0;
state.ruleForm.grouptypeid = 1;
let body = {
actions:tree.value.getCheckedKeys(true, false),
groupid:state.ruleForm.id
}
if (state.dialog.type === 'add') {
try{
const param = {
acgroup:state.ruleForm.acgroup,
name:state.ruleForm.name
}
const res = await roleapi.addRole(param);
if (res?.success) {
try{
const data = await roleactionapi.setUprolePermission(body)
console.log(5555555,data);
}catch(error){
console.error(error)
}
emit('reset');
closeDialog();
ElMessage.success('角色新建成功！');
// 重置表单数据
Object.assign(state.ruleForm, {
name: '',
acgroup: '',
grouptypeid: 0,
show: 0,
description: '',
checkTree: [],
});
}
} catch(error){
console.error(error);
ElMessage.error('角色新建失败！')
}
} else {
try{
const res = await roleapi.updateRole(state.ruleForm);
if(res?.success){
try{
const res = await roleactionapi.setUprolePermission(body)
console.log(5555555,res);
emit('reset');
ElMessage.success('角色修改成功！');
closeDialog();
}catch(error){
ElMessage.error('角色权限修改失败!')
console.error
}
}
}catch(error){
ElMessage.error('角色修改失败！')
console.error(error)
}
}
}
})
// if (state.dialog.type === 'add') {
// roleDialogFormRef.value?.validate((valid: boolean) => {
// if (valid) {
// closeDialog();
// emit('reset');
// } else {
// ElMessage.error('请填写完整的表单信息');
// return false;
// }
// });
// }
// else{
// roleDialogFormRef.value?.validate((valid:boolean) => {
// if (valid) {
// closeDialog();
// emit('reset');
// } else {
// ElMessage.error('请修改完整的表单信息');
// return false;
// }
// })
// }
};
// 暴露变量
defineExpose({
openDialog,
});
//页面加载时
onMounted(() =>{
// getroletypeTree(1)
})
</script>
<style scoped lang="scss">

44
src/views/usermanage/role/index.vue
View File

@ -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-button size="default" type="primary" class="ml10">
<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" @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="state" label="角色状态" show-overflow-tooltip>
<el-table-column prop="show" label="角色状态" show-overflow-tooltip>
<template #default="scope">
<el-tag type="success" v-if="scope.row.state">启用</el-tag>
<el-tag type="info" v-else>禁用</el-tag>
<el-tag type="success" v-if="scope.row.show==1">启用</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>