From f7b94e496c00c1c13cd5173a8c779427cb31e11f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8C=BF=E5=B0=8F=E5=A4=A9?= <1638245306@qq.com>
Date: Mon, 5 Jun 2023 22:21:19 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20=E6=8E=88?=
 =?UTF-8?q?=E6=9D=83=E9=A1=B5=E9=9D=A2=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构授权页面
---
 backend/dvadmin/system/models.py              |   2 +-
 backend/dvadmin/system/views/menu.py          |  11 +-
 backend/dvadmin/system/views/role_menu.py     |   9 +-
 .../views/role_menu_button_permission.py      | 114 ++++--
 web/src/plugin/permission/func.permission.ts  |   2 +-
 web/src/utils/service.ts                      |  12 +-
 web/src/views/system/role/components/api.ts   | 117 ++++++
 .../system/role/components/permission.vue     | 377 ++++++++++++++++++
 web/src/views/system/role/crud.tsx            |   2 +
 web/src/views/system/role/index.vue           |   4 +-
 web/src/views/system/rolePermission/index.vue |   6 +-
 11 files changed, 600 insertions(+), 56 deletions(-)
 create mode 100644 web/src/views/system/role/components/api.ts
 create mode 100644 web/src/views/system/role/components/permission.vue

diff --git a/backend/dvadmin/system/models.py b/backend/dvadmin/system/models.py
index 392a08e..146ba0e 100644
--- a/backend/dvadmin/system/models.py
+++ b/backend/dvadmin/system/models.py
@@ -236,7 +236,7 @@ class RoleMenuPermission(CoreModel):
         db_table = table_prefix + "role_menu_permission"
         verbose_name = "角色菜单权限表"
         verbose_name_plural = verbose_name
-        ordering = ("-create_datetime",)
+        # ordering = ("-create_datetime",)
 
 
 class RoleMenuButtonPermission(CoreModel):
diff --git a/backend/dvadmin/system/views/menu.py b/backend/dvadmin/system/views/menu.py
index 028ed40..d29bb59 100644
--- a/backend/dvadmin/system/views/menu.py
+++ b/backend/dvadmin/system/views/menu.py
@@ -90,11 +90,16 @@ class MenuViewSet(CustomModelViewSet):
     def web_router(self, request):
         """用于前端获取当前角色的路由"""
         user = request.user
-        queryset = self.queryset.filter(status=1)
-        if not user.is_superuser:
+        is_admin = user.role.values_list('admin', flat=True)
+        if user.is_superuser or True in is_admin:
+            queryset = self.queryset.filter(status=1)
+        else:
             role_list = user.role.values_list('id', flat=True)
-            menu_list = RoleMenuPermission.objects.filter(role__in=role_list).values_list('menu_id')
+            menu_list = RoleMenuPermission.objects.filter(role__in=role_list).values_list('menu_id',flat=True)
+            print("role_list", role_list)
+            print("menu_list",menu_list)
             queryset = Menu.objects.filter(id__in=menu_list)
+        print(queryset)
         serializer = WebRouterSerializer(queryset, many=True, request=request)
         data = serializer.data
         return SuccessResponse(data=data, total=len(data), msg="获取成功")
diff --git a/backend/dvadmin/system/views/role_menu.py b/backend/dvadmin/system/views/role_menu.py
index b1e606b..4a3cc95 100644
--- a/backend/dvadmin/system/views/role_menu.py
+++ b/backend/dvadmin/system/views/role_menu.py
@@ -72,7 +72,14 @@ class RoleMenuPermissionViewSet(CustomModelViewSet):
         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]
+        obj_list = RoleMenuPermission.objects.filter(role__id=role_id).values_list('menu__id',flat=True)
+        old_set = set(obj_list)
+        new_set = set(menu_list)
+        #need_update = old_set.intersection(new_set) # 需要更新的
+        need_del = old_set.difference(new_set) # 需要删除的
+        need_add = new_set.difference(old_set) # 需要新增的
+        RoleMenuPermission.objects.filter(role__id=role_id,menu__in=list(need_del)).delete()
+        data = [{"role": role_id, "menu": item} for item in list(need_add)]
         serializer = RoleMenuPermissionSerializer(data=data,many=True,request=request)
         if serializer.is_valid(raise_exception=True):
             serializer.save()
