refactor: 统一 dept、menu、post、role 的代码风格

apps/web-antd/src/views/system/post/data.ts

@@ -30,32 +30,32 @@ export function useFormSchema(): VbenFormSchema[] {
       rules: 'required',
     },
     {
+      fieldName: 'sort',
+      label: '显示顺序',
       component: 'InputNumber',
       componentProps: {
         min: 0,
         class: 'w-full',
         controlsPosition: 'right',
-        placeholder: '请输入岗位顺序',
+        placeholder: '请输入显示顺序',
       },
-      fieldName: 'sort',
-      label: '岗位顺序',
       rules: 'required',
     },
     {
+      fieldName: 'status',
+      label: '岗位状态',
       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: '岗位备注',
+      component: 'Textarea',
     },
   ];
 }
@@ -64,23 +64,23 @@ export function useFormSchema(): VbenFormSchema[] {
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
-      component: 'Input',
       fieldName: 'name',
       label: '岗位名称',
+      component: 'Input',
     },
     {
-      component: 'Input',
       fieldName: 'code',
       label: '岗位编码',
+      component: 'Input',
     },
     {
+      fieldName: 'status',
+      label: '岗位状态',
       component: 'Select',
       componentProps: {
         allowClear: true,
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
       },
-      fieldName: 'status',
-      label: '岗位状态',
     }
   ];
 }
@@ -107,7 +107,7 @@ export function useGridColumns<T = SystemPostApi.SystemPost>(
     },
     {
       field: 'sort',
-      title: '岗位顺序',
+      title: '显示顺序',
       minWidth: 100,
     },
     {
@@ -116,13 +116,13 @@ export function useGridColumns<T = SystemPostApi.SystemPost>(
       minWidth: 200,
     },
     {
+      field: 'status',
+      title: '岗位状态',
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
-      field: 'status',
-      title: '岗位状态',
-      minWidth: 100,
     },
     {
       field: 'createTime',
@@ -131,7 +131,11 @@ export function useGridColumns<T = SystemPostApi.SystemPost>(
       formatter: 'formatDateTime',
     },
     {
+      field: 'operation',
+      title: '操作',
+      minWidth: 130,
       align: 'center',
+      fixed: 'right',
       cellRender: {
         attrs: {
           nameField: 'name',
@@ -140,10 +144,6 @@ export function useGridColumns<T = SystemPostApi.SystemPost>(
         },
         name: 'CellOperation',
       },
-      field: 'operation',
-      fixed: 'right',
-      title: '操作',
-      minWidth: 130,
     },
   ];
 }

apps/web-antd/src/views/system/post/index.vue

@@ -1,20 +1,16 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} 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 { Button, message } from 'ant-design-vue';
 import { Plus, Download } from '@vben/icons';
-
-import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
+
+import { $t } from '#/locales';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getPostPage, deletePost, exportPost } from '#/api/system/post';
+import { useGridColumns, useGridFormSchema } from './data';
 import { downloadByData } from '#/utils/download';
 
 const [FormModal, formModalApi] = useVbenModal({
@@ -22,9 +18,15 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-/** 编辑岗位 */
-function onEdit(row: SystemPostApi.SystemPost) {
-  formModalApi.setData(row).open();
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function onExport() {
+  const data = await exportPost(await gridApi.formApi.getValues());
+  downloadByData(data, '岗位.xls');
 }
 
 /** 创建岗位 */
@@ -32,6 +34,11 @@ function onCreate() {
   formModalApi.setData(null).open();
 }
 
+/** 编辑岗位 */
+function onEdit(row: SystemPostApi.SystemPost) {
+  formModalApi.setData(row).open();
+}
+
 /** 删除岗位 */
 async function onDelete(row: SystemPostApi.SystemPost) {
   const hideLoading = message.loading({
@@ -57,14 +64,14 @@ function onActionClick({
   row,
 }: OnActionClickParams<SystemPostApi.SystemPost>) {
   switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
     case 'edit': {
       onEdit(row);
       break;
     }
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
   }
 }
 
@@ -96,18 +103,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<SystemPostApi.SystemPost>,
 });
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
-
-/** 导出表格 */
-async function onExport() {
-  const data = await exportPost(await gridApi.formApi.getValues());
-  downloadByData(data, '岗位.xls');
-}
 </script>
+
 <template>
   <Page auto-content-height>
     <FormModal @success="onRefresh" />

apps/web-antd/src/views/system/post/modules/form.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import type { SystemPostApi } from '#/api/system/post';
 
-import { computed, ref } from 'vue';
-
 import { useVbenModal } from '@vben/common-ui';
 import { message } from 'ant-design-vue';
 
+import { computed, ref } from 'vue';
 import { useVbenForm } from '#/adapter/form';
 import { createPost, updatePost, getPost } from '#/api/system/post';
 import { $t } from '#/locales';
@@ -33,11 +32,11 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
+    // 提交表单
     const data = (await formApi.getValues()) as SystemPostApi.SystemPost;
     try {
-      await (formData.value?.id
-        ? updatePost(data)
-        : createPost(data));
+      await (formData.value?.id ? updatePost(data) : createPost(data));
+      // 关闭并提示
       await modalApi.close();
       emit('success');
       message.success({
@@ -52,6 +51,7 @@ const [Modal, modalApi] = useVbenModal({
     if (!isOpen) {
       return;
     }
+    // 加载数据
     const data = modalApi.getData<SystemPostApi.SystemPost>();
     if (!data || !data.id) {
       return;
@@ -59,6 +59,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       formData.value = await getPost(data.id as number);
+      // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
       modalApi.lock(false);