feat: 部门管理新增用户列表

web/src/views/system/dept/components/DeptFormCom.vue

@@ -4,8 +4,10 @@
     <el-form-item label="部门ID" prop="id">
       <el-input v-model="deptFormData.id" disabled />
     </el-form-item>
-    <el-form-item label="父级部门ID" prop="parent">
-      <el-input v-model="deptFormData.parent" />
+    <el-form-item label="父级部门" prop="parent">
+      <el-select v-model="deptFormData.parent" style="width: 100%">
+        <el-option v-for="item in deptAllList" :key="item.id" :label="item.name" :value="item.id" />
+      </el-select>
     </el-form-item>
     <el-form-item required label="部门名称" prop="name">
       <el-input v-model="deptFormData.name" />
@@ -38,9 +40,9 @@
 <script lang="ts" setup>
 import { reactive, ref, onMounted } from 'vue';
 import { ElForm, FormRules } from 'element-plus';
-import { AddObj, UpdateObj } from '../api';
-import { successMessage } from '../../../../utils/message';
-import { DeptFormDataType, TreeItemType } from '../types';
+import { getAllDeptList, AddObj, UpdateObj } from '../api';
+import { successNotification } from '../../../../utils/message';
+import { DeptFormDataType, TreeItemType, DeptListType } from '../types';
 
 interface IProps {
   initFormData: TreeItemType | null;
@@ -57,6 +59,7 @@ const props = withDefaults(defineProps<IProps>(), {
 })
 const emit = defineEmits(['drawerClose'])
 
+let deptAllList = ref<DeptListType[]>([]);
 let deptFormData = reactive<DeptFormDataType>({
   id: '',
   key: '',
@@ -70,6 +73,13 @@ let deptFormData = reactive<DeptFormDataType>({
 })
 let deptBtnLoading = ref(false)
 
+const getData = async () => {
+  const res = await getAllDeptList();
+  if (res?.code === 2000) {
+    deptAllList.value = res.data
+  }
+}
+
 const setDeptFormData = () => {
   if (props.initFormData?.id) {
     deptFormData.id = props.initFormData?.id;
@@ -95,7 +105,7 @@ const handleUpdateMenu = () => {
         res = await AddObj(deptFormData)
       }
       if (res?.code === 2000) {
-        successMessage(res.msg as string);
+        successNotification(res.msg as string);
         handleClose('submit');
       }
     } finally {
@@ -109,7 +119,8 @@ const handleClose = (type: string = '') => {
   formRef.value?.resetFields();
 };
 
-onMounted(() => {
+onMounted(async () => {
+  await getData()
   setDeptFormData()
 })
 </script>

web/src/views/system/dept/components/DeptUserCom/api.ts

@@ -0,0 +1,58 @@
+import { request, downloadFile } from '/@/utils/service';
+import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+
+export const apiPrefix = '/api/system/user/';
+
+export function GetDept(query: PageQuery) {
+	return request({
+		url: "/api/system/dept/dept_lazy_tree/",
+		method: 'get',
+		params: query,
+	});
+}
+
+export function GetList(query: PageQuery) {
+	return request({
+		url: apiPrefix,
+		method: 'get',
+		params: query,
+	});
+}
+export function GetObj(id: InfoReq) {
+	return request({
+		url: apiPrefix + id,
+		method: 'get',
+	});
+}
+
+export function AddObj(obj: AddReq) {
+	return request({
+		url: apiPrefix,
+		method: 'post',
+		data: obj,
+	});
+}
+
+export function UpdateObj(obj: EditReq) {
+	return request({
+		url: apiPrefix + obj.id + '/',
+		method: 'put',
+		data: obj,
+	});
+}
+
+export function DelObj(id: DelReq) {
+	return request({
+		url: apiPrefix + id + '/',
+		method: 'delete',
+		data: { id },
+	});
+}
+
+export function exportData(params: any) {
+	return downloadFile({
+		url: apiPrefix + 'export_data/',
+		params: params,
+		method: 'get'
+	})
+}

web/src/views/system/dept/components/DeptUserCom/crud.tsx

@@ -0,0 +1,386 @@
+import { inject } from 'vue';
+import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
+import { request } from '/@/utils/service';
+import * as api from './api';
+import { dictionary } from '/@/utils/dictionary';
+import { successMessage } from '/@/utils/message';
+
+export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
+		const res = await api.GetList(query);
+		/**
+		 * 处理crud警告：Invalid prop: type check failed for prop "name". Expected String with value "2", got Number with value 2.
+		 */
+		res.data.forEach((item: any) => {
+			if (item.role && Array.isArray(item.role) && item.role.length > 0) {
+				item.role = item.role.map((r: number) => String(r));
+			}
+		});
+		return res;
+	};
+	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 exportRequest = async (query: UserPageQuery) => {
+		return await api.exportData(query);
+	};
+
+	//权限判定
+	const hasPermissions: any = inject('$hasPermissions');
+
+	return {
+		crudOptions: {
+			table: {
+				remove: {
+					confirmMessage: '是否删除该用户？',
+				},
+			},
+			request: {
+				pageRequest,
+				addRequest,
+				editRequest,
+				delRequest,
+			},
+			actionbar: {
+				buttons: {
+					add: {
+						show: hasPermissions('user:Create'),
+						// show:true
+					},
+					export: {
+						text: '导出', //按钮文字
+						title: '导出', //鼠标停留显示的信息
+						click() {
+							return exportRequest(crudExpose!.getSearchFormData());
+						},
+					},
+				},
+			},
+			search: {
+				container: {
+					action: {
+						col: {
+							span: 6,
+						},
+					},
+				},
+			},
+			rowHandle: {
+				//固定右侧
+				fixed: 'right',
+				width: 250,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						show: hasPermissions('user:Update'),
+					},
+					remove: {
+						show: hasPermissions('user:Delete'),
+					},
+					custom: {
+						text: '重设密码',
+						type: 'primary',
+						show: hasPermissions('user:ResetPassword'),
+						tooltip: {
+							placement: 'top',
+							content: '重设密码',
+						},
+						click: (ctx: any) => {
+							const { row } = ctx;
+						},
+					},
+				},
+			},
+			columns: {
+				_index: {
+					title: '序号',
+					form: { show: false },
+					column: {
+						type: 'index',
+						align: 'center',
+						width: '70px',
+						columnSetDisabled: true, //禁止在列设置中选择
+					},
+				},
+				username: {
+					title: '账号',
+					search: {
+						show: true,
+					},
+					type: 'input',
+					column: {
+						minWidth: 100, //最小列宽
+					},
+					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',
+					column: {
+						minWidth: 100, //最小列宽
+					},
+					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;
+							});
+						},
+					}),
+					column: {
+						minWidth: 150, //最小列宽
+					},
+					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;
+							});
+						},
+					}),
+					column: {
+						minWidth: 100, //最小列宽
+					},
+					form: {
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '必填项',
+							},
+						],
+						component: {
+							multiple: true,
+							filterable: true,
+							placeholder: '请选择角色',
+						},
+					},
+				},
+				mobile: {
+					title: '手机号码',
+					search: {
+						show: true,
+					},
+					type: 'input',
+					column: {
+						minWidth: 120, //最小列宽
+					},
+					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-select',
+					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'),
+					}),
+					column: {
+						minWidth: 100, //最小列宽
+					},
+					form: {
+						show: false,
+						value: 0,
+						component: {
+							span: 12,
+						},
+					},
+				},
+				is_active: {
+					title: '锁定',
+					search: {
+						show: true,
+					},
+					type: 'dict-radio',
+					column: {
+						component: {
+							name: 'fs-dict-switch',
+							activeText: '',
+							inactiveText: '',
+							style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6',
+							onChange: compute((context) => {
+								return () => {
+									api.UpdateObj(context.row).then((res: APIResponseData) => {
+										successMessage(res.msg as string);
+									});
+								};
+							}),
+						},
+					},
+					dict: dict({
+						data: dictionary('button_status_bool'),
+					}),
+				},
+				avatar: {
+					title: '头像',
+					type: 'avatar-cropper',
+					form: {
+						show: false,
+					},
+				},
+			},
+		},
+	};
+};

