diff --git a/web/src/views/system/dept/components/DeptUserCom/crud.tsx b/web/src/views/system/dept/components/DeptUserCom/crud.tsx
index 3ab08e9..329a19c 100644
--- a/web/src/views/system/dept/components/DeptUserCom/crud.tsx
+++ b/web/src/views/system/dept/components/DeptUserCom/crud.tsx
@@ -212,9 +212,6 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 				},
 				dept: {
 					title: '部门',
-					search: {
-						disabled: true,
-					},
 					type: 'dict-tree',
 					dict: dict({
 						isTree: true,
@@ -255,7 +252,12 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 				role: {
 					title: '角色',
 					search: {
-						disabled: true,
+						show: true,
+						component: {
+							props: {
+								clearable: true,
+							},
+						},
 					},
 					type: 'dict-select',
 					dict: dict({
diff --git a/web/src/views/system/role/components/api.ts b/web/src/views/system/role/components/PermissionCom/api.ts
similarity index 100%
rename from web/src/views/system/role/components/api.ts
rename to web/src/views/system/role/components/PermissionCom/api.ts
diff --git a/web/src/views/system/role/components/permission.vue b/web/src/views/system/role/components/PermissionCom/index.vue
similarity index 100%
rename from web/src/views/system/role/components/permission.vue
rename to web/src/views/system/role/components/PermissionCom/index.vue
diff --git a/web/src/views/system/role/components/PermissionComCopy/api.ts b/web/src/views/system/role/components/PermissionComCopy/api.ts
new file mode 100644
index 0000000..9d4c590
--- /dev/null
+++ b/web/src/views/system/role/components/PermissionComCopy/api.ts
@@ -0,0 +1,21 @@
+import { request } from "/@/utils/service";
+
+export function getDataPermissionRange() {
+  return request({
+    url: '/api/system/role_menu_button_permission/data_scope/',
+    method: 'get',
+  })
+}
+export function getDataPermissionDept() {
+  return request({
+    url: '/api/system/role_menu_button_permission/role_to_dept_all/',
+    method: 'get'
+  })
+}
+
+export function getDataPermissionMenu() {
+  return request({
+    url: '/api/system/role_menu_button_permission/get_role_permissions/',
+    method: 'get'
+  })
+}
\ No newline at end of file
diff --git a/web/src/views/system/role/components/PermissionComCopy/index.vue b/web/src/views/system/role/components/PermissionComCopy/index.vue
new file mode 100644
index 0000000..1d08e99
--- /dev/null
+++ b/web/src/views/system/role/components/PermissionComCopy/index.vue
@@ -0,0 +1,235 @@
+<template>
+	<div class="permission-com">
+		<div class="pc-item">
+			<p class="pc-title">数据授权</p>
+			<div class="pc-cell">
+				<el-radio-group v-model="dataPermission" class="pc-data-permission">
+					<el-radio v-for="item in dataPermissionRange" :key="item.label" :label="item.value" @change="handleChange">{{ item.label }}</el-radio>
+				</el-radio-group>
+				<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="pc-custom-dept"
+				/>
+			</div>
+		</div>
+
+		<div class="pc-item pc-menu">
+			<p class="pc-title">菜单授权</p>
+			<div>
+				<el-tree
+					:props="defaultTreeProps"
+					:data="menuData"
+					show-checkbox
+					node-key="id"
+					default-expand-all
+					:expand-on-click-node="false"
+					class="dc-menu-tree"
+				>
+					<template #default="{ node, data }">
+						<div class="pc-tree-node" :class="{ 'tree-node-label-border': !data.is_catalog }">
+							<p class="tree-node-label">{{ node.label }}</p>
+							<div v-if="!data.is_catalog">
+								<ul class="menu-permission-list">
+									<li v-for="m in data.menuPermission" :key="m.id" class="menu-permission-item">
+										<el-checkbox v-model="m.id" :label="m.name" />
+									</li>
+								</ul>
+								<ul class="menu-permission-list">
+									<li v-for="m in data.columns" :key="m.id" class="menu-permission-item">
+										<el-checkbox v-model="m.id" :label="m.title" />
+									</li>
+								</ul>
+							</div>
+						</div>
+					</template>
+				</el-tree>
+			</div>
+		</div>
+
+		<div class="pc-btn">
+			<el-button type="primary">确定</el-button>
+			<el-button>取消</el-button>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import XEUtils from 'xe-utils';
+import { getDataPermissionRange, getDataPermissionDept, getDataPermissionMenu } from './api';
+import { DataPermissionRangeType, CustomDataPermissionDeptType, CustomDataPermissionMenuType } from './types';
+
+const defaultTreeProps = {
+	children: 'children',
+	label: 'name',
+	value: 'id',
+};
+
+const data: any[] = [
+	{
+		id: 1,
+		label: 'Level one 1',
+		children: [
+			{
+				id: 4,
+				label: 'Level two 1-1',
+				isPenultimate: true,
+				children: [
+					{
+						id: 9,
+						label: 'Level three 1-1-1',
+					},
+					{
+						id: 10,
+						label: 'Level three 1-1-2',
+					},
+				],
+			},
+		],
+	},
+	{
+		id: 2,
+		label: 'Level one 2',
+		isPenultimate: true,
+		children: [
+			{
+				id: 5,
+				label: 'Level two 2-1',
+			},
+			{
+				id: 6,
+				label: 'Level two 2-2',
+			},
+		],
+	},
+	{
+		id: 3,
+		label: 'Level one 3',
+		isPenultimate: true,
+		children: [
+			{
+				id: 7,
+				label: 'Level two 3-1',
+			},
+			{
+				id: 8,
+				label: 'Level two 3-2',
+			},
+		],
+	},
+];
+
+let dataPermission = ref();
+let dataPermissionRange = ref<DataPermissionRangeType[]>([]);
+let customDataPermission = ref();
+let deptData = ref<CustomDataPermissionDeptType[]>([]);
+let menuData = ref<CustomDataPermissionMenuType[]>([]);
+
+const fetchData = async () => {
+	try {
+		const resRange = await getDataPermissionRange();
+		const resMenu = await getDataPermissionMenu();
+
+		if (resRange?.code === 2000) {
+			dataPermissionRange.value = resRange.data;
+		}
+		if (resMenu?.code === 2000) {
+			console.log(resMenu.data);
+			menuData.value = resMenu.data;
+		}
+	} catch {
+		return;
+	}
+};
+
+const handleChange = async () => {
+	if (dataPermission.value === 4) {
+		const res = await getDataPermissionDept();
+		const data = XEUtils.toArrayTree(res.data, { parentKey: 'parent', strict: false });
+		deptData.value = data;
+	}
+};
+
+const handleTestClick = (node: any, data: any) => {
+	console.log(node, data);
+};
+
+onMounted(() => {
+	fetchData();
+});
+</script>
+
+<style lang="scss" scoped>
+.permission-com {
+	width: 100%;
+	height: 100%;
+	padding: 15px;
+	box-sizing: border-box;
+	.pc-item {
+		width: 100%;
+		margin-bottom: 15px;
+		border-bottom: 1px #dcdfe6 solid;
+	}
+	.pc-title {
+		font-weight: 600;
+	}
+	.pc-cell {
+		display: flex;
+		padding: 10px;
+		overflow-x: auto;
+		.pc-data-permission {
+			min-width: 800px;
+		}
+		.pc-custom-dept {
+			min-width: 200px;
+		}
+	}
+
+	.pc-menu {
+		height: calc(100% - 140px);
+		overflow-y: auto;
+	}
+
+	.pc-tree-node {
+		width: 100%;
+		display: flex;
+		align-items: center;
+
+		.tree-node-label {
+			font-size: 16px;
+			margin-right: 20px;
+		}
+		.menu-permission-list {
+			display: flex;
+			align-items: center;
+			.menu-permission-item {
+				margin-right: 10px;
+			}
+		}
+	}
+
+	.tree-node-label-border {
+		border-bottom: 1px #dcdfe6 solid;
+	}
+
+	.pc-btn {
+		padding-bottom: 15px;
+	}
+}
+</style>
+
+<style lang="scss">
+.dc-menu-tree {
+	.el-tree-node__content {
+		height: auto;
+	}
+}
+</style>
diff --git a/web/src/views/system/role/components/PermissionComCopy/types.ts b/web/src/views/system/role/components/PermissionComCopy/types.ts
new file mode 100644
index 0000000..6abb63d
--- /dev/null
+++ b/web/src/views/system/role/components/PermissionComCopy/types.ts
@@ -0,0 +1,20 @@
+export interface DataPermissionRangeType {
+  label: string;
+  value: number;
+}
+
+export interface CustomDataPermissionDeptType {
+  id: number;
+  name: string;
+  patent: number;
+  children: CustomDataPermissionDeptType[]
+}
+
+export interface CustomDataPermissionMenuType {
+  id: number;
+  name: string;
+  is_catalog: boolean;
+  menuPermission: { id: number; name: string; value: string }[] | null;
+  columns: { id: number; name: string; title: string }[] | null;
+  children: CustomDataPermissionMenuType[]
+}
\ No newline at end of file
diff --git a/web/src/views/system/role/index.vue b/web/src/views/system/role/index.vue
index 576f725..e15d0fd 100644
--- a/web/src/views/system/role/index.vue
+++ b/web/src/views/system/role/index.vue
@@ -5,8 +5,8 @@
 				<el-tag size="small">{{ scope.row.url }}</el-tag>
 			</template>
 		</fs-crud>
-<!--		<RolePermission ref="rolePermission"></RolePermission>-->
-    <permission ref="rolePermission"></permission>
+		<!--		<RolePermission ref="rolePermission"></RolePermission>-->
+		<permission ref="rolePermission"></permission>
 	</fs-page>
 </template>
 
@@ -15,7 +15,7 @@ import { ref, onMounted } from 'vue';
 import { useExpose, useCrud, dict } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
 import RolePermission from '/@/views/system/rolePermission/index.vue';
-import permission from './components/permission.vue'
+import permission from './components/PermissionCom/index.vue';
 import * as api from './api';
 import _ from 'lodash-es';
 const rolePermission = ref();
diff --git a/web/src/views/system/role/types.ts b/web/src/views/system/role/types.ts
new file mode 100644
index 0000000..6b0027c
--- /dev/null
+++ b/web/src/views/system/role/types.ts
@@ -0,0 +1,27 @@
+import { CrudOptions, CrudExpose } from '@fast-crud/fast-crud';
+
+export interface CreateCrudReturnTypes {
+  crudOptions: CrudOptions;
+}
+
+export interface CreateCrudOptionsTypes {
+  crudExpose: CrudExpose;
+  configPermission: Function;
+}
+
+export interface RoleItemType {
+  id: string | number;
+  modifier_name: string;
+  creator_name: string;
+  create_datetime: string;
+  update_datetime: string;
+  description: string;
+  modifier: string;
+  dept_belong_id: string;
+  name: string;
+  key: string;
+  sort: number;
+  status: boolean;
+  admin: boolean;
+  creator: string;
+}
\ No newline at end of file