feat：完善 dept 部门 60%（新增、修改、删除）

2025-03-29 15:10:08 +08:00
parent 32e0ce0325
commit d8f4e0a1aa
10 changed files with 736 additions and 91 deletions
--- a/apps/web-antd/src/views/system/dept/data.ts
+++ b/apps/web-antd/src/views/system/dept/data.ts
@@ -3,67 +3,125 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn } from '#/adapter/vxe-table';
 import type { SystemDeptApi } from '#/api/system/dept';

+import { $t } from '#/locales';
 import { z } from '#/adapter/form';
 import { getDeptList } from '#/api/system/dept';
-import { $t } from '#/locales';
-import { DICT_TYPE } from '#/utils/dict';
+import { getSimpleUserList } from '#/api/system/user';
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+import { CommonStatusEnum } from '#/utils/constants';
+import { handleTree } from '#/utils/tree';

 /** 获取编辑表单的字段配置 */
-// TODO @芋艿：表单的整理
 export function useSchema(): VbenFormSchema[] {
  return [
    {
      component: 'ApiTreeSelect',
      componentProps: {
        allowClear: true,
-        api: getDeptList,
+        api: async () => {
+          const data = await getDeptList();
+          data.unshift({
+            id: 0,
+            name: '顶级部门',
+          });
+          return handleTree(data);
+        },
        class: 'w-full',
        labelField: 'name',
        valueField: 'id',
-        childrenField: 'children'
+        childrenField: 'children',
+        placeholder: '请选择上级部门',
+        treeDefaultExpandAll: true,
      },
      fieldName: 'parentId',
      label: '上级部门',
+      // TODO @芋艿：number 的必填，写起来有点麻烦，后续得研究下；
+      rules: z
+        .number()
+        .nullable()
+        .refine((val) => val != null && val >= 0, '上级部门不能为空')
+        .default(null),
    },
    {
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入部门名称',
+      },
      fieldName: 'name',
-      label: $t('system.dept.deptName'),
+      label: '部门名称',
      rules: z
        .string()
-        .min(2, $t('ui.formRules.minLength', [$t('system.dept.deptName'), 2]))
-        .max(
-          20,
-          $t('ui.formRules.maxLength', [$t('system.dept.deptName'), 20]),
-        ),
+        .min(2, $t('ui.formRules.minLength', ['部门名称', 2]))
+        .max(20, $t('ui.formRules.maxLength', ['部门名称', 20])),
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        class: 'w-full',
+        controlsPosition: 'right',
+        placeholder: '请输入显示排序',
+      },
+      fieldName: 'sort',
+      label: '显示排序',
+      rules: z
+        .number()
+        .nullable()
+        .refine((val) => val != null && val >= 0, '显示排序不能为空')
+        .default(null),
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        class: 'w-full',
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择负责人',
+        allowClear: true,
+      },
+      fieldName: 'leaderUserId',
+      label: '负责人',
+      rules: z.number().optional(),
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        maxLength: 11,
+        placeholder: '请输入联系电话',
+      },
+      fieldName: 'phone',
+      label: '联系电话',
+      rules: z
+        .string()
+        // TODO @芋艿：未来怎么拓展一个手机的
+        .regex(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/, '请输入正确的手机号码')
+        .optional(),
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        maxLength: 50,
+        placeholder: '请输入邮箱',
+      },
+      fieldName: 'email',
+      label: '邮箱',
+      rules: z
+        .string()
+        .email('请输入正确的邮箱地址')
+        .max(50, $t('ui.formRules.maxLength', ['邮箱', 50]))
+        .optional(),
    },
    {
      component: 'RadioGroup',
      componentProps: {
        buttonStyle: 'solid',
-        options: [
-          { label: $t('common.enabled'), value: 1 },
-          { label: $t('common.disabled'), value: 0 },
-        ],
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
        optionType: 'button',
      },
-      defaultValue: 1,
      fieldName: 'status',
-      label: $t('system.dept.status'),
-    },
-    {
-      component: 'Textarea',
-      componentProps: {
-        maxLength: 50,
-        rows: 3,
-        showCount: true,
-      },
-      fieldName: 'remark',
-      label: $t('system.dept.remark'),
-      rules: z
-        .string()
-        .max(50, $t('ui.formRules.maxLength', [$t('system.dept.remark'), 50]))
-        .optional(),
+      label: '状态',
+      rules: z.number().default(CommonStatusEnum.ENABLE),
    },
  ];
 }
