1.菜单和按钮基本授权完成;

2. todo:
a.按钮数据权限;
b.字段权限

backend/dvadmin/system/views/role.py

@@ -79,6 +79,28 @@ class MenuPermissionSerializer(CustomModelSerializer):
         fields = ['id', 'parent', 'name', 'menuPermission']
 
 
+class MenuButtonPermissionSerializer(CustomModelSerializer):
+    """
+    菜单和按钮权限
+    """
+    isCheck = serializers.SerializerMethodField()
+
+    def get_isCheck(self, instance):
+        is_superuser = self.request.user.is_superuser
+        if is_superuser:
+            return True
+        else:
+            return MenuButton.objects.filter(
+                menu__id=instance.id,
+                role__id__in=self.request.user.role.values_list('id', flat=True),
+            ).exists()
+
+    class Meta:
+        model = Menu
+        fields = '__all__'
+
+
+
 class RoleViewSet(CustomModelViewSet, FastCrudMixin):
     """
     角色管理接口

backend/dvadmin/system/views/role_menu_button_permission.py

@@ -28,16 +28,6 @@ class RoleMenuButtonPermissionSerializer(CustomModelSerializer):
         read_only_fields = ["id"]
 
 
-class RoleMenuButtonPermissionInitSerializer(CustomModelSerializer):
-    """
-    初始化菜单按钮-序列化器
-    """
-
-    class Meta:
-        model = RoleMenuButtonPermission
-        fields = "__all__"
-        read_only_fields = ["id"]
-
 
 class RoleMenuButtonPermissionCreateUpdateSerializer(CustomModelSerializer):
     """
@@ -52,6 +42,46 @@ class RoleMenuButtonPermissionCreateUpdateSerializer(CustomModelSerializer):
         read_only_fields = ["id"]
 
 
+class RoleButtonPermissionSerializer(CustomModelSerializer):
+    """
+    角色按钮权限
+    """
+    isCheck = serializers.SerializerMethodField()
+
+    def get_isCheck(self, instance):
+        params = self.request.query_params
+        return RoleMenuButtonPermission.objects.filter(
+            menu_button__id=instance['id'],
+            role__id=params.get('role'),
+        ).exists()
+
+    class Meta:
+        model = MenuButton
+        fields = ['id','name','value','isCheck']
+
+class RoleMenuPermissionSerializer(CustomModelSerializer):
+    """
+    菜单和按钮权限
+    """
+    isCheck = serializers.SerializerMethodField()
+    btns = serializers.SerializerMethodField()
+
+    def get_isCheck(self, instance):
+        params = self.request.query_params
+        return RoleMenuPermission.objects.filter(
+            menu__id=instance['id'],
+            role__id=params.get('role'),
+        ).exists()
+
+    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
+
+    class Meta:
+        model = Menu
+        fields = ['id','name','isCheck','btns']
+
 class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
     """
     菜单按钮接口
@@ -68,40 +98,49 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
     extra_filter_class = []
 
     @action(methods=['GET'], detail=False, permission_classes=[IsAuthenticated])
-    def role_get_menu(self, request):
+    def get_role_premission(self, request):
-        """根据当前用户的角色返回角色拥有的菜单"""
+        """
-        data = []
+        角色授权获取:
+        :param request: role
+        :return: menu,btns,columns
+        """
+        params = request.query_params
+        role = params.get('role',None)
+        if  role is None:
+            return ErrorResponse(msg="未获取到角色信息")
         is_superuser = request.user.is_superuser
-        is_admin = request.user.role.values_list('admin', flat=True)
+        if is_superuser:
-        if is_superuser or True in is_admin:
+            queryset = Menu.objects.filter(status=1,is_catalog=False).values('name', 'id').all()
-            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': btn_name,
-                    'is_catalog': item['is_catalog']
-                })
         else:
             role_id = request.user.role.values_list('id', flat=True)
-            queryset = RoleMenuPermission.objects.filter(role__in=role_id).values(
+            menu_list = RoleMenuPermission.objects.filter(role__in=role_id).values_list('id',flat=True)
-                'menu_id', name=F('menu__name'), parent=F('menu__parent'), is_catalog=F('menu__is_catalog')
+            queryset = Menu.objects.filter(status=1, is_catalog=False,id__in=menu_list).values('name', 'id').all()
-            ).distinct()
+        serializer = RoleMenuPermissionSerializer(queryset,many=True,request=request)
-            for item in queryset:
+        data = serializer.data
-                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': btn_name,
-                    'is_catalog': item['is_catalog']
-                })
         return DetailResponse(data=data)
 
+    @action(methods=['PUT'], detail=True, permission_classes=[IsAuthenticated])
+    def set_role_premission(self,request,pk):
+        """
+        对角色授权:
+        :param request:
+        :param pk: role
+        :return:
+        """
+        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.objects.filter(id=menu.get('id')).values('parent').first()
+                RoleMenuPermission.objects.create(role_id=pk, menu_id=menu_parent.get('parent'))
+                RoleMenuPermission.objects.create(role_id=pk, menu_id=menu.get('id'))
+            for btn in menu.get('btns'):
+                if btn.get('isCheck'):
+                    RoleMenuButtonPermission.objects.create(role_id=pk, menu_button_id=btn.get('id'))
+        return DetailResponse(msg="授权成功")
+
+
     @action(methods=['GET'], detail=False, permission_classes=[IsAuthenticated])
     def role_menu_get_button(self, request):
         """

