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

1.菜单和按钮权限范围授权完成;

Browse Source
This commit is contained in:
猿小天
2023-08-18 00:39:14 +08:00
committed by 李强
parent ea335922b2
commit 4b948fe5c3
4 changed files with 324 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
backend/dvadmin/system/views/role_menu_button_permission.py
View File

@@ -47,6 +47,7 @@ class RoleButtonPermissionSerializer(CustomModelSerializer):
角色按钮权限 角色按钮权限
""" """
isCheck = serializers.SerializerMethodField() isCheck = serializers.SerializerMethodField()
data_range = serializers.SerializerMethodField()
def get_isCheck(self, instance): def get_isCheck(self, instance):
params = self.request.query_params params = self.request.query_params
@@ -55,9 +56,20 @@ class RoleButtonPermissionSerializer(CustomModelSerializer):
role__id=params.get('role'), role__id=params.get('role'),
).exists() ).exists()
def get_data_range(self, instance):
params = self.request.query_params
obj = RoleMenuButtonPermission.objects.filter(
menu_button__id=instance['id'],
role__id=params.get('role'),
).first()
if obj is None:
return None
return obj.data_range
class Meta: class Meta:
model = MenuButton model = MenuButton
fields = ['id','name','value','isCheck'] fields = ['id','name','value','isCheck','data_range']
class RoleMenuPermissionSerializer(CustomModelSerializer): class RoleMenuPermissionSerializer(CustomModelSerializer):
""" """
@@ -122,7 +134,7 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
@action(methods=['PUT'], detail=True, permission_classes=[IsAuthenticated]) @action(methods=['PUT'], detail=True, permission_classes=[IsAuthenticated])
def set_role_premission(self,request,pk): def set_role_premission(self,request,pk):
""" """
对角色授权: 对角色的菜单和按钮授权:
:param request: :param request:
:param pk: role :param pk: role
:return: :return:
@@ -137,10 +149,12 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
RoleMenuPermission.objects.create(role_id=pk, menu_id=menu.get('id')) RoleMenuPermission.objects.create(role_id=pk, menu_id=menu.get('id'))
for btn in menu.get('btns'): for btn in menu.get('btns'):
if btn.get('isCheck'): if btn.get('isCheck'):
RoleMenuButtonPermission.objects.create(role_id=pk, menu_button_id=btn.get('id')) instance = RoleMenuButtonPermission.objects.create(role_id=pk, menu_button_id=btn.get('id'),data_range=btn.get('data_range'))
instance.dept.set(btn.get('dept',[]))
return DetailResponse(msg="授权成功") return DetailResponse(msg="授权成功")
@action(methods=['GET'], detail=False, permission_classes=[IsAuthenticated]) @action(methods=['GET'], detail=False, permission_classes=[IsAuthenticated])
def role_menu_get_button(self, request): def role_menu_get_button(self, request):
""" """

12
web/src/views/system/role/components/PermissionComNew/api.ts
View File

@@ -45,3 +45,15 @@ export function getDataPermissionMenu() {
method: 'get' method: 'get'
}) })
} }
/**
* 设置按钮的数据范围
*/
export function setBtnDatarange(roleId:number,data:object) {
return request({
url: `/api/system/role_menu_button_permission/${roleId}/set_btn_datarange/`,
method: 'put',
data
})
}

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

