From 13999142aa3b57fb5632f967a69ff768d15da94d Mon Sep 17 00:00:00 2001
From: sheng <15292050171@163.com>
Date: Mon, 7 Aug 2023 18:26:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(=20=E8=A7=92=E8=89=B2=E7=AE=A1=E7=90=86=20?=
 =?UTF-8?q?):=20=E6=9D=83=E9=99=90=E9=85=8D=E7=BD=AE=E9=87=8D=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../role/components/PermissionCom/index.vue   | 603 +++++++++---------
 .../components/PermissionComNew/index.vue     | 185 ++++++
 web/src/views/system/role/crud.tsx            |  46 +-
 web/src/views/system/role/index.vue           |  49 +-
 4 files changed, 538 insertions(+), 345 deletions(-)
 create mode 100644 web/src/views/system/role/components/PermissionComNew/index.vue

diff --git a/web/src/views/system/role/components/PermissionCom/index.vue b/web/src/views/system/role/components/PermissionCom/index.vue
index aee7dfd..3ffe14a 100644
--- a/web/src/views/system/role/components/PermissionCom/index.vue
+++ b/web/src/views/system/role/components/PermissionCom/index.vue
@@ -1,379 +1,350 @@
 <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}"
-          :expand-config="{accordion:true}"
-          @toggle-row-expand="menuNodeClick"
-          :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="150">
-                </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.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>
+	<el-drawer size="70%" v-model="drawer" direction="rtl" destroy-on-close :before-close="handleClose">
+		<template #header>
+			<div>
+				<el-tag size="large">当前角色:{{ 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 }"
+				:expand-config="{ accordion: true }"
+				@toggle-row-expand="menuNodeClick"
+				: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="150"> </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.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,VxeTableEvents } from 'vxe-table'
+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, VxeTableEvents } from 'vxe-table';
 
 interface tableRow {
-  menu_id: number
-  name: string
+	menu_id: number;
+	name: string;
 }
 
 //抽屉是否显示
-const drawer = ref(false)
+const drawer = ref(false);
 //当前编辑的角色信息
-const editedRoleInfo = ref({})
+const editedRoleInfo = ref({});
 
 //抽屉关闭确认
 const handleClose = (done: () => void) => {
-  ElMessageBox.confirm('您确定要关闭?', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  })
-      .then(() => {
-        done()
-      })
-      .catch(() => {
-        // catch error
-      })
-}
+	ElMessageBox.confirm('您确定要关闭?', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+		.then(() => {
+			done();
+		})
+		.catch(() => {
+			// catch error
+		});
+};
 
 /*****菜单的配置项***/
 const defaultProps = {
-  children: 'children',
-  label: 'name',
-  isLeaf: 'hasChild'
-}
+	children: 'children',
+	label: 'name',
+	isLeaf: 'hasChild',
+};
 
 interface Tree {
-  name: string
-  children?: Tree[],
-  id: number
+	name: string;
+	children?: Tree[];
+	id: number;
 }
 
-let menuData = ref<Tree>()
+let menuData = ref<Tree>();
 //获取菜单
 const getMenuData = () => {
-  api.GetMenu({}).then((res: any) => {
-    const {data} = res
-    menuData.value = data
-  })
-}
+	api.GetMenu({}).then((res: any) => {
+		const { data } = res;
+		menuData.value = data;
+	});
+};
 
 //获取已授权的菜单
-const tableRef = ref<VxeTableInstance<tableRow>>()
-const multipleTableData = ref()
+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
-  })
-}
+	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()
+let isBtnPermissionShow = ref(false);
+let buttonOptions = ref<[]>();
+let editedMenuInfo = ref();
 //菜单节点点击事件