backend/requirements.txt

@@ -18,7 +18,7 @@ requests==2.28.2
 typing-extensions==4.4.0
 smmap==5.0.0
 tzlocal==4.1
-channels==3.0.5
+channels==4.0.0
 channels-redis==4.0.0
 websockets==10.4
 user-agents==2.2.0
@@ -28,4 +28,4 @@ psycopg2==2.9.5
 uvicorn==0.20.0
 gunicorn==20.1.0
 gevent==22.10.2
-Pillow==8.3.1
+Pillow==8.3.2

web/package.json

@@ -25,7 +25,7 @@
 		"echarts": "^5.4.1",
 		"echarts-gl": "^2.0.9",
 		"echarts-wordcloud": "^2.1.0",
-		"element-plus": "^2.2.26",
+		"element-plus": "^2.3.9",
 		"element-tree-line": "^0.2.1",
 		"font-awesome": "^4.7.0",
 		"js-cookie": "^3.0.1",

web/src/i18n/index.ts

@@ -14,9 +14,9 @@ import { useThemeConfig } from '/@/stores/themeConfig';
  */
 
 // element plus 自带国际化
-import enLocale from 'element-plus/lib/locale/lang/en';
+import enLocale from 'element-plus/es/locale/lang/en';
-import zhcnLocale from 'element-plus/lib/locale/lang/zh-cn';
+import zhcnLocale from 'element-plus/es/locale/lang/zh-cn';
-import zhtwLocale from 'element-plus/lib/locale/lang/zh-tw';
+import zhtwLocale from 'element-plus/es/locale/lang/zh-tw';
 
 // 定义变量内容
 const messages = {};

web/src/main.ts

@@ -2,7 +2,7 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 import { directive } from '/@/utils/directive';
-import { i18n } from '/@/i18n/index';
+import { i18n } from '/@/i18n';
 import other from '/@/utils/other';
 import '/@/assets/style/tailwind.css'; // 先引入tailwind css, 以免element-plus冲突
 import ElementPlus from 'element-plus';

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

@@ -1,5 +1,31 @@
 import { request } from "/@/utils/service";
 
