角色授权增加默认设置

（cherry picked commit from <gitee.com//huge-dream/django-vue3-admin/commit/06a772fcd5335c272159d9c45590cf8b559210d1>

backend/dvadmin/system/views/role_menu_button_permission.py

@@ -231,9 +231,17 @@ class RoleMenuButtonPermissionViewSet(CustomModelViewSet):
         isCheck = data.get('isCheck', None)
         roleId = data.get('roleId', None)
         btnId = data.get('btnId', None)
+        data_range = data.get('data_range', None) or 0  # 默认仅本人权限
+        dept = data.get('dept', None) or []  # 默认空部门
+
         if isCheck:
             # 添加权限：创建关联记录
-            RoleMenuButtonPermission.objects.create(role_id=roleId, menu_button_id=btnId)
+            instance = RoleMenuButtonPermission.objects.create(role_id=roleId,
+                                                               menu_button_id=btnId,
+                                                               data_range=data_range)
+            # 自定义部门权限
+            if data_range == 4 and dept:
+                instance.dept.set(dept)
         else:
             # 删除权限：移除关联记录
             RoleMenuButtonPermission.objects.filter(role_id=roleId, menu_button_id=btnId).delete()

web/src/views/system/role/components/RoleMenuBtn.vue

@@ -1,9 +1,39 @@
 <template>
 	<div class="pccm-item" v-if="RoleMenuBtn.$state.length > 0">
-		<div class="menu-form-alert">配置操作功能接口权限，配置数据权限点击小齿轮</div>
+		<div class="menu-form-alert">
+			<div style="display:flex;  align-items: center; white-space: nowrap; margin-bottom: 10px;">
+				<span>默认接口权限:</span>
+				<el-select 
+					v-model="default_selectBtn.data_range" 
+					@change="defaulthandlePermissionRangeChange" 
+					placeholder="请选择"
+					style="margin-left: 5px; width: 250px; min-width: 250px;"
+				>
+					<el-option v-for="item in dataPermissionRange" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
+				<el-tree-select
+					v-show="default_selectBtn.data_range === 4"
+					node-key="id"
+					v-model="default_selectBtn.dept"
+					:props="defaultTreeProps"
+					:data="deptData"
+					@change="customhandlePermissionRangeChange(default_selectBtn.dept)" 
+					placeholder="请选择自定义部门"
+					multiple
+					check-strictly
+					:render-after-expand="false"
+					show-checkbox
+					class="dialog-tree"
+					style="margin-left: 15px; width: AUTO; min-width: 250px; margin-top: 0;"
+				/>
+
+			</div>
+			<span>配置操作功能接口权限，配置数据权限点击小齿轮</span>
+		</div>
+
 		<el-checkbox v-for="btn in RoleMenuBtn.$state" :key="btn.id" v-model="btn.isCheck" @change="handleCheckChange(btn)">
 			<div class="btn-item">
-				{{ btn.data_range !== null ? `${btn.name}(${formatDataRange(btn.data_range)})` : btn.name }}
+				{{ btn.data_range !== null ? `${btn.name}(${formatDataRange(btn.data_range, btn.dept)})` : btn.name }}
 				<span v-show="btn.isCheck" @click.stop.prevent="handleSettingClick(btn)">
 					<el-icon>
 						<Setting />
@@ -48,10 +78,26 @@ import { RoleMenuBtnType } from '../types';
 import { getRoleToDeptAll, setRoleMenuBtn, setRoleMenuBtnDataRange } from './api';
 import XEUtils from 'xe-utils';
 import { ElMessage } from 'element-plus';
+import { Local } from '/@/utils/storage';
+
 const RoleDrawer = RoleDrawerStores(); // 角色-菜单
 const RoleMenuTree = RoleMenuTreeStores(); // 角色-菜单
 const RoleMenuBtn = RoleMenuBtnStores(); // 角色-菜单-按钮
 const dialogVisible = ref(false);
+
+// 默认按钮
+const default_selectBtn = ref<RoleMenuBtnType>({
+	id: 0,
+	menu_btn_pre_id: 0,
+	/** 是否选中 */
+	isCheck: false,
+	/** 按钮名称 */
+	name: '',
+	/** 数据权限范围 */
+	data_range: Local.get('role_default_data_range'),
+	dept: Local.get('role_default_custom_dept'),
+});
+
 // 选中的按钮
 const selectBtn = ref<RoleMenuBtnType>({
 	id: 0,
@@ -83,6 +129,29 @@ const defaultTreeProps = {
 	value: 'id',
 };
 
+
+/**
+ * 默认数据权限下拉选择事件
+ * 保留数据到cache
+ */
+const defaulthandlePermissionRangeChange = async (val: number) => {
+	if (val < 4) {
+		// default_selectBtn.value.dept = [];
+		// Local.set('role_default_custom_dept', []);
+	}
+	default_selectBtn.value.data_range = val;
+	Local.set('role_default_data_range', val);
+};
+
+/**
+ * 默认部门下拉选择事件
+ * 保留数据到cache
+ */
+ const customhandlePermissionRangeChange = async (dept: Array<number>) => {
+	default_selectBtn.value.dept = dept;
+	Local.set('role_default_custom_dept', dept);
+};
+
 /**
  * 自定数据权限下拉选择事件
  */
@@ -95,12 +164,21 @@ const handlePermissionRangeChange = async (val: number) => {
  * 格式化按钮数据范围
  */
 const formatDataRange = computed(() => {
-	return function (datarange: number) {
+	return function (datarange: number, dept: Array<number>) {
 		const datarangeitem = XEUtils.find(dataPermissionRange.value, (item: any) => {
 			if (item.value === datarange) {
 				return item.label;
 			}
 		});
+		// 数据权限与默认数据权限一致
+		if (datarange === default_selectBtn.value.data_range) {
+			// 判断选择的部门是否一致
+			if (datarange !== 4 || JSON.stringify(dept) === JSON.stringify(default_selectBtn.value.dept)) {
+				
+				return "默认接口权限"
+			}
+		}
+		// datarange === 4 选择的部门不一致返回datarangeitem.label
 		return datarangeitem.label;
 	};
 });
@@ -108,11 +186,14 @@ const formatDataRange = computed(() => {
  * 勾选按钮
  */
 const handleCheckChange = async (btn: RoleMenuBtnType) => {
+	selectBtn.value = default_selectBtn.value;
 	const put_data = {
 		isCheck: btn.isCheck,
 		roleId: RoleDrawer.roleId,
 		menuId: RoleMenuTree.id,
 		btnId: btn.id,
+		data_range: default_selectBtn.value.data_range,
+		dept: default_selectBtn.value.dept,
 	};
 	const { data, msg } = await setRoleMenuBtn(put_data);
 	RoleMenuBtn.updateState(data);
@@ -168,9 +249,10 @@ onMounted(async () => {
 		background-color: var(--el-color-primary);
 	}
 }
-// .el-checkbox {
-// 	width: 200px;
-// }
+
+.el-checkbox {
+	width: 20%;
+}
 .btn-item {
 	display: flex;
 	align-items: center;