-const menuNodeClick: VxeTableEvents.ToggleRowExpand<tableRow> = ({ expanded, row}) => {
-  // isBtnPermissionShow.value = !node.is_catalog
-  if (!row.is_catalog) {
-    buttonOptions.value = []
-    editedMenuInfo.value = row
-    api.GetMenuButton({menu: row.menu_id}).then((res: any) => {
-      const {data} = res
-      buttonOptions.value = data
-    })
-    api.getObj({menu: row.menu_id, role: editedRoleInfo.value.id}).then((res: any) => {
-      const {data} = res
-      buttonPermissionData.value = data
-    })
-  }
-
-}
-const menuTree = ref()
+const menuNodeClick: VxeTableEvents.ToggleRowExpand<tableRow> = ({ expanded, row }) => {
+	// isBtnPermissionShow.value = !node.is_catalog
+	if (!row.is_catalog) {
+		buttonOptions.value = [];
+		editedMenuInfo.value = row;
+		api.GetMenuButton({ menu: row.menu_id }).then((res: any) => {
+			const { data } = res;
+			buttonOptions.value = data;
+		});
+		api.getObj({ menu: row.menu_id, role: editedRoleInfo.value.id }).then((res: any) => {
+			const { data } = res;
+			buttonPermissionData.value = data;
+		});
+	}
+};
+const menuTree = ref();
 /*****菜单的配置项***/
 /***按钮授权的弹窗****/
 //是否显示新增表单
-const dialogFormVisible = ref(false)
+const dialogFormVisible = ref(false);
 //部门树
-const deptTree = ref()
+const deptTree = ref();
 //自定义部门数据
-const deptOptions = ref()
+const deptOptions = ref();
 //选中的部门数据
-const deptCheckedKeys = []
+const deptCheckedKeys = [];
 //按钮表单
 const buttonForm = reactive({
-  menu_button: null,
-  role: null,
-  menu: null,
-  data_range: null,
-  dept: []
-})
+	menu_button: null,
+	role: null,
+	menu: null,
+	data_range: null,
+	dept: [],
+});
 //按钮表格数据
-let buttonPermissionData = ref([])
+let buttonPermissionData = ref([]);
 //按钮表单验证
 const buttonRules = reactive<FormRules>({
-  menu_button: [
-    {required: true, message: '必填项'}
-  ],
-  data_range: [
-    {required: true, message: '必填项'}
-  ]
-})
+	menu_button: [{ required: true, message: '必填项' }],
+	data_range: [{ required: true, message: '必填项' }],
+});
 //新增按钮
-const buttonFormRef = ref<FormInstance>()
+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 = []
-}
+	dialogFormVisible.value = true;
+	buttonForm.menu_button = null;
+	buttonForm.menu = null;
+	buttonForm.role = null;
+	buttonForm.data_range = null;
+	buttonForm.dept = [];
+};
 //权限范围数据
-const dataScopeOptions = ref<[]>()
+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})
-  })
-
-}
+	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
-}
+	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
-}
+	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 { 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 { 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()
-}
+	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',
+			});
+		});
+	}
+};
 
