From 6917786864520d1ad19498d0ac5efa59452e87e8 Mon Sep 17 00:00:00 2001
From: H0nGzA1 <2505811377@qq.com>
Date: Thu, 30 Mar 2023 16:43:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20=E6=89=80=E6=9C=89=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?~?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/system/areas/crud.tsx           |  18 +
 web/src/views/system/dept/crud.tsx            |  16 +-
 web/src/views/system/dept/index.vue           | 131 ++++-
 web/src/views/system/dictionary/crud.tsx      |  25 +-
 .../views/system/dictionary/subDict/crud.tsx  |  20 +-
 web/src/views/system/fileList/crud.tsx        |  18 +
 web/src/views/system/log/loginLog/crud.tsx    |   4 +
 .../views/system/log/operationLog/crud.tsx    |   4 +
 web/src/views/system/role/curd.tsx            | 450 +++++++++---------
 web/src/views/system/user/crud.tsx            |   2 +-
 web/src/views/system/user/index.vue           | 112 +++--
 web/src/views/system/whiteList/crud.tsx       |  42 +-
 12 files changed, 565 insertions(+), 277 deletions(-)

diff --git a/web/src/views/system/areas/crud.tsx b/web/src/views/system/areas/crud.tsx
index b8f36ad..19795b2 100644
--- a/web/src/views/system/areas/crud.tsx
+++ b/web/src/views/system/areas/crud.tsx
@@ -40,6 +40,24 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				editRequest,
 				delRequest,
 			},
+			rowHandle: {
+				//固定右侧
+				fixed: 'right',
+				width: 200,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
+				},
+			},
 			pagination: {
 				show: false,
 			},
