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

!19 修改权限配置页面的布局

Browse Source 
Merge pull request !19 from 木子-李/muzili
This commit is contained in:
dvadmin
2024-06-20 23:50:31 +00:00
committed by Gitee
parent c686a6e74a 089e0ca5c1
commit a812f1304b
3 changed files with 186 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,13 +23,13 @@ class RoleMenuButtonPermissionSerializer(CustomModelSerializer):
""" """
菜单按钮-序列化器 菜单按钮-序列化器
""" """
class Meta: class Meta:
model = RoleMenuButtonPermission model = RoleMenuButtonPermission
fields = "__all__" fields = "__all__"
read_only_fields = ["id"] read_only_fields = ["id"]
class RoleMenuButtonPermissionCreateUpdateSerializer(CustomModelSerializer): class RoleMenuButtonPermissionCreateUpdateSerializer(CustomModelSerializer):
""" """
初始化菜单按钮-序列化器 初始化菜单按钮-序列化器
@@ -67,17 +67,17 @@ class RoleButtonPermissionSerializer(CustomModelSerializer):
return None return None
return obj.data_range return obj.data_range
class Meta: class Meta:
model = MenuButton model = MenuButton
fields = ['id','name','value','isCheck','data_range'] fields = ['id', 'name', 'value', 'isCheck', 'data_range']
class RoleFieldPermissionSerializer(CustomModelSerializer): class RoleFieldPermissionSerializer(CustomModelSerializer):
class Meta: class Meta:
model = FieldPermission model = FieldPermission
fields = "__all__" fields = "__all__"
class RoleMenuFieldSerializer(CustomModelSerializer): class RoleMenuFieldSerializer(CustomModelSerializer):
is_query = serializers.SerializerMethodField() is_query = serializers.SerializerMethodField()
is_create = serializers.SerializerMethodField() is_create = serializers.SerializerMethodField()
@@ -103,24 +103,38 @@ class RoleMenuFieldSerializer(CustomModelSerializer):
if queryset: if queryset:
return queryset.is_update return queryset.is_update
return False return False
class Meta: class Meta:
model = MenuField model = MenuField
fields = ['id','field_name','title','is_query','is_create','is_update'] fields = ['id', 'field_name', 'title', 'is_query', 'is_create', 'is_update']
class RoleMenuSerializer(CustomModelSerializer):
menus = serializers.SerializerMethodField()
def get_menus(self, instance):
menu_list = Menu.objects.filter(parent=instance['id']).values('id', 'name')
serializer = RoleMenuPermissionSerializer(menu_list, many=True, request=self.request)
return serializer.data
class Meta:
model = Menu
fields = ['id', 'name', 'menus']
class RoleMenuPermissionSerializer(CustomModelSerializer): class RoleMenuPermissionSerializer(CustomModelSerializer):
""" """
菜单和按钮权限 菜单和按钮权限
""" """
name = serializers.SerializerMethodField() # name = serializers.SerializerMethodField()
isCheck = serializers.SerializerMethodField() isCheck = serializers.SerializerMethodField()
btns = serializers.SerializerMethodField() btns = serializers.SerializerMethodField()
columns = serializers.SerializerMethodField() columns = serializers.SerializerMethodField()
def get_name(self, instance): # def get_name(self, instance):
parent_list = Menu.get_all_parent(instance['id']) # parent_list = Menu.get_all_parent(instance['id'])
names = [d["name"] for d in parent_list] # names = [d["name"] for d in parent_list]
return "/".join(names) # return "/".join(names)
def get_isCheck(self, instance): def get_isCheck(self, instance):
params = self.request.query_params params = self.request.query_params
return RoleMenuPermission.objects.filter( return RoleMenuPermission.objects.filter(
@@ -130,19 +144,18 @@ class RoleMenuPermissionSerializer(CustomModelSerializer):
def get_btns(self, instance): def get_btns(self, instance):
btn_list = MenuButton.objects.filter(menu__id=instance['id']).values('id', 'name', 'value') btn_list = MenuButton.objects.filter(menu__id=instance['id']).values('id', 'name', 'value')
serializer = RoleButtonPermissionSerializer(btn_list,many=True,request=self.request) serializer = RoleButtonPermissionSerializer(btn_list, many=True, request=self.request)
return serializer.data return serializer.data
def get_columns(self, instance): def get_columns(self, instance):
col_list = MenuField.objects.filter(menu=instance['id']) col_list = MenuField.objects.filter(menu=instance['id'])
serializer = RoleMenuFieldSerializer(col_list,many=True,request=self.request) serializer = RoleMenuFieldSerializer(col_list, many=True, request=self.request)
return serializer.data return serializer.data
class Meta: class Meta:
model = Menu model = Menu
fields = ['id','name','isCheck','btns','columns'] fields = ['id', 'name', 'isCheck', 'btns', 'columns']
class RoleMenuButtonPermissionViewSet(CustomModelViewSet): class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
""" """
@@ -167,54 +180,54 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
:return: menu,btns,columns :return: menu,btns,columns
""" """
params = request.query_params params = request.query_params
role = params.get('role',None) role = params.get('role', None)
if role is None: if role is None:
return ErrorResponse(msg="未获取到角色信息") return ErrorResponse(msg="未获取到角色信息")
is_superuser = request.user.is_superuser is_superuser = request.user.is_superuser
# if is_superuser:
# queryset = Menu.objects.filter(status=1,is_catalog=False).values('name', 'id').all()
# else:
# role_id = request.user.role.values_list('id', flat=True)
# menu_list = RoleMenuPermission.objects.filter(role__in=role_id).values_list('id',flat=True)
# queryset = Menu.objects.filter(status=1, is_catalog=False,id__in=menu_list).values('name', 'id').all()
# serializer = RoleMenuPermissionSerializer(queryset,many=True,request=request)
# data = serializer.data
# return DetailResponse(data=data)
data = []
if is_superuser: if is_superuser:
queryset = Menu.objects.filter(status=1,is_catalog=False).values('name', 'id').all() queryset = Menu.objects.filter(status=1, is_catalog=True).values('name', 'id').all()
else: else:
role_id = request.user.role.values_list('id', flat=True) role_id = request.user.role.values_list('id', flat=True)
menu_list = RoleMenuPermission.objects.filter(role__in=role_id).values_list('id',flat=True) menu_list = RoleMenuPermission.objects.filter(role__in=role_id).values_list('id', flat=True)
queryset = Menu.objects.filter(status=1, is_catalog=False,id__in=menu_list).values('name', 'id') queryset = Menu.objects.filter(status=1, is_catalog=True, id__in=menu_list).values('name', 'id').all()
for item in queryset: serializer = RoleMenuSerializer(queryset, many=True, request=request)
parent_list = Menu.get_all_parent(item['id']) data = serializer.data
names = [d["name"] for d in parent_list]
completeName = "/".join(names)
isCheck = RoleMenuPermission.objects.filter(
menu__id=item['id'],
role__id=role,
).exists()
mbCheck = RoleMenuButtonPermission.objects.filter(
menu_button=OuterRef("pk"),
role__id=role,
)
btns = MenuButton.objects.filter(
menu__id=item['id'],
).annotate(isCheck=Exists(mbCheck)).values('id', 'name', 'value', 'isCheck',
data_range=F('menu_button_permission__data_range'))
dicts = {
'name': completeName,
'id': item['id'],
'isCheck': isCheck,
'btns': btns,
}
data.append(dicts)
return DetailResponse(data=data) return DetailResponse(data=data)
# data = []
# if is_superuser:
# queryset = Menu.objects.filter(status=1, is_catalog=False).values('name', 'id').all()
# else:
# role_id = request.user.role.values_list('id', flat=True)
# menu_list = RoleMenuPermission.objects.filter(role__in=role_id).values_list('id', flat=True)
# queryset = Menu.objects.filter(status=1, is_catalog=False, id__in=menu_list).values('name', 'id')
# for item in queryset:
# parent_list = Menu.get_all_parent(item['id'])
# names = [d["name"] for d in parent_list]
# completeName = "/".join(names)
# isCheck = RoleMenuPermission.objects.filter(
# menu__id=item['id'],
# role__id=role,
# ).exists()
# mbCheck = RoleMenuButtonPermission.objects.filter(
# menu_button=OuterRef("pk"),
# role__id=role,
# )
# btns = MenuButton.objects.filter(
# menu__id=item['id'],
# ).annotate(isCheck=Exists(mbCheck)).values('id', 'name', 'value', 'isCheck',
# data_range=F('menu_button_permission__data_range'))
# dicts = {
# 'name': completeName,
# 'id': item['id'],
# 'isCheck': isCheck,
# 'btns': btns,
#
# }
# data.append(dicts)
# return DetailResponse(data=data)
@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:
@@ -224,25 +237,30 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
body = request.data body = request.data
RoleMenuPermission.objects.filter(role=pk).delete() RoleMenuPermission.objects.filter(role=pk).delete()
RoleMenuButtonPermission.objects.filter(role=pk).delete() RoleMenuButtonPermission.objects.filter(role=pk).delete()
for menu in body: for item in body:
if menu.get('isCheck'): for menu in item["menus"]:
menu_parent = Menu.get_all_parent(menu.get('id')) if menu.get('isCheck'):
role_menu_permission_list = [] menu_parent = Menu.get_all_parent(menu.get('id'))
for d in menu_parent: role_menu_permission_list = []
role_menu_permission_list.append(RoleMenuPermission(role_id=pk, menu_id=d["id"])) for d in menu_parent:
RoleMenuPermission.objects.bulk_create(role_menu_permission_list) role_menu_permission_list.append(RoleMenuPermission(role_id=pk, menu_id=d["id"]))
# RoleMenuPermission.objects.create(role_id=pk, menu_id=menu.get('id')) RoleMenuPermission.objects.bulk_create(role_menu_permission_list)
for btn in menu.get('btns'): # RoleMenuPermission.objects.create(role_id=pk, menu_id=menu.get('id'))
if btn.get('isCheck'): for btn in menu.get('btns'):
data_range = btn.get('data_range',0) or 0 if btn.get('isCheck'):
instance = RoleMenuButtonPermission.objects.create(role_id=pk, menu_button_id=btn.get('id'),data_range=data_range) data_range = btn.get('data_range', 0) or 0
instance.dept.set(btn.get('dept',[])) instance = RoleMenuButtonPermission.objects.create(role_id=pk, menu_button_id=btn.get('id'),
for col in menu.get('columns'): data_range=data_range)
FieldPermission.objects.update_or_create(role_id=pk,field_id=col.get('id'),is_query=col.get('is_query'),is_create=col.get('is_create'),is_update=col.get('is_update')) instance.dept.set(btn.get('dept', []))
for col in menu.get('columns'):
FieldPermission.objects.update_or_create(role_id=pk, field_id=col.get('id'),
defaults={
'is_query': col.get('is_query'),
'is_create': col.get('is_create'),
'is_update': col.get('is_update')
})
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):
""" """

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

@@ -1,8 +1,6 @@
<template> <template>
<el-drawer v-model="drawerVisible" title="权限配置" direction="rtl" size="60%" :close-on-click-modal="false" <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">
:destroy-on-close="true"
>
<template #header> <template #header>
<el-row> <el-row>
<el-col :span="4"> <el-col :span="4">
@@ -19,83 +17,65 @@
</el-row> </el-row>
</template> </template>
<div class="permission-com"> <div class="permission-com">
<el-collapse v-model="collapseCurrent" @change="handleCollapseChange" accordion> <el-tabs>
<el-collapse-item v-for="(item,mIndex) in menuData" :key="mIndex" :name="mIndex" <el-tab-pane v-for="(item, mIndex) in menuData" :key="mIndex" :label="item.name">
style=" background-color: #fafafa;"> <el-tabs tab-position="left">
<template #title> <el-tab-pane v-for="(menu, mIndex) in item.menus" :key="mIndex" :label="menu.name" >
<div> <el-checkbox v-model="menu.isCheck">页面显示权限</el-checkbox>
<div class="pc-collapse-title"> <div class="pc-collapse-main">
<el-checkbox v-model="item.isCheck" @click.stop="null"> <div class="pccm-item">
<span>{{ item.name }}</span> <div class="menu-form-alert"> 配置操作功能点权限 </div>
</el-checkbox> <el-checkbox v-for="(btn, bIndex) in menu.btns" :key="bIndex" v-model="btn.isCheck"
</div> :label="btn.value">
<div v-show="!collapseCurrent.includes(mIndex)" @click.stop="null" style="text-align: left;"> <div class="btn-item">
<el-checkbox v-for="btn in item.btns" :key="btn.value" :label="btn.value" v-model="btn.isCheck"> {{ btn.data_range !== null ? `${btn.name}(${formatDataRange(btn.data_range)})` : btn.name }}
{{ btn.name }} <span v-show="btn.isCheck" @click.stop.prevent="handleSettingClick(menu, btn.id)">
</el-checkbox> <el-icon>
</div> <Setting />
</div> </el-icon>
</template> </span>
<div class="pc-collapse-main"> </div>
<div class="pccm-item"> </el-checkbox>
<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> </div>
</el-checkbox>
</div>
<div class="pccm-item" v-if="item.columns&&item.columns.length>0"> <div class="pccm-item" v-if="menu.columns && menu.columns.length > 0">
<p>对这些数据有以下字段权限</p> <div class="menu-form-alert"> 配置数据列字段权限 </div>
<ul class="columns-list">
<li class="columns-head">
<div class="width-txt">
<span>字段</span>
</div>
<div v-for="(head, hIndex) in column.header" :key="hIndex" class="width-check">
<el-checkbox :label="head.value" @change="handleColumnChange($event, menu, head.value)">
<span>{{ head.label }}</span>
</el-checkbox>
</div>
</li>
<ul class="columns-list"> <li v-for="(c_item, c_index) in menu.columns" :key="c_index" class="columns-item">
<li class="columns-head"> <div class="width-txt">{{ c_item.title }}</div>
<div class="width-txt"> <div v-for="(col, cIndex) in column.header" :key="cIndex" class="width-check">
<span>字段</span> <el-checkbox v-model="c_item[col.value]" class="ci-checkout"></el-checkbox>
</div> </div>
</li>
<div v-for="(head,hIndex) in column.header" :key="hIndex" class="width-check"> </ul>
<el-checkbox :label="head.value" @change="handleColumnChange($event, item, head.value)"> </div>
<span>{{ head.label }}</span> </div>
</el-checkbox> </el-tab-pane>
</div> </el-tabs>
</li> </el-tab-pane>
</el-tabs>
<li v-for="(c_item, c_index) in item.columns" :key="c_index" class="columns-item">
<div class="width-txt">{{ c_item.title }}</div>
<div v-for="(col,cIndex) in column.header" :key="cIndex" class="width-check">
<el-checkbox v-model="c_item[col.value]" class="ci-checkout"></el-checkbox>
</div>
</li>
</ul>
</div>
</div>
</el-collapse-item>
</el-collapse>
<el-dialog v-model="dialogVisible" title="数据权限配置" width="400px" :close-on-click-modal="false" <el-dialog v-model="dialogVisible" title="数据权限配置" width="400px" :close-on-click-modal="false"
:before-close="handleDialogClose"> :before-close="handleDialogClose">
<div class="pc-dialog"> <div class="pc-dialog">
<el-select v-model="dataPermission" @change="handlePermissionRangeChange" class="dialog-select" <el-select v-model="dataPermission" @change="handlePermissionRangeChange" class="dialog-select"
placeholder="请选择"> placeholder="请选择">
<el-option v-for="item in dataPermissionRange" :key="item.value" :label="item.label" :value="item.value"/> <el-option v-for="item in dataPermissionRange" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
<el-tree-select <el-tree-select v-show="dataPermission === 4" node-key="id" v-model="customDataPermission"
v-show="dataPermission === 4" :props="defaultTreeProps" :data="deptData" multiple check-strictly :render-after-expand="false"
node-key="id" show-checkbox class="dialog-tree" />
v-model="customDataPermission"
:props="defaultTreeProps"
:data="deptData"
multiple
check-strictly
:render-after-expand="false"
show-checkbox
class="dialog-tree"
/>
</div> </div>
<template #footer> <template #footer>
<div> <div>
@@ -109,9 +89,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref, onMounted, defineProps, watch, computed, reactive} from 'vue'; import { ref, onMounted, defineProps, watch, computed, reactive } from 'vue';
import XEUtils from 'xe-utils'; import XEUtils from 'xe-utils';
import {errorNotification} from '/@/utils/message'; import { errorNotification } from '/@/utils/message';
import { import {
getDataPermissionRange, getDataPermissionRange,
getDataPermissionDept, getDataPermissionDept,
@@ -119,8 +99,8 @@ import {
setRolePremission, setRolePremission,
setBtnDatarange setBtnDatarange
} from './api'; } from './api';
import {MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType} from './types'; import { MenuDataType, MenusType, DataPermissionRangeType, CustomDataPermissionDeptType } from './types';
import {ElMessage} from 'element-plus' import { ElMessage } from 'element-plus'
const props = defineProps({ const props = defineProps({
roleId: { roleId: {
@@ -140,12 +120,12 @@ const emit = defineEmits(['update:drawerVisible'])
const drawerVisible = ref(false) const drawerVisible = ref(false)
watch( watch(
() => props.drawerVisible, () => props.drawerVisible,
(val) => { (val) => {
drawerVisible.value = val; drawerVisible.value = val;
getMenuBtnPermission() getMenuBtnPermission()
fetchData() fetchData()
} }
); );
const handleDrawerClose = () => { const handleDrawerClose = () => {
emit('update:drawerVisible', false); emit('update:drawerVisible', false);
@@ -175,7 +155,7 @@ 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
} }
@@ -199,13 +179,13 @@ const handleCollapseChange = (val: string) => {
* @param record 当前菜单 * @param record 当前菜单
* @param btnType 按钮类型 * @param btnType 按钮类型
*/ */
const handleSettingClick = (record: MenuDataType, btnId: number) => { const handleSettingClick = (record: MenusType, btnId: number) => {
menuCurrent.value = record; menuCurrent.value = record;
menuBtnCurrent.value = btnId; menuBtnCurrent.value = btnId;
dialogVisible.value = true; dialogVisible.value = true;
}; };
const handleColumnChange = (val: boolean, record: MenuDataType, btnType: string) => { const handleColumnChange = (val: boolean, record: MenusType, btnType: string) => {
for (const iterator of record.columns) { for (const iterator of record.columns) {
iterator[btnType] = val; iterator[btnType] = val;
} }
@@ -214,7 +194,7 @@ const handleColumnChange = (val: boolean, record: MenuDataType, btnType: string)
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;
} }
}; };
@@ -229,14 +209,16 @@ const handleDialogConfirm = () => {
} }
//if (dataPermission.value !== 4) {} //if (dataPermission.value !== 4) {}
for (const iterator of menuData.value) { for (const item of menuData.value) {
if (iterator.id === menuCurrent.value.id) { for (const iterator of item.menus) {
for (const btn of iterator.btns) { if (iterator.id === menuCurrent.value.id) {
if (btn.id === menuBtnCurrent.value) { for (const btn of iterator.btns) {
const findItem = dataPermissionRange.value.find((i) => i.value === dataPermission.value); if (btn.id === menuBtnCurrent.value) {
btn.data_range = findItem?.value || 0; const findItem = dataPermissionRange.value.find((i) => i.value === dataPermission.value);
if (btn.data_range === 4) { btn.data_range = findItem?.value || 0;
btn.dept = customDataPermission.value if (btn.data_range === 4) {
btn.dept = customDataPermission.value
}
} }
} }
} }
@@ -261,7 +243,7 @@ const handleSavePermission = () => {
} }
const column = reactive({ const column = reactive({
header: [{value: 'is_create', label: '新增可见'}, {value: 'is_update', label: '编辑可见'}, { header: [{ value: 'is_create', label: '新增可见' }, { value: 'is_update', label: '编辑可见' }, {
value: 'is_query', value: 'is_query',
label: '列表可见' label: '列表可见'
}] }]
@@ -296,6 +278,15 @@ onMounted(() => {
.pccm-item { .pccm-item {
margin-bottom: 10px; margin-bottom: 10px;
.menu-form-alert {
color: #fff;
line-height: 24px;
padding: 8px 16px;
margin-bottom: 20px;
border-radius: 4px;
background-color: var(--el-color-primary);
}
.btn-item { .btn-item {
display: flex; display: flex;
align-items: center; align-items: center;

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

@@ -19,11 +19,18 @@ export interface CustomDataPermissionMenuType {
children: CustomDataPermissionMenuType[] children: CustomDataPermissionMenuType[]
} }
export interface MenuDataType { export interface MenusType{
id: string; id: string;
name: string; name: string;
isCheck: boolean; isCheck: boolean;
radio: string; radio: string;
btns: { id:number,label: string; value: string; isCheck: boolean; data_range: number;dept:object }[]; btns: { id:number,name: string; value: string; isCheck: boolean; data_range: number;dept:object }[];
columns: { [key: string]: boolean | string; }[] columns: { [key: string]: boolean | string; }[]
} }
export interface MenuDataType {
id: string;
name: string;
menus:MenusType[];
}