diff --git a/backend/dvadmin/system/views/role_menu_button_permission.py b/backend/dvadmin/system/views/role_menu_button_permission.py
index 224abda..c680018 100644
--- a/backend/dvadmin/system/views/role_menu_button_permission.py
+++ b/backend/dvadmin/system/views/role_menu_button_permission.py
@@ -6,11 +6,11 @@
 @Created on: 2021/6/3 003 0:30
 @Remark: 菜单按钮管理
 """
-from django.db.models import F
+from django.db.models import F, Subquery, OuterRef, Exists
 from rest_framework.decorators import action
 from rest_framework.permissions import IsAuthenticated
 
-from dvadmin.system.models import RoleMenuButtonPermission, Menu, MenuButton, Dept
+from dvadmin.system.models import RoleMenuButtonPermission, Menu, MenuButton, Dept, RoleMenuPermission
 from dvadmin.utils.json_response import DetailResponse, ErrorResponse
 from dvadmin.utils.serializers import CustomModelSerializer
 from dvadmin.utils.viewset import CustomModelViewSet
@@ -66,14 +66,23 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
     @action(methods=['GET'], detail=False, permission_classes=[IsAuthenticated])
     def role_get_menu(self, request):
         """根据当前用户的角色返回角色拥有的菜单"""
+        data = []
         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')
+            queryset = Menu.objects.filter(status=1).values('name','parent','is_catalog',menu_id=F('id'))
+            for item in queryset:
+                btn_name = MenuButton.objects.filter(menu=item['menu_id']).values_list(
+                    'name', flat=True)
+                data.append({'menu_id': item['menu_id'], 'name': item['name'], 'parent': item['parent'],
+                             'permission': ','.join(btn_name), 'is_catalog': item['is_catalog']})
         else:
             role_id = request.user.role.values_list('id',flat=True)
-            queryset = RoleMenuButtonPermission.objects.filter(role__in=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)
+            queryset = RoleMenuPermission.objects.filter(role__in=role_id).values('menu_id',name=F('menu__name'),parent=F('menu__parent'),is_catalog=F('menu__is_catalog')).distinct()
+            for item in queryset:
+                btn_name = RoleMenuButtonPermission.objects.filter(menu_button__menu=item['menu_id']).values_list('menu_button__name',flat=True)
+                data.append({'menu_id':item['menu_id'], 'name':item['name'], 'parent':item['parent'],'permission':','.join(btn_name),'is_catalog':item['is_catalog']})
+        return DetailResponse(data=data)
 
     @action(methods=['GET'], detail=False, permission_classes=[IsAuthenticated])
     def role_menu_get_button(self,request):
@@ -82,18 +91,16 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
         :param request:
         :return:
         """
-        params = request.query_params
-        if params:
-            menu_id = params.get('menu',None)
-            if menu_id:
+        if params := request.query_params:
+            if menu_id := params.get('menu', None):
                 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_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'),
+                    queryset = RoleMenuButtonPermission.objects.filter(role__in=role_list,menu_button__menu=menu_id).values(
+                        btn_id=F('menu_button__id'),
                         name=F('menu_button__name')
                     )
                 return DetailResponse(data=queryset)
@@ -133,12 +140,10 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
             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)