web/src/views/system/dept/components/DeptUserCom/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <fs-crud ref="crudRef" v-bind="crudBinding">
+    <template #actionbar-right>
+      <importExcel api="api/system/user/">导入 </importExcel>
+    </template>
+  </fs-crud>
+</template>
+
+<script lang="ts" setup name="user">
+import { ref, onMounted } from 'vue';
+import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './crud';
+import importExcel from '/@/components/importExcel/index.vue'
+
+// 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,
+  context: {}
+});
+
+/**
+ * 部门切换刷新用户列表
+ */
+const handleDoRefreshUser = (id: string) => {
+  crudExpose.doSearch({ form: { dept: id } });
+}
+
+onMounted(() => {
+  crudExpose.doRefresh();
+});
+
+defineExpose({
+  handleDoRefreshUser
+})
+</script>
+
+<style lang="scss" scoped>
+.el-row {
+  height: 100%;
+
+  .el-col {
+    height: 100%;
+  }
+}
+
+.el-card {
+  height: 100%;
+}
+
+.font-normal {
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+}
+</style>

web/src/views/system/dept/components/TreeCom.vue

@@ -67,7 +67,7 @@ import { ElTree } from 'element-plus';
 import { getElementLabelLine } from "element-tree-line";
 import { Search } from '@element-plus/icons-vue';
 import { lazyLoadDept } from '../api';