+/**
+ * 获取角色的授权列表
+ * @param roleId
+ * @param query
+ */
+export function getRolePremission(query:object) {
+  return request({
+    url: '/api/system/role_menu_button_permission/get_role_premission/',
+    method: 'get',
+    params:query
+  })
+}
+
+/***
+ * 设置角色的权限
+ * @param roleId
+ * @param data
+ */
+export function setRolePremission(roleId:any,data:object) {
+  return request({
+    url: `/api/system/role_menu_button_permission/${roleId}/set_role_premission/`,
+    method: 'put',
+    data
+  })
+}
+
 export function getDataPermissionRange() {
   return request({
     url: '/api/system/role_menu_button_permission/data_scope/',

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

@@ -1,9 +1,13 @@
 <template>
+  <el-drawer v-model="drawerVisible" title="权限配置" direction="rtl" size="60%" :close-on-click-modal="false" :before-close="handleDrawerClose">
+    <template #header>
+      <div>当前角色: <el-tag>{{props.roleName}}</el-tag></div>
+    </template>
 	<div class="permission-com">
-		<el-button type="primary" class="pc-save-btn">保存菜单授权</el-button>
+		<el-button type="primary" class="pc-save-btn" @click="handleSavePermission">保存菜单授权</el-button>
 
 		<el-collapse v-model="collapseCurrent" @change="handleCollapseChange" accordion>
-			<el-collapse-item v-for="item in menuData" :key="item.key" :name="item.key">
+			<el-collapse-item v-for="(item,mIndex) in menuData" :key="mIndex" :name="mIndex">
 				<template #title>
 					<div @click.stop="null">
 						<p class="pc-collapse-title">
@@ -11,8 +15,8 @@
 								<span>{{ item.name }}</span>
 							</el-checkbox>
 						</p>
-						<div v-show="!collapseCurrent.includes(item.key)">
+						<div v-show="!collapseCurrent.includes(mIndex)">
-							<el-checkbox v-for="btn in item.btns" :key="btn.value" :label="btn.value" v-model="btn.isCheck">{{ btn.label }}</el-checkbox>
+							<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>
@@ -21,7 +25,7 @@
 						<p>允许对这些数据有以下操作</p>
 						<el-checkbox v-for="btn in item.btns" :key="btn.value" v-model="btn.isCheck" :label="btn.value">
 							<p class="btn-item">
-								{{ btn.role ? `${btn.label}(${btn.role})` : btn.label }}
+								{{ btn.role ? `${btn.label}(${btn.role})` : btn.name }}
 								<span @click.stop.prevent="handleSettingClick(item, btn.value)">
 									<el-icon><Setting /></el-icon>
 								</span>
@@ -90,14 +94,46 @@
 			</template>
 		</el-dialog>
 	</div>
+  </el-drawer>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, defineProps,watch } from 'vue';
 import XEUtils from 'xe-utils';
 import { errorNotification } from '/@/utils/message';
-import { getDataPermissionRange, getDataPermissionDept } from './api';
+import {getDataPermissionRange, getDataPermissionDept, getRolePremission,setRolePremission} from './api';
 import { MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType } from './types';
+import { ElMessage } from 'element-plus'
+const props= defineProps({
+  roleId:{
+    type: Number,
+    default: -1
+  },
+  roleName:{
+    type: String,
+    default: ''
+  },
+  drawerVisible:{
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['update:drawerVisible'])
+
+const drawerVisible = ref(false)
+watch(
+    () => props.drawerVisible,
+    (val) => {
+      drawerVisible.value = val;
+      getMenuBtnPermission()
+    }
+);
+const handleDrawerClose = ()=>{
+  emit('update:drawerVisible', false);
+}
+
+
+
 
 const defaultTreeProps = {
 	children: 'children',
@@ -106,39 +142,39 @@ const defaultTreeProps = {
 };
 
 let menuData = ref<MenuDataType[]>([
-	{
+	// {
-		key: '1',
+	// 	key: '1',
-		name: '用户管理',
+	// 	name: '用户管理',
-		isCheck: true,
+	// 	isCheck: true,
-		radio: '1',
+	// 	radio: '1',
-		btns: [
+	// 	btns: [
-			{ label: '新增', value: 'create', isCheck: true, role: '' },
+	// 		{ label: '新增', value: 'create', isCheck: true, role: '' },
-			{ label: '编辑', value: 'edit', isCheck: true, role: '' },
+	// 		{ label: '编辑', value: 'edit', isCheck: true, role: '' },
-			{ label: '查询', value: 'look', isCheck: true, role: '' },
+	// 		{ label: '查询', value: 'look', isCheck: true, role: '' },
-		],
+	// 	],
-		columns: [
+	// 	columns: [
-			{ name: '姓名', create: true, edit: true, delete: true, look: true },
+	// 		{ name: '姓名', create: true, edit: true, delete: true, look: true },
-			{ name: '性别', create: false, edit: true, delete: false, look: true },
+	// 		{ name: '性别', create: false, edit: true, delete: false, look: true },
-			{ name: '地址', create: true, edit: false, delete: true, look: false },
+	// 		{ name: '地址', create: true, edit: false, delete: true, look: false },
-		],
+	// 	],
-	},
+	// },
-	{
+	// {
-		key: '2',
+	// 	key: '2',
-		name: '系统管理',
+	// 	name: '系统管理',
-		isCheck: false,
+	// 	isCheck: false,
-		radio: '2',
+	// 	radio: '2',
-		btns: [
+	// 	btns: [
-			{ label: '新增', value: 'create', isCheck: false, role: '' },
+	// 		{ label: '新增', value: 'create', isCheck: false, role: '' },
-			{ label: '编辑', value: 'edit', isCheck: true, role: '' },
+	// 		{ label: '编辑', value: 'edit', isCheck: true, role: '' },
-			{ label: '删除', value: 'delete', isCheck: false, role: '' },
+	// 		{ label: '删除', value: 'delete', isCheck: false, role: '' },
-			{ label: '查询', value: 'look', isCheck: true, role: '' },
+	// 		{ label: '查询', value: 'look', isCheck: true, role: '' },
-		],
+	// 	],
-		columns: [
+	// 	columns: [
-			{ name: '姓名', create: false, edit: true, delete: false, look: true },
+	// 		{ name: '姓名', create: false, edit: true, delete: false, look: true },
-			{ name: '性别', create: true, edit: true, delete: true, look: true },
+	// 		{ name: '性别', create: true, edit: true, delete: true, look: true },
-			{ name: '地址', create: true, edit: false, delete: true, look: false },
+	// 		{ name: '地址', create: true, edit: false, delete: true, look: false },
-		],
+	// 	],
-	},
+	// },
 ]);
 let collapseCurrent = ref(['1']);
 let menuCurrent = ref<Partial<MenuDataType>>({});
@@ -149,6 +185,12 @@ let deptData = ref<CustomDataPermissionDeptType[]>([]);
 let dataPermission = ref();
 let customDataPermission = ref([]);
 
+//获取菜单,按钮,权限
+const getMenuBtnPermission = async () => {
+  const resMenu = await getRolePremission({role:props.roleId})
+  menuData.value = resMenu.data
+}
+
 const fetchData = async () => {
 	try {
 		const resRange = await getDataPermissionRange();
@@ -209,8 +251,19 @@ const handleDialogClose = () => {
 	dataPermission.value = null;
 };
 
+//保存权限
+const handleSavePermission = () => {
+  setRolePremission(props.roleId, menuData.value).then(res=>{
+    ElMessage({
+      message: res.msg,
+      type: 'success',
+    })
+  })
+}
+
 onMounted(() => {
 	fetchData();
+
 });
 </script>
 

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

@@ -84,7 +84,7 @@ export const createCrudOptions = function ({
 						},
 						click: (context: any): void => {
 							const { row } = context;
-							handleDrawerOpen();
+							handleDrawerOpen(row);
 						},
 					},
 				},

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

@@ -8,12 +8,9 @@
 
 		<permission ref="rolePermission"></permission>
 
-		<el-drawer v-model="drawerVisible" title="权限配置" direction="rtl" size="60%" :close-on-click-modal="false" :before-close="handleDrawerClose">
+
-			<template #header>
+			<PermissionComNew  v-model:drawerVisible="drawerVisible" :roleId="roleId" :roleName="roleName"  @drawerClose="handleDrawerClose" />
-				<div>当前角色: <el-tag>管理员</el-tag></div>
+
-			</template>
-			<PermissionComNew v-if="drawerVisible" @drawerClose="handleDrawerClose" />
-		</el-drawer>
 	</fs-page>
 </template>
 
@@ -25,6 +22,8 @@ import permission from './components/PermissionCom/index.vue';
 import PermissionComNew from './components/PermissionComNew/index.vue';
 
 let drawerVisible = ref(false);
+let roleId = ref(null);
+let roleName = ref(null);
 
 const rolePermission = ref();
 // crud组件的ref
@@ -34,7 +33,9 @@ const crudBinding = ref();
 // 暴露的方法
 const { crudExpose } = useExpose({ crudRef, crudBinding });
 
-const handleDrawerOpen = () => {
+const handleDrawerOpen = (row:any) => {
+  roleId.value = row.id
+  roleName.value = row.name
 	drawerVisible.value = true;
 };
 

web/vite.config.ts

@@ -22,7 +22,7 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
 		resolve: { alias },
 		base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,
 		optimizeDeps: {
-			include: ['element-plus/lib/locale/lang/zh-cn', 'element-plus/lib/locale/lang/en', 'element-plus/lib/locale/lang/zh-tw'],
+			include: ['element-plus/es/locale/lang/zh-cn', 'element-plus/es/locale/lang/en', 'element-plus/es/locale/lang/zh-tw'],
 		},
 		server: {
 			host: '0.0.0.0',