From df74c792f6cb9cf54d649f12e88fd8de04017d1b Mon Sep 17 00:00:00 2001
From: H0nGzA1 <2505811377@qq.com>
Date: Fri, 24 Mar 2023 18:45:58 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E7=AE=A1=E7=90=86=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/system/user/crud.tsx  | 586 ++++++++++++++--------------
 web/src/views/system/user/index.vue |  83 +++-
 2 files changed, 377 insertions(+), 292 deletions(-)

diff --git a/web/src/views/system/user/crud.tsx b/web/src/views/system/user/crud.tsx
index 3b7cd32..a563180 100644
--- a/web/src/views/system/user/crud.tsx
+++ b/web/src/views/system/user/crud.tsx
@@ -1,297 +1,305 @@
-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 * 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';
 interface CreateCrudOptionsTypes {
-    crudOptions: CrudOptions;
+	crudOptions: CrudOptions;
 }
 
 export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
-    const pageRequest = async (query: PageQuery) => {
-        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: {
-                    orderExample: {
-                        show:false,
-                        text: "重置密码",
-                        click: () => {
-                            //console.log("reset password")
-                        }
-                    }
-                },
-
-            },
-            columns: {
-                _index: {
-                    title: '序号',
-                    form: { show: false },
-                    column: {
-                        type: 'index',
-                        align: 'center',
-                        width: '70px',
-                        columnSetDisabled: true, //禁止在列设置中选择
-                    },
-                },
-                username: {
-                    title: '账号',
-                    search: {
-                        show: true,
-                    },
-                    minWidth: 100,
-                    type: 'input',
-                    form: {
-                        rules: [ // 表单校验规则
-                            {
-                                required: true,
-                                message: '账号必填项'
-                            }
-                        ],
-                        component: {
-                            placeholder: '请输入账号'
-                        },
-                    }
-                },
-                password: {
-                    title: '密码',
-                    type: 'input',
-                    column: {
-                        show: false
-                    },
-                    editForm: {
-                        show: false
-                    },
-                    form: {
-                        rules: [ // 表单校验规则
-                            {
-                                required: true,
-                                message: '密码必填项'
-                            }
-                        ],
-                        component: {
-                            span: 12,
-                            showPassword: true,
-                            placeholder: '请输入密码'
-                        },
-                        // value: vm.systemConfig('base.default_password'),
-                    },
-                    /* valueResolve(row, key) {
+	const pageRequest = async (query: PageQuery) => {
+		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: 300,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
+				},
+			},
+			columns: {
+				_index: {
+					title: '序号',
+					form: { show: false },
+					column: {
+						type: 'index',
+						align: 'center',
+						width: '70px',
+						columnSetDisabled: true, //禁止在列设置中选择
+					},
+				},
+				username: {
+					title: '账号',
+					search: {
+						show: true,
+					},
+					minWidth: 100,
+					type: 'input',
+					form: {
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '账号必填项',
+							},
+						],
+						component: {
+							placeholder: '请输入账号',
+						},
+					},
+				},
+				password: {
+					title: '密码',
+					type: 'input',
+					column: {
+						show: false,
+					},
+					editForm: {
+						show: false,
+					},
+					form: {
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '密码必填项',
+							},
+						],
+						component: {
+							span: 12,
+							showPassword: true,
+							placeholder: '请输入密码',
+						},
+						// value: vm.systemConfig('base.default_password'),
+					},
+					/* valueResolve(row, key) {
                         if (row.password) {
                             row.password = vm.$md5(row.password)
                         }
                     } */
-                },
-                name: {
-                    title: '姓名',
-                    search: {
-                        show: true,
-                    },
-                    type: 'input',
-                    form: {
-                        rules: [ // 表单校验规则
-                            {
-                                required: true,
-                                message: '姓名必填项'
-                            }
-                        ],
-                        component: {
-                            span: 12,
-                            placeholder: '请输入姓名'
-                        },
-                    }
-                },
-                dept: {
-                    title: '部门',
-                    search: {
-                        disabled: true
-                    },
-                    type: 'dict-tree',
-                    dict: dict({
-                        isTree: true,
-                        url: '/api/system/dept/all_dept/',
-                        value: 'id',
-                        label: 'name',
-                        getData: async ({ url }: { url: string }) => {
-                            return request({
-                                url: url,
-                            }).then((ret: any) => {
-                                return ret.data
-                            })
-                        }
-                    }),
-                    form: {
-                        rules: [ // 表单校验规则
-                            {
-                                required: true,
-                                message: '必填项'
-                            }
-                        ],
-                        component: {
-                            filterable: true,
-                            placeholder: '请选择',
-                            props: {
-                                props: {
-                                    value: "id",
-                                    label: "name",
-                                }
-                            }
-                        },
-                    },
-                },
-                role: {
-                    title: '角色',
-                    search: {
-                        disabled: true
-                    },
-                    type: 'dict-select',
-                    dict: dict({
-                        url: '/api/system/role/',
-                        value: 'id',
-                        label: 'name',
-                        isTree: true,
-                        getData: async ({ url }: { url: string }) => {
-                            return request({
-                                url: url,
-                                params: {
-                                    page: 1,
-                                    limit: 10
-                                }
-                            }).then((ret: any) => {
-                                return ret.data
-                            })
-                        }
-                    }),
-                    form: {
-                        rules: [ // 表单校验规则
-                            {
-                                required: true,
-                                message: '必填项'
-                            }
-                        ],
-                        component: {
-                            multiple: true,
-                            filterable: true,
-                            placeholder: '请选择角色'
-                        },
-                    }
-                },
-                mobile: {
-                    title: '手机号码',
-                    search: {
-                        show: true,
-                    },
-                    type: 'input',
-                    form: {
-                        rules: [
-                            {
-                                max: 20,
-                                message: '请输入正确的手机号码',
-                                trigger: 'blur'
-                            },
-                            {
-                                pattern: /^1[3-9]\d{9}$/,
-                                message: '请输入正确的手机号码'
-                            }
-                        ],
-                        component: {
-                            placeholder: '请输入手机号码'
-                        }
-                    }
-                },
-                email: {
-                    title: '邮箱',
-                    column:{
-                        width:260
-                    },
-                    form: {
-                        rules: [
-                            {
-                                type: 'email',
-                                message: '请输入正确的邮箱地址',
-                                trigger: ['blur', 'change']
-                            }
-                        ],
-                        component: {
-                            placeholder: '请输入邮箱'
-                        }
-                    }
-                },
-                gender: {
-                    title: '性别',
-                    type: 'dict-radio',
-                    dict: dict({
-                        data: dictionary('gender')
-                    }),
-                    form: {
-                        value: 1,
-                        component: {
-                            span: 12
-                        }
-                    },
-                    component: { props: { color: 'auto' } } // 自动染色
-                },
-                user_type: {
-                    title: '用户类型',
-                    search: {
-                        show: true,
-                    },
-                    type: 'dict-select',
-                    dict: dict({
-                        data: dictionary('user_type')
-                    }),
-                    form: {
-                        show: false,
-                        value: 0,
-                        component: {
-                            span: 12
-                        }
-                    }
-                },
-                is_active: {
-                    title: '状态',
-                    search: {
-                        show: true,
-                    },
-                    type: 'dict-radio',
-                    dict: dict({
-                        data: dictionary('button_status_bool')
-                    }),
-                    form: {
-                        value: true,
-                        component: {
-                            span: 12
-                        }
-                    }
-                },
-                avatar: {
-                    title: '头像',
-                    type: 'avatar-cropper',
-                    form:{
-                        show:false
-                    }
-                }
-            }
-        }
-    };
-}
+				},
+				name: {
+					title: '姓名',
+					search: {
+						show: true,
+					},
+					type: 'input',
+					form: {
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '姓名必填项',
+							},
+						],
+						component: {
+							span: 12,
+							placeholder: '请输入姓名',
+						},
+					},
+				},
+				dept: {
+					title: '部门',
+					search: {
+						disabled: true,
+					},
+					type: 'dict-tree',
+					dict: dict({
+						isTree: true,
+						url: '/api/system/dept/all_dept/',
+						value: 'id',
+						label: 'name',
+						getData: async ({ url }: { url: string }) => {
+							return request({
+								url: url,
+							}).then((ret: any) => {
+								return ret.data;
+							});
+						},
+					}),
+					form: {
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '必填项',
+							},
+						],
+						component: {
+							filterable: true,
+							placeholder: '请选择',
+							props: {
+								props: {
+									value: 'id',
+									label: 'name',
+								},
+							},
+						},
+					},
+				},
+				role: {
+					title: '角色',
+					search: {
+						disabled: true,
+					},
+					type: 'dict-select',
+					dict: dict({
+						url: '/api/system/role/',
+						value: 'id',
+						label: 'name',
+						isTree: true,
+						getData: async ({ url }: { url: string }) => {
+							return request({
+								url: url,
+								params: {
+									page: 1,
+									limit: 10,
+								},
+							}).then((ret: any) => {
+								return ret.data;
+							});
+						},
+					}),
+					form: {
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '必填项',
+							},
+						],
+						component: {
+							multiple: true,
+							filterable: true,
+							placeholder: '请选择角色',
+						},
+					},
+				},
+				mobile: {
+					title: '手机号码',
+					search: {
+						show: true,
+					},
+					type: 'input',
+					form: {
+						rules: [
+							{
+								max: 20,
+								message: '请输入正确的手机号码',
+								trigger: 'blur',
+							},
+							{
+								pattern: /^1[3-9]\d{9}$/,
+								message: '请输入正确的手机号码',
+							},
+						],
+						component: {
+							placeholder: '请输入手机号码',
+						},
+					},
+				},
+				email: {
+					title: '邮箱',
+					column: {
+						width: 260,
+					},
+					form: {
+						rules: [
+							{
+								type: 'email',
+								message: '请输入正确的邮箱地址',
+								trigger: ['blur', 'change'],
+							},
+						],
+						component: {
+							placeholder: '请输入邮箱',
+						},
+					},
+				},
+				gender: {
+					title: '性别',
+					type: 'dict-radio',
+					dict: dict({
+						data: dictionary('gender'),
+					}),
+					form: {
+						value: 1,
+						component: {
+							span: 12,
+						},
+					},
+					component: { props: { color: 'auto' } }, // 自动染色
+				},
+				user_type: {
+					title: '用户类型',
+					search: {
+						show: true,
+					},
+					type: 'dict-select',
+					dict: dict({
+						data: dictionary('user_type'),
+					}),
+					form: {
+						show: false,
+						value: 0,
+						component: {
+							span: 12,
+						},
+					},
+				},
+				is_active: {
+					title: '状态',
+					search: {
+						show: true,
+					},
+					type: 'dict-radio',
+					dict: dict({
+						data: dictionary('button_status_bool'),
+					}),
+					form: {
+						value: true,
+						component: {
+							span: 12,
+						},
+					},
+				},
+				avatar: {
+					title: '头像',
+					type: 'avatar-cropper',
+					form: {
+						show: false,
+					},
+				},
+			},
+		},
+	};
+};
diff --git a/web/src/views/system/user/index.vue b/web/src/views/system/user/index.vue
index 1fa8634..dd21265 100644
--- a/web/src/views/system/user/index.vue
+++ b/web/src/views/system/user/index.vue
@@ -1,13 +1,32 @@
 <template>
 	<fs-page>