-import { warningMessage } from '../../../../utils/message';
+import { warningNotification } from '../../../../utils/message';
 import { TreeItemType, APIResponseData } from '../types';
 import type Node from 'element-plus/es/components/tree/src/model/node';
 
@@ -85,7 +85,7 @@ const treeProps = {
 withDefaults(defineProps<IProps>(), {
   treeData: () => [],
 })
-const emit = defineEmits(['setFormInitData', 'deleteDept', 'updateDept'])
+const emit = defineEmits(['treeClick', 'deleteDept', 'updateDept'])
 
 let filterVal = ref('');
 let showTotalNum = ref(false)
@@ -96,11 +96,17 @@ watch(filterVal, (val) => {
   treeRef.value!.filter(val);
 });
 
+/**
+ * 部门树的搜索事件
+ */
 const handleFilterTreeNode = (value: string, data: TreeItemType) => {
   if (!value) return true;
   return toRaw(data).name?.indexOf(value) !== -1;
 };
 
+/**
+ * 部门树的懒加载
+ */
 const handleLoadNode = (node: Node, resolve: Function) => {
   if (node.level !== 0) {
     lazyLoadDept({ parent: node.data.id }).then((res: APIResponseData) => {
@@ -109,9 +115,12 @@ const handleLoadNode = (node: Node, resolve: Function) => {
   }
 };
 
+/**
+ * 部门的点击事件
+ */
 const handleNodeClick = (data: TreeItemType) => {
   treeSelectDept.value = data
-  emit('setFormInitData', data)
+  emit('treeClick', data.id)
 };
 
 /**
@@ -120,7 +129,7 @@ const handleNodeClick = (data: TreeItemType) => {
 const handleUpdateMenu = (type: string) => {
   if (type === 'update') {
     if (!treeSelectDept.value.id) {
-      warningMessage('请选择菜单！')
+      warningNotification('请选择菜单！')
       return
     }
     emit('updateDept', type, treeSelectDept.value)
@@ -134,7 +143,7 @@ const handleUpdateMenu = (type: string) => {
  */
 const handleDeleteDept = () => {
   if (!treeSelectDept.value.id) {
-    warningMessage('请选择菜单！')
+    warningNotification('请选择菜单！')
     return
   }
   emit('deleteDept', treeSelectDept.value.id, () => {