From 515f720a59576cc906d14c38b19dedb4e46ee21a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8C=BF=E5=B0=8F=E5=A4=A9?= <1638245306@qq.com>
Date: Fri, 18 Aug 2023 00:39:14 +0800
Subject: [PATCH] =?UTF-8?q?1.=E8=8F=9C=E5=8D=95=E5=92=8C=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=9D=83=E9=99=90=E8=8C=83=E5=9B=B4=E6=8E=88=E6=9D=83=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90;?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/role_menu_button_permission.py      |  20 +-
 .../role/components/PermissionComNew/api.ts   |  12 +
 .../components/PermissionComNew/index.vue     | 571 +++++++++---------
 .../role/components/PermissionComNew/types.ts |   6 +-
 4 files changed, 324 insertions(+), 285 deletions(-)

diff --git a/backend/dvadmin/system/views/role_menu_button_permission.py b/backend/dvadmin/system/views/role_menu_button_permission.py
index f1d5b00..1b3386e 100644
--- a/backend/dvadmin/system/views/role_menu_button_permission.py
+++ b/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):
         """
diff --git a/web/src/views/system/role/components/PermissionComNew/api.ts b/web/src/views/system/role/components/PermissionComNew/api.ts
index 12481e5..be37ef5 100644
--- a/web/src/views/system/role/components/PermissionComNew/api.ts
+++ b/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
+  })
+}
+
diff --git a/web/src/views/system/role/components/PermissionComNew/index.vue b/web/src/views/system/role/components/PermissionComNew/index.vue
index 20def79..7bc1d4e 100644
--- a/web/src/views/system/role/components/PermissionComNew/index.vue
+++ b/web/src/views/system/role/components/PermissionComNew/index.vue
@@ -1,119 +1,134 @@
 <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>
+    <div class="permission-com">
+      <el-collapse v-model="collapseCurrent" @change="handleCollapseChange" accordion>
+        <el-collapse-item v-for="(item,mIndex) in menuData" :key="mIndex" :name="mIndex">
+          <template #title>
+            <div @click.stop="null">
+              <p class="pc-collapse-title">
+                <el-checkbox v-model="item.isCheck">
+                  <span>{{ item.name }}</span>
+                </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>
+              </div>
+            </div>
+          </template>
+          <div class="pc-collapse-main">
+            <div class="pccm-item">
+              <p>允许对这些数据有以下操作</p>
+              <el-checkbox v-for="(btn,bIndex) in item.btns" :key="bIndex" v-model="btn.isCheck" :label="btn.value">
+                <div class="btn-item">
+                  {{ btn.data_range!==null ? `${btn.name}(${formatDataRange(btn.data_range)})` : btn.name }}
+                  <span v-show="btn.isCheck" @click.stop.prevent="handleSettingClick(item, btn.id)">
+                    <el-icon><Setting/></el-icon>
+                  </span>
+                </div>
+              </el-checkbox>
+            </div>
 
-		<el-collapse v-model="collapseCurrent" @change="handleCollapseChange" accordion>
-			<el-collapse-item v-for="(item,mIndex) in menuData" :key="mIndex" :name="mIndex">
-				<template #title>
-					<div @click.stop="null">
-						<p class="pc-collapse-title">
-							<el-checkbox v-model="item.isCheck">
-								<span>{{ item.name }}</span>
-							</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>
-						</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">
-							<p class="btn-item">
-								{{ btn.role ? `${btn.label}(${btn.role})` : btn.name }}
-								<span @click.stop.prevent="handleSettingClick(item, btn.value)">
-									<el-icon><Setting /></el-icon>
-								</span>
-							</p>
-						</el-checkbox>
-					</div>
+            <div class="pccm-item">
+              <p>对这些数据有以下字段权限</p>
 
-					<div class="pccm-item">
-						<p>对这些数据有以下字段权限</p>
+              <el-radio-group v-model="item.radio">
+                <el-radio label="1">全部字段可查看可编辑</el-radio>
+                <el-radio label="2">全部字段仅可查看不可编辑</el-radio>
+                <el-radio label="3">自定义字段权限</el-radio>
+              </el-radio-group>
 
-						<el-radio-group v-model="item.radio">
-							<el-radio label="1">全部字段可查看可编辑</el-radio>
-							<el-radio label="2">全部字段仅可查看不可编辑</el-radio>
-							<el-radio label="3">自定义字段权限</el-radio>
-						</el-radio-group>
+              <ul v-show="item.radio === '3'" class="columns-list">
+                <li class="columns-head">
+                  <div class="width-txt">
+                    <span>字段</span>
+                  </div>
 
-						<ul v-show="item.radio === '3'" class="columns-list">
-							<li class="columns-head">
-								<div class="width-txt">
-									<span>字段</span>
-								</div>
+                  <div v-for="btn in item.btns" :key="btn.value" class="width-check">
+                    <el-checkbox :label="btn.value" @change="handleColumnChange($event, item, btn.value)">
+                      <span>{{ btn.label }}</span>
+                    </el-checkbox>
+                  </div>
+                </li>
 
-								<div v-for="btn in item.btns" :key="btn.value" class="width-check">
-									<el-checkbox :label="btn.value" @change="handleColumnChange($event, item, btn.value)">
-										<span>{{ btn.label }}</span>
-									</el-checkbox>
-								</div>
-							</li>
+                <li v-for="(c_item, c_index) in item.columns" :key="c_index" class="columns-item">
+                  <div class="width-txt">{{ c_item.name }}</div>
+                  <div v-for="btn in item.btns" :key="btn.value" class="width-check">
+                    <el-checkbox v-model="c_item[btn.value]" class="ci-checkout"></el-checkbox>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
 
-							<li v-for="(c_item, c_index) in item.columns" :key="c_index" class="columns-item">
-								<div class="width-txt">{{ c_item.name }}</div>
-								<div v-for="btn in item.btns" :key="btn.value" class="width-check">
-									<el-checkbox v-model="c_item[btn.value]" class="ci-checkout"></el-checkbox>
-								</div>
-							</li>
-						</ul>
-					</div>
-				</div>
-			</el-collapse-item>
-		</el-collapse>
-
-		<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-option v-for="item in dataPermissionRange" :key="item.value" :label="item.label" :value="item.value" />
-				</el-select>
-
-				<el-tree-select
-					v-if="dataPermission === 4"
-					node-key="id"
-					v-model="customDataPermission"
-					:props="defaultTreeProps"
-					:data="deptData"
-					multiple
-					check-strictly
-					:render-after-expand="false"
-					show-checkbox
-					class="dialog-tree"
-				/>
-			</div>
-			<template #footer>
-				<div>
-					<el-button type="primary" @click="handleDialogConfirm"> 确定 </el-button>
-					<el-button @click="handleDialogClose"> 取消 </el-button>
-				</div>
-			</template>
-		</el-dialog>
-	</div>
+      <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-option v-for="item in dataPermissionRange" :key="item.value" :label="item.label" :value="item.value"/>
+          </el-select>
+          <el-tree-select
+              v-show="dataPermission === 4"
+              node-key="id"
+              v-model="customDataPermission"
+              :props="defaultTreeProps"
+              :data="deptData"
+              multiple
+              check-strictly
+              :render-after-expand="false"
+              show-checkbox
+              class="dialog-tree"
+          />
+        </div>
+        <template #footer>
+          <div>
+            <el-button type="primary" @click="handleDialogConfirm"> 确定</el-button>
+            <el-button @click="handleDialogClose"> 取消</el-button>
+          </div>
+        </template>
+      </el-dialog>
+    </div>
   </el-drawer>
 </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 { MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType } from './types';
-import { ElMessage } from 'element-plus'
-const props= defineProps({
-  roleId:{
+import {errorNotification} from '/@/utils/message';
+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,
     default: -1
   },
-  roleName:{
+  roleName: {
     type: String,
     default: ''
   },
-  drawerVisible:{
+  drawerVisible: {
     type: Boolean,
     default: false
   }
@@ -126,134 +141,115 @@ watch(
     (val) => {
       drawerVisible.value = val;
       getMenuBtnPermission()
+      fetchData()
     }
 );
-const handleDrawerClose = ()=>{
+const handleDrawerClose = () => {
   emit('update:drawerVisible', false);
 }
 
 
-
-
 const defaultTreeProps = {
-	children: 'children',
-	label: 'name',
-	value: 'id',
+  children: 'children',
+  label: 'name',
+  value: 'id',
 };
 
-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 menuData = ref<MenuDataType[]>([]);
 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})
+  const resMenu = await getRolePremission({role: props.roleId})
   menuData.value = resMenu.data
 }
 
 const fetchData = async () => {
-	try {
-		const resRange = await getDataPermissionRange();
-		if (resRange?.code === 2000) {
-			dataPermissionRange.value = resRange.data;
-		}
-	} catch {
-		return;
-	}
+  try {
+    const resRange = await getDataPermissionRange();
+    if (resRange?.code === 2000) {
+      dataPermissionRange.value = resRange.data;
+    }
+  } catch {
+    return;
+  }
 };
 
 const handleCollapseChange = (val: string) => {
-	collapseCurrent.value = [val];
+  collapseCurrent.value = [val];
 };
 
-const handleSettingClick = (record: MenuDataType, btnType: string) => {
-	menuCurrent.value = record;
-	menuBtnCurrent.value = btnType;
-	dialogVisible.value = true;
+/**
+ * 设置按钮数据权限
+ * @param record 当前菜单
+ * @param btnType  按钮类型
+ */
+const handleSettingClick = (record: MenuDataType, btnId: number) => {
+  menuCurrent.value = record;
+  menuBtnCurrent.value = btnId;
+  dialogVisible.value = true;
 };
 
 const handleColumnChange = (val: boolean, record: MenuDataType, btnType: string) => {
-	for (const iterator of record.columns) {
-		iterator[btnType] = val;
-	}
+  for (const iterator of record.columns) {
+    iterator[btnType] = val;
+  }
 };
 
 const handlePermissionRangeChange = async (val: number) => {
-	if (val === 4) {
-		const res = await getDataPermissionDept();
-		const data = XEUtils.toArrayTree(res.data, { parentKey: 'parent', strict: false });
-		deptData.value = data;
-	}
+  if (val === 4) {
+    const res = await getDataPermissionDept();
+    const data = XEUtils.toArrayTree(res.data, {parentKey: 'parent', strict: false});
+    deptData.value = data;
+  }
 };
 
+/**
+ * 数据权限设置确认
+ */
 const handleDialogConfirm = () => {
-	if (dataPermission.value !== 0 && !dataPermission.value) {
-		errorNotification('请选择');
-		return;
-	}
+  if (dataPermission.value !== 0 && !dataPermission.value) {
+    errorNotification('请选择');
+    return;
+  }
 
-	//if (dataPermission.value !== 4) {}
-	for (const iterator of menuData.value) {
-		if (iterator.key === menuCurrent.value.key) {
-			for (const b of iterator.btns) {
-				if (b.value === menuBtnCurrent.value) {
-					const findItem = dataPermissionRange.value.find((i) => i.value === dataPermission.value);
-					b.role = findItem?.label || '';
-				}
-			}
-		}
-	}
-	handleDialogClose();
+  //if (dataPermission.value !== 4) {}
+  for (const iterator of menuData.value) {
+    if (iterator.id === menuCurrent.value.id) {
+      for (const btn of iterator.btns) {
+        if (btn.id === menuBtnCurrent.value) {
+          const findItem = dataPermissionRange.value.find((i) => i.value === dataPermission.value);
+          btn.data_range = findItem?.value || 0;
+          if(btn.data_range===4){
+            btn.dept = customDataPermission.value
+          }
+        }
+      }
+    }
+  }
+  handleDialogClose();
 };
 const handleDialogClose = () => {
-	dialogVisible.value = false;
-	customDataPermission.value = [];
-	dataPermission.value = null;
+  dialogVisible.value = false;
+  customDataPermission.value = [];
+  dataPermission.value = null;
 };
 
 //保存权限
 const handleSavePermission = () => {
-  setRolePremission(props.roleId, menuData.value).then(res=>{
+  setRolePremission(props.roleId, menuData.value).then(res => {
     ElMessage({
       message: res.msg,
       type: 'success',
@@ -262,115 +258,132 @@ const handleSavePermission = () => {
 }
 
 onMounted(() => {
-	fetchData();
-
 });
 </script>
 
 <style lang="scss" scoped>
 .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;
+  margin: 15px;
+  box-sizing: border-box;
 
-			.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;
-					}
-				}
-			}
-		}
-	}
+  .pc-save-btn {
+    margin-bottom: 15px;
+  }
 
-	.pc-dialog {
-		.dialog-select {
-			width: 100%;
-		}
-		.dialog-tree {
-			width: 100%;
-			margin-top: 20px;
-		}
-	}
+  .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;
+          }
+        }
+      }
+    }
+  }
+
+  .pc-dialog {
+    .dialog-select {
+      width: 100%;
+    }
+
+    .dialog-tree {
+      width: 100%;
+      margin-top: 20px;
+    }
+  }
 }
 </style>
 
 <style lang="scss">
 .permission-com {
-	.el-collapse {
-		border-top: none;
-		border-bottom: none;
-	}
-	.el-collapse-item {
-		margin-bottom: 15px;
-	}
-	.el-collapse-item__header {
-		height: auto;
-		padding: 15px;
-		border-radius: 8px;
-		border-top: 1px solid #ebeef5;
-		border-left: 1px solid #ebeef5;
-		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;
-		border-right: 1px solid #ebeef5;
-		border-top: 1px solid #ebeef5;
-		border-radius: 0 0 8px 8px;
-		background-color: #fafafa;
-		box-sizing: border-box;
-		.el-collapse-item__content {
-			padding-bottom: 0;
-		}
-	}
+  .el-collapse {
+    border-top: none;
+    border-bottom: none;
+  }
+
+  .el-collapse-item {
+    margin-bottom: 15px;
+  }
+
+  .el-collapse-item__header {
+    height: auto;
+    padding: 15px;
+    border-radius: 8px;
+    border-top: 1px solid #ebeef5;
+    border-left: 1px solid #ebeef5;
+    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;
+    border-right: 1px solid #ebeef5;
+    border-top: 1px solid #ebeef5;
+    border-radius: 0 0 8px 8px;
+    background-color: #fafafa;
+    box-sizing: border-box;
+
+    .el-collapse-item__content {
+      padding-bottom: 0;
+    }
+  }
 }
 </style>
diff --git a/web/src/views/system/role/components/PermissionComNew/types.ts b/web/src/views/system/role/components/PermissionComNew/types.ts
index e02c980..c336389 100644
--- a/web/src/views/system/role/components/PermissionComNew/types.ts
+++ b/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; }[]
-}
\ No newline at end of file
+}