feat(role_menu_20240628): 优化权限配置，增强用户体验

- 修复无法保存菜单授权bug
- 列权限增加禁用状态的逻辑判断

backend/dvadmin/system/views/role_menu_button_permission.py

@@ -209,7 +209,8 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
             menu_list = RoleMenuPermission.objects.filter(role__in=role_id_list).values_list('menu__id', flat=True)
 
             # 当前角色已授权的菜单
-            menu_queryset = Menu.objects.filter(id__in=menu_list).prefetch_related('menuPermission').prefetch_related('menufield_set')
+            menu_queryset = Menu.objects.filter(id__in=menu_list).prefetch_related('menuPermission').prefetch_related(
+                'menufield_set')
         result = []
         for menu_item in menu_queryset:
             isCheck = RoleMenuPermission.objects.filter(
@@ -220,12 +221,12 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
                 'name': menu_item.name,
                 'id': menu_item.id,
                 'parent': menu_item.parent.id if menu_item.parent else None,
-                'isCheck':isCheck,
+                'isCheck': isCheck,
                 'btns': [],
                 'columns': []
             }
             for mb_item in menu_item.menuPermission.all():
-                rolemenubuttonpermission_queryset =RoleMenuButtonPermission.objects.filter(
+                rolemenubuttonpermission_queryset = RoleMenuButtonPermission.objects.filter(
                     menu_button_id=mb_item.id,
                     role_id=current_role
                 ).first()
@@ -240,22 +241,27 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
                         'isCheck': bool(rolemenubuttonpermission_queryset),
                     }
                 )
+
             for column_item in menu_item.menufield_set.all():
                 fieldpermission_queryset = column_item.menu_field.filter(role_id=current_role).first()
+                query = fieldpermission_queryset.is_query if fieldpermission_queryset else None
+                create = fieldpermission_queryset.is_create if fieldpermission_queryset else None
+                update = fieldpermission_queryset.is_update if fieldpermission_queryset else None
                 dicts['columns'].append({
-                        'id':column_item.id,
+                    'id': column_item.id,
-                        'field_name':column_item.field_name,
+                    'field_name': column_item.field_name,
-                        'title':column_item.title,
+                    'title': column_item.title,
-                        'is_query':fieldpermission_queryset.is_query,
+                    'is_query': query,
-                        'is_create':fieldpermission_queryset.is_create,
+                    'is_create': create,
-                        'is_update':fieldpermission_queryset.is_update
+                    'is_update': update,
+                    'query_disabled': False if is_superuser else not query,
+                    'create_disabled': False if is_superuser else not create,
+                    'update_disabled': False if is_superuser else not update,
                 })
+                print(dicts['columns'])
             result.append(dicts)
         return DetailResponse(data=result)
 
