权限管理
This commit is contained in:
parent
20b04d9124
commit
91c5ac8cbd
@ -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',
|
||||
|
||||
@ -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: [
|
||||
// {
|
||||
// validator: (rule, value, callback) => {
|
||||
// if ((value ?? []).length === 0) {
|
||||
// callback(new Error('请为角色分配权限'));
|
||||
// return;
|
||||
// }
|
||||
// callback();
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
menus: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if ((value ?? []).length === 0) {
|
||||
callback(new Error('请为角色分配权限'));
|
||||
return;
|
||||
}
|
||||
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 = '修 改';
|
||||
treeRef.value?.setCheckedKeys(data ?? []);
|
||||
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) {
|
||||
await sysroleGrantpermissionPost({
|
||||
id: state.ruleForm.id,
|
||||
menuIds: state.ruleForm.menus,
|
||||
});
|
||||
ElMessage.success('修改成功');
|
||||
closeDialog();
|
||||
emit('refresh');
|
||||
} else {
|
||||
ElMessage.success('新增成功');
|
||||
closeDialog();
|
||||
emit('refresh');
|
||||
}
|
||||
// 无论是新增还是修改，都需要授予菜单权限
|
||||
const roleId = state.ruleForm.id === 0 ? data : state.ruleForm.id;
|
||||
await sysroleGrantpermissionPost({
|
||||
id: roleId,
|
||||
menuIds: state.ruleForm.menus,
|
||||
});
|
||||
ElMessage.success(state.ruleForm.id === 0 ? '新增成功' : '修改成功');
|
||||
closeDialog();
|
||||
emit('refresh');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -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',
|
||||
label: '创建时间',
|
||||
prop: 'remark',
|
||||
label: '角色描述',
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
{
|
||||
prop: 'action',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user