@@ -1,119 +1,134 @@
<template> <template>
<el-drawer v-model="drawerVisible" title="权限配置" direction="rtl" size="60%" :close-on-click-modal="false" :before-close="handleDrawerClose"> <el-drawer v-model="drawerVisible" title="权限配置" direction="rtl" size="60%" :close-on-click-modal="false"
:before-close="handleDrawerClose">
<template #header> <template #header>
<div>当前角色: <el-tag>{{props.roleName}}</el-tag></div> <el-row>
<el-col :span="4">
<div>当前角色:
<el-tag>{{ props.roleName }}</el-tag>
</div>
</el-col>
<el-col :span="6" :offset="8">
<div>
<el-button size="small" type="primary" class="pc-save-btn" @click="handleSavePermission">保存菜单授权
</el-button>
</div>
</el-col>
</el-row>
</template> </template>
<div class="permission-com"> <div class="permission-com">
<el-button type="primary" class="pc-save-btn" @click="handleSavePermission">保存菜单授权</el-button> <el-collapse v-model="collapseCurrent" @change="handleCollapseChange" accordion>
<el-collapse-item v-for="(item,mIndex) in menuData" :key="mIndex" :name="mIndex">
<template #title>
<div @click.stop="null">
<p class="pc-collapse-title">
<el-checkbox v-model="item.isCheck">
<span>{{ item.name }}</span>
</el-checkbox>
</p>
<div v-show="!collapseCurrent.includes(mIndex)">
<el-checkbox v-for="btn in item.btns" :key="btn.value" :label="btn.value" v-model="btn.isCheck">
{{ btn.name }}
</el-checkbox>
</div>
</div>
</template>
<div class="pc-collapse-main">
<div class="pccm-item">
<p>允许对这些数据有以下操作</p>
<el-checkbox v-for="(btn,bIndex) in item.btns" :key="bIndex" v-model="btn.isCheck" :label="btn.value">
<div class="btn-item">
{{ btn.data_range!==null ? `${btn.name}(${formatDataRange(btn.data_range)})` : btn.name }}
<span v-show="btn.isCheck" @click.stop.prevent="handleSettingClick(item, btn.id)">
<el-icon><Setting/></el-icon>
</span>
</div>
</el-checkbox>
</div>
<el-collapse v-model="collapseCurrent" @change="handleCollapseChange" accordion> <div class="pccm-item">
<el-collapse-item v-for="(item,mIndex) in menuData" :key="mIndex" :name="mIndex"> <p>对这些数据有以下字段权限</p>
<template #title>
<div @click.stop="null">
<p class="pc-collapse-title">
<el-checkbox v-model="item.isCheck">
<span>{{ item.name }}</span>
</el-checkbox>
</p>
<div v-show="!collapseCurrent.includes(mIndex)">
<el-checkbox v-for="btn in item.btns" :key="btn.value" :label="btn.value" v-model="btn.isCheck">{{ btn.name }}</el-checkbox>
</div>
</div>
</template>
<div class="pc-collapse-main">
<div class="pccm-item">
<p>允许对这些数据有以下操作</p>
<el-checkbox v-for="btn in item.btns" :key="btn.value" v-model="btn.isCheck" :label="btn.value">
<p class="btn-item">
{{ btn.role ? `${btn.label}(${btn.role})` : btn.name }}
<span @click.stop.prevent="handleSettingClick(item, btn.value)">
<el-icon><Setting /></el-icon>
</span>
</p>
</el-checkbox>
</div>
<div class="pccm-item"> <el-radio-group v-model="item.radio">
<p>对这些数据有以下字段权限</p> <el-radio label="1">全部字段可查看可编辑</el-radio>
<el-radio label="2">全部字段仅可查看不可编辑</el-radio>
<el-radio label="3">自定义字段权限</el-radio>
</el-radio-group>
<el-radio-group v-model="item.radio"> <ul v-show="item.radio === '3'" class="columns-list">
<el-radio label="1">全部字段可查看可编辑</el-radio> <li class="columns-head">
<el-radio label="2">全部字段仅可查看不可编辑</el-radio> <div class="width-txt">
<el-radio label="3">自定义字段权限</el-radio> <span>字段</span>
</el-radio-group> </div>
<ul v-show="item.radio === '3'" class="columns-list"> <div v-for="btn in item.btns" :key="btn.value" class="width-check">
<li class="columns-head"> <el-checkbox :label="btn.value" @change="handleColumnChange($event, item, btn.value)">
<div class="width-txt"> <span>{{ btn.label }}</span>
<span>字段</span> </el-checkbox>
</div> </div>
</li>
<div v-for="btn in item.btns" :key="btn.value" class="width-check"> <li v-for="(c_item, c_index) in item.columns" :key="c_index" class="columns-item">
<el-checkbox :label="btn.value" @change="handleColumnChange($event, item, btn.value)"> <div class="width-txt">{{ c_item.name }}</div>
<span>{{ btn.label }}</span> <div v-for="btn in item.btns" :key="btn.value" class="width-check">
</el-checkbox> <el-checkbox v-model="c_item[btn.value]" class="ci-checkout"></el-checkbox>
</div> </div>
</li> </li>
</ul>
</div>
</div>
</el-collapse-item>
</el-collapse>
<li v-for="(c_item, c_index) in item.columns" :key="c_index" class="columns-item"> <el-dialog v-model="dialogVisible" title="数据权限配置" width="400px" :close-on-click-modal="false"
<div class="width-txt">{{ c_item.name }}</div> :before-close="handleDialogClose">
<div v-for="btn in item.btns" :key="btn.value" class="width-check"> <div class="pc-dialog">
<el-checkbox v-model="c_item[btn.value]" class="ci-checkout"></el-checkbox> <el-select v-model="dataPermission" @change="handlePermissionRangeChange" class="dialog-select"
</div> placeholder="请选择">
</li> <el-option v-for="item in dataPermissionRange" :key="item.value" :label="item.label" :value="item.value"/>
</ul> </el-select>
</div> <el-tree-select
</div> v-show="dataPermission === 4"
</el-collapse-item> node-key="id"
</el-collapse> v-model="customDataPermission"
:props="defaultTreeProps"
<el-dialog v-model="dialogVisible" title="数据权限配置" width="400px" :close-on-click-modal="false" :before-close="handleDialogClose"> :data="deptData"
<div class="pc-dialog"> multiple
<el-select v-model="dataPermission" @change="handlePermissionRangeChange" class="dialog-select" placeholder="请选择"> check-strictly
<el-option v-for="item in dataPermissionRange" :key="item.value" :label="item.label" :value="item.value" /> :render-after-expand="false"
</el-select> show-checkbox
class="dialog-tree"
<el-tree-select />
v-if="dataPermission === 4" </div>
node-key="id" <template #footer>
v-model="customDataPermission" <div>
:props="defaultTreeProps" <el-button type="primary" @click="handleDialogConfirm"> 确定</el-button>
:data="deptData" <el-button @click="handleDialogClose"> 取消</el-button>
multiple </div>
check-strictly </template>
:render-after-expand="false" </el-dialog>
show-checkbox </div>
class="dialog-tree"
/>
</div>
<template #footer>
<div>
<el-button type="primary" @click="handleDialogConfirm"> 确定 </el-button>
<el-button @click="handleDialogClose"> 取消 </el-button>
</div>
</template>
</el-dialog>
</div>
</el-drawer> </el-drawer>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, defineProps,watch } from 'vue'; import {ref, onMounted, defineProps, watch,computed} from 'vue';
import XEUtils from 'xe-utils'; import XEUtils from 'xe-utils';
import { errorNotification } from '/@/utils/message'; import {errorNotification} from '/@/utils/message';
import {getDataPermissionRange, getDataPermissionDept, getRolePremission,setRolePremission} from './api'; import {getDataPermissionRange, getDataPermissionDept, getRolePremission, setRolePremission,setBtnDatarange} from './api';
import { MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType } from './types'; import {MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType} from './types';
import { ElMessage } from 'element-plus' import {ElMessage} from 'element-plus'
const props= defineProps({
roleId:{ const props = defineProps({
roleId: {
type: Number, type: Number,
default: -1 default: -1
}, },
roleName:{ roleName: {
type: String, type: String,
default: '' default: ''
}, },
drawerVisible:{ drawerVisible: {
type: Boolean, type: Boolean,
default: false default: false
} }
@@ -126,134 +141,115 @@ watch(
(val) => { (val) => {
drawerVisible.value = val; drawerVisible.value = val;
getMenuBtnPermission() getMenuBtnPermission()
fetchData()
} }
); );
const handleDrawerClose = ()=>{ const handleDrawerClose = () => {
emit('update:drawerVisible', false); emit('update:drawerVisible', false);
} }
const defaultTreeProps = { const defaultTreeProps = {
children: 'children', children: 'children',
label: 'name', label: 'name',
value: 'id', value: 'id',
}; };
let menuData = ref<MenuDataType[]>([ let menuData = ref<MenuDataType[]>([]);
// {
// key: '1',
// name: '用户管理',
// isCheck: true,
// radio: '1',
// btns: [
// { label: '新增', value: 'create', isCheck: true, role: '' },
// { label: '编辑', value: 'edit', isCheck: true, role: '' },
// { label: '查询', value: 'look', isCheck: true, role: '' },
// ],
// columns: [
// { name: '姓名', create: true, edit: true, delete: true, look: true },
// { name: '性别', create: false, edit: true, delete: false, look: true },
// { name: '地址', create: true, edit: false, delete: true, look: false },
// ],
// },
// {
// key: '2',
// name: '系统管理',
// isCheck: false,
// radio: '2',
// btns: [
// { label: '新增', value: 'create', isCheck: false, role: '' },
// { label: '编辑', value: 'edit', isCheck: true, role: '' },
// { label: '删除', value: 'delete', isCheck: false, role: '' },
// { label: '查询', value: 'look', isCheck: true, role: '' },
// ],
// columns: [
// { name: '姓名', create: false, edit: true, delete: false, look: true },
// { name: '性别', create: true, edit: true, delete: true, look: true },
// { name: '地址', create: true, edit: false, delete: true, look: false },
// ],
// },
]);
let collapseCurrent = ref(['1']); let collapseCurrent = ref(['1']);
let menuCurrent = ref<Partial<MenuDataType>>({}); let menuCurrent = ref<Partial<MenuDataType>>({});
let menuBtnCurrent = ref(''); let menuBtnCurrent = ref<number>(-1);
let dialogVisible = ref(false); let dialogVisible = ref(false);
let dataPermissionRange = ref<DataPermissionRangeType[]>([]); let dataPermissionRange = ref<DataPermissionRangeType[]>([]);
const formatDataRange = computed(() => {
return function(datarange:number){
const findItem = dataPermissionRange.value.find((i) => i.value === datarange);
return findItem?.label || ''
}
})
let deptData = ref<CustomDataPermissionDeptType[]>([]); let deptData = ref<CustomDataPermissionDeptType[]>([]);
let dataPermission = ref(); let dataPermission = ref();
let customDataPermission = ref([]); let customDataPermission = ref([]);
//获取菜单,按钮,权限 //获取菜单,按钮,权限
const getMenuBtnPermission = async () => { const getMenuBtnPermission = async () => {
const resMenu = await getRolePremission({role:props.roleId}) const resMenu = await getRolePremission({role: props.roleId})
menuData.value = resMenu.data menuData.value = resMenu.data
} }
const fetchData = async () => { const fetchData = async () => {
try { try {
const resRange = await getDataPermissionRange(); const resRange = await getDataPermissionRange();
if (resRange?.code === 2000) { if (resRange?.code === 2000) {
dataPermissionRange.value = resRange.data; dataPermissionRange.value = resRange.data;
} }
} catch { } catch {
return; return;
} }
}; };
const handleCollapseChange = (val: string) => { const handleCollapseChange = (val: string) => {
collapseCurrent.value = [val]; collapseCurrent.value = [val];
}; };
const handleSettingClick = (record: MenuDataType, btnType: string) => { /**
menuCurrent.value = record; * 设置按钮数据权限
menuBtnCurrent.value = btnType; * @param record 当前菜单
dialogVisible.value = true; * @param btnType 按钮类型
*/
const handleSettingClick = (record: MenuDataType, btnId: number) => {
menuCurrent.value = record;
menuBtnCurrent.value = btnId;
dialogVisible.value = true;
}; };
const handleColumnChange = (val: boolean, record: MenuDataType, btnType: string) => { const handleColumnChange = (val: boolean, record: MenuDataType, btnType: string) => {
for (const iterator of record.columns) { for (const iterator of record.columns) {
iterator[btnType] = val; iterator[btnType] = val;
} }
}; };
const handlePermissionRangeChange = async (val: number) => { const handlePermissionRangeChange = async (val: number) => {
if (val === 4) { if (val === 4) {
const res = await getDataPermissionDept(); const res = await getDataPermissionDept();
const data = XEUtils.toArrayTree(res.data, { parentKey: 'parent', strict: false }); const data = XEUtils.toArrayTree(res.data, {parentKey: 'parent', strict: false});
deptData.value = data; deptData.value = data;
} }
}; };
/**
* 数据权限设置确认
*/
const handleDialogConfirm = () => { const handleDialogConfirm = () => {
if (dataPermission.value !== 0 && !dataPermission.value) { if (dataPermission.value !== 0 && !dataPermission.value) {
errorNotification('请选择'); errorNotification('请选择');
return; return;
} }
//if (dataPermission.value !== 4) {} //if (dataPermission.value !== 4) {}
for (const iterator of menuData.value) { for (const iterator of menuData.value) {
if (iterator.key === menuCurrent.value.key) { if (iterator.id === menuCurrent.value.id) {
for (const b of iterator.btns) { for (const btn of iterator.btns) {
if (b.value === menuBtnCurrent.value) { if (btn.id === menuBtnCurrent.value) {
const findItem = dataPermissionRange.value.find((i) => i.value === dataPermission.value); const findItem = dataPermissionRange.value.find((i) => i.value === dataPermission.value);
b.role = findItem?.label || ''; btn.data_range = findItem?.value || 0;
} if(btn.data_range===4){
} btn.dept = customDataPermission.value
} }
} }
handleDialogClose(); }
}
}
handleDialogClose();
}; };
const handleDialogClose = () => { const handleDialogClose = () => {
dialogVisible.value = false; dialogVisible.value = false;
customDataPermission.value = []; customDataPermission.value = [];
dataPermission.value = null; dataPermission.value = null;
}; };
//保存权限 //保存权限
const handleSavePermission = () => { const handleSavePermission = () => {
setRolePremission(props.roleId, menuData.value).then(res=>{ setRolePremission(props.roleId, menuData.value).then(res => {
ElMessage({ ElMessage({
message: res.msg, message: res.msg,
type: 'success', type: 'success',
@@ -262,115 +258,132 @@ const handleSavePermission = () => {
} }
onMounted(() => { onMounted(() => {
fetchData();
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.permission-com { .permission-com {
margin: 15px; margin: 15px;
box-sizing: border-box; box-sizing: border-box;
.pc-save-btn {
margin-bottom: 15px;
}
.pc-collapse-title {
line-height: 32px;
span {
font-size: 16px;
}
}
.pc-collapse-main {
padding-top: 15px;
box-sizing: border-box;
.pccm-item {
margin-bottom: 10px;
.btn-item { .pc-save-btn {
display: flex; margin-bottom: 15px;
align-items: center; }
span {
margin-left: 5px;
}
}
.columns-list {
.width-txt {
width: 200px;
}
.width-check {
width: 80px;
}
.width-icon {
cursor: pointer;
}
.columns-head {
display: flex;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #ebeef5;
box-sizing: border-box;
span {
font-weight: 900;
}
}
.columns-item {
display: flex;
align-items: center;
padding: 6px 0;
box-sizing: border-box;
.ci-checkout {
height: auto !important;
}
}
}
}
}
.pc-dialog { .pc-collapse-title {
.dialog-select { line-height: 32px;
width: 100%;
} span {
.dialog-tree { font-size: 16px;
width: 100%; }
margin-top: 20px; }
}
} .pc-collapse-main {
padding-top: 15px;
box-sizing: border-box;
.pccm-item {
margin-bottom: 10px;
.btn-item {
display: flex;
align-items: center;
span {
margin-left: 5px;
}
}
.columns-list {
.width-txt {
width: 200px;
}
.width-check {
width: 80px;
}
.width-icon {
cursor: pointer;
}
.columns-head {
display: flex;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #ebeef5;
box-sizing: border-box;
span {
font-weight: 900;
}
}
.columns-item {
display: flex;
align-items: center;
padding: 6px 0;
box-sizing: border-box;
.ci-checkout {
height: auto !important;
}
}
}
}
}
.pc-dialog {
.dialog-select {
width: 100%;
}
.dialog-tree {
width: 100%;
margin-top: 20px;
}
}
} }
</style> </style>
<style lang="scss"> <style lang="scss">
.permission-com { .permission-com {
.el-collapse { .el-collapse {
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
} }
.el-collapse-item {
margin-bottom: 15px; .el-collapse-item {
} margin-bottom: 15px;
.el-collapse-item__header { }
height: auto;
padding: 15px; .el-collapse-item__header {
border-radius: 8px; height: auto;
border-top: 1px solid #ebeef5; padding: 15px;
border-left: 1px solid #ebeef5; border-radius: 8px;
border-right: 1px solid #ebeef5; border-top: 1px solid #ebeef5;
box-sizing: border-box; border-left: 1px solid #ebeef5;
} border-right: 1px solid #ebeef5;
.el-collapse-item__header.is-active { box-sizing: border-box;
border-radius: 8px 8px 0 0; }
background-color: #fafafa;
} .el-collapse-item__header.is-active {
.el-collapse-item__wrap { border-radius: 8px 8px 0 0;
padding: 15px; background-color: #fafafa;
border-left: 1px solid #ebeef5; }
border-right: 1px solid #ebeef5;
border-top: 1px solid #ebeef5; .el-collapse-item__wrap {
border-radius: 0 0 8px 8px; padding: 15px;
background-color: #fafafa; border-left: 1px solid #ebeef5;
box-sizing: border-box; border-right: 1px solid #ebeef5;
.el-collapse-item__content { border-top: 1px solid #ebeef5;
padding-bottom: 0; border-radius: 0 0 8px 8px;
} background-color: #fafafa;
} box-sizing: border-box;
.el-collapse-item__content {
padding-bottom: 0;
}
}
} }
</style> </style>

4
web/src/views/system/role/components/PermissionComNew/types.ts
View File

@@ -20,10 +20,10 @@ export interface CustomDataPermissionMenuType {
} }
export interface MenuDataType { export interface MenuDataType {
key: string; id: string;
name: string; name: string;
isCheck: boolean; isCheck: boolean;
radio: string; radio: string;
btns: { label: string; value: string; isCheck: boolean; role: string; }[]; btns: { id:number,label: string; value: string; isCheck: boolean; data_range: number;dept:object }[];
columns: { [key: string]: boolean | string; }[] columns: { [key: string]: boolean | string; }[]
} }