Merge branch 'master' of https://gitee.com/huge-dream/django-vue3-admin into develop

# Conflicts:
#	backend/dvadmin/system/views/role_menu_button_permission.py
#	web/src/views/system/role/components/PermissionComNew/index.vue
#	web/src/views/system/role/components/PermissionComNew/types.ts

backend/dvadmin/system/views/role_menu_button_permission.py

@@ -23,13 +23,13 @@ class RoleMenuButtonPermissionSerializer(CustomModelSerializer):
     """
     菜单按钮-序列化器
     """
+
     class Meta:
         model = RoleMenuButtonPermission
         fields = "__all__"
         read_only_fields = ["id"]
 
 
-
 class RoleMenuButtonPermissionCreateUpdateSerializer(CustomModelSerializer):
     """
     初始化菜单按钮-序列化器
@@ -67,17 +67,17 @@ class RoleButtonPermissionSerializer(CustomModelSerializer):
             return None
         return obj.data_range
 
-
     class Meta:
         model = MenuButton
-        fields = ['id','name','value','isCheck','data_range']
+        fields = ['id', 'name', 'value', 'isCheck', 'data_range']
+
 
 class RoleFieldPermissionSerializer(CustomModelSerializer):
-
     class Meta:
         model = FieldPermission
         fields = "__all__"
 
+
 class RoleMenuFieldSerializer(CustomModelSerializer):
     is_query = serializers.SerializerMethodField()
     is_create = serializers.SerializerMethodField()
@@ -103,24 +103,38 @@ class RoleMenuFieldSerializer(CustomModelSerializer):
         if queryset:
             return queryset.is_update
         return False
+
     class Meta:
         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):
     """
     菜单和按钮权限
     """
-    name = serializers.SerializerMethodField()
+    # name = serializers.SerializerMethodField()
     isCheck = serializers.SerializerMethodField()
     btns = serializers.SerializerMethodField()
     columns = serializers.SerializerMethodField()
 
-    def get_name(self, instance):
-        parent_list = Menu.get_all_parent(instance['id'])
-        names = [d["name"] for d in parent_list]
-        return "/".join(names)
+    # def get_name(self, instance):
+    #     parent_list = Menu.get_all_parent(instance['id'])
+    #     names = [d["name"] for d in parent_list]
+    #     return "/".join(names)
     def get_isCheck(self, instance):
         params = self.request.query_params
         return RoleMenuPermission.objects.filter(
@@ -130,19 +144,18 @@ class RoleMenuPermissionSerializer(CustomModelSerializer):
 
     def get_btns(self, instance):
         btn_list = MenuButton.objects.filter(menu__id=instance['id']).values('id', 'name', 'value')
-        serializer = RoleButtonPermissionSerializer(btn_list,many=True,request=self.request)
-        return  serializer.data
+        serializer = RoleButtonPermissionSerializer(btn_list, many=True, request=self.request)
+        return serializer.data
 
     def get_columns(self, instance):
         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
 
-
-
     class Meta:
         model = Menu
-        fields = ['id','name','isCheck','btns','columns']
+        fields = ['id', 'name', 'isCheck', 'btns', 'columns']
+
 
 class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
     """
@@ -167,54 +180,54 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
         :return: menu,btns,columns
         """
         params = request.query_params
-        role = params.get('role',None)
-        if  role is None:
+        role = params.get('role', None)
+        if role is None:
             return ErrorResponse(msg="未获取到角色信息")
         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:
-            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:
             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)
+            menu_list = RoleMenuPermission.objects.filter(role__in=role_id).values_list('id', flat=True)
+            queryset = Menu.objects.filter(status=1, is_catalog=True, id__in=menu_list).values('name', 'id').all()
+        serializer = RoleMenuSerializer(queryset, many=True, request=request)
+        data = serializer.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])
-    def set_role_premission(self,request,pk):
+    def set_role_premission(self, request, pk):
         """
         对角色的菜单和按钮及按钮范围授权:
         :param request:
@@ -224,29 +237,30 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
         body = request.data
         RoleMenuPermission.objects.filter(role=pk).delete()
         RoleMenuButtonPermission.objects.filter(role=pk).delete()
-        for menu in body:
-            if menu.get('isCheck'):
-                menu_parent = Menu.get_all_parent(menu.get('id'))
-                role_menu_permission_list = []
-                for d in menu_parent:
-                    role_menu_permission_list.append(RoleMenuPermission(role_id=pk, menu_id=d["id"]))
-                RoleMenuPermission.objects.bulk_create(role_menu_permission_list)
-                # RoleMenuPermission.objects.create(role_id=pk, menu_id=menu.get('id'))
-            for btn in menu.get('btns', []):
-                if btn.get('isCheck'):
-                    data_range = btn.get('data_range',0) or 0
-                    instance = RoleMenuButtonPermission.objects.create(role_id=pk, menu_button_id=btn.get('id'),data_range=data_range)
-                    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')
-                })
+        for item in body:
+            for menu in item["menus"]:
+                if menu.get('isCheck'):
+                    menu_parent = Menu.get_all_parent(menu.get('id'))
+                    role_menu_permission_list = []
+                    for d in menu_parent:
+                        role_menu_permission_list.append(RoleMenuPermission(role_id=pk, menu_id=d["id"]))
+                    RoleMenuPermission.objects.bulk_create(role_menu_permission_list)
+                    # RoleMenuPermission.objects.create(role_id=pk, menu_id=menu.get('id'))
+                for btn in menu.get('btns'):
+                    if btn.get('isCheck'):
+                        data_range = btn.get('data_range', 0) or 0
+                        instance = RoleMenuButtonPermission.objects.create(role_id=pk, menu_button_id=btn.get('id'),
+                                                                           data_range=data_range)
+                        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="授权成功")
 
-
-
     @action(methods=['GET'], detail=False, permission_classes=[IsAuthenticated])
     def role_menu_get_button(self, request):
         """

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

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

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

@@ -19,11 +19,18 @@ export interface CustomDataPermissionMenuType {
   children: CustomDataPermissionMenuType[]
 }
 
-export interface MenuDataType {
+export interface MenusType{
   id: string;
   name: string;
   isCheck: boolean;
   radio: string;
-  btns: { id:number,label: string; value: string; isCheck: boolean; data_range: number; dept:object; name: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[];
+}
+