功能变化: 角色授权完成

backend/dvadmin/system/urls.py

@@ -12,6 +12,7 @@ from dvadmin.system.views.menu_button import MenuButtonViewSet
 from dvadmin.system.views.message_center import MessageCenterViewSet
 from dvadmin.system.views.operation_log import OperationLogViewSet
 from dvadmin.system.views.role import RoleViewSet
+from dvadmin.system.views.role_menu import RoleMenuPermissionViewSet
 from dvadmin.system.views.role_menu_button_permission import RoleMenuButtonPermissionViewSet
 from dvadmin.system.views.system_config import SystemConfigViewSet
 from dvadmin.system.views.user import UserViewSet
@@ -30,6 +31,9 @@ system_url.register(r'api_white_list', ApiWhiteListViewSet)
 system_url.register(r'system_config', SystemConfigViewSet)
 system_url.register(r'message_center',MessageCenterViewSet)
 system_url.register(r'role_menu_button_permission', RoleMenuButtonPermissionViewSet)
+system_url.register(r'role_menu_permission', RoleMenuPermissionViewSet)
+
+
 
 
 urlpatterns = [

backend/dvadmin/system/views/menu.py

@@ -9,7 +9,7 @@
 from rest_framework import serializers
 from rest_framework.decorators import action
 
-from dvadmin.system.models import Menu, MenuButton
+from dvadmin.system.models import Menu, MenuButton, RoleMenuPermission
 from dvadmin.system.views.menu_button import MenuButtonInitSerializer
 from dvadmin.utils.json_response import SuccessResponse
 from dvadmin.utils.serializers import CustomModelSerializer
@@ -160,8 +160,9 @@ class MenuViewSet(CustomModelViewSet):
         user = request.user
         queryset = self.queryset.filter(status=1)
         if not user.is_superuser:
-            menuIds = user.role.values_list('menu__id', flat=True)
-            queryset = Menu.objects.filter(id__in=menuIds, status=1)
+            role_list = user.role.values_list('id', flat=True)
+            menu_list = RoleMenuPermission.objects.filter(role__in=role_list).values_list('menu_id')
+            queryset = Menu.objects.filter(id__in=menu_list)
         serializer = WebRouterSerializer(queryset, many=True, request=request)
         data = serializer.data
         return SuccessResponse(data=data, total=len(data), msg="获取成功")

backend/dvadmin/system/views/menu_button.py

@@ -8,6 +8,7 @@
 """
 from django.db.models import F
 from rest_framework.decorators import action
+from rest_framework.permissions import IsAuthenticated
 
 from dvadmin.system.models import MenuButton, RoleMenuButtonPermission
 from dvadmin.utils.json_response import DetailResponse
@@ -62,7 +63,7 @@ class MenuButtonViewSet(CustomModelViewSet):
     update_serializer_class = MenuButtonCreateUpdateSerializer
     extra_filter_class = []
 
-    @action(methods=['get'],detail=False)
+    @action(methods=['get'],detail=False,permission_classes=[IsAuthenticated])
     def menu_button_all_permission(self,request):
         """
         获取所有的按钮权限

backend/dvadmin/system/views/role.py

@@ -66,9 +66,6 @@ class RoleCreateUpdateSerializer(CustomModelSerializer):
         if not is_superuser:
             self.validated_data.pop('admin')
         data = super().save(**kwargs)
-        data.dept.set(self.initial_data.get('dept', []))
-        data.menu.set(self.initial_data.get('menu', []))
-        data.permission.set(self.initial_data.get('permission', []))
         return data
 
     class Meta:

backend/dvadmin/system/views/role_menu.py

@@ -0,0 +1,79 @@
+# -*- coding: utf-8 -*-
+
+
+from django.db.models import F
+from rest_framework.decorators import action
+from rest_framework.permissions import IsAuthenticated
+
+from dvadmin.system.models import RoleMenuPermission, Menu, MenuButton
+from dvadmin.utils.json_response import DetailResponse, ErrorResponse
+from dvadmin.utils.serializers import CustomModelSerializer
+from dvadmin.utils.viewset import CustomModelViewSet
+
+
+class RoleMenuPermissionSerializer(CustomModelSerializer):
+    """
+    菜单按钮-序列化器
+    """
+
+    class Meta:
+        model = RoleMenuPermission
+        fields = "__all__"
+        read_only_fields = ["id"]
+
+
+class RoleMenuPermissionInitSerializer(CustomModelSerializer):
+    """
+    初始化菜单按钮-序列化器
+    """
+
+    class Meta:
+        model = RoleMenuPermission
+        fields = "__all__"
+        read_only_fields = ["id"]
+
+class RoleMenuPermissionCreateUpdateSerializer(CustomModelSerializer):
+    """
+    初始化菜单按钮-序列化器
+    """
+
+    class Meta:
+        model = RoleMenuPermission
+        fields = "__all__"
+        read_only_fields = ["id"]
+
+
+class RoleMenuPermissionViewSet(CustomModelViewSet):
+    """
+    菜单按钮接口
+    list:查询
+    create:新增
+    update:修改
+    retrieve:单例
+    destroy:删除
+    """
+    queryset = RoleMenuPermission.objects.all()
+    serializer_class = RoleMenuPermissionSerializer
+    create_serializer_class = RoleMenuPermissionCreateUpdateSerializer
+    update_serializer_class = RoleMenuPermissionCreateUpdateSerializer
+    extra_filter_class = []
+
+    @action(methods=['post'],detail=False)
+    def save_auth(self,request):
+        """
+        保存页面菜单授权
+        :param request:
+        :return:
+        """
+        body = request.data
+        role_id = body.get('role',None)
+        if role_id is None:
+            return ErrorResponse(msg="未获取到角色参数")
+        menu_list = body.get('menu',None)
+        if menu_list is None:
+            return ErrorResponse(msg="未获取到菜单参数")
+        data = [{"role":role_id,"menu":item} for item in menu_list]
+        serializer = RoleMenuPermissionSerializer(data=data,many=True,request=request)
+        if serializer.is_valid(raise_exception=True):
+            serializer.save()
+            return DetailResponse(msg="保存成功",data=serializer.data)

backend/dvadmin/system/views/role_menu_button_permission.py

@@ -10,7 +10,7 @@ from django.db.models import F
 from rest_framework.decorators import action
 from rest_framework.permissions import IsAuthenticated
 
-from dvadmin.system.models import RoleMenuButtonPermission, Menu, MenuButton
+from dvadmin.system.models import RoleMenuButtonPermission, Menu, MenuButton, Dept
 from dvadmin.utils.json_response import DetailResponse, ErrorResponse
 from dvadmin.utils.serializers import CustomModelSerializer
 from dvadmin.utils.viewset import CustomModelViewSet
@@ -77,7 +77,11 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
 
     @action(methods=['GET'], detail=False, permission_classes=[IsAuthenticated])
     def role_menu_get_button(self,request):
-        """根据角色和菜单获取菜单下的按钮"""
+        """
+        当前用户角色和菜单获取可下拉选项的按钮:角色授权页面使用
+        :param request:
+        :return:
+        """
         params = request.query_params
         if params:
             menu_id = params.get('menu',None)
@@ -87,8 +91,8 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
                 if is_superuser or True in is_admin:
                     queryset = MenuButton.objects.filter(menu=menu_id).values('id', 'name')
                 else:
-                    role_id = request.user.role.id
-                    queryset = RoleMenuButtonPermission.objects.filter(role=role_id,menu=menu_id).values(
+                    role_list = request.user.role.values_list('id',flat=True)
+                    queryset = RoleMenuButtonPermission.objects.filter(role_in=role_list,menu_button__menu=menu_id).values(
                         id=F('menu_button__id'),
                         name=F('menu_button__name')
                     )
@@ -97,6 +101,11 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
 
     @action(methods=['GET'], detail=False, permission_classes=[IsAuthenticated])
     def data_scope(self, request):
+        """
+        获取数据权限范围:角色授权页面使用
+        :param request:
+        :return:
+        """
         is_superuser = request.user.is_superuser
         if is_superuser:
             data = [
@@ -181,10 +190,40 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
                     return DetailResponse(data=data)
         return ErrorResponse(msg="参数错误")
 
-    @action(methods=['get'],detail=False)
+    @action(methods=['get'], detail=False, permission_classes=[IsAuthenticated])
+    def role_to_dept_all(self, request):
+        """
+        当前用户角色下所能授权的部门:角色授权页面使用
+        :param request:
+        :return:
+        """
+        params = request.query_params
+        is_superuser = request.user.is_superuser
+        is_admin = request.user.role.values_list('admin', flat=True)
+        if is_superuser or True in is_admin:
+            queryset = Dept.objects.values('id','name','parent')
+            return DetailResponse(data=queryset)
+        else:
+            if params:
+                menu_button = params.get('menu_button')
+                if menu_button is None:
+                    return ErrorResponse(msg="参数错误")
+                role_list = request.user.role.values_list('id', flat=True)
+                queryset = RoleMenuButtonPermission.objects.filter(role_in=role_list,menu_button=None).values(
+                    id=F('dept__id'),
+                    name=F('dept__name'),
+                    parent=F('dept__parent')
+                )
+                return DetailResponse(data=queryset)
+            else:
+                return ErrorResponse(msg="参数错误")
+
+
+
+    @action(methods=['get'],detail=False,permission_classes=[IsAuthenticated])
     def menu_to_button(self,request):
         """
-        根据菜单获取按钮
+        根据所选择菜单获取已配置的按钮/接口权限:角色授权页面使用
         :param request:
         :return:
         """
@@ -197,6 +236,7 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
             if role_id is None:
                 return ErrorResponse(msg="未获取到参数")
             queryset = RoleMenuButtonPermission.objects.filter(role=role_id,menu_button__menu=menu_id).values(
+                'id',
                 'data_range',
                 'menu_button'
             )

web/src/views/system/menu/crud.tsx

@@ -4,13 +4,14 @@ import { dictionary } from "/@/utils/dictionary";
 import iconSelector from '/@/components/iconSelector/index.vue'
 import {useCompute} from '@fast-crud/fast-crud'
 import {inject} from 'vue'
+import {functions} from "lodash-es";
 const {compute} = useCompute()
 interface CreateCrudOptionsTypes {
     crudOptions: CrudOptions;
 }
 
 export const createCrudOptions = function ({ crudExpose,menuButtonRef }: { crudExpose: CrudExpose,menuButtonRef:any }): CreateCrudOptionsTypes {
-    const hasPermissions = inject('$hasPermissions')
+    const hasPermissions:any = inject('$hasPermissions')
     //验证路由地址
     const validateWebPath = (rule: string, value: string, callback: Function) => {
         const isLink = crudExpose.getFormData().is_link

web/src/views/system/rolePermission/api.ts

@@ -12,6 +12,20 @@ export function GetMenu(params:any) {
     });
 }
 
+/***
+ * 新增权限
+ * @param data
+ * @constructor
+ */
+export function SaveMenuPermission(data:any) {
+    return request({
+        url: '/api/system/role_menu_permission/save_auth/',
+        method: 'post',
+        data:data
+    });
+}
+
+
 /**
  * 获取菜单下的按钮
  * @param params
@@ -26,6 +40,9 @@ export function GetMenuButton(params:any) {
 }
 
 
+
+
+
 /***
  * 根据角色获取数据权限范围
  * @constructor
@@ -42,11 +59,11 @@ export function GetDataScope (params:any={}) {
  * 获取权限部门
  * @constructor
  */
-export function GetDataScopeDept () {
+export function GetDataScopeDept (params:any) {
     return request({
-        url: '/api/system/role/data_scope_dept/',
+        url: '/api/system/role_menu_button_permission/role_to_dept_all/',
         method: 'get',
-        params: {}
+        params: params
     })
 }
 
@@ -55,7 +72,7 @@ export function GetDataScopeDept () {
  * @param data
  * @constructor
  */
-export function CreateObj(data:any) {
+export function CreatePermission(data:any) {
     return request({
         url: '/api/system/role_menu_button_permission/',
         method: 'post',
@@ -74,3 +91,17 @@ export function getObj(params:any) {
         params:params
     });
 }
+
+/**
+ * 删除按钮权限
+ * @param data
+ * @constructor
+ */
+export function DeletePermission(data:any) {
+    return request({
+        url: `/api/system/role_menu_button_permission/${data.id}/`,
+        method: 'delete',
+        data:{}
+    });
+}
+

web/src/views/system/rolePermission/index.vue

@@ -7,15 +7,21 @@
       :before-close="handleClose"
   >
     <template #header>
-      <el-button-group>
-        <el-button size="mini" plain type="primary">当前角色:{{ editedRoleInfo.name }}</el-button>
-        <el-button size="mini" type="primary" @click="onSaveAuth">保存授权</el-button>
-      </el-button-group>
+      <div  >
+        <el-tag size="large"  type="primary">当前角色:{{ editedRoleInfo.name }}</el-tag>
+      </div>
      </template>
     <div style="padding: 1em">
       <el-row :gutter="10">
         <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
-          <el-card header="页面菜单">
+          <el-alert title="针对角色的页面菜单进行授权"  description="点击菜单项,可对菜单下的按钮/接口授权" type="warning" />
+          <el-card header="菜单页面授权">
+            <template #header>
+              <div class="card-header">
+                <span>菜单页面</span>
+                <el-button size="mini" type="primary" @click="onSaveAuth">保存菜单授权</el-button>
+              </div>
+            </template>
             <el-tree :data="menuData"
                      ref="menuTree"
                      show-checkbox
@@ -29,14 +35,15 @@
           </el-card>
         </el-col>
         <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="18">
+          <el-alert title="对页面菜单下按钮授权"  description="新增或删除对菜单下的按钮/接口授权" type="warning" />
           <el-card v-if="isBtnPermissionShow">
             <template #header>
               <div class="card-header">
-                <span>页面授权</span>
+                <span>按钮/接口授权</span>
               </div>
             </template>
             <div>
-              <el-divider content-position="left">按钮授权</el-divider>
+              <el-divider content-position="left">{{ editedMenuInfo.name }}</el-divider>
               <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%">
@@ -52,8 +59,8 @@
                 </el-table-column>
                 <el-table-column prop="dept" label="权限涉及部门"/>
                 <el-table-column fixed="right" label="操作" width="120">
-                  <template #default>
-                    <el-button type="danger" size="small">删除</el-button>
+                  <template #default="scope">
+                    <el-button type="danger" size="small" @click="onDeleteBtn(scope)">删除</el-button>
                   </template>
                 </el-table-column>
               </el-table>
@@ -89,7 +96,7 @@
         </el-col>
       </el-row>
       <el-dialog v-model="dialogFormVisible" width="400px" title="配置按钮权限">
-        <el-form :model="buttonForm" :rules="buttonRules" label-width="120px">
+        <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"/>
@@ -107,7 +114,7 @@
                   show-checkbox
                   default-expand-all
                   :default-checked-keys="deptCheckedKeys"
-                  ref="dept"
+                  ref="deptTree"
                   node-key="id"
                   :check-strictly="true"
                   :props="{ label: 'name' }"
@@ -132,7 +139,8 @@
 import {ref, defineExpose, reactive, toRefs} from 'vue'
 import {ElMessageBox} from 'element-plus'
 import * as api from './api'
-import type {FormRules} from 'element-plus'
+import type {FormRules,FormInstance} from 'element-plus'
+import { ElMessage } from 'element-plus'
 import XEUtils from 'xe-utils'
 //抽屉是否显示
 const drawer = ref(false)
@@ -202,6 +210,8 @@ const menuTree = ref()
 /***按钮授权的弹窗****/
 //是否显示新增表单
 const dialogFormVisible = ref(false)
+//部门树
+const deptTree=ref()
 //自定义部门数据
 const deptOptions = ref()
 //选中的部门数据
@@ -223,12 +233,10 @@ const buttonRules = reactive<FormRules>({
   ],
   data_range: [
     {required: true, message: '必填项'}
-  ],
-  dept: [
-    {required: true, message: '必填项'}
-  ],
+  ]
 })
 //新增按钮
+const buttonFormRef = ref<FormInstance>()
 const createBtnPermission = () => {
   dialogFormVisible.value = true
   buttonForm.menu_button = null
@@ -246,6 +254,11 @@ const onChangeButton = (val: any) => {
   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)=>{
@@ -283,21 +296,66 @@ const formatDataRange = (val:any)=>{
   return obj?obj.label:null
 }
 //保存按钮表单
-const onSaveButtonForm = () => {
-  //console.log(editedRoleInfo)
+
+const onSaveButtonForm = async () => {
   const {id:roleId} = editedRoleInfo.value
   const {id:menuId} = editedMenuInfo.value
-  const form = Object.assign({},buttonForm)
+  const form:any = Object.assign({},buttonForm)
   form.role = roleId
   form.menu = menuId
-  console.log(form)
-  api.CreateObj(form).then(res=>{
+  //选中的部门
+  const checkedList = deptTree.value.getCheckedKeys()
+  form.dept = checkedList
+  if (!buttonFormRef) return
+  await buttonFormRef.value.validate((valid, fields) => {
+    if (valid) {
+      api.CreatePermission(form).then((res:any)=>{
         buttonPermissionData.value.push(form)
         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=>{
+          buttonPermissionData.value.splice($index,1)
+          ElMessage({
+            type: 'success',
+            message: res.msg,
+          })
+        })
+      })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '取消删除',
+        })
+      })
 
+}
 /***按钮授权的弹窗****/
 //初始化数据
 const initGet = () => {
@@ -314,7 +372,18 @@ const onSaveAuth = () => {
   const halfCheckedList = menuTree.value.getHalfCheckedKeys()
   //合并的菜单数据
   const menuIdList = [...checkedList, ...halfCheckedList]
-  console.log(menuIdList)
+  // console.log(menuIdList)
+  const { id:roleId } = editedRoleInfo.value
+  const data = {
+    role:roleId,
+    menu:menuIdList
+  }
+  api.SaveMenuPermission(data).then((res:any)=>{
+    ElMessage({
+      message: res.msg,
+      type: 'success',
+    })
+  })
 }