1.菜单和按钮权限范围授权完成;

backend/dvadmin/system/views/role_menu_button_permission.py

@@ -47,6 +47,7 @@ class RoleButtonPermissionSerializer(CustomModelSerializer):
     角色按钮权限
     """
     isCheck = serializers.SerializerMethodField()
+    data_range = serializers.SerializerMethodField()
 
     def get_isCheck(self, instance):
         params = self.request.query_params
@@ -55,9 +56,20 @@ class RoleButtonPermissionSerializer(CustomModelSerializer):
             role__id=params.get('role'),
         ).exists()
 
+    def get_data_range(self, instance):
+        params = self.request.query_params
+        obj = RoleMenuButtonPermission.objects.filter(
+            menu_button__id=instance['id'],
+            role__id=params.get('role'),
+        ).first()
+        if obj is None:
+            return None
+        return obj.data_range
+
+
     class Meta:
         model = MenuButton
-        fields = ['id','name','value','isCheck']
+        fields = ['id','name','value','isCheck','data_range']
 
 class RoleMenuPermissionSerializer(CustomModelSerializer):
     """
@@ -122,7 +134,7 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
     @action(methods=['PUT'], detail=True, permission_classes=[IsAuthenticated])
     def set_role_premission(self,request,pk):
         """
-        对角色授权:
+        对角色的菜单和按钮授权:
         :param request:
         :param pk: role
         :return:
@@ -137,10 +149,12 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
                 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'))
+                    instance = RoleMenuButtonPermission.objects.create(role_id=pk, menu_button_id=btn.get('id'),data_range=btn.get('data_range'))
+                    instance.dept.set(btn.get('dept',[]))
         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/api.ts

@@ -45,3 +45,15 @@ export function getDataPermissionMenu() {
     method: 'get'
   })
 }
+
+/**
+ * 设置按钮的数据范围
+ */
+export function setBtnDatarange(roleId:number,data:object) {
+  return request({
+    url: `/api/system/role_menu_button_permission/${roleId}/set_btn_datarange/`,
+    method: 'put',
+    data
+  })
+}
+

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

@@ -1,11 +1,22 @@
 <template>
-  <el-drawer v-model="drawerVisible" title="权限配置" direction="rtl" size="60%" :close-on-click-modal="false" :before-close="handleDrawerClose">
+  <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>
+      <el-row>
+        <el-col :span="4">
+          <div>当前角色:
+            <el-tag>{{ props.roleName }}</el-tag>
+          </div>
+        </el-col>
+        <el-col :span="6" :offset="8">
+          <div>
+            <el-button size="small" type="primary" class="pc-save-btn" @click="handleSavePermission">保存菜单授权
+            </el-button>
+          </div>
+        </el-col>
+      </el-row>
     </template>
     <div class="permission-com">
-		<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,mIndex) in menuData" :key="mIndex" :name="mIndex">
           <template #title>
@@ -16,20 +27,22 @@
                 </el-checkbox>
               </p>
               <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.name }}</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>
           <div class="pc-collapse-main">
             <div class="pccm-item">
               <p>允许对这些数据有以下操作</p>
-						<el-checkbox v-for="btn in item.btns" :key="btn.value" v-model="btn.isCheck" :label="btn.value">
+              <el-checkbox v-for="(btn,bIndex) in item.btns" :key="bIndex" v-model="btn.isCheck" :label="btn.value">
-							<p class="btn-item">
+                <div class="btn-item">
-								{{ btn.role ? `${btn.label}(${btn.role})` : btn.name }}
+                  {{ btn.data_range!==null ? `${btn.name}(${formatDataRange(btn.data_range)})` : btn.name }}
-								<span @click.stop.prevent="handleSettingClick(item, btn.value)">
+                  <span v-show="btn.isCheck" @click.stop.prevent="handleSettingClick(item, btn.id)">
                     <el-icon><Setting/></el-icon>
                   </span>
-							</p>
+                </div>
               </el-checkbox>
             </div>
 
@@ -67,14 +80,15 @@
         </el-collapse-item>
       </el-collapse>
 
-		<el-dialog v-model="dialogVisible" title="数据权限配置" width="400px" :close-on-click-modal="false" :before-close="handleDialogClose">
+      <el-dialog v-model="dialogVisible" title="数据权限配置" width="400px" :close-on-click-modal="false"
+                 :before-close="handleDialogClose">
         <div class="pc-dialog">
-				<el-select v-model="dataPermission" @change="handlePermissionRangeChange" class="dialog-select" placeholder="请选择">
+          <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"/>
           </el-select>
-
           <el-tree-select
-					v-if="dataPermission === 4"
+              v-show="dataPermission === 4"
               node-key="id"
               v-model="customDataPermission"
               :props="defaultTreeProps"
@@ -98,12 +112,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, defineProps,watch } from 'vue';
+import {ref, onMounted, defineProps, watch,computed} from 'vue';
 import XEUtils from 'xe-utils';
 import {errorNotification} from '/@/utils/message';
-import {getDataPermissionRange, getDataPermissionDept, getRolePremission,setRolePremission} from './api';
+import {getDataPermissionRange, getDataPermissionDept, getRolePremission, setRolePremission,setBtnDatarange} from './api';
 import {MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType} from './types';
 import {ElMessage} from 'element-plus'
+
 const props = defineProps({
   roleId: {
     type: Number,
@@ -126,6 +141,7 @@ watch(
     (val) => {
       drawerVisible.value = val;
       getMenuBtnPermission()
+      fetchData()
     }
 );
 const handleDrawerClose = () => {
@@ -133,58 +149,27 @@ const handleDrawerClose = ()=>{
 }
 
 
-
-
 const defaultTreeProps = {
   children: 'children',
   label: 'name',
   value: 'id',
 };
 
-let menuData = ref<MenuDataType[]>([
+let menuData = ref<MenuDataType[]>([]);
-	// {
-	// 	key: '1',
-	// 	name: '用户管理',
-	// 	isCheck: true,
-	// 	radio: '1',
-	// 	btns: [
-	// 		{ label: '新增', value: 'create', isCheck: true, role: '' },
-	// 		{ label: '编辑', value: 'edit', isCheck: true, role: '' },
-	// 		{ label: '查询', value: 'look', isCheck: true, role: '' },
-	// 	],
-	// 	columns: [
-	// 		{ name: '姓名', create: true, edit: true, delete: true, look: true },
-	// 		{ name: '性别', create: false, edit: true, delete: false, look: true },
-	// 		{ name: '地址', create: true, edit: false, delete: true, look: false },
-	// 	],
-	// },
-	// {
-	// 	key: '2',
-	// 	name: '系统管理',
-	// 	isCheck: false,
-	// 	radio: '2',
-	// 	btns: [
-	// 		{ label: '新增', value: 'create', isCheck: false, role: '' },
-	// 		{ label: '编辑', value: 'edit', isCheck: true, role: '' },
-	// 		{ label: '删除', value: 'delete', isCheck: false, role: '' },
-	// 		{ label: '查询', value: 'look', isCheck: true, role: '' },
-	// 	],
-	// 	columns: [
-	// 		{ name: '姓名', create: false, edit: true, delete: false, look: true },
-	// 		{ name: '性别', create: true, edit: true, delete: true, look: true },
-	// 		{ name: '地址', create: true, edit: false, delete: true, look: false },
-	// 	],
-	// },
-]);
 let collapseCurrent = ref(['1']);
 let menuCurrent = ref<Partial<MenuDataType>>({});
-let menuBtnCurrent = ref('');
+let menuBtnCurrent = ref<number>(-1);
 let dialogVisible = ref(false);
 let dataPermissionRange = ref<DataPermissionRangeType[]>([]);
+const formatDataRange = computed(() => {
+  return function(datarange:number){
+    const findItem = dataPermissionRange.value.find((i) => i.value === datarange);
+    return  findItem?.label || ''
+  }
+})
 let deptData = ref<CustomDataPermissionDeptType[]>([]);
 let dataPermission = ref();
 let customDataPermission = ref([]);
-
 //获取菜单,按钮,权限
 const getMenuBtnPermission = async () => {
   const resMenu = await getRolePremission({role: props.roleId})
@@ -206,9 +191,14 @@ const handleCollapseChange = (val: string) => {
   collapseCurrent.value = [val];
 };
 
-const handleSettingClick = (record: MenuDataType, btnType: string) => {
+/**
+ * 设置按钮数据权限
+ * @param record 当前菜单
+ * @param btnType  按钮类型
+ */
+const handleSettingClick = (record: MenuDataType, btnId: number) => {
   menuCurrent.value = record;
-	menuBtnCurrent.value = btnType;
+  menuBtnCurrent.value = btnId;
   dialogVisible.value = true;
 };
 
@@ -226,6 +216,9 @@ const handlePermissionRangeChange = async (val: number) => {
   }
 };
 
+/**
+ * 数据权限设置确认
+ */
 const handleDialogConfirm = () => {
   if (dataPermission.value !== 0 && !dataPermission.value) {
     errorNotification('请选择');
@@ -234,11 +227,14 @@ const handleDialogConfirm = () => {
 
   //if (dataPermission.value !== 4) {}
   for (const iterator of menuData.value) {
-		if (iterator.key === menuCurrent.value.key) {
+    if (iterator.id === menuCurrent.value.id) {
-			for (const b of iterator.btns) {
+      for (const btn of iterator.btns) {
-				if (b.value === menuBtnCurrent.value) {
+        if (btn.id === menuBtnCurrent.value) {
           const findItem = dataPermissionRange.value.find((i) => i.value === dataPermission.value);
-					b.role = findItem?.label || '';
+          btn.data_range = findItem?.value || 0;
+          if(btn.data_range===4){
+            btn.dept = customDataPermission.value
+          }
         }
       }
     }
@@ -262,8 +258,6 @@ const handleSavePermission = () => {
 }
 
 onMounted(() => {
-	fetchData();
-
 });
 </script>
 
@@ -271,53 +265,66 @@ onMounted(() => {
 .permission-com {
   margin: 15px;
   box-sizing: border-box;
+
   .pc-save-btn {
     margin-bottom: 15px;
   }
+
   .pc-collapse-title {
     line-height: 32px;
+
     span {
       font-size: 16px;
     }
   }
+
   .pc-collapse-main {
     padding-top: 15px;
     box-sizing: border-box;
+
     .pccm-item {
       margin-bottom: 10px;
 
       .btn-item {
         display: flex;
         align-items: center;
+
         span {
           margin-left: 5px;
         }
       }
+
       .columns-list {
         .width-txt {
           width: 200px;
         }
+
         .width-check {
           width: 80px;
         }
+
         .width-icon {
           cursor: pointer;
         }
+
         .columns-head {
           display: flex;
           align-items: center;
           padding: 6px 0;
           border-bottom: 1px solid #ebeef5;
           box-sizing: border-box;
+
           span {
             font-weight: 900;
           }
         }
+
         .columns-item {
           display: flex;
           align-items: center;
           padding: 6px 0;
           box-sizing: border-box;
+
           .ci-checkout {
             height: auto !important;
           }
@@ -330,6 +337,7 @@ onMounted(() => {
     .dialog-select {
       width: 100%;
     }
+
     .dialog-tree {
       width: 100%;
       margin-top: 20px;
@@ -344,9 +352,11 @@ onMounted(() => {
     border-top: none;
     border-bottom: none;
   }
+
   .el-collapse-item {
     margin-bottom: 15px;
   }
+
   .el-collapse-item__header {
     height: auto;
     padding: 15px;
@@ -356,10 +366,12 @@ onMounted(() => {
     border-right: 1px solid #ebeef5;
     box-sizing: border-box;
   }
+
   .el-collapse-item__header.is-active {
     border-radius: 8px 8px 0 0;
     background-color: #fafafa;
   }
+
   .el-collapse-item__wrap {
     padding: 15px;
     border-left: 1px solid #ebeef5;
@@ -368,6 +380,7 @@ onMounted(() => {
     border-radius: 0 0 8px 8px;
     background-color: #fafafa;
     box-sizing: border-box;
+
     .el-collapse-item__content {
       padding-bottom: 0;
     }

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

@@ -20,10 +20,10 @@ export interface CustomDataPermissionMenuType {
 }
 
 export interface MenuDataType {
-  key: string;
+  id: string;
   name: string;
   isCheck: boolean;
   radio: string;
-  btns: { label: string; value: string; isCheck: boolean; role: string; }[];
+  btns: { id:number,label: string; value: string; isCheck: boolean; data_range: number;dept:object }[];
   columns: { [key: string]: boolean | string; }[]
 }