功能变化: 授权页面

backend/dvadmin/system/models.py

@@ -201,6 +201,14 @@ class RoleMenuButtonPermission(CoreModel):
         verbose_name="关联角色",
         help_text="关联角色",
     )
+    menu = models.ForeignKey(
+        to="Menu",
+        db_constraint=False,
+        related_name="role_menu",
+        on_delete=models.CASCADE,
+        verbose_name="关联菜单",
+        help_text="关联菜单",
+    )
     menu_button = models.ForeignKey(
         to="MenuButton",
         db_constraint=False,
@@ -208,6 +216,8 @@ class RoleMenuButtonPermission(CoreModel):
         on_delete=models.CASCADE,
         verbose_name="关联菜单按钮",
         help_text="关联菜单按钮",
+        null=True,
+        blank=True
     )
     DATASCOPE_CHOICES = (
         (0, "仅本人数据权限"),

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_button_permission import RoleMenuButtonPermissionViewSet
 from dvadmin.system.views.system_config import SystemConfigViewSet
 from dvadmin.system.views.user import UserViewSet
 
@@ -28,6 +29,8 @@ system_url.register(r'file', FileViewSet)
 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)
+
 
 urlpatterns = [
     path('user/export/', UserViewSet.as_view({'post': 'export_data', })),

backend/dvadmin/system/views/role_menu_button_permission.py

@@ -0,0 +1,183 @@
+# -*- coding: utf-8 -*-
+
+"""
+@author: 猿小天
+@contact: QQ:1638245306
+@Created on: 2021/6/3 003 0:30
+@Remark: 菜单按钮管理
+"""
+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.utils.json_response import DetailResponse, ErrorResponse
+from dvadmin.utils.serializers import CustomModelSerializer
+from dvadmin.utils.viewset import CustomModelViewSet
+
+
+class RoleMenuButtonPermissionSerializer(CustomModelSerializer):
+    """
+    菜单按钮-序列化器
+    """
+
+    class Meta:
+        model = RoleMenuButtonPermission
+        fields = ['id', 'name', 'value', 'api', 'method']
+        read_only_fields = ["id"]
+
+
+class RoleMenuButtonPermissionInitSerializer(CustomModelSerializer):
+    """
+    初始化菜单按钮-序列化器
+    """
+
+    class Meta:
+        model = RoleMenuButtonPermission
+        fields = ['id', 'name', 'value', 'api', 'method', 'menu']
+        read_only_fields = ["id"]
+
+class RoleMenuButtonPermissionCreateUpdateSerializer(CustomModelSerializer):
+    """
+    初始化菜单按钮-序列化器
+    """
+
+    class Meta:
+        model = RoleMenuButtonPermission
+        fields = "__all__"
+        read_only_fields = ["id"]
+
+
+class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
+    """
+    菜单按钮接口
+    list:查询
+    create:新增
+    update:修改
+    retrieve:单例
+    destroy:删除
+    """
+    queryset = RoleMenuButtonPermission.objects.all()
+    serializer_class = RoleMenuButtonPermissionSerializer
+    create_serializer_class = RoleMenuButtonPermissionCreateUpdateSerializer
+    update_serializer_class = RoleMenuButtonPermissionCreateUpdateSerializer
+    extra_filter_backends = []
+
+    @action(methods=['GET'], detail=False, permission_classes=[IsAuthenticated])
+    def role_get_menu(self, request):
+        """根据当前用户的角色返回角色拥有的菜单"""
+        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 = Menu.objects.filter(status=1).values('id','name','parent','is_catalog')
+        else:
+            role_id = request.user.role.id
+            queryset = RoleMenuButtonPermission.objects.filter(role=role_id).values(id=F('menu__id'),name=F('menu__name'),parent=F('menu__parent'),is_catalog=F('menu__is_catalog'))
+        return DetailResponse(data=queryset)
+
+    @action(methods=['GET'], detail=False, permission_classes=[IsAuthenticated])
+    def role_menu_get_button(self,request):
+        """根据角色和菜单获取菜单下的按钮"""
+        params = request.query_params
+        if params:
+            menu_id = params.get('menu',None)
+            if menu_id:
+                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 = 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(
+                        id=F('menu_button__id'),
+                        name=F('menu_button__name')
+                    )
+                return DetailResponse(data=queryset)
+        return ErrorResponse(msg="参数错误")
+
+    @action(methods=['GET'], detail=False, permission_classes=[IsAuthenticated])
+    def data_scope(self, request):
+        is_superuser = request.user.is_superuser
+        if is_superuser:
+            data = [
+                {
+                    "value": 0,
+                    "label": '仅本人数据权限'
+                },
+                {
+                    "value": 1,
+                    "label": '本部门及以下数据权限'
+                },
+                {
+                    "value": 2,
+                    "label": '本部门数据权限'
+                },
+                {
+                    "value": 3,
+                    "label": '全部数据权限'
+                },
+                {
+                    "value": 4,
+                    "label": '自定义数据权限'
+                }
+            ]
+            return DetailResponse(data=data)
+        else:
+            data = []
+            role_id = request.user.role.id
+            params = request.query_params
+            if params:
+                menu_button_id = params.get('menu_button', None)
+                if menu_button_id:
+                    role_queryset = RoleMenuButtonPermission.objects.filter(role=role_id,menu_button=menu_button_id).values_list('data_range',flat=True)
+                    data_range_list = list(set(role_queryset))
+                    for item in data_range_list:
+                        if item == 0:
+                            data = [{
+                                "value": 0,
+                                "label": '仅本人数据权限'
+                            }]
+                        elif item == 1:
+                            data = [{
+                                "value": 0,
+                                "label": '仅本人数据权限'
+                            }, {
+                                "value": 1,
+                                "label": '本部门及以下数据权限'
+                            },
+                                {
+                                    "value": 2,
+                                    "label": '本部门数据权限'
+                                }]
+                        elif item == 2:
+                            data = [{
+                                "value": 0,
+                                "label": '仅本人数据权限'
+                            },
+                                {
+                                    "value": 2,
+                                    "label": '本部门数据权限'
+                                }]
+                        elif item == 3:
+                            data = [{
+                                "value": 0,
+                                "label": '仅本人数据权限'
+                            },
+                                {
+                                    "value": 3,
+                                    "label": '全部数据权限'
+                                }, ]
+                        elif item == 4:
+                            data = [{
+                                "value": 0,
+                                "label": '仅本人数据权限'
+                            },
+                                {
+                                    "value": 4,
+                                    "label": '自定义数据权限'
+                                }]
+                        else:
+                            data = []
+                    return DetailResponse(data=data)
+        return ErrorResponse(msg="参数错误")
+

web/src/views/system/login/component/account.vue

@@ -116,7 +116,7 @@ export default defineComponent({
 		};
 		const loginClick = async () => {
 			loginApi.login({ ...state.ruleForm, password: Md5.hashStr(state.ruleForm.password) }).then((ret: any) => {
-				Session.set('token', ret.data.access);
+			  Session.set('token', ret.data.access);
 				Cookies.set('username', ret.data.name);
 				if (!themeConfig.value.isRequestRoutes) {
 					// 前端控制路由，2、请注意执行顺序

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

@@ -64,12 +64,9 @@ import { RouteRecordRaw } from 'vue-router';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { storeToRefs } from 'pinia';
 import { useRoutesList } from '/@/stores/routesList';
-import AddMenu from '/@/views/system/menu/component/addMenu.vue';
-import EditMenu from '/@/views/system/menu/component/editMenu.vue';
 
 export default defineComponent({
 	name: 'systemMenu',
-	components: { AddMenu, EditMenu },
 	setup() {
 		const stores = useRoutesList();
 		const { routesList } = storeToRefs(stores);

web/src/views/system/role/curd.tsx

@@ -82,8 +82,10 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
                             placement: "top",
                             content: "删除"
                         },
-                        click: () => {
+                        click: (context:any) => {
+                            const {row} = context
                         	rolePermission.value.drawer=true
+                            rolePermission.value.editedRoleInfo = row
                             rolePermission.value.initGet()
                         }
                     }

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

@@ -6,7 +6,20 @@ import { request } from "/@/utils/service";
  */
 export function GetMenu(params:any) {
     return request({
-        url: '/api/system/role/role_get_menu/',
+        url: '/api/system/role_menu_button_permission/role_get_menu/',
+        method: 'get',
+        params:params
+    });
+}
+
+/**
+ * 获取菜单下的按钮
+ * @param params
+ * @constructor
+ */
+export function GetMenuButton(params:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/role_menu_get_button/',
         method: 'get',
         params:params
     });
@@ -17,11 +30,11 @@ export function GetMenu(params:any) {
  * 根据角色获取数据权限范围
  * @constructor
  */
-export function GetDataScope () {
+export function GetDataScope (params:any={}) {
     return request({
-        url: '/api/system/role/data_scope/',
+        url: '/api/system/role_menu_button_permission/data_scope/',
         method: 'get',
-        params: {}
+        params: params
     })
 }
 

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

@@ -7,9 +7,10 @@
       :before-close="handleClose"
   >
     <template #header>
-      <h4>
+      <el-button-group>
-        <el-tag>当前角色:超管</el-tag>
+        <el-button size="mini" plain type="primary">当前角色:{{editedRoleInfo.name}}</el-button>
-      </h4>
+        <el-button size="mini" type="primary" @click="onSaveAuth">保存授权</el-button>
+      </el-button-group>
     </template>
     <div style="padding: 1em">
     <el-row :gutter="10">
@@ -22,10 +23,8 @@
                    highlight-current
                    :expand-on-click-node="false"
                    :check-on-click-node="true"
-                   :lazy="true"
-                   :load="loadMenuNone"
                    :props="defaultProps"
-                   @node-click="menuNodeClick"
+                   @current-change="menuNodeClick"
           />
         </el-card>
       </el-col>
@@ -34,7 +33,6 @@
           <template #header>
             <div class="card-header">
               <span>页面授权</span>
-              <el-button size="small" type="primary">保存授权</el-button>
             </div>
           </template>
           <div>
@@ -84,9 +82,8 @@
       <el-dialog v-model="dialogFormVisible" title="配置按钮权限">
         <el-form :model="buttonForm" :rules="buttonRules" label-width="120px">
           <el-form-item label="按钮">
-            <el-select v-model="buttonForm.name" placeholder="请选择按钮">
+            <el-select v-model="buttonForm.name" placeholder="请选择按钮" @change="onChangeButton">
-              <el-option label="Zone No.1" value="shanghai" />
+              <el-option v-for="(item,index) in buttonOptions" :key="index" :label="item.name" :value="item.id" />
-              <el-option label="Zone No.2" value="beijing" />
             </el-select>
           </el-form-item>
           <el-form-item label="权限范围">
@@ -111,9 +108,9 @@
         </el-form>
         <template #footer>
       <span class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">Cancel</el-button>
+        <el-button @click="dialogFormVisible = false">取消</el-button>
-        <el-button type="primary" @click="dialogFormVisible = false">
+        <el-button type="primary" @click="onSaveButtonForm">
-          Confirm
+          确定
         </el-button>
       </span>
         </template>
@@ -123,12 +120,16 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, defineExpose,reactive} from 'vue'
+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 Node from 'element-plus/es/components/tree/src/model/node'
+import XEUtils from 'xe-utils'
+//抽屉是否显示
 const drawer = ref(false)
+//当前编辑的角色信息
+const editedRoleInfo = ref({})
+
 //抽屉关闭确认
 const handleClose = (done: () => void) => {
   ElMessageBox.confirm('您确定要关闭?', {
@@ -154,40 +155,44 @@ const defaultProps = {
 interface Tree {
   name: string
   children?: Tree[],
-  isLeaf:boolean
+  id:number
 }
 let menuData= ref<Tree>()
 //获取菜单
 const getMenuData = () => {
   api.GetMenu({}).then((res:any)=>{
     const {data} = res
-    menuData.value = data
+    const list = XEUtils.toArrayTree(data,{parentKey:"parent",strict:true})
-  })
+    menuData.value = list
-}
-//懒加载菜单节点
-const loadMenuNone = (node: Node , resolve: (data: Tree[]) => void) => {
-  api.GetMenu({parent:node.id}).then((res:any)=>{
-    const {data} = res
-    resolve(data)
   })
 }
+
 let isCatalog = ref(true)
+let buttonOptions = ref<[]>()
+let checkedMenuId = ref()
+//菜单节点点击事件
 const menuNodeClick=(node:any)=>{
   isCatalog.value = node.is_catalog
+  if(!node.is_catalog){
+    buttonOptions.value = []
+    checkedMenuId.value = node.id
+    api.GetMenuButton({menu:node.id}).then((res:any)=>{
+      const {data} = res
+      buttonOptions.value = data
+    })
+  }
+
 }
+const menuTree = ref()
 /*****菜单的配置项***/
 /***按钮授权的弹窗****/
+//是否显示新增表单
 const dialogFormVisible = ref(false)
-const deptOptions = [{
+//自定义部门数据
-  name:"dvadmin"
+const deptOptions = ref()
-}]
+//选中的部门数据
 const deptCheckedKeys=[]
-const dataScopeOptions=ref<[]>()
+
-const getDataScope = ()=>{
-  api.GetDataScope().then((res:any)=>{
-    dataScopeOptions.value = res.data
-  })
-}
 
 //按钮表单
 const buttonForm = reactive({
@@ -208,9 +213,22 @@ const buttonRules = reactive<FormRules>({
 //新增按钮
 const createBtnPermission = ()=>{
   dialogFormVisible.value = true
-  getDataScope()
 }
-//按钮表格
+//权限范围数据
+const dataScopeOptions=ref<[]>()
+//按钮值变化事件
+const onChangeButton = (val:any)=>{
+  dataScopeOptions.value = []
+  //获取权限值范围
+  api.GetDataScope({menu_button:val}).then((res:any)=>{
+    dataScopeOptions.value = res.data
+  })
+}
+//保存按钮表单
+const onSaveButtonForm = ()=>{
+  console.log(editedRoleInfo)
+}
+//按钮表格数据
 const buttonPermissionData: any[] = [
   {
     name: "查询",
@@ -235,7 +253,21 @@ const crudPermissionData: any[] = [
   }
 ]
 
-defineExpose({drawer,initGet})
+/**
+ * 保存授权
+ */
+const onSaveAuth = ()=>{
+  //选中的菜单
+  const checkedList = menuTree.value.getCheckedKeys()
+  //半选中的菜单
+  const halfCheckedList = menuTree.value.getHalfCheckedKeys()
+  //合并的菜单数据
+  const menuIdList = [...checkedList,...halfCheckedList]
+  console.log(menuIdList)
+}
+
+
+defineExpose({drawer,editedRoleInfo,initGet})
 </script>
 
 <style scoped>