+            role_list = request.user.role.values_list('id',flat=True)
+            if params := request.query_params:
+                if menu_button_id := params.get('menu_button', None):
+                    role_queryset = RoleMenuButtonPermission.objects.filter(role__in=role_list,menu_button__id=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:
@@ -202,21 +207,19 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
         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:
+            if not params:
                 return ErrorResponse(msg="参数错误")
+            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(
+                dept_id=F('dept__id'),
+                name=F('dept__name'),
+                parent=F('dept__parent')
+            )
+        return DetailResponse(data=queryset)
 
 
 
@@ -228,17 +231,48 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
         :return:
         """
         params = request.query_params
-        if params:
-            menu_id = params.get('menu',None)
-            if menu_id is None:
-                return ErrorResponse(msg="未获取到参数")
-            role_id = params.get('role', None)
-            if role_id is None:
-                return ErrorResponse(msg="未获取到参数")
-            queryset = RoleMenuButtonPermission.objects.filter(role=role_id,menu_button__menu=menu_id).values(
+        menu_id = params.get('menu', None)
+        if menu_id is None:
+            return ErrorResponse(msg="未获取到参数")
+        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 = RoleMenuButtonPermission.objects.filter(menu_button__menu=menu_id).values(
                 'id',
                 'data_range',
-                'menu_button'
+                'menu_button',
+                'menu_button__name',
+                'menu_button__value'
             )
             return DetailResponse(data=queryset)
-        return ErrorResponse(msg="未获取到参数")
\ No newline at end of file
+        else:
+            if params:
+
+                role_id = params.get('role', None)
+                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',
+                    'menu_button__name',
+                    'menu_button__value'
+                )
+                return DetailResponse(data=queryset)
+        return ErrorResponse(msg="未获取到参数")
+
+    @action(methods=['get'], detail=False, permission_classes=[IsAuthenticated])
+    def role_to_menu(self, request):
+        """
+        获取角色对应的按钮权限
+        :param request:
+        :return:
+        """
+        params = request.query_params
+        role_id = params.get('role', None)
+        if role_id is None:
+            return ErrorResponse(msg="未获取到参数")
+        queryset = RoleMenuPermission.objects.filter(role_id=role_id).values_list('menu_id',flat=True).distinct()
+
+        return DetailResponse(data=queryset)
+
diff --git a/web/src/plugin/permission/func.permission.ts b/web/src/plugin/permission/func.permission.ts
index 77911fa..d0a77bc 100644
--- a/web/src/plugin/permission/func.permission.ts
+++ b/web/src/plugin/permission/func.permission.ts
@@ -9,7 +9,7 @@ export default {
         return XEUtils.includeArrays(BtnPermission, value)
       }else if(typeof value === 'string'){
         const index = XEUtils.arrayIndexOf(BtnPermission, value)
-        return index>0?true:false
+        return index>-1?true:false
       }
      }
     return true
diff --git a/web/src/utils/service.ts b/web/src/utils/service.ts
index 5694dbc..b791810 100644
--- a/web/src/utils/service.ts
+++ b/web/src/utils/service.ts
@@ -24,12 +24,12 @@ function createService() {
 			serialize(params) {
 				return qs.stringify(params, {
 					indices: false,
-					encoder: (val: string) => {
-						if (typeof val === 'boolean') {
-							return val ? 1 : 0;
-						}
-						return val;
-					},
+					// encoder: (val: string) => {
+					// 	if (typeof val === 'boolean') {
+					// 		return val ? 1 : 0;
+					// 	}
+					// 	return val;
+					// },
 				});
 			},
 		},
diff --git a/web/src/views/system/role/components/api.ts b/web/src/views/system/role/components/api.ts
new file mode 100644
index 0000000..8e9abaa
--- /dev/null
+++ b/web/src/views/system/role/components/api.ts
@@ -0,0 +1,117 @@
+import { request } from "/@/utils/service";
+
+/**
+ * 获取角色所拥有的菜单
+ * @param params
+ */
+export function GetMenu(params:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/role_get_menu/',
+        method: 'get',
+        params:params
+    });
+}
+
+/***
+ * 新增权限
+ * @param data
+ * @constructor
+ */
+export function SaveMenuPermission(data:any) {
+    return request({
+        url: '/api/system/role_menu_permission/save_auth/',
+        method: 'post',
+        data:data
+    });
+}
+
+
+/**
+ * 获取菜单下的按钮
+ * @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
+    });
+}
+
+
+/***
+ * 根据角色获取已授权的菜单
+ * @param params
+ * @constructor
+ */
+export function role_to_menu (params:any={}) {
+    return request({
+        url: '/api/system/role_menu_button_permission/role_to_menu/',
+        method: 'get',
+        params: params
+    })
+}
+
+/***
+ * 根据角色获取数据权限范围
+ * @constructor
+ */
+export function GetDataScope (params:any={}) {
+    return request({
+        url: '/api/system/role_menu_button_permission/data_scope/',
+        method: 'get',
+        params: params
+    })
+}
+
+/***
+ * 获取权限部门
+ * @constructor
+ */
+export function GetDataScopeDept (params:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/role_to_dept_all/',
+        method: 'get',
+        params: params
+    })
+}
+
+/***
+ * 新增权限
+ * @param data
+ * @constructor
+ */
+export function CreatePermission(data:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/',
+        method: 'post',
+        data:data
+    });
+}
+
+/***
+ * 根据菜单获取菜单下按钮
+ * @param params
+ */
+export function getObj(params:any) {
+    return request({
+        url: '/api/system/role_menu_button_permission/menu_to_button/',
+        method: 'get',
+        params:params
+    });
+}
+
+/**
+ * 删除按钮权限
+ * @param data
+ * @constructor
+ */
+export function DeletePermission(data:any) {
+    return request({
+        url: `/api/system/role_menu_button_permission/${data.id}/`,
+        method: 'delete',
+        data:{}
+    });
+}
+
diff --git a/web/src/views/system/role/components/permission.vue b/web/src/views/system/role/components/permission.vue
new file mode 100644
index 0000000..7ebc9de
--- /dev/null
+++ b/web/src/views/system/role/components/permission.vue
@@ -0,0 +1,377 @@
+<template>
+  <el-drawer
+      size="70%"
+      v-model="drawer"
+      direction="rtl"
+      destroy-on-close
+      :before-close="handleClose"
+  >
+    <template #header>
+      <div>
+        <el-tag size="large" type="primary">当前角色:{{ editedRoleInfo.name }}</el-tag>
+      </div>
+    </template>
+    <div style="padding: 1em">
+      <div style="margin-bottom: 10px">
+        <el-button size="mini" type="primary" @click="onSaveAuth">保存菜单授权</el-button>
+      </div>
+      <vxe-table
+          ref="tableRef"
+          border
+          resizable
+          :row-config="{keyField: 'menu_id'}"
+          :tree-config="{transform: true, rowField: 'menu_id', parentField: 'parent'}"
+          :checkbox-config="{labelField: 'menu_id', checkRowKeys: multipleTableData,checkStrictly:true}"
+          :data="menuData">
+        <vxe-column type="checkbox" title="ID" width="200" tree-node></vxe-column>
+        <vxe-column field="name" title="目录/菜单" ></vxe-column>
+        <vxe-column type="expand" title="已授予权限" width="120">
+          <template #content="{ row, rowIndex }">
+            <div style="padding: 10px 0px" v-if="!row.is_catalog">
+              <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%">
+                <el-table-column prop="menu_button" label="权限名称" width="100">
+                  <template #default="scope">
+                    <div>{{ scope.row.menu_button__name }}</div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="menu_button__value" label="权限值" width="100">
+                </el-table-column>
+                <el-table-column prop="data_range" label="权限范围" width="140">
+                  <template #default="scope">
+                    <div>{{ formatDataRange(scope.row.data_range) }}</div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="dept" label="权限涉及部门"/>
+                <el-table-column fixed="right" label="操作" width="120">
+                  <template #default="scope">
+                    <el-button type="danger" size="small" @click="onDeleteBtn(scope)">删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <!--      弹窗-->
+      <el-dialog v-model="dialogFormVisible" append-to-body width="400px" title="配置按钮权限">
+        <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.btn_id"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="权限范围" prop="data_range">
+            <el-select v-model="buttonForm.data_range" placeholder="请选择按钮">
+              <el-option v-for="(item,index) in dataScopeOptions" :key="index" :label="item.label"
+                         :value="item.value"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="数据部门" prop="dept" v-show="buttonForm.data_range === 4">
+            <div class="dept-tree">
+              <el-tree
+                  :data="deptOptions"
+                  show-checkbox
+                  default-expand-all
+                  :default-checked-keys="deptCheckedKeys"
+                  ref="deptTree"
+                  node-key="dept_id"
+                  :check-strictly="true"
+                  :props="{ label: 'name' }"
+              ></el-tree>
+            </div>
+          </el-form-item>
+        </el-form>
+        <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="onSaveButtonForm">
+          确定
+        </el-button>
+      </span>
+        </template>
+      </el-dialog>
+    </div>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import {ref, defineExpose, reactive, toRefs} from 'vue'
+import {ElMessageBox, ElTable} from 'element-plus'
+import * as api from './api.ts'
+import type {FormRules, FormInstance} from 'element-plus'
+import {ElMessage} from 'element-plus'
+import XEUtils from 'xe-utils'
+import { VXETable, VxeTableInstance } from 'vxe-table'
+
+interface tableRow {
+  menu_id: number
+  name: string
+}
+
+//抽屉是否显示
+const drawer = ref(false)
+//当前编辑的角色信息
+const editedRoleInfo = ref({})
+
+//抽屉关闭确认
+const handleClose = (done: () => void) => {
+  ElMessageBox.confirm('您确定要关闭?', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+      .then(() => {
+        done()
+      })
+      .catch(() => {
+        // catch error
+      })
+}
+
+/*****菜单的配置项***/
+const defaultProps = {
+  children: 'children',
+  label: 'name',
+  isLeaf: 'hasChild'
+}
+
+interface Tree {
+  name: string
+  children?: Tree[],
+  id: number
+}
+
+let menuData = ref<Tree>()
+//获取菜单
+const getMenuData = () => {
+  api.GetMenu({}).then((res: any) => {
+    const {data} = res
+    menuData.value = data
+  })
+}
+
+//获取已授权的菜单
+const tableRef = ref<VxeTableInstance<tableRow>>()
+const multipleTableData = ref()
+const getRoleToMenu = () => {
+  api.role_to_menu({role: editedRoleInfo.value.id}).then((res: any) => {
+    const {data} = res
+    multipleTableData.value=data
+  })
+}
+
+let isBtnPermissionShow = ref(false)
+let buttonOptions = ref<[]>()
+let editedMenuInfo = ref()
+//菜单节点点击事件
+const menuNodeClick = (node: any) => {
+  isBtnPermissionShow.value = !node.is_catalog
+  if (!node.is_catalog) {
+    buttonOptions.value = []
+    editedMenuInfo.value = node
+    api.GetMenuButton({menu: node.menu_id}).then((res: any) => {
+      const {data} = res
+      buttonOptions.value = data
+    })
+    api.getObj({menu: node.menu_id, role: editedRoleInfo.value.id}).then((res: any) => {
+      const {data} = res
+      buttonPermissionData.value = data
+    })
+  }
+
+}
+const menuTree = ref()
+/*****菜单的配置项***/
+/***按钮授权的弹窗****/
+//是否显示新增表单
+const dialogFormVisible = ref(false)
+//部门树
+const deptTree = ref()
+//自定义部门数据
+const deptOptions = ref()
+//选中的部门数据
+const deptCheckedKeys = []
+//按钮表单
+const buttonForm = reactive({
+  menu_button: null,
+  role: null,
+  menu: null,
+  data_range: null,
+  dept: []
+})
+//按钮表格数据
+let buttonPermissionData = ref([])
+//按钮表单验证
+const buttonRules = reactive<FormRules>({
+  menu_button: [
+    {required: true, message: '必填项'}
+  ],
+  data_range: [
+    {required: true, message: '必填项'}
+  ]
+})
+//新增按钮
+const buttonFormRef = ref<FormInstance>()
+const createBtnPermission = () => {
+  dialogFormVisible.value = true
+  buttonForm.menu_button = null
+  buttonForm.menu = null
+  buttonForm.role = null
+  buttonForm.data_range = null
+  buttonForm.dept = []
+}
+//权限范围数据
+const dataScopeOptions = ref<[]>()
+//按钮值变化事件
+const onChangeButton = (val: any) => {
+  dataScopeOptions.value = []
+  //获取权限值范围
+  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) => {
+  let obj: any = buttonOptions.value?.find((item: any) => {
+    return item.id === val
+  })
+  return obj ? obj.name : null
+}
+//过滤权限范围
+const formatDataRange = (val: any) => {
+  let obj: any = [
+    {
+      "value": 0,
+      "label": '仅本人数据权限'
+    },
+    {
+      "value": 1,
+      "label": '本部门及以下数据权限'
+    },
+    {
+      "value": 2,
+      "label": '本部门数据权限'
+    },
+    {
+      "value": 3,
+      "label": '全部数据权限'
+    },
+    {
+      "value": 4,
+      "label": '自定义数据权限'
+    }
+  ].find((item: any) => {
+    return item.value === val
+  })
+  return obj ? obj.label : null
+}
+//保存按钮表单
+
+const onSaveButtonForm = async () => {
+  const {id: roleId} = editedRoleInfo.value
+  const {id: menuId} = editedMenuInfo.value
+  const form: any = Object.assign({}, buttonForm)
+  form.role = roleId
+  form.menu = menuId
+  //选中的部门
+  const checkedList = deptTree.value.getCheckedKeys()
+  form.dept = checkedList
+  if (!buttonFormRef.value) return
+  await buttonFormRef.value.validate((valid, fields) => {
+    if (valid) {
+      api.CreatePermission(form).then((res: any) => {
+        const {data} = res
+        buttonPermissionData.value.push(data)
+        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: any) => {
+      buttonPermissionData.value.splice($index, 1)
+      ElMessage({
+        type: 'success',
+        message: res.msg,
+      })
+    })
+  })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '取消删除',
+        })
+      })
+
+}
+/***按钮授权的弹窗****/
+//初始化数据
+const initGet = () => {
+  getMenuData()
+  getRoleToMenu()
+}
+
+/**
+ * 保存授权
+ */
+const onSaveAuth = () => {
+
+  const $table = tableRef.value
+  if ($table) {
+    const selectRecords = $table.getCheckboxRecords()
+    const menuIdList =  selectRecords.map((record:any) => record.menu_id)
+    const {id: roleId} = editedRoleInfo.value
+    const data = {
+      role: roleId,
+      menu: menuIdList
+    }
+    api.SaveMenuPermission(data).then((res: any) => {
+      ElMessage({
+        message: res.msg,
+        type: 'success',
+      })
+    })
+  }
+
+}
+
+
+defineExpose({drawer, editedRoleInfo, initGet})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/web/src/views/system/role/crud.tsx b/web/src/views/system/role/crud.tsx
index ae1148f..896ccc6 100644
--- a/web/src/views/system/role/crud.tsx
+++ b/web/src/views/system/role/crud.tsx
@@ -27,6 +27,8 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
 	//权限判定
 	const hasPermissions = inject("$hasPermissions")
 
+	// @ts-ignore
+	// @ts-ignore
 	return {
 		crudOptions: {
 			request: {
diff --git a/web/src/views/system/role/index.vue b/web/src/views/system/role/index.vue
index fafdb61..576f725 100644
--- a/web/src/views/system/role/index.vue
+++ b/web/src/views/system/role/index.vue
@@ -5,7 +5,8 @@
 				<el-tag size="small">{{ scope.row.url }}</el-tag>
 			</template>
 		</fs-crud>
-		<RolePermission ref="rolePermission"></RolePermission>
+<!--		<RolePermission ref="rolePermission"></RolePermission>-->
+    <permission ref="rolePermission"></permission>
 	</fs-page>
 </template>
 
@@ -14,6 +15,7 @@ import { ref, onMounted } from 'vue';
 import { useExpose, useCrud, dict } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
 import RolePermission from '/@/views/system/rolePermission/index.vue';
+import permission from './components/permission.vue'
 import * as api from './api';
 import _ from 'lodash-es';
 const rolePermission = ref();
diff --git a/web/src/views/system/rolePermission/index.vue b/web/src/views/system/rolePermission/index.vue
index a46d241..bf8896f 100644
--- a/web/src/views/system/rolePermission/index.vue
+++ b/web/src/views/system/rolePermission/index.vue
@@ -198,7 +198,7 @@ let menuData = ref<Tree>()
 const getMenuData = () => {
     api.GetMenu({}).then((res: any) => {
         const {data} = res
-        const list = XEUtils.toArrayTree(data, {parentKey: "parent", strict: true})
+        const list = XEUtils.toArrayTree(data, {parentKey: "parent", key:'menu_id',strict: true})
         menuData.value = list
     })
 }
@@ -212,11 +212,11 @@ const menuNodeClick = (node: any, obj: any) => {
     if (!node.is_catalog) {
         buttonOptions.value = []
         editedMenuInfo.value = node
-        api.GetMenuButton({menu: node.id}).then((res: any) => {
+        api.GetMenuButton({menu: node.menu_id}).then((res: any) => {
             const {data} = res
             buttonOptions.value = data
         })
-        api.getObj({menu: node.id, role: editedRoleInfo.value.id}).then((res: any) => {
+        api.getObj({menu: node.menu_id, role: editedRoleInfo.value.id}).then((res: any) => {
             const {data} = res
             buttonPermissionData.value = data
         })