diff --git a/web/src/views/system/dept/crud.tsx b/web/src/views/system/dept/crud.tsx
index 190a6ea..d56b916 100644
--- a/web/src/views/system/dept/crud.tsx
+++ b/web/src/views/system/dept/crud.tsx
@@ -64,11 +64,23 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 			},
 			rowHandle: {
 				fiexd: 'right',
-				width: 310,
+				fixed: 'right',
+				width: 200,
 				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
 					addChildren: {
 						text: '添加子级',
-						type: 'warning',
+						type: 'text',
 						click(context) {
 							const rowId = context.row.id;
 							crudExpose.openAdd({ row: { parent: rowId } });
diff --git a/web/src/views/system/dept/index.vue b/web/src/views/system/dept/index.vue
index 1fa8634..f3165f0 100644
--- a/web/src/views/system/dept/index.vue
+++ b/web/src/views/system/dept/index.vue
@@ -1,13 +1,126 @@
 <template>
 	<fs-page>
-		<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+		<el-row class="mx-2">
+			<el-col :span="4" class="p-1">
+				<el-card :body-style="{ height: '100%' }">
+					<p class="font-mono font-black text-center text-xl pb-5">
+						部门列表
+						<el-tooltip effect="dark" :content="content" placement="right">
+							<el-icon> <QuestionFilled /> </el-icon>
+						</el-tooltip>
+					</p>
+					<el-input v-model="filterText" :placeholder="placeholder" />
+					<el-tree
+						ref="treeRef"
+						class="font-mono font-bold leading-6 text-7xl"
+						:data="data"
+						:props="treeProps"
+						:filter-node-method="filterNode"
+						:load="loadNode"
+						lazy
+						icon="ArrowRightBold"
+						:indent="12"
+					>
+						<template #default="{ node, data }">
+							<span class="text-center font-black text-xl">{{ node.label }}</span>
+						</template>
+					</el-tree>
+				</el-card>
+			</el-col>
+			<el-col :span="20" class="p-1">
+				<el-card :body-style="{ height: '100%' }">
+					<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+				</el-card>
+			</el-col>
+		</el-row>
 	</fs-page>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
 import { useExpose, useCrud } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
+import * as api from './api';
+import { ElTree } from 'element-plus';
+import { ref, onMounted, watch, toRaw, defineAsyncComponent } from 'vue';
+import XEUtils from 'xe-utils';
+import { errorMessage, successMessage } from '../../../utils/message';
+
+interface Tree {
+	id: number;
+	name: string;
+	status: boolean;
+	children?: Tree[];
+}
+
+interface APIResponseData {
+	code?: number;
+	data: [];
+	msg?: string;
+}
+
+// 引入组件
+const placeholder = ref('请输入部门名称');
+const filterText = ref('');
+const treeRef = ref<InstanceType<typeof ElTree>>();
+
+const treeProps = {
+	children: 'children',
+	label: 'name',
+	icon: 'icon',
+	isLeaf: (data: Tree[], node: Node) => {
+		// @ts-ignore
+		if (node.data.hasChild) {
+			return false;
+		} else {
+			return true;
+		}
+	},
+};
+
+watch(filterText, (val) => {
+	treeRef.value!.filter(val);
+});
+
+const filterNode = (value: string, data: Tree) => {
+	if (!value) return true;
+	return toRaw(data).name.indexOf(value) !== -1;
+};
+
+// 懒加载
+const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
+	// @ts-ignore
+	if (node.level !== 0) {
+		// @ts-ignore
+		api.GetList({ parent: node.data.id }).then((res: APIResponseData) => {
+			resolve(res.data);
+			console.log(res.data);
+		});
+	}
+};
+
+let data = ref([]);
+
+const content = `
+1.部门数据支持懒加载;
+`;
+
+const getData = () => {
+	api.GetList({}).then((ret: APIResponseData) => {
+		const responseData = ret.data;
+		const result = XEUtils.toArrayTree(responseData, {
+			parentKey: 'parent',
+			children: 'children',
+			strict: true,
+		});
+		data.value = result;
+	});
+};
+
+// 页面打开后获取列表数据
+onMounted(() => {
+	getData();
+});
+
 // crud组件的ref
 const crudRef = ref();
 // crud 配置的ref
@@ -24,3 +137,17 @@ onMounted(() => {
 	crudExpose.doRefresh();
 });
 </script>
+
+<style lang="scss" scoped>
+.el-row {
+	height: 100%;
+
+	.el-col {
+		height: 100%;
+	}
+}
+
+.el-card {
+	height: 100%;
+}
+</style>
diff --git a/web/src/views/system/dictionary/crud.tsx b/web/src/views/system/dictionary/crud.tsx
index e994f06..6460738 100644
--- a/web/src/views/system/dictionary/crud.tsx
+++ b/web/src/views/system/dictionary/crud.tsx
@@ -1,7 +1,7 @@
 import * as api from './api';
 import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
 import { dictionary } from '/@/utils/dictionary';
-import {nextTick, ref} from 'vue';
+import { nextTick, ref } from 'vue';
 
 interface CreateCrudOptionsTypes {
 	crudOptions: CrudOptions;
@@ -30,25 +30,34 @@ export const createCrudOptions = function ({ crudExpose, subDictRef }: { crudExp
 				delRequest,
 			},
 			rowHandle: {
-				width: 360,
+				width: 200,
 				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
 					custom: {
 						text: '字典配置',
-						type: 'success',
+						type: 'text',
 						tooltip: {
 							placement: 'top',
 							content: '字典配置',
 						},
 						//@ts-ignore
 						click: (context: any) => {
-							const {row} = context
+							const { row } = context;
 							subDictRef.value.drawer = true;
-							nextTick(()=>{
+							nextTick(() => {
 								subDictRef.value.setSearchFormData({ form: { parent: row.id } });
 								subDictRef.value.doRefresh();
-							})
-
-
+							});
 						},
 					},
 				},
diff --git a/web/src/views/system/dictionary/subDict/crud.tsx b/web/src/views/system/dictionary/subDict/crud.tsx
index 27828ab..7626d89 100644
--- a/web/src/views/system/dictionary/subDict/crud.tsx
+++ b/web/src/views/system/dictionary/subDict/crud.tsx
@@ -2,7 +2,7 @@ import * as api from './api';
 import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
 import { request } from '/@/utils/service';
 import { dictionary } from '/@/utils/dictionary';
-import {watch} from "vue";
+import { watch } from 'vue';
 interface CreateCrudOptionsTypes {
 	crudOptions: CrudOptions;
 }
@@ -30,6 +30,24 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				editRequest,
 				delRequest,
 			},
+			rowHandle: {
+				//固定右侧
+				fixed: 'right',
+				width: 200,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
+				},
+			},
 			columns: {
 				_index: {
 					title: '序号',
diff --git a/web/src/views/system/fileList/crud.tsx b/web/src/views/system/fileList/crud.tsx
index e0d9d65..60ef81b 100644
--- a/web/src/views/system/fileList/crud.tsx
+++ b/web/src/views/system/fileList/crud.tsx
@@ -35,6 +35,24 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				editRequest,
 				delRequest,
 			},
+			rowHandle: {
+				//固定右侧
+				fixed: 'right',
+				width: 200,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
+				},
+			},
 			columns: {
 				_index: {
 					title: '序号',
diff --git a/web/src/views/system/log/loginLog/crud.tsx b/web/src/views/system/log/loginLog/crud.tsx
index 259243b..5e11903 100644
--- a/web/src/views/system/log/loginLog/crud.tsx
+++ b/web/src/views/system/log/loginLog/crud.tsx
@@ -36,7 +36,11 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				},
 			},
 			rowHandle: {
+				width: 100,
 				buttons: {
+					view: {
+						type: 'text',
+					},
 					edit: {
 						show: false,
 					},
diff --git a/web/src/views/system/log/operationLog/crud.tsx b/web/src/views/system/log/operationLog/crud.tsx
index 53c1276..11daf67 100644
--- a/web/src/views/system/log/operationLog/crud.tsx
+++ b/web/src/views/system/log/operationLog/crud.tsx
@@ -36,7 +36,11 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				},
 			},
 			rowHandle: {
+				width: 100,
 				buttons: {
+					view: {
+						type: 'text',
+					},
 					edit: {
 						show: false,
 					},
diff --git a/web/src/views/system/role/curd.tsx b/web/src/views/system/role/curd.tsx
index 2655d65..c7562ee 100644
--- a/web/src/views/system/role/curd.tsx
+++ b/web/src/views/system/role/curd.tsx
@@ -1,227 +1,237 @@
-import {CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose} from '@fast-crud/fast-crud';
+import { CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose } from '@fast-crud/fast-crud';
 import _ from 'lodash-es';
-import * as api from "./api";
+import * as api from './api';
 interface CreateCrudOptionsTypes {
-    crudOptions: CrudOptions;
+	crudOptions: CrudOptions;
 }
 
 //此处为crudOptions配置
-export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExpose: CrudExpose,rolePermission:any}): CreateCrudOptionsTypes {
+export const createCrudOptions = function ({ crudExpose, rolePermission }: { crudExpose: CrudExpose; rolePermission: any }): CreateCrudOptionsTypes {
+	const pageRequest = async (query: any) => {
+		return await api.GetList(query);
+	};
+	const editRequest = async ({ form, row }: EditReq) => {
+		form.id = row.id;
+		return await api.UpdateObj(form);
+	};
+	const delRequest = async ({ row }: DelReq) => {
+		return await api.DelObj(row.id);
+	};
+	const addRequest = async ({ form }: AddReq) => {
+		return await api.AddObj(form);
+	};
 
-    const pageRequest = async (query: any) => {
-        return await api.GetList(query);
-    };
-    const editRequest = async ({ form, row }: EditReq) => {
-        form.id = row.id;
-        return await api.UpdateObj(form);
-    };
-    const delRequest = async ({ row }: DelReq) => {
-        return await api.DelObj(row.id);
-    };
-    const addRequest = async ({ form }: AddReq) => {
-        return await api.AddObj(form);
-    };
-
-    return {
-        crudOptions: {
-            request: {
-                pageRequest,
-                addRequest,
-                editRequest,
-                delRequest,
-            },
-            rowHandle: {
-                //固定右侧
-                fixed: "right",
-                width:310,
-                buttons: {
-                    custom: {
-                        text: "权限配置",
-						type:'warning',
-                        tooltip: {
-                            placement: "top",
-                            content: "删除"
-                        },
-                        click: (context:any):void => {
-                            const {row} = context
-                            // eslint-disable-next-line no-mixed-spaces-and-tabs
-                        	rolePermission.value.drawer=true
-                            rolePermission.value.editedRoleInfo = row
-                            rolePermission.value.initGet()
-                        }
-                    }
-                },
-            },
-            form: {
-                col: {span: 24},
-                labelWidth: '100px',
-                wrapper: {
-                    is: 'el-dialog',
-                    width: '600px',
-                },
-            },
-            columns: {
-                _index: {
-                    title: '序号',
-                    form: {show: false},
-                    column: {
-                        //type: 'index',
-                        align: 'center',
-                        width: '70px',
-                        columnSetDisabled: true, //禁止在列设置中选择
-                        formatter: (context) => {
-                            //计算序号,你可以自定义计算规则，此处为翻页累加
-                            let index = context.index ?? 1;
-                            let pagination = crudExpose.crudBinding.value.pagination;
-                            // @ts-ignore
-                            return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
-                        },
-                    },
-                },
-                id: {
-                    title: 'ID',
-                    type: 'text',
-                    column: {show: false},
-                    search: {show: false},
-                    form: {show: false},
-                },
-                name: {
-                    title: '角色名称',
-                    type: 'text',
-                    search: {show: true},
-                    column: {
-                        minWidth: 120,
-                        sortable: "custom",
-                    },
-                    form: {
-                        rules: [{required: true, message: '角色名称必填'}],
-                        component: {
-                            placeholder: '输入角色名称搜索',
-                        },
-                    },
-                },
-                key: {
-                    title: '权限标识',
-                    type: 'text',
-                    search: {show: false},
-                    column: {
-                        width: 120,
-                        sortable: "custom",
-                    },
-                    form: {
-                        rules: [{required: true, message: '权限标识必填'}],
-                        placeholder: '输入权限标识',
-                    },
-                },
-                sort: {
-                    title: '排序',
-                    search: {show: false},
-                    type: 'number',
-                    column: {
-                        width: 90,
-                        sortable: "custom",
-                    },
-                    form: {
-                        rules: [{required: true, message: '排序必填'}],
-                        value: 1,
-                    },
-                },
-                admin: {
-                    title: '是否管理员',
-                    search: {show: false},
-                    type: 'dict-radio',
-                    dict: dict({
-                        data: [
-                            {
-                                label: '是',
-                                value: true,
-                                color: 'success',
-                            },
-                            {
-                                label: '否',
-                                value: false,
-                                color: 'danger',
-                            },
-                        ],
-                    }),
-                    column: {
-                        width: 130,
-                        sortable: "custom",
-                    },
-                    form: {
-                        rules: [{required: true, message: '是否管理员必填'}],
-                        value: false,
-                    },
-                },
-                status: {
-                    title: '状态',
-                    search: {show: true},
-                    type: 'dict-radio',
-                    dict: dict({
-                        data: [
-                            {
-                                label: '启用',
-                                value: true,
-                                color: 'success',
-                            },
-                            {
-                                label: '禁用',
-                                value: false,
-                                color: 'danger',
-                            },
-                        ],
-                    }),
-                    column: {
-                        width: 90,
-                        sortable: "custom",
-                    },
-                    form: {
-                        rules: [{required: true, message: '状态必填'}],
-                        value: true,
-                    },
-                },
-                update_datetime: {
-                    title: '更新时间',
-                    type: 'text',
-                    search: {show: false},
-                    column: {
-                        width: 170,
-                        sortable: "custom",
-                    },
-                    form: {
-                        show: false,
-                        component: {
-                            placeholder: '输入关键词搜索',
-                        },
-                    },
-                },
-                create_datetime: {
-                    title: '创建时间',
-                    type: 'text',
-                    search: {show: false},
-                    column: {
-                        sortable: "custom",
-                        width: 170,
-                    },
-                    form: {
-                        show: false,
-                        component: {
-                            placeholder: '输入关键词搜索',
-                        },
-                    },
-                },
-                // description: {
-                //     title: '备注',
-                //     type: 'textarea',
-                //     search: {show: false},
-                //     form: {
-                //         component: {
-                //             maxlength: 200,
-                //             placeholder: '输入备注',
-                //         },
-                //     },
-                // },
-            },
-        },
-    };
+	return {
+		crudOptions: {
+			request: {
+				pageRequest,
+				addRequest,
+				editRequest,
+				delRequest,
+			},
+			rowHandle: {
+				//固定右侧
+				fixed: 'right',
+				width: 200,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
+					custom: {
+						text: '权限配置',
+						type: 'text',
+						tooltip: {
+							placement: 'top',
+							content: '删除',
+						},
+						click: (context: any): void => {
+							const { row } = context;
+							// eslint-disable-next-line no-mixed-spaces-and-tabs
+							rolePermission.value.drawer = true;
+							rolePermission.value.editedRoleInfo = row;
+							rolePermission.value.initGet();
+						},
+					},
+				},
+			},
+			form: {
+				col: { span: 24 },
+				labelWidth: '100px',
+				wrapper: {
+					is: 'el-dialog',
+					width: '600px',
+				},
+			},
+			columns: {
+				_index: {
+					title: '序号',
+					form: { show: false },
+					column: {
+						//type: 'index',
+						align: 'center',
+						width: '70px',
+						columnSetDisabled: true, //禁止在列设置中选择
+						formatter: (context) => {
+							//计算序号,你可以自定义计算规则，此处为翻页累加
+							let index = context.index ?? 1;
+							let pagination = crudExpose.crudBinding.value.pagination;
+							// @ts-ignore
+							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+						},
+					},
+				},
+				id: {
+					title: 'ID',
+					type: 'text',
+					column: { show: false },
+					search: { show: false },
+					form: { show: false },
+				},
+				name: {
+					title: '角色名称',
+					type: 'text',
+					search: { show: true },
+					column: {
+						minWidth: 120,
+						sortable: 'custom',
+					},
+					form: {
+						rules: [{ required: true, message: '角色名称必填' }],
+						component: {
+							placeholder: '输入角色名称搜索',
+						},
+					},
+				},
+				key: {
+					title: '权限标识',
+					type: 'text',
+					search: { show: false },
+					column: {
+						width: 120,
+						sortable: 'custom',
+					},
+					form: {
+						rules: [{ required: true, message: '权限标识必填' }],
+						placeholder: '输入权限标识',
+					},
+				},
+				sort: {
+					title: '排序',
+					search: { show: false },
+					type: 'number',
+					column: {
+						width: 90,
+						sortable: 'custom',
+					},
+					form: {
+						rules: [{ required: true, message: '排序必填' }],
+						value: 1,
+					},
+				},
+				admin: {
+					title: '是否管理员',
+					search: { show: false },
+					type: 'dict-radio',
+					dict: dict({
+						data: [
+							{
+								label: '是',
+								value: true,
+								color: 'success',
+							},
+							{
+								label: '否',
+								value: false,
+								color: 'danger',
+							},
+						],
+					}),
+					column: {
+						width: 130,
+						sortable: 'custom',
+					},
+					form: {
+						rules: [{ required: true, message: '是否管理员必填' }],
+						value: false,
+					},
+				},
+				status: {
+					title: '状态',
+					search: { show: true },
+					type: 'dict-radio',
+					dict: dict({
+						data: [
+							{
+								label: '启用',
+								value: true,
+								color: 'success',
+							},
+							{
+								label: '禁用',
+								value: false,
+								color: 'danger',
+							},
+						],
+					}),
+					column: {
+						width: 90,
+						sortable: 'custom',
+					},
+					form: {
+						rules: [{ required: true, message: '状态必填' }],
+						value: true,
+					},
+				},
+				update_datetime: {
+					title: '更新时间',
+					type: 'text',
+					search: { show: false },
+					column: {
+						width: 170,
+						sortable: 'custom',
+					},
+					form: {
+						show: false,
+						component: {
+							placeholder: '输入关键词搜索',
+						},
+					},
+				},
+				create_datetime: {
+					title: '创建时间',
+					type: 'text',
+					search: { show: false },
+					column: {
+						sortable: 'custom',
+						width: 170,
+					},
+					form: {
+						show: false,
+						component: {
+							placeholder: '输入关键词搜索',
+						},
+					},
+				},
+				// description: {
+				//     title: '备注',
+				//     type: 'textarea',
+				//     search: {show: false},
+				//     form: {
+				//         component: {
+				//             maxlength: 200,
+				//             placeholder: '输入备注',
+				//         },
+				//     },
+				// },
+			},
+		},
+	};
 };
diff --git a/web/src/views/system/user/crud.tsx b/web/src/views/system/user/crud.tsx
index 06c32c3..84180e9 100644
--- a/web/src/views/system/user/crud.tsx
+++ b/web/src/views/system/user/crud.tsx
@@ -31,7 +31,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 			rowHandle: {
 				//固定右侧
 				fixed: 'right',
-				width: 200,
+				width: 140,
 				buttons: {
 					view: {
 						show: false,
diff --git a/web/src/views/system/user/index.vue b/web/src/views/system/user/index.vue
index 841763d..7d130b6 100644
--- a/web/src/views/system/user/index.vue
+++ b/web/src/views/system/user/index.vue
@@ -3,14 +3,33 @@
 		<el-row class="mx-2">
 			<el-col :span="4" class="p-1">
 				<el-card :body-style="{ height: '100%' }">
+					<p class="font-mono font-black text-center text-xl pb-5">
+						用户列表
+						<el-tooltip effect="dark" :content="content" placement="right">
+							<el-icon> <QuestionFilled /> </el-icon>
+						</el-tooltip>
+					</p>
 					<el-input v-model="filterText" :placeholder="placeholder" />
-
-					<el-tree ref="treeRef" class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode" />
+					<el-tree
+						ref="treeRef"
+						class="font-mono font-bold leading-6 text-7xl"
+						:data="data"
+						:props="treeProps"
+						:filter-node-method="filterNode"
+						:load="loadNode"
+						lazy
+						icon="ArrowRightBold"
+						:indent="12"
+					>
+						<template #default="{ node, data }">
+							<span class="text-center font-black text-xl">{{ node.label }}</span>
+						</template>
+					</el-tree>
 				</el-card>
 			</el-col>
-			<el-col :span="20" :offset="0" class="p-1">
+			<el-col :span="20" class="p-1">
 				<el-card :body-style="{ height: '100%' }">
-					<fs-crud class="h-full w-full" ref="crudRef" v-bind="crudBinding"> </fs-crud>
+					<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
 				</el-card>
 			</el-col>
 		</el-row>
@@ -18,38 +37,44 @@
 </template>
 
 <script lang="ts" setup>
-import * as api from './api';
-import { ElTree } from 'element-plus';
-import { ref, onMounted, computed, watch } from 'vue';
 import { useExpose, useCrud } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
-import MenuButton from './components/menuButton/index.vue';
+import * as api from './api';
+import { ElTree } from 'element-plus';
+import { ref, onMounted, watch, toRaw, defineAsyncComponent } from 'vue';
 import XEUtils from 'xe-utils';
-const menuButtonRef = ref();
-defineExpose(menuButtonRef);
-// crud组件的ref
-const crudRef = ref();
-// crud 配置的ref
-const crudBinding = ref();
-// 暴露的方法
-const { crudExpose } = useExpose({ crudRef, crudBinding });
-// 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose, menuButtonRef });
-// 初始化crud配置
-const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
+import { errorMessage, successMessage } from '../../../utils/message';
 
 interface Tree {
 	id: number;
-	label: string;
+	name: string;
+	status: boolean;
 	children?: Tree[];
 }
-const placeholder = ref('请输入用户');
+
+interface APIResponseData {
+	code?: number;
+	data: [];
+	msg?: string;
+}
+
+// 引入组件
+const placeholder = ref('请输入用户名称');
 const filterText = ref('');
 const treeRef = ref<InstanceType<typeof ElTree>>();
 
-const defaultProps = {
+const treeProps = {
 	children: 'children',
 	label: 'name',
+	icon: 'icon',
+	isLeaf: (data: Tree[], node: Node) => {
+		// @ts-ignore
+		if (node.data.hasChild) {
+			return false;
+		} else {
+			return true;
+		}
+	},
 };
 
 watch(filterText, (val) => {
@@ -58,22 +83,32 @@ watch(filterText, (val) => {
 
 const filterNode = (value: string, data: Tree) => {
 	if (!value) return true;
-	return data.label.includes(value);
+	return toRaw(data).name.indexOf(value) !== -1;
+};
+
+// 懒加载
+const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
+	// @ts-ignore
+	if (node.level !== 0) {
+		// @ts-ignore
+		api.GetList({ parent: node.data.id }).then((res: APIResponseData) => {
+			resolve(res.data);
+			console.log(res.data);
+		});
+	}
 };
 
 let data = ref([]);
 
-interface APIResponseData {
-	code?: number;
-	data: [];
-	msg?: string;
-}
+const content = `
+1.用户数据支持懒加载;
+`;
 
 const getData = () => {
 	api.GetList({}).then((ret: APIResponseData) => {
 		const responseData = ret.data;
 		const result = XEUtils.toArrayTree(responseData, {
-			parentKey: 'parent_id',
+			parentKey: 'parent',
 			children: 'children',
 			strict: true,
 		});
@@ -83,9 +118,24 @@ const getData = () => {
 
 // 页面打开后获取列表数据
 onMounted(() => {
-	crudExpose.doRefresh();
 	getData();
 });
+
+// crud组件的ref
+const crudRef = ref();
+// crud 配置的ref
+const crudBinding = ref();
+// 暴露的方法
+const { crudExpose } = useExpose({ crudRef, crudBinding });
+// 你的crud配置
+const { crudOptions } = createCrudOptions({ crudExpose });
+// 初始化crud配置
+const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
+
+// 页面打开后获取列表数据
+onMounted(() => {
+	crudExpose.doRefresh();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/web/src/views/system/whiteList/crud.tsx b/web/src/views/system/whiteList/crud.tsx
index a9d0545..78580ef 100644
--- a/web/src/views/system/whiteList/crud.tsx
+++ b/web/src/views/system/whiteList/crud.tsx
@@ -28,13 +28,31 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				editRequest,
 				delRequest,
 			},
+			rowHandle: {
+				//固定右侧
+				fixed: 'right',
+				width: 200,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
+				},
+			},
 			form: {
-				col: {span: 24},
-                labelWidth: '110px',
-                wrapper: {
-                    is: 'el-dialog',
-                    width: '600px',
-                },
+				col: { span: 24 },
+				labelWidth: '110px',
+				wrapper: {
+					is: 'el-dialog',
+					width: '600px',
+				},
 			},
 			columns: {
 				_index: {
@@ -78,7 +96,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				},
 				method: {
 					title: '请求方式',
-					sortable: "custom",
+					sortable: 'custom',
 					search: {
 						disabled: false,
 					},
@@ -104,7 +122,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 							{
 								label: 'PATCH',
 								value: 4,
-							}
+							},
 						],
 					}),
 					form: {
@@ -125,7 +143,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				},
 				url: {
 					title: '接口地址',
-					sortable: "custom",
+					sortable: 'custom',
 					search: {
 						disabled: true,
 					},
@@ -167,11 +185,11 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 							class: { yxtInput: true },
 						},
 						helper: {
-							position: "label",
+							position: 'label',
 							tooltip: {
-								placement: "top-start"
+								placement: 'top-start',
 							},
-							text: "请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/"
+							text: '请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/',
 						},
 					},
 				},