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

refactor: 重构权限管理

Browse Source 
1.更新字段管理
This commit is contained in:
猿小天
2023-11-20 17:02:37 +08:00
parent 96748da99d
commit 94ad6b1bae
23 changed files with 116 additions and 845 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/.env.development
View File

@@ -2,7 +2,7 @@
ENV = 'development'
# 本地环境接口地址
VITE_API_URL = 'http://127.0.0.1:8000'
VITE_API_URL = 'http://127.0.0.1:8001'
# 是否启用按钮权限
VITE_PM_ENABLED = true

2
web/src/views/system/menu/components/MenuButtonCom/crud.tsx
View File

@@ -124,7 +124,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
type: 'text',
search: { show: false },
column: {
width: 120,
width: 200,
sortable: true,
},
form: {

2
web/src/views/system/menu/components/MenuButtonCom/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
</template>
<script lang="ts" setup>

20
web/src/views/system/menu/index.vue
View File

@@ -14,9 +14,19 @@
</el-col>
<el-col :span="18">
<div class="menu-box menu-right-box">
<MenuButtonCom ref="menuButtonRef" />
</div>
<el-tabs type="border-card">
<el-tab-pane label="按钮配置" >
<div style="height: 80vh">
<MenuButtonCom ref="menuButtonRef" />
</div>
</el-tab-pane>
<el-tab-pane label="字段配置">
<div style="height: 80vh">
<MenuFieldCom ref="menuFieldRef"></MenuFieldCom>
</div>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
@@ -39,6 +49,7 @@ import { ElMessageBox } from 'element-plus';
import MenuTreeCom from './components/MenuTreeCom/index.vue';
import MenuButtonCom from './components/MenuButtonCom/index.vue';
import MenuFormCom from './components/MenuFormCom/index.vue';
import MenuFieldCom from './components/MenuFieldCom/index.vue';
import { GetList, DelObj } from './api';
import { successNotification } from '/@/utils/message';
import { APIResponseData, MenuTreeItemType } from './types';
@@ -49,7 +60,7 @@ let drawerVisible = ref(false);
let drawerFormData = ref<Partial<MenuTreeItemType>>({});
let menuTreeRef = ref<InstanceType<typeof MenuTreeCom> | null>(null);
let menuButtonRef = ref<InstanceType<typeof MenuButtonCom> | null>(null);
let menuFieldRef = ref<InstanceType<typeof MenuFieldCom> | null>(null);
const getData = () => {
GetList({}).then((ret: APIResponseData) => {
const responseData = ret.data;
@@ -67,6 +78,7 @@ const getData = () => {
*/
const handleTreeClick = (record: MenuTreeItemType) => {
menuButtonRef.value?.handleRefreshTable(record);
menuFieldRef.value?.handleRefreshTable(record)
};
/**

117
web/src/views/system/role/components/PermissionCom/api.ts
View File

@@ -1,117 +0,0 @@
import { request } from "/@/utils/service";
/**
* 获取角色所拥有的菜单
* @param params
*/
export function GetMenu(params:any) {
return request({
url: '/api/system/role_menu_button_permission/role_get_menu/',
method: 'get',
params:params
});
}
/***
* 新增权限
* @param data
* @constructor
*/
export function SaveMenuPermission(data:any) {
return request({
url: '/api/system/role_menu_permission/save_auth/',
method: 'post',
data:data
});
}
/**
* 获取菜单下的按钮
* @param params
* @constructor
*/
export function GetMenuButton(params:any) {
return request({
url: '/api/system/role_menu_button_permission/role_menu_get_button/',
method: 'get',
params:params
});
}
/***
* 根据角色获取已授权的菜单
* @param params
* @constructor
*/
export function role_to_menu (params:any={}) {
return request({
url: '/api/system/role_menu_button_permission/role_to_menu/',
method: 'get',
params: params
})
}
/***
* 根据角色获取数据权限范围
* @constructor
*/
export function GetDataScope (params:any={}) {
return request({
url: '/api/system/role_menu_button_permission/data_scope/',
method: 'get',
params: params
})
}
/***
* 获取权限部门
* @constructor
*/
export function GetDataScopeDept (params:any) {
return request({
url: '/api/system/role_menu_button_permission/role_to_dept_all/',
method: 'get',
params: params
})
}
/***
* 新增权限
* @param data
* @constructor
*/
export function CreatePermission(data:any) {
return request({
url: '/api/system/role_menu_button_permission/',
method: 'post',
data:data
});
}
/***
* 根据菜单获取菜单下按钮
* @param params
*/
export function getObj(params:any) {
return request({
url: '/api/system/role_menu_button_permission/menu_to_button/',
method: 'get',
params:params
});
}
/**
* 删除按钮权限
* @param data
* @constructor
*/
export function DeletePermission(data:any) {
return request({
url: `/api/system/role_menu_button_permission/${data.id}/`,
method: 'delete',
data:{}
});
}

350
web/src/views/system/role/components/PermissionCom/index.vue
View File

@@ -1,350 +0,0 @@
<template>
<el-drawer size="70%" v-model="drawer" direction="rtl" destroy-on-close :before-close="handleClose">
<template #header>
<div>
<el-tag>当前角色:{{ editedRoleInfo.name }}</el-tag>
</div>
</template>
<div style="padding: 1em">
<div style="margin-bottom: 10px">
<el-button type="primary" @click="onSaveAuth">保存菜单授权</el-button>
</div>
<vxe-table
ref="tableRef"
border
resizable
:row-config="{ keyField: 'menu_id' }"
:tree-config="{ transform: true, rowField: 'menu_id', parentField: 'parent' }"
:checkbox-config="{ labelField: 'menu_id', checkRowKeys: multipleTableData, checkStrictly: true }"
:expand-config="{ accordion: true }"
@toggle-row-expand="menuNodeClick"
:data="menuData"
>
<vxe-column type="checkbox" title="ID" width="200" tree-node></vxe-column>
<vxe-column field="name" title="目录/菜单"></vxe-column>
<vxe-column type="expand" title="已授予权限" width="120">
<template #content="{ row, rowIndex }">
<div style="padding: 10px 0px" v-if="!row.is_catalog">
<el-button type="primary" size="small" style="margin-bottom: 0.5em" @click="createBtnPermission">新增 </el-button>
<el-table size="small" :data="buttonPermissionData" border style="width: 100%">
<el-table-column prop="menu_button" label="权限名称" width="100">
<template #default="scope">
<div>{{ scope.row.menu_button__name }}</div>
</template>
</el-table-column>
<el-table-column prop="menu_button__value" label="权限值" width="150"> </el-table-column>
<el-table-column prop="data_range" label="权限范围" width="140">
<template #default="scope">
<div>{{ formatDataRange(scope.row.data_range) }}</div>
</template>
</el-table-column>
<el-table-column prop="dept" label="权限涉及部门" />
<el-table-column fixed="right" label="操作" width="120">
<template #default="scope">
<el-button type="danger" size="small" @click="onDeleteBtn(scope)">删除 </el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
</vxe-column>
</vxe-table>
<!-- 弹窗-->
<el-dialog v-model="dialogFormVisible" append-to-body width="400px" title="配置按钮权限">
<el-form ref="buttonFormRef" :model="buttonForm" :rules="buttonRules" label-width="120px">
<el-form-item label="按钮" prop="menu_button">
<el-select v-model="buttonForm.menu_button" placeholder="请选择按钮" @change="onChangeButton">
<el-option v-for="(item, index) in buttonOptions" :key="index" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="权限范围" prop="data_range">
<el-select v-model="buttonForm.data_range" placeholder="请选择按钮">
<el-option v-for="(item, index) in dataScopeOptions" :key="index" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="数据部门" prop="dept" v-show="buttonForm.data_range === 4">
<div class="dept-tree">
<el-tree
:data="deptOptions"
show-checkbox
default-expand-all
:default-checked-keys="deptCheckedKeys"
ref="deptTree"
node-key="dept_id"
:check-strictly="true"
:props="{ label: 'name' }"
></el-tree>
</div>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="onSaveButtonForm"> 确定 </el-button>
</span>
</template>
</el-dialog>
</div>
</el-drawer>
</template>
<script lang="ts" setup>
import { ref, defineExpose, reactive, toRefs } from 'vue';
import { ElMessageBox, ElTable } from 'element-plus';
import * as api from './api.ts';
import type { FormRules, FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import XEUtils from 'xe-utils';
import { VXETable, VxeTableInstance, VxeTableEvents } from 'vxe-table';
interface tableRow {
menu_id: number;
name: string;
}
//抽屉是否显示
const drawer = ref(false);
//当前编辑的角色信息
const editedRoleInfo = ref({});
//抽屉关闭确认
const handleClose = (done: () => void) => {
ElMessageBox.confirm('您确定要关闭?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
done();
})
.catch(() => {
// catch error
});
};
/*****菜单的配置项***/
const defaultProps = {
children: 'children',
label: 'name',
isLeaf: 'hasChild',
};
interface Tree {
name: string;
children?: Tree[];
id: number;
}
let menuData = ref<Tree>();
//获取菜单
const getMenuData = () => {
api.GetMenu({}).then((res: any) => {
const { data } = res;
menuData.value = data;
});
};
//获取已授权的菜单
const tableRef = ref<VxeTableInstance<tableRow>>();
const multipleTableData = ref();
const getRoleToMenu = () => {
api.role_to_menu({ role: editedRoleInfo.value.id }).then((res: any) => {
const { data } = res;
multipleTableData.value = data;
});
};
let isBtnPermissionShow = ref(false);
let buttonOptions = ref<[]>();
let editedMenuInfo = ref();
//菜单节点点击事件
const menuNodeClick: VxeTableEvents.ToggleRowExpand<tableRow> = ({ expanded, row }) => {
// isBtnPermissionShow.value = !node.is_catalog
if (!row.is_catalog) {
buttonOptions.value = [];
editedMenuInfo.value = row;
api.GetMenuButton({ menu: row.menu_id }).then((res: any) => {
const { data } = res;
buttonOptions.value = data;
});
api.getObj({ menu: row.menu_id, role: editedRoleInfo.value.id }).then((res: any) => {
const { data } = res;
buttonPermissionData.value = data;
});
}
};
const menuTree = ref();
/*****菜单的配置项***/
/***按钮授权的弹窗****/
//是否显示新增表单
const dialogFormVisible = ref(false);
//部门树
const deptTree = ref();
//自定义部门数据
const deptOptions = ref();
//选中的部门数据
const deptCheckedKeys = [];
//按钮表单
const buttonForm = reactive({
menu_button: null,
role: null,
menu: null,
data_range: null,
dept: [],
});
//按钮表格数据
let buttonPermissionData = ref([]);
//按钮表单验证
const buttonRules = reactive<FormRules>({
menu_button: [{ required: true, message: '必填项' }],
data_range: [{ required: true, message: '必填项' }],
});
//新增按钮
const buttonFormRef = ref<FormInstance>();
const createBtnPermission = () => {
dialogFormVisible.value = true;
buttonForm.menu_button = null;
buttonForm.menu = null;
buttonForm.role = null;
buttonForm.data_range = null;
buttonForm.dept = [];
};
//权限范围数据
const dataScopeOptions = ref<[]>();
//按钮值变化事件
const onChangeButton = (val: any) => {
dataScopeOptions.value = [];
//获取权限值范围
api.GetDataScope({ menu_button: val }).then((res: any) => {
dataScopeOptions.value = res.data;
});
//获取权限部门值
api.GetDataScopeDept({ menu_button: val }).then((res: any) => {
deptOptions.value = XEUtils.toArrayTree(res.data, { parentKey: 'parent', strict: false });
});
};
//过滤按钮名称
const formatMenuBtn = (val: any) => {
let obj: any = buttonOptions.value?.find((item: any) => {
return item.id === val;
});
return obj ? obj.name : null;
};
//过滤权限范围
const formatDataRange = (val: any) => {
let obj: any = [
{
value: 0,
label: '仅本人数据权限',
},
{
value: 1,
label: '本部门及以下数据权限',
},
{
value: 2,
label: '本部门数据权限',
},
{
value: 3,
label: '全部数据权限',
},
{
value: 4,
label: '自定义数据权限',
},
].find((item: any) => {
return item.value === val;
});
return obj ? obj.label : null;
};
//保存按钮表单
const onSaveButtonForm = async () => {
const { id: roleId } = editedRoleInfo.value;
const { id: menuId } = editedMenuInfo.value;
const form: any = Object.assign({}, buttonForm);
form.role = roleId;
form.menu = menuId;
//选中的部门
const checkedList = deptTree.value.getCheckedKeys();
form.dept = checkedList;
if (!buttonFormRef.value) return;
await buttonFormRef.value.validate((valid, fields) => {
if (valid) {
api.CreatePermission(form).then((res: any) => {
const { data } = res;
buttonPermissionData.value.push(data);
dialogFormVisible.value = false;
ElMessage({
type: 'success',
message: res.msg,
});
});
} else {
ElMessage({
type: 'error',
title: '提交错误',
message: 'F12控制台看详情',
});
console.log('提交错误', fields);
}
});
};
//删除按钮权限
const onDeleteBtn = (scope: any) => {
const { row, $index } = scope;
ElMessageBox.confirm('您是否要删除数据?', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
api.DeletePermission({ id: row.id }).then((res: any) => {
buttonPermissionData.value.splice($index, 1);
ElMessage({
type: 'success',
message: res.msg,
});
});
})
.catch(() => {
ElMessage({
type: 'info',
message: '取消删除',
});
});
};
/***按钮授权的弹窗****/
//初始化数据
const initGet = () => {
getMenuData();
getRoleToMenu();
};
/**
* 保存授权
*/
const onSaveAuth = () => {
const $table = tableRef.value;
if ($table) {
const selectRecords = $table.getCheckboxRecords();
const menuIdList = selectRecords.map((record: any) => record.menu_id);
const { id: roleId } = editedRoleInfo.value;
const data = {
role: roleId,
menu: menuIdList,
};
api.SaveMenuPermission(data).then((res: any) => {
ElMessage({
message: res.msg,
type: 'success',
});
});
}
};
defineExpose({ drawer, editedRoleInfo, initGet });
</script>
<style scoped></style>

21
web/src/views/system/role/components/PermissionComCopy/api.ts
View File

@@ -1,21 +0,0 @@
import { request } from "/@/utils/service";
export function getDataPermissionRange() {
return request({
url: '/api/system/role_menu_button_permission/data_scope/',
method: 'get',
})
}
export function getDataPermissionDept() {
return request({
url: '/api/system/role_menu_button_permission/role_to_dept_all/',
method: 'get'
})
}
export function getDataPermissionMenu() {
return request({
url: '/api/system/role_menu_button_permission/get_role_permissions/',
method: 'get'
})
}

235
web/src/views/system/role/components/PermissionComCopy/index.vue
View File

@@ -1,235 +0,0 @@
<template>
<div class="permission-com">
<div class="pc-item">
<p class="pc-title">数据授权</p>
<div class="pc-cell">
<el-radio-group v-model="dataPermission" class="pc-data-permission">
<el-radio v-for="item in dataPermissionRange" :key="item.label" :label="item.value" @change="handleChange">{{ item.label }}</el-radio>
</el-radio-group>
<el-tree-select
v-if="dataPermission === 4"
node-key="id"
v-model="customDataPermission"
:props="defaultTreeProps"
:data="deptData"
multiple
check-strictly
:render-after-expand="false"
show-checkbox
class="pc-custom-dept"
/>
</div>
</div>
<div class="pc-item pc-menu">
<p class="pc-title">菜单授权</p>
<div>
<el-tree
:props="defaultTreeProps"
:data="menuData"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
class="dc-menu-tree"
>
<template #default="{ node, data }">
<div class="pc-tree-node" :class="{ 'tree-node-label-border': !data.is_catalog }">
<p class="tree-node-label">{{ node.label }}</p>
<div v-if="!data.is_catalog">
<ul class="menu-permission-list">
<li v-for="m in data.menuPermission" :key="m.id" class="menu-permission-item">
<el-checkbox v-model="m.id" :label="m.name" />
</li>
</ul>
<ul class="menu-permission-list">
<li v-for="m in data.columns" :key="m.id" class="menu-permission-item">
<el-checkbox v-model="m.id" :label="m.title" />
</li>
</ul>
</div>
</div>
</template>
</el-tree>
</div>
</div>
<div class="pc-btn">
<el-button type="primary">确定</el-button>
<el-button>取消</el-button>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import XEUtils from 'xe-utils';
import { getDataPermissionRange, getDataPermissionDept, getDataPermissionMenu } from './api';
import { DataPermissionRangeType, CustomDataPermissionDeptType, CustomDataPermissionMenuType } from './types';
const defaultTreeProps = {
children: 'children',
label: 'name',
value: 'id',
};
const data: any[] = [
{
id: 1,
label: 'Level one 1',
children: [
{
id: 4,
label: 'Level two 1-1',
isPenultimate: true,
children: [
{
id: 9,
label: 'Level three 1-1-1',
},
{
id: 10,
label: 'Level three 1-1-2',
},
],
},
],
},
{
id: 2,
label: 'Level one 2',
isPenultimate: true,
children: [
{
id: 5,
label: 'Level two 2-1',
},
{
id: 6,
label: 'Level two 2-2',
},
],
},
{
id: 3,
label: 'Level one 3',
isPenultimate: true,
children: [
{
id: 7,
label: 'Level two 3-1',
},
{
id: 8,
label: 'Level two 3-2',
},
],
},
];
let dataPermission = ref();
let dataPermissionRange = ref<DataPermissionRangeType[]>([]);
let customDataPermission = ref();
let deptData = ref<CustomDataPermissionDeptType[]>([]);
let menuData = ref<CustomDataPermissionMenuType[]>([]);
const fetchData = async () => {
try {
const resRange = await getDataPermissionRange();
const resMenu = await getDataPermissionMenu();
if (resRange?.code === 2000) {
dataPermissionRange.value = resRange.data;
}
if (resMenu?.code === 2000) {
console.log(resMenu.data);
menuData.value = resMenu.data;
}
} catch {
return;
}
};
const handleChange = async () => {
if (dataPermission.value === 4) {
const res = await getDataPermissionDept();
const data = XEUtils.toArrayTree(res.data, { parentKey: 'parent', strict: false });
deptData.value = data;
}
};
const handleTestClick = (node: any, data: any) => {
console.log(node, data);
};
onMounted(() => {
fetchData();
});
</script>
<style lang="scss" scoped>
.permission-com {
width: 100%;
height: 100%;
padding: 15px;
box-sizing: border-box;
.pc-item {
width: 100%;
margin-bottom: 15px;
border-bottom: 1px #dcdfe6 solid;
}
.pc-title {
font-weight: 600;
}
.pc-cell {
display: flex;
padding: 10px;
overflow-x: auto;
.pc-data-permission {
min-width: 800px;
}
.pc-custom-dept {
min-width: 200px;
}
}
.pc-menu {
height: calc(100% - 140px);
overflow-y: auto;
}
.pc-tree-node {
width: 100%;
display: flex;
align-items: center;
.tree-node-label {
font-size: 16px;
margin-right: 20px;
}
.menu-permission-list {
display: flex;
align-items: center;
.menu-permission-item {
margin-right: 10px;
}
}
}
.tree-node-label-border {
border-bottom: 1px #dcdfe6 solid;
}
.pc-btn {
padding-bottom: 15px;
}
}
</style>
<style lang="scss">
.dc-menu-tree {
.el-tree-node__content {
height: auto;
}
}
</style>

20
web/src/views/system/role/components/PermissionComCopy/types.ts
View File

@@ -1,20 +0,0 @@
export interface DataPermissionRangeType {
label: string;
value: number;
}
export interface CustomDataPermissionDeptType {
id: number;
name: string;
patent: number;
children: CustomDataPermissionDeptType[]
}
export interface CustomDataPermissionMenuType {
id: number;
name: string;
is_catalog: boolean;
menuPermission: { id: number; name: string; value: string }[] | null;
columns: { id: number; name: string; title: string }[] | null;
children: CustomDataPermissionMenuType[]
}

4
web/src/views/system/role/components/PermissionComNew/index.vue
View File

@@ -1,6 +1,8 @@
<template>
<el-drawer v-model="drawerVisible" title="权限配置" direction="rtl" size="60%" :close-on-click-modal="false"
:before-close="handleDrawerClose">
:before-close="handleDrawerClose"
:destroy-on-close="true"
>
<template #header>
<el-row>
<el-col :span="4">

34
web/src/views/system/role/crud.tsx
View File

@@ -183,40 +183,6 @@ export const createCrudOptions = function ({
value: 1,
},
},
admin: {
title: '是否管理员',
search: { show: false },
type: 'dict-radio',
dict: dict({
data: [
{
label: '是',
value: true,
color: 'success',
},
{
label: '否',
value: false,
color: 'danger',
},
],
}),
column: {
minWidth: 130,
sortable: 'custom',
show: columnPermission('admin', 'is_query'),
},
addForm: {
show: columnPermission('admin', 'is_create'),
},
editForm: {
show: columnPermission('admin', 'is_update'),
},
form: {
rules: [{ required: true, message: '是否管理员必填' }],
value: false,
},
},
status: {
title: '状态',
search: { show: true },

1
web/src/views/system/role/index.vue
View File

@@ -18,7 +18,6 @@ import { useColumnPermission } from '/@/stores/columnPermission';
import { GetPermission } from './api';
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import permission from './components/PermissionCom/index.vue';
import PermissionComNew from './components/PermissionComNew/index.vue';
let drawerVisible = ref(false);