-		<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+		<el-row>
+			<el-col :span="4">
+				<el-card :body-style="{ height: '100%' }">
+					<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-card>
+			</el-col>
+			<el-col :span="20" :offset="0">
+				<el-card :body-style="{ height: '100%' }">
+					<fs-crud class="h-full w-full" 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 * 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 XEUtils from 'xe-utils';
+const menuButtonRef = ref();
+defineExpose(menuButtonRef);
 // crud组件的ref
 const crudRef = ref();
 // crud 配置的ref
@@ -15,12 +34,70 @@ const crudBinding = ref();
 // 暴露的方法
 const { crudExpose } = useExpose({ crudRef, crudBinding });
 // 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose });
+const { crudOptions } = createCrudOptions({ crudExpose, menuButtonRef });
 // 初始化crud配置
 const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
 
+interface Tree {
+	id: number;
+	label: string;
+	children?: Tree[];
+}
+const placeholder = ref('请输入用户');
+const filterText = ref('');
+const treeRef = ref<InstanceType<typeof ElTree>>();
+
+const defaultProps = {
+	children: 'children',
+	label: 'name',
+};
+
+watch(filterText, (val) => {
+	treeRef.value!.filter(val);
+});
+
+const filterNode = (value: string, data: Tree) => {
+	if (!value) return true;
+	return data.label.includes(value);
+};
+
+let data = ref([]);
+
+interface APIResponseData {
+	code?: number;
+	data: [];
+	msg?: string;
+}
+
+const getData = () => {
+	api.GetList({}).then((ret: APIResponseData) => {
+		const responseData = ret.data;
+		const result = XEUtils.toArrayTree(responseData, {
+			parentKey: 'parent_id',
+			children: 'children',
+			strict: true,
+		});
+		data.value = result;
+	});
+};
+
 // 页面打开后获取列表数据
 onMounted(() => {
 	crudExpose.doRefresh();
+	getData();
 });
 </script>
+
+<style lang="scss" scoped>
+.el-row {
+	height: 100%;
+
+	.el-col {
+		height: 100%;
+	}
+}
+
+.el-card {
+	height: 100%;
+}
+</style>