feat：岗位 post 的实现 80%（crud 功能）

2025-03-29 19:19:32 +08:00 · 2025-03-29 19:19:32 +08:00 · cac69a0283
parent bfa84c6611
commit cac69a0283
9 changed files with 380 additions and 291 deletions
--- a/apps/web-antd/src/api/system/post/index.ts
+++ b/apps/web-antd/src/api/system/post/index.ts
@ -1,37 +1,43 @@
 import { requestClient } from '#/api/request';
+import type {PageParam, PageResult} from '@vben/request';

-export interface PostVO {
-  id?: number;
-  name: string;
-  code: string;
-  sort: number;
-  status: number;
-  remark: string;
-  createTime?: Date;
+export namespace SystemPostApi {
+  /** 岗位信息 */
+  export interface SystemPost {
+    id?: number;
+    name: string;
+    code: string;
+    sort: number;
+    status: number;
+    remark: string;
+    createTime?: Date;
+  }
 }

 /** 查询岗位列表 */
-export function getPostPage(params: any) {
-  return requestClient.get('/system/post/page', { params });
+export function getPostPage(params: PageParam) {
+  return requestClient.get<PageResult<SystemPostApi.SystemPost>>('/system/post/page', {
+    params
+  });
 }

 /** 获取岗位精简信息列表 */
 export function getSimplePostList() {
-  return requestClient.get('/system/post/simple-list');
+  return requestClient.get<SystemPostApi.SystemPost[]>('/system/post/simple-list');
 }

 /** 查询岗位详情 */
 export function getPost(id: number) {
-  return requestClient.get(`/system/post/get?id=${id}`);
+  return requestClient.get<SystemPostApi.SystemPost>(`/system/post/get?id=${id}`);
 }

 /** 新增岗位 */
-export function createPost(data: PostVO) {
+export function createPost(data: SystemPostApi.SystemPost) {
  return requestClient.post('/system/post/create', data);
 }

 /** 修改岗位 */
-export function updatePost(data: PostVO) {
+export function updatePost(data: SystemPostApi.SystemPost) {
  return requestClient.put('/system/post/update', data);
 }

--- a/apps/web-antd/src/views/system/dept/data.ts
+++ b/apps/web-antd/src/views/system/dept/data.ts
@ -12,8 +12,17 @@ import { CommonStatusEnum } from '#/utils/constants';
 import { handleTree } from '#/utils/tree';

 /** 获取编辑表单的字段配置 */
-export function useSchema(): VbenFormSchema[] {
+export function useFormSchema(): VbenFormSchema[] {
  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      label: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
    {
      component: 'ApiTreeSelect',
      componentProps: {
@ -35,12 +44,7 @@ export function useSchema(): VbenFormSchema[] {
      },
      fieldName: 'parentId',
      label: '上级部门',
-      // TODO @芋艿：number 的必填，写起来有点麻烦，后续得研究下；
-      rules: z
-        .number()
-        .nullable()
-        .refine((val) => val != null && val >= 0, '上级部门不能为空')
-        .default(null),
+      rules: 'selectRequired'
    },
    {
      component: 'Input',
@ -49,10 +53,7 @@ export function useSchema(): VbenFormSchema[] {
      },
      fieldName: 'name',
      label: '部门名称',
-      rules: z
-        .string()
-        .min(2, $t('ui.formRules.minLength', ['部门名称', 2]))
-        .max(20, $t('ui.formRules.maxLength', ['部门名称', 20])),
+      rules: 'required',
    },
    {
      component: 'InputNumber',
@ -60,15 +61,11 @@ export function useSchema(): VbenFormSchema[] {
        min: 0,
        class: 'w-full',
        controlsPosition: 'right',
-        placeholder: '请输入显示排序',
+        placeholder: '请输入部门顺序',
      },
      fieldName: 'sort',
-      label: '显示排序',
-      rules: z
-        .number()
-        .nullable()
-        .refine((val) => val != null && val >= 0, '显示排序不能为空')
-        .default(null),
+      label: '部门顺序',
+      rules: 'required',
    },
    {
      component: 'ApiSelect',
@ -116,6 +113,8 @@ export function useSchema(): VbenFormSchema[] {
      component: 'RadioGroup',
      componentProps: {
        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
      },
      fieldName: 'status',
      label: '状态',
@ -126,7 +125,7 @@ export function useSchema(): VbenFormSchema[] {

 /** 获取表格列配置 */
 const userList = await getSimpleUserList();
-export function useColumns(
+export function useGridColumns(
  onActionClick?: OnActionClickFn<SystemDeptApi.SystemDept>,
 ): VxeTableGridOptions<SystemDeptApi.SystemDept>['columns'] {
  return [
@ -150,7 +149,7 @@ export function useColumns(
    },
    {
      field: 'sort',
-      title: '排序',
+      title: '部门顺序',
      minWidth: 100,
    },
    {
@ -159,7 +158,7 @@ export function useColumns(
        props: { type: DICT_TYPE.COMMON_STATUS },
      },
      field: 'status',
-      title: '状态',
+      title: '部门状态',
      minWidth: 100,
    },
    {
--- a/apps/web-antd/src/views/system/dept/index.vue
+++ b/apps/web-antd/src/views/system/dept/index.vue
@ -8,13 +8,13 @@ import type { SystemDeptApi } from '#/api/system/dept';
 import { ref } from 'vue';
 import { $t } from '#/locales';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteDept, getDeptList } from '#/api/system/dept';
+import { getDeptList, deleteDept } from '#/api/system/dept';

 import { Page, useVbenModal } from '@vben/common-ui';
 import { Button, message } from 'ant-design-vue';
 import { Plus } from '@vben/icons';

-import { useColumns } from './data';
+import { useGridColumns } from './data';
 import Form from './modules/form.vue';

 const [FormModal, formModalApi] = useVbenModal({
@ -32,7 +32,7 @@ function onAppend(row: SystemDeptApi.SystemDept) {
  formModalApi.setData({ parentId: row.id }).open();
 }

-/** 创建新部门 */
+/** 创建部门 */
 function onCreate() {
  formModalApi.setData(null).open();
 }
@ -78,9 +78,8 @@ function onActionClick({
 }

 const [Grid, gridApi] = useVbenVxeGrid({
-  gridEvents: {},
  gridOptions: {
-    columns: useColumns(onActionClick),
+    columns: useGridColumns(onActionClick),
    height: 'auto',
    keepSource: true,
    pagerConfig: {
@ -97,10 +96,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
      keyField: 'id',
    },
    toolbarConfig: {
-      custom: true,
-      export: false,
      refresh: { code: 'query' },
-      zoom: true,
    },
    treeConfig: {
      parentField: 'parentId',
--- a/apps/web-antd/src/views/system/dept/modules/form.vue
+++ b/apps/web-antd/src/views/system/dept/modules/form.vue
@ -4,13 +4,13 @@ import type { SystemDeptApi } from '#/api/system/dept';
 import { computed, ref } from 'vue';

 import { useVbenModal } from '@vben/common-ui';
-import { Button } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';

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

-import { useSchema } from '../data';
+import { useFormSchema } from '../data';

 const emit = defineEmits(['success']);
 const formData = ref<SystemDeptApi.SystemDept>();
@ -22,7 +22,7 @@ const getTitle = computed(() => {

 const [Form, formApi] = useVbenForm({
  layout: 'horizontal',
-  schema: useSchema(),
+  schema: useFormSchema(),
  showDefaultActions: false,
 });

@ -41,10 +41,14 @@ const [Modal, modalApi] = useVbenModal({
    const data = (await formApi.getValues()) as SystemDeptApi.SystemDept;
    try {
      await (formData.value?.id
-        ? updateDept({ id: formData.value.id, ...data })
+        ? updateDept(data)
        : createDept(data));
      await modalApi.close();
      emit('success');
+      message.success({
+        content: $t('ui.actionMessage.operationSuccess'),
+        key: 'action_process_msg',
+      });
    } finally {
      modalApi.lock(false);
    }
--- a/apps/web-antd/src/views/system/post/PostModal.vue
+++ b/apps/web-antd/src/views/system/post/PostModal.vue
@ -1,54 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-
-import { useVbenForm } from '#/adapter/form';
-import { createPost, getPost, updatePost } from '#/api/system/post';
-
-import { modalSchema } from './post.data';
-
-defineOptions({ name: 'PostModel' });
-
-const isUpdate = ref(false);
-
-const [Form, formApi] = useVbenForm({
-  schema: modalSchema,
-  handleSubmit: onSubmit,
-  showDefaultActions: false,
-});
-
-const [Modal, modalApi] = useVbenModal({
-  onCancel: async () => {
-    modalApi.close();
-    await formApi.resetForm();
-  },
-  onConfirm: async () => {
-    await formApi.validateAndSubmitForm();
-  },
-  async onOpenChange(isOpen: boolean) {
-    if (isOpen) {
-      const { id } = modalApi.getData<Record<string, any>>();
-      isUpdate.value = !!id;
-      if (id) {
-        const values = await getPost(id);
-        formApi.setValues(values);
-      }
-    }
-  },
-  title: isUpdate.value ? '新增岗位' : '编辑岗位',
-});
-
-async function onSubmit(values: Record<string, any>) {
-  await (isUpdate.value
-    ? updatePost(values as any)
-    : createPost(values as any));
-  modalApi.close();
-  await formApi.resetForm();
-}
-</script>
-<template>
-  <Modal class="w-1/2">
-    <Form />
-  </Modal>
-</template>
--- a/apps/web-antd/src/views/system/post/data.ts
+++ b/apps/web-antd/src/views/system/post/data.ts
@ -0,0 +1,146 @@
+import {type VbenFormSchema, z} from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemPostApi } from '#/api/system/post';
+
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+import { CommonStatusEnum } from '#/utils/constants';
+
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      label: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '岗位名称',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'code',
+      label: '岗位编码',
+      rules: 'required',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        class: 'w-full',
+        controlsPosition: 'right',
+        placeholder: '请输入岗位顺序',
+      },
+      fieldName: 'sort',
+      label: '岗位顺序',
+      rules: 'required',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      fieldName: 'status',
+      label: '岗位岗位',
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'remark',
+      label: '岗位备注',
+    },
+  ];
+}
+
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '岗位名称',
+    },
+    {
+      component: 'Input',
+      fieldName: 'code',
+      label: '岗位编码',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      fieldName: 'status',
+      label: '岗位状态',
+    }
+  ];
+}
+
+export function useGridColumns<T = SystemPostApi.SystemPost>(
+  onActionClick: OnActionClickFn<T>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '岗位编号',
+      minWidth: 200,
+    },
+    {
+      field: 'name',
+      title: '岗位名称',
+      minWidth: 200,
+    },
+    {
+      field: 'code',
+      title: '岗位编码',
+      minWidth: 200,
+    },
+    {
+      field: 'sort',
+      title: '岗位顺序',
+      minWidth: 100,
+    },
+    {
+      field: 'remark',
+      title: '岗位备注',
+      minWidth: 200,
+    },
+    {
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: '岗位',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+      },
+      field: 'operation',
+      fixed: 'right',
+      title: '操作',
+      minWidth: 130,
+    },
+  ];
+}
--- a/apps/web-antd/src/views/system/post/index.vue
+++ b/apps/web-antd/src/views/system/post/index.vue
@ -1,115 +1,117 @@
 <script lang="ts" setup>
-import type { VbenFormProps } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { SystemPostApi } from '#/api/system/post';
+
+import { $t } from '#/locales';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getPostPage, deletePost, exportPost } from '#/api/system/post';

 import { Page, useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-
 import { Button, message } from 'ant-design-vue';
+import { Plus } from '@vben/icons';

-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { exportPost, getPostPage, type PostVO } from '#/api/system/post';
-
-import { columns, formSchema } from './post.data';
-import PostModal from './PostModal.vue';
-
-defineOptions({ name: 'SystemPost' });
-
-const formOptions: VbenFormProps = {
-  // 默认展开
-  collapsed: false,
-  schema: formSchema,
-  // 控制表单是否显示折叠按钮
-  showCollapseButton: true,
-  // 按下回车时是否提交表单
-  submitOnEnter: false,
-};
-
-const gridOptions: VxeGridProps<PostVO> = {
-  checkboxConfig: {
-    highlight: true,
-    labelField: 'id',
-  },
-  columns,
-  height: 'auto',
-  keepSource: true,
-  pagerConfig: {},
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues) => {
-        return await getPostPage({
-          page: page.currentPage,
-          pageSize: page.pageSize,
-          ...formValues,
-        });
-      },
-    },
-  },
-};
-
-const [Grid, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';

 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: PostModal,
+  connectedComponent: Form,
+  destroyOnClose: true,
 });

-function handleCreate() {
-  formModalApi.setData({
-    valuse: {},
+/** 编辑岗位 */
+function onEdit(row: SystemPostApi.SystemPost) {
+  formModalApi.setData(row).open();
+}
+
+/** 创建岗位 */
+function onCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 删除岗位 */
+async function onDelete(row: SystemPostApi.SystemPost) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+    key: 'action_process_msg',
  });
-  formModalApi.open();
+  try {
+    await deletePost(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_process_msg',
+    });
+    refreshGrid();
+  } catch (error) {
+    hideLoading();
+  }
 }
-async function handleEdit(id: number) {
-  formModalApi.setData({ id });
-  formModalApi.open();
+
+/** 表格操作按钮的回调函数 */
+function onActionClick({
+  code,
+  row,
+}: OnActionClickParams<SystemPostApi.SystemPost>) {
+  switch (code) {
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
+    case 'edit': {
+      onEdit(row);
+      break;
+    }
+  }
 }
-// TODO
-function handleDelete(id: number) {
-  message.success(id);
-}
-// TODO
-async function handleExport() {
-  await exportPost(tableApi.formApi.form.values);
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema()
+  },
+  gridOptions: {
+    columns: useGridColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPostPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      export: true, // TODO @芋艿：导出
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemPostApi.SystemPost>,
+});
+
+/** 刷新表格 */
+function refreshGrid() {
+  gridApi.query();
 }
 </script>
-
 <template>
  <Page auto-content-height>
-    <Grid>
-      <template #toolbar-actions>
-        <Button
-          type="primary"
-          v-access:code="['system:post:create']"
-          @click="handleCreate"
-        >
-          {{ $t('page.action.add') }}
-        </Button>
-        <Button
-          class="ml-4"
-          v-access:code="['system:post:export']"
-          @click="handleExport"
-        >
-          {{ $t('page.action.export') }}
-        </Button>
-      </template>
-      <template #action="{ row }">
-        <Button
-          type="link"
-          v-access:code="['system:post:update']"
-          @click="handleEdit(row.id)"
-        >
-          {{ $t('page.action.edit') }}
-        </Button>
-        <Button
-          danger
-          type="link"
-          v-access:code="['system:post:delete']"
-          @click="handleDelete(row.id)"
-        >
-          {{ $t('page.action.delete') }}
+    <FormModal @success="refreshGrid" />
+    <Grid table-title="岗位列表">
+      <template #toolbar-tools>
+        <Button type="primary" @click="onCreate">
+          <Plus class="size-5" />
+          {{ $t('ui.actionTitle.create', ['岗位']) }}
        </Button>
      </template>
    </Grid>
-    <FormModal />
  </Page>
 </template>
--- a/apps/web-antd/src/views/system/post/modules/form.vue
+++ b/apps/web-antd/src/views/system/post/modules/form.vue
@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import type { SystemPostApi } from '#/api/system/post';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { Button, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createPost, updatePost, getPost } from '#/api/system/post';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemPostApi.SystemPost>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['岗位'])
+    : $t('ui.actionTitle.create', ['岗位']);
+});
+
+const [Form, formApi] = useVbenForm({
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+function resetForm() {
+  formApi.resetForm();
+  formApi.setValues(formData.value || {});
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    const data = (await formApi.getValues()) as SystemPostApi.SystemPost;
+    try {
+      await (formData.value?.id
+        ? updatePost(data)
+        : createPost(data));
+      await modalApi.close();
+      emit('success');
+      message.success({
+        content: $t('ui.actionMessage.operationSuccess'),
+        key: 'action_process_msg',
+      });
+    } finally {
+      modalApi.lock(false);
+    }
+  },
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return;
+    }
+    const data = modalApi.getData<SystemPostApi.SystemPost>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getPost(data.id as number);
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.lock(false);
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+    <template #prepend-footer>
+      <div class="flex-auto">
+        <Button type="primary" danger @click="resetForm">
+          {{ $t('common.reset') }}
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
--- a/apps/web-antd/src/views/system/post/post.data.ts
+++ b/apps/web-antd/src/views/system/post/post.data.ts
@ -1,96 +0,0 @@
-import type { VxeGridProps } from '#/adapter/vxe-table';
-
-import { $t } from '@vben/locales';
-
-import { type VbenFormSchema } from '#/adapter/form';
-import { getDictOptions } from '#/utils/dict';
-
-export const formSchema: VbenFormSchema[] = [
-  {
-    component: 'Input',
-    fieldName: 'name',
-    label: '岗位名称',
-  },
-  {
-    component: 'Input',
-    fieldName: 'code',
-    label: '岗位编码',
-  },
-  // TODO: dict
-  {
-    component: 'Select',
-    componentProps: {
-      allowClear: true,
-      options: getDictOptions('common_status', 'number'),
-      placeholder: '请选择',
-    },
-    fieldName: 'status',
-    label: '状态',
-  },
-];
-
-export const columns: VxeGridProps['columns'] = [
-  { title: '序号', type: 'seq', width: 50 },
-  { field: 'id', title: '岗位编号' },
-  { field: 'name', title: '岗位名称' },
-  { field: 'code', title: '岗位编码' },
-  { field: 'sort', title: '岗位顺序' },
-  { field: 'remark', title: '岗位备注' },
-  {
-    field: 'status',
-    title: '状态',
-    cellRender: { name: 'CellDict', props: { type: 'common_status' } },
-  },
-  { field: 'createTime', formatter: 'formatDateTime', title: '创建时间' },
-  {
-    field: 'action',
-    fixed: 'right',
-    slots: { default: 'action' },
-    title: $t('page.action.action'),
-    width: 160,
-  },
-];
-
-export const modalSchema: VbenFormSchema[] = [
-  {
-    component: 'Input',
-    fieldName: 'id',
-    label: 'id',
-    dependencies: {
-      triggerFields: [''],
-      show: () => false,
-    },
-  },
-  {
-    component: 'Input',
-    fieldName: 'name',
-    label: '岗位标题',
-    rules: 'required',
-  },
-  {
-    component: 'Input',
-    fieldName: 'code',
-    label: '岗位编码',
-    rules: 'required',
-  },
-  {
-    component: 'Input',
-    fieldName: 'sort',
-    label: '岗位顺序',
-    rules: 'required',
-  },
-  {
-    component: 'Select',
-    componentProps: {
-      options: getDictOptions('common_status', 'number'),
-    },
-    fieldName: 'status',
-    label: '状态',
-    rules: 'required',
-  },
-  {
-    component: 'Textarea',
-    fieldName: 'remark',
-    label: '备注',
-  },
-];