@@ -93,7 +151,10 @@ export function useColumns(
      minWidth: 100,
    },
    {
-      cellRender: { name: 'CellDict', props: { type: DICT_TYPE.COMMON_STATUS } },
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
      field: 'status',
      title: '状态',
      minWidth: 100,
--- a/apps/web-antd/src/views/system/dept/index.vue
+++ b/apps/web-antd/src/views/system/dept/index.vue
@@ -1,5 +1,8 @@
 <script lang="ts" setup>
-import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
 import type { SystemDeptApi } from '#/api/system/dept';

 import { $t } from '#/locales';
@@ -25,7 +28,7 @@ function onEdit(row: SystemDeptApi.SystemDept) {

 /** 添加下级部门 */
 function onAppend(row: SystemDeptApi.SystemDept) {
-  formModalApi.setData({ pid: row.id }).open();
+  formModalApi.setData({ parentId: row.id }).open();
 }

 /** 创建新部门 */
@@ -34,24 +37,22 @@ function onCreate() {
 }

 /** 删除部门 */
-function onDelete(row: SystemDeptApi.SystemDept) {
+async function onDelete(row: SystemDeptApi.SystemDept) {
  const hideLoading = message.loading({
    content: $t('ui.actionMessage.deleting', [row.name]),
    duration: 0,
    key: 'action_process_msg',
  });
-  // TODO @芋艿：改成 await 写法
-  deleteDept(row.id as number)
-    .then(() => {
-      message.success({
-        content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-        key: 'action_process_msg',
-      });
-      refreshGrid();
-    })
-    .catch(() => {
-      hideLoading();
+  try {
+    await deleteDept(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_process_msg',
    });
+    refreshGrid();
+  } catch (error) {
+    hideLoading();
+  }
 }

 /** 表格操作按钮的回调函数 */
--- a/apps/web-antd/src/views/system/dept/modules/form.vue
+++ b/apps/web-antd/src/views/system/dept/modules/form.vue
@@ -7,7 +7,7 @@ import { useVbenModal } from '@vben/common-ui';
 import { Button } from 'ant-design-vue';

 import { useVbenForm } from '#/adapter/form';
-import { createDept, updateDept } from '#/api/system/dept';
+import { createDept, updateDept, getDept } from '#/api/system/dept';
 import { $t } from '#/locales';

 import { useSchema } from '../data';
@@ -21,7 +21,7 @@ const getTitle = computed(() => {
 });

 const [Form, formApi] = useVbenForm({
-  layout: 'vertical',
+  layout: 'horizontal',
  schema: useSchema(),
  showDefaultActions: false,
 });
@@ -31,37 +31,42 @@ function resetForm() {
  formApi.setValues(formData.value || {});
 }

-// TODO @芋艿：这里没接入
 const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    const { valid } = await formApi.validate();
-    if (valid) {
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    const data = (await formApi.getValues()) as SystemDeptApi.SystemDept;
+    try {
+      await (formData.value?.id
+        ? updateDept({ id: formData.value.id, ...data })
+        : createDept(data));
+      await modalApi.close();
+      emit('success');
+    } finally {
+      modalApi.lock(false);
+    }
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return;
+    }
+    let data = modalApi.getData<SystemDeptApi.SystemDept>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
      modalApi.lock();
-      const data = formApi.getValues();
      try {
-        await (formData.value?.id
-          ? updateDept(formData.value.id, data)
-          : createDept(data));
-        modalApi.close();
-        emit('success');
+        data = await getDept(data.id);
      } finally {
        modalApi.lock(false);
      }
    }
-  },
-  onOpenChange(isOpen) {
-    // TODO @芋艿：这里也改下
-    if (isOpen) {
-      const data = modalApi.getData<SystemDeptApi.SystemDept>();
-      if (data) {
-        // TODO @芋艿：要不要做这个处理？
-        if (data.parentId === 0) {
-          data.parentId = undefined;
-        }
-        formData.value = data;
-        formApi.setValues(formData.value);
-      }
-    }
+    formData.value = data;
+    await formApi.setValues(formData.value);
  },
 });
 </script>