-
-
-
     @action(methods=['PUT'], detail=True, permission_classes=[IsAuthenticated])
     def set_role_premission(self, request, pk):
         """
@@ -268,7 +274,7 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
         RoleMenuPermission.objects.filter(role=pk).delete()
         RoleMenuButtonPermission.objects.filter(role=pk).delete()
         for item in body:
-            for menu in item["menus"]:
+            for menu in item["children"]:
                 if menu.get('isCheck'):
                     menu_parent = Menu.get_all_parent(menu.get('id'))
                     role_menu_permission_list = []
@@ -283,6 +289,7 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
                                                                            data_range=data_range)
                         instance.dept.set(btn.get('dept', []))
                 for col in menu.get('columns'):
+                    print(col)
                     FieldPermission.objects.update_or_create(role_id=pk, field_id=col.get('id'),
                                                              defaults={
                                                                  'is_query': col.get('is_query'),

web/src/views/system/role/components/PermissionComNew/index.vue

@@ -20,7 +20,7 @@
       <el-tabs>
         <el-tab-pane v-for="(item, mIndex) in menuData" :key="mIndex" :label="item.name">
           <el-tabs tab-position="left">
-            <el-tab-pane v-for="(menu, mIndex) in item.children" :key="mIndex" :label="menu.name" >
+            <el-tab-pane v-for="(menu, mIndex) in item.children" :key="mIndex" :label="menu.name">
               <el-checkbox v-model="menu.isCheck">页面显示权限</el-checkbox>
               <div class="pc-collapse-main">
                 <div class="pccm-item">
@@ -55,7 +55,8 @@
                     <li v-for="(c_item, c_index) in menu.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>
+                        <el-checkbox v-model="c_item[col.value]" class="ci-checkout"
+                          :disabled="c_item[col.disabled]"></el-checkbox>
                       </div>
                     </li>
                   </ul>
@@ -99,7 +100,7 @@ import {
   setRolePremission,
   setBtnDatarange,
 } from './api';
-import { MenuDataType, MenusType, DataPermissionRangeType, CustomDataPermissionDeptType } from './types';
+import { MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType } from './types';
 import { ElMessage } from 'element-plus'
 
 const props = defineProps({
@@ -159,6 +160,7 @@ let customDataPermission = ref([]);
 const getMenuBtnPermission = async () => {
   const resMenu = await getRolePermission({ role: props.roleId })
   menuData.value = resMenu
+
 }
 // 获取按钮的数据权限下拉选项
 const getDataPermissionRangeLable = async () => {
@@ -166,9 +168,9 @@ const getDataPermissionRangeLable = async () => {
   dataPermissionRangeLabel.value = resRange.data;
 }
 
-const fetchData = async (btnId:number) => {
+const fetchData = async (btnId: number) => {
   try {
-    const resRange = await getDataPermissionRange({menu_button:btnId});
+    const resRange = await getDataPermissionRange({ menu_button: btnId });
     if (resRange?.code === 2000) {
       dataPermissionRange.value = resRange.data;
     }
@@ -186,16 +188,16 @@ const fetchData = async (btnId:number) => {
  * @param record 当前菜单
  * @param btnType  按钮类型
  */
-const handleSettingClick = (record: MenusType, btn: MenusType['btns'][number]) => {
+const handleSettingClick = (record: MenuDataType, btn: MenuDataType['btns'][number]) => {
   menuCurrent.value = record;
   menuBtnCurrent.value = btn.id;
   dialogVisible.value = true;
-  dataPermission.value =btn.data_range;  
+  dataPermission.value = btn.data_range;
   handlePermissionRangeChange(btn.data_range)
-  fetchData( btn.id)
+  fetchData(btn.id)
 };
 
-const handleColumnChange = (val: boolean, record: MenusType, btnType: string) => {
+const handleColumnChange = (val: boolean, record: MenuDataType, btnType: string) => {
   for (const iterator of record.columns) {
     iterator[btnType] = val;
   }
@@ -203,7 +205,7 @@ const handleColumnChange = (val: boolean, record: MenusType, btnType: string) =>
 
 const handlePermissionRangeChange = async (val: number) => {
   if (val === 4) {
-    const res = await getDataPermissionDept({ role: props.roleId,menu_button:menuBtnCurrent.value });
+    const res = await getDataPermissionDept({ role: props.roleId, menu_button: menuBtnCurrent.value });
     const depts = XEUtils.toArrayTree(res.data.depts, { parentKey: 'parent', strict: false });
     deptData.value = depts;
     customDataPermission.value = res.data.dept_checked;
@@ -218,10 +220,8 @@ const handleDialogConfirm = () => {
     errorNotification('请选择');
     return;
   }
-
-  //if (dataPermission.value !== 4) {}
   for (const item of menuData.value) {
-    for (const iterator of item.menus) {
+    for (const iterator of item.children) {
       if (iterator.id === menuCurrent.value.id) {
         for (const btn of iterator.btns) {
           if (btn.id === menuBtnCurrent.value) {
@@ -243,7 +243,7 @@ const handleDialogClose = () => {
   dataPermission.value = null;
 };
 
-//保存权限
+//保存菜单授权
 const handleSavePermission = () => {
   setRolePremission(props.roleId, menuData.value).then((res: any) => {
     ElMessage({
@@ -254,10 +254,11 @@ const handleSavePermission = () => {
 }
 
 const column = reactive({
-  header: [{ value: 'is_create', label: '新增可见' }, { value: 'is_update', label: '编辑可见' }, {
+  header: [
-    value: 'is_query',
+    { value: 'is_create', label: '新增可见',disabled:'create_disabled'},
-    label: '列表可见'
+    { value: 'is_update', label: '编辑可见' ,disabled:'update_disabled'},
-  }]
+    { value: 'is_query', label: '列表可见',disabled:'query_disabled' }
+  ]
 })
 
 onMounted(() => {

web/src/views/system/role/components/PermissionComNew/types.ts

@@ -7,7 +7,7 @@ export interface CustomDataPermissionDeptType {
 	id: number;
 	name: string;
 	patent: number;
-  children: CustomDataPermissionDeptType[]
+	children: CustomDataPermissionDeptType[];
 }
 
 export interface CustomDataPermissionMenuType {
@@ -16,21 +16,14 @@ export interface CustomDataPermissionMenuType {
 	is_catalog: boolean;
 	menuPermission: { id: number; name: string; value: string }[] | null;
 	columns: { id: number; name: string; title: string }[] | null;
-  children: CustomDataPermissionMenuType[]
+	children: CustomDataPermissionMenuType[];
-}
-
-export interface MenusType{
-  id: string;
-  name: string;
-  isCheck: boolean;
-  radio: string;
-  btns: { id:number,name: string; value: string; isCheck: boolean; data_range: number; dept:object; name:string }[];
-  columns: { [key: string]: boolean | string; }[]
 }
 
 export interface MenuDataType {
 	id: string;
 	name: string;
-  menus:MenusType[];
+	isCheck: boolean;
+	btns: { id: number; name: string; value: string; isCheck: boolean; data_range: number; dept: object }[];
+	columns: { [key: string]: boolean | string; }[];
+	children: MenuDataType[];
 }
-