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

apps/web-antd/src/api/system/post/index.ts

@@ -1,6 +1,9 @@
 import { requestClient } from '#/api/request';
+import type {PageParam, PageResult} from '@vben/request';
 
-export interface PostVO {
+export namespace SystemPostApi {
+  /** 岗位信息 */
+  export interface SystemPost {
     id?: number;
     name: string;
     code: string;
@@ -8,30 +11,33 @@ export interface PostVO {
     status: number;
     remark: string;
     createTime?: Date;
+  }
 }
 
 /** 查询岗位列表 */
-export function getPostPage(params: any) {
+export function getPostPage(params: PageParam) {
-  return requestClient.get('/system/post/page', { params });
+  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);
 }
 

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: 'selectRequired'
-      rules: z
-        .number()
-        .nullable()
-        .refine((val) => val != null && val >= 0, '上级部门不能为空')
-        .default(null),
     },
     {
       component: 'Input',
@@ -49,10 +53,7 @@ export function useSchema(): VbenFormSchema[] {
       },
       fieldName: 'name',
       label: '部门名称',
-      rules: z
+      rules: 'required',
-        .string()
-        .min(2, $t('ui.formRules.minLength', ['部门名称', 2]))
-        .max(20, $t('ui.formRules.maxLength', ['部门名称', 20])),
     },
     {
       component: 'InputNumber',
@@ -60,15 +61,11 @@ export function useSchema(): VbenFormSchema[] {
         min: 0,
         class: 'w-full',
         controlsPosition: 'right',
-        placeholder: '请输入显示排序',
+        placeholder: '请输入部门顺序',
       },
       fieldName: 'sort',
-      label: '显示排序',
+      label: '部门顺序',
-      rules: z
+      rules: 'required',
-        .number()
-        .nullable()
-        .refine((val) => val != null && val >= 0, '显示排序不能为空')
-        .default(null),
     },
     {
       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,
     },
     {

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',

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);
     }

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>

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,
+    },
+  ];
+}

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 {
-import type { VxeGridProps } from '#/adapter/vxe-table';
+  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 { useGridColumns, useGridFormSchema } from './data';
-import { exportPost, getPostPage, type PostVO } from '#/api/system/post';
+import Form from './modules/form.vue';
 
-import { columns, formSchema } from './post.data';
+const [FormModal, formModalApi] = useVbenModal({
-import PostModal from './PostModal.vue';
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
 
-defineOptions({ name: 'SystemPost' });
+/** 编辑岗位 */
+function onEdit(row: SystemPostApi.SystemPost) {
+  formModalApi.setData(row).open();
+}
 
-const formOptions: VbenFormProps = {
+/** 创建岗位 */
-  // 默认展开
+function onCreate() {
-  collapsed: false,
+  formModalApi.setData(null).open();
-  schema: formSchema,
+}
-  // 控制表单是否显示折叠按钮
-  showCollapseButton: true,
-  // 按下回车时是否提交表单
-  submitOnEnter: false,
-};
 
-const gridOptions: VxeGridProps<PostVO> = {
+/** 删除岗位 */
-  checkboxConfig: {
+async function onDelete(row: SystemPostApi.SystemPost) {
-    highlight: true,
+  const hideLoading = message.loading({
-    labelField: 'id',
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  try {
+    await deletePost(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_process_msg',
+    });
+    refreshGrid();
+  } catch (error) {
+    hideLoading();
+  }
+}
+
+/** 表格操作按钮的回调函数 */
+function onActionClick({
+  code,
+  row,
+}: OnActionClickParams<SystemPostApi.SystemPost>) {
+  switch (code) {
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
+    case 'edit': {
+      onEdit(row);
+      break;
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema()
   },
-  columns,
+  gridOptions: {
+    columns: useGridColumns(onActionClick),
     height: 'auto',
     keepSource: true,
-  pagerConfig: {},
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
           return await getPostPage({
-          page: page.currentPage,
+            pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
           });
         },
       },
     },
-};
+    rowConfig: {
-
+      keyField: 'id',
-const [Grid, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
+    },
-
+    toolbarConfig: {
-const [FormModal, formModalApi] = useVbenModal({
+      export: true, // TODO @芋艿：导出
-  connectedComponent: PostModal,
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemPostApi.SystemPost>,
 });
 
-function handleCreate() {
+/** 刷新表格 */
-  formModalApi.setData({
+function refreshGrid() {
-    valuse: {},
+  gridApi.query();
-  });
-  formModalApi.open();
-}
-async function handleEdit(id: number) {
-  formModalApi.setData({ id });
-  formModalApi.open();
-}
-// TODO
-function handleDelete(id: number) {
-  message.success(id);
-}
-// TODO
-async function handleExport() {
-  await exportPost(tableApi.formApi.form.values);
 }
 </script>
-
 <template>
   <Page auto-content-height>
-    <Grid>
+    <FormModal @success="refreshGrid" />
-      <template #toolbar-actions>
+    <Grid table-title="岗位列表">
-        <Button
+      <template #toolbar-tools>
-          type="primary"
+        <Button type="primary" @click="onCreate">
-          v-access:code="['system:post:create']"
+          <Plus class="size-5" />
-          @click="handleCreate"
+          {{ $t('ui.actionTitle.create', ['岗位']) }}
-        >
-          {{ $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') }}
         </Button>
       </template>
     </Grid>
-    <FormModal />
   </Page>
 </template>

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>

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: '备注',
-  },
-];