-  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})
+defineExpose({ drawer, editedRoleInfo, initGet });
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/web/src/views/system/role/components/PermissionComNew/index.vue b/web/src/views/system/role/components/PermissionComNew/index.vue
new file mode 100644
index 0000000..4245ce9
--- /dev/null
+++ b/web/src/views/system/role/components/PermissionComNew/index.vue
@@ -0,0 +1,185 @@
+<template>
+	<div class="permission-com">
+		<el-button size="small" type="primary" class="pc-save-btn">保存菜单授权</el-button>
+		<el-collapse v-model="collapseCurrent" @change="handleCollapseChange" accordion>
+			<el-collapse-item v-for="item in menuData" :key="item.key" :name="item.key">
+				<template #title>
+					<div @click.stop="handleClick">
+						<p class="pc-collapse-title">
+							<el-checkbox v-model="item.isCheck">
+								<span>{{ item.name }}</span>
+							</el-checkbox>
+						</p>
+						<div v-show="!collapseCurrent.includes(item.key)">
+							<el-checkbox v-for="btn in item.btns" :key="btn.value" :label="btn.value" v-model="btn.isCheck">{{ btn.label }}</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.label }}
+								<span @click.stop.prevent="handleSettingClick">
+									<el-icon><Setting /></el-icon>
+								</span>
+							</p>
+						</el-checkbox>
+					</div>
+
+					<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>
+
+						<ul v-show="item.radio === '3'" class="columns-list">
+							<li class="columns-head">
+								<div class="width-txt">
+									<span>字段</span>
+								</div>
+								<div class="width-check">
+									<el-checkbox name="look"><span>查看</span></el-checkbox>
+								</div>
+								<div class="width-check">
+									<el-checkbox name="edit"><span>编辑</span></el-checkbox>
+								</div>
+							</li>
+
+							<li class="columns-item">
+								<div class="width-txt">姓名</div>
+								<div class="width-check"><el-checkbox class="ci-checkout"></el-checkbox></div>
+								<div class="width-check"><el-checkbox class="ci-checkout"></el-checkbox></div>
+							</li>
+
+							<li class="columns-item">
+								<div class="width-txt">性别</div>
+								<div class="width-check"><el-checkbox class="ci-checkout"></el-checkbox></div>
+								<div class="width-check"><el-checkbox class="ci-checkout"></el-checkbox></div>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</el-collapse-item>
+		</el-collapse>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+let menuData = ref([
+	{
+		key: '1',
+		name: '用户管理',
+		isCheck: true,
+		radio: '1',
+		btns: [
+			{ label: '新增', value: 'create', isCheck: true },
+			{ label: '编辑', value: 'edit', isCheck: true },
+			{ label: '删除', value: 'delete', isCheck: true },
+			{ label: '查询', value: 'look', isCheck: true },
+		],
+	},
+	{
+		key: '2',
+		name: '系统管理',
+		isCheck: false,
+		radio: '2',
+		btns: [
+			{ label: '新增', value: 'create', isCheck: false },
+			{ label: '编辑', value: 'edit', isCheck: true },
+			{ label: '删除', value: 'delete', isCheck: false },
+			{ label: '查询', value: 'look', isCheck: true },
+		],
+	},
+]);
+let collapseCurrent = ref(['1']);
+
+const handleClick = () => {};
+
+const handleCollapseChange = (val: string) => {
+	collapseCurrent.value = [val];
+};
+
+const handleSettingClick = () => {
+	console.log(123123);
+};
+</script>
+
+<style lang="scss" scoped>
+.permission-com {
+	height: calc(100% - 30px);
+	padding: 15px;
+	margin: 15px;
+	border: 1px solid #ebeef5;
+	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;
+		border-top: 1px solid #ebeef5;
+		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;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
+
+<style lang="scss">
+.permission-com {
+	.el-collapse-item__header {
+		height: auto;
+	}
+}
+</style>
diff --git a/web/src/views/system/role/crud.tsx b/web/src/views/system/role/crud.tsx
index bd14dc1..1923708 100644
--- a/web/src/views/system/role/crud.tsx
+++ b/web/src/views/system/role/crud.tsx
@@ -1,15 +1,22 @@
 import { CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose, compute } from '@fast-crud/fast-crud';
-import _ from 'lodash-es';
 import * as api from './api';
 import { dictionary } from '/@/utils/dictionary';
 import { successMessage } from '../../../utils/message';
-import {inject} from "vue";
+import { inject } from 'vue';
 interface CreateCrudOptionsTypes {
 	crudOptions: CrudOptions;
 }
 
 //此处为crudOptions配置
-export const createCrudOptions = function ({ crudExpose, rolePermission }: { crudExpose: CrudExpose; rolePermission: any }): CreateCrudOptionsTypes {
+export const createCrudOptions = function ({
+	crudExpose,
+	rolePermission,
+	handleDrawerOpen,
+}: {
+	crudExpose: CrudExpose;
+	rolePermission: any;
+	handleDrawerOpen: Function;
+}): CreateCrudOptionsTypes {
 	const pageRequest = async (query: any) => {
 		return await api.GetList(query);
 	};
@@ -25,7 +32,7 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
 	};
 
 	//权限判定
-	const hasPermissions = inject("$hasPermissions")
+	const hasPermissions: any = inject('$hasPermissions');
 
 	// @ts-ignore
 	// @ts-ignore
@@ -40,25 +47,34 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
 			rowHandle: {
 				//固定右侧
 				fixed: 'right',
-				width: 200,
+				width: 260,
 				buttons: {
 					view: {
 						show: false,
 					},
 					edit: {
-						iconRight: 'Edit',
-						type: 'text',
-						show:hasPermissions('role:Update')
+						show: hasPermissions('role:Update'),
 					},
 					remove: {
-						iconRight: 'Delete',
-						type: 'text',
-						show:hasPermissions('role:Delete')
+						show: hasPermissions('role:Delete'),
 					},
 					custom: {
+						type: 'primary',
 						text: '权限配置',
-						type: 'text',
-						show:hasPermissions('role:Update'),
+						show: hasPermissions('role:Update'),
+						tooltip: {
+							placement: 'top',
+							content: '权限配置',
+						},
+						click: (context: any): void => {
+							const { row } = context;
+							handleDrawerOpen();
+						},
+					},
+					/* custom: {
+						type: 'primary',
+						text: '权限配置',
+						show: hasPermissions('role:Update'),
 						tooltip: {
 							placement: 'top',
 							content: '权限配置',
@@ -70,7 +86,7 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
 							rolePermission.value.editedRoleInfo = row;
 							rolePermission.value.initGet();
 						},
-					},
+					}, */
 				},
 			},
 			form: {
@@ -172,7 +188,7 @@ export const createCrudOptions = function ({ crudExpose, rolePermission }: { cru
 					search: { show: true },
 					type: 'dict-radio',
 					column: {
-						width:100,
+						width: 100,
 						component: {
 							name: 'fs-dict-switch',
 							activeText: '',
diff --git a/web/src/views/system/role/index.vue b/web/src/views/system/role/index.vue
index e15d0fd..4325948 100644
--- a/web/src/views/system/role/index.vue
+++ b/web/src/views/system/role/index.vue
@@ -5,36 +5,57 @@
 				<el-tag size="small">{{ scope.row.url }}</el-tag>
 			</template>
 		</fs-crud>
-		<!--		<RolePermission ref="rolePermission"></RolePermission>-->
-		<permission ref="rolePermission"></permission>
+		<!-- <permission ref="rolePermission"></permission> -->
+
+		<el-drawer v-model="drawerVisible" title="权限配置" direction="rtl" size="60%" :close-on-click-modal="false" :before-close="handleDrawerClose">
+			<template #header>
+				<div>当前角色: <el-tag>管理员</el-tag></div>
+			</template>
+			<PermissionComNew v-if="drawerVisible" @drawerClose="handleDrawerClose" />
+		</el-drawer>
 	</fs-page>
 </template>
 
 <script lang="ts" setup name="role">
 import { ref, onMounted } from 'vue';
-import { useExpose, useCrud, dict } from '@fast-crud/fast-crud';
+import { useExpose, useCrud } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
-import RolePermission from '/@/views/system/rolePermission/index.vue';
-import permission from './components/PermissionCom/index.vue';
-import * as api from './api';
-import _ from 'lodash-es';
+//import permission from './components/PermissionCom/index.vue';
+import PermissionComNew from './components/PermissionComNew/index.vue';
+
+let drawerVisible = ref(false);
+
 const rolePermission = ref();
-defineExpose(rolePermission);
+
 // crud组件的ref
 const crudRef = ref();
 // crud 配置的ref
 const crudBinding = ref();
 // 暴露的方法
 const { crudExpose } = useExpose({ crudRef, crudBinding });
-// 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose, rolePermission });
-// 初始化crud配置
-const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
-// 你可以调用此方法，重新初始化crud配置
-// resetCrudOptions(options)
 
+const handleDrawerOpen = () => {
+	drawerVisible.value = true;
+};
+
+const handleDrawerClose = () => {
+	drawerVisible.value = false;
+};
+
+// 你的crud配置
+const { crudOptions } = createCrudOptions({ crudExpose, rolePermission, handleDrawerOpen });
+//const { crudOptions } = createCrudOptions({ crudExpose, handleDrawerOpen });
+
+// 初始化crud配置
+const { resetCrudOptions } = useCrud({
+	crudExpose,
+	crudOptions,
+	context: {},
+});
 // 页面打开后获取列表数据
 onMounted(() => {
 	crudExpose.doRefresh();
 });
+
+defineExpose(rolePermission);
 </script>