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

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

@@ -3,7 +3,6 @@ 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 { getSimpleUserList } from '#/api/system/user';
@@ -15,15 +14,16 @@ import { handleTree } from '#/utils/tree';
 export function useFormSchema(): VbenFormSchema[] {
   return [
     {
-      component: 'Input',
       fieldName: 'id',
-      label: 'id',
+      component: 'Input',
       dependencies: {
         triggerFields: [''],
         show: () => false,
       },
     },
     {
+      fieldName: 'parentId',
+      label: '上级部门',
       component: 'ApiTreeSelect',
       componentProps: {
         allowClear: true,
@@ -42,32 +42,32 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请选择上级部门',
         treeDefaultExpandAll: true,
       },
-      fieldName: 'parentId',
+      rules: 'selectRequired',
-      label: '上级部门',
-      rules: 'selectRequired'
     },
     {
+      fieldName: 'name',
+      label: '部门名称',
       component: 'Input',
       componentProps: {
         placeholder: '请输入部门名称',
       },
-      fieldName: 'name',
-      label: '部门名称',
       rules: 'required',
     },
     {
+      fieldName: 'sort',
+      label: '显示顺序',
       component: 'InputNumber',
       componentProps: {
         min: 0,
         class: 'w-full',
         controlsPosition: 'right',
-        placeholder: '请输入部门顺序',
+        placeholder: '请输入显示顺序',
       },
-      fieldName: 'sort',
-      label: '部门顺序',
       rules: 'required',
     },
     {
+      fieldName: 'leaderUserId',
+      label: '负责人',
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleUserList,
@@ -77,18 +77,16 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请选择负责人',
         allowClear: true,
       },
-      fieldName: 'leaderUserId',
-      label: '负责人',
       rules: z.number().optional(),
     },
     {
+      fieldName: 'phone',
+      label: '联系电话',
       component: 'Input',
       componentProps: {
         maxLength: 11,
         placeholder: '请输入联系电话',
       },
-      fieldName: 'phone',
-      label: '联系电话',
       rules: z
         .string()
         // TODO @芋艿：未来怎么拓展一个手机的
@@ -96,28 +94,26 @@ export function useFormSchema(): VbenFormSchema[] {
         .optional(),
     },
     {
-      component: 'Input',
-      componentProps: {
-        maxLength: 50,
-        placeholder: '请输入邮箱',
-      },
       fieldName: 'email',
       label: '邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
       rules: z
         .string()
         .email('请输入正确的邮箱地址')
-        .max(50, $t('ui.formRules.maxLength', ['邮箱', 50]))
         .optional(),
     },
     {
+      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),
     },
   ];
@@ -130,36 +126,34 @@ export function useGridColumns(
 ): VxeTableGridOptions<SystemDeptApi.SystemDept>['columns'] {
   return [
     {
-      align: 'left',
       field: 'name',
-      fixed: 'left',
       title: '部门名称',
-      treeNode: true,
       minWidth: 150,
+      align: 'left',
+      fixed: 'left',
+      treeNode: true,
     },
     {
       field: 'leaderUserId',
       title: '负责人',
       minWidth: 150,
       formatter: (row) => {
-        return (
+        return userList.find((user) => user.id === row.cellValue)?.nickname || '-';
-          userList.find((user) => user.id === row.cellValue)?.nickname || '-'
-        );
       },
     },
     {
       field: 'sort',
-      title: '部门顺序',
+      title: '显示顺序',
       minWidth: 100,
     },
     {
+      field: 'status',
+      title: '部门状态',
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
-      field: 'status',
-      title: '部门状态',
-      minWidth: 100,
     },
     {
       field: 'createTime',
@@ -168,7 +162,13 @@ export function useGridColumns(
       formatter: 'formatDateTime',
     },
     {
+      field: 'operation',
+      title: '操作',
+      minWidth: 200,
       align: 'right',
+      fixed: 'right',
+      headerAlign: 'center',
+      showOverflow: false,
       cellRender: {
         attrs: {
           nameField: 'name',
@@ -190,12 +190,6 @@ export function useGridColumns(
           },
         ],
       },
-      field: 'operation',
-      fixed: 'right',
-      headerAlign: 'center',
-      showOverflow: false,
-      title: '操作',
-      minWidth: 200,
     },
   ];
 }

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

@@ -1,30 +1,39 @@
 <script lang="ts" setup>
-import type {
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { SystemDeptApi } from '#/api/system/dept';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+import { Button, message } from 'ant-design-vue';
+import { Plus } from '@vben/icons';
+import Form from './modules/form.vue';
+
 import { ref } from 'vue';
 import { $t } from '#/locales';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 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 { useGridColumns } from './data';
-import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
 });
 
-/** 编辑部门 */
+/** 刷新表格 */
-function onEdit(row: SystemDeptApi.SystemDept) {
+function onRefresh() {
-  formModalApi.setData(row).open();
+  gridApi.query();
+}
+
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(true);
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+/** 创建部门 */
+function onCreate() {
+  formModalApi.setData(null).open();
 }
 
 /** 添加下级部门 */
@@ -32,9 +41,9 @@ function onAppend(row: SystemDeptApi.SystemDept) {
   formModalApi.setData({ parentId: row.id }).open();
 }
 
-/** 创建部门 */
+/** 编辑部门 */
-function onCreate() {
+function onEdit(row: SystemDeptApi.SystemDept) {
-  formModalApi.setData(null).open();
+  formModalApi.setData(row).open();
 }
 
 /** 删除部门 */
@@ -66,14 +75,14 @@ function onActionClick({
       onAppend(row);
       break;
     }
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
     case 'edit': {
       onEdit(row);
       break;
     }
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
   }
 }
 
@@ -107,19 +116,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions,
 });
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
-
-/** 切换树形展开/收缩状态 */
-const isExpanded = ref(true);
-function toggleExpand() {
-  isExpanded.value = !isExpanded.value;
-  gridApi.grid.setAllTreeExpand(isExpanded.value);
-}
 </script>
+
 <template>
   <Page auto-content-height>
     <FormModal @success="onRefresh" />
@@ -135,4 +133,4 @@ function toggleExpand() {
       </template>
     </Grid>
   </Page>
-</template>
+</template>

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

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { SystemDeptApi } from '#/api/system/dept';
 
-
 import { useVbenModal } from '@vben/common-ui';
 import { message } from 'ant-design-vue';
 
@@ -33,11 +32,11 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
+    // 提交表单
     const data = (await formApi.getValues()) as SystemDeptApi.SystemDept;
     try {
-      await (formData.value?.id
+      await (formData.value?.id ? updateDept(data) : createDept(data));
-        ? updateDept(data)
+      // 关闭并提示
-        : createDept(data));
       await modalApi.close();
       emit('success');
       message.success({
@@ -52,6 +51,7 @@ const [Modal, modalApi] = useVbenModal({
     if (!isOpen) {
       return;
     }
+    // 加载数据
     let data = modalApi.getData<SystemDeptApi.SystemDept>();
     if (!data) {
       return;
@@ -64,6 +64,7 @@ const [Modal, modalApi] = useVbenModal({
         modalApi.lock(false);
       }
     }
+    // 设置到 values
     formData.value = data;
     await formApi.setValues(formData.value);
   },

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

@@ -0,0 +1,333 @@
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemMenuApi } from '#/api/system/menu';
+import type { VbenFormSchema } from '#/adapter/form';
+import type { Recordable } from '@vben/types';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { $t } from '#/locales';
+import { h } from 'vue';
+import { z } from '#/adapter/form';
+import { componentKeys } from '#/router/routes';
+import { getMenuList } from '#/api/system/menu';
+import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+import { handleTree } from '#/utils/tree';
+import { CommonStatusEnum, SystemMenuTypeEnum } from '#/utils/constants';
+import { isHttpUrl } from '@vben/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '上级菜单',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: async () => {
+          const data = await getMenuList();
+          data.unshift({
+            id: 0,
+            name: '顶级部门',
+          } as SystemMenuApi.SystemMenu);
+          return handleTree(data);
+        },
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择上级菜单',
+        filterTreeNode(input: string, node: Recordable<any>) {
+          if (!input || input.length === 0) {
+            return true;
+          }
+          const name: string = node.label ?? '';
+          if (!name) return false;
+          return name.includes(input) || $t(name).includes(input);
+        },
+        showSearch: true,
+        treeDefaultExpandedKeys: [0],
+      },
+      rules: 'selectRequired',
+      renderComponentContent() {
+        return {
+          title({ label, icon }: { label: string; icon: string }) {
+            const components = [];
+            if (!label) return '';
+            if (icon) {
+              components.push(h(IconifyIcon, { class: 'size-4', icon }));
+            }
+            components.push(h('span', { class: '' }, $t(label || '')));
+            return h('div', { class: 'flex items-center gap-1' }, components);
+          },
+        };
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '菜单名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入菜单名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'type',
+      label: '菜单类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(SystemMenuTypeEnum.DIR),
+    },
+    {
+      fieldName: 'icon',
+      label: '菜单图标',
+      component: 'IconPicker',
+      componentProps: {
+        placeholder: '请选择菜单图标',
+        prefix: 'carbon',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.DIR, SystemMenuTypeEnum.MENU].includes(values.type);
+        },
+      },
+    },
+    {
+      fieldName: 'path',
+      label: '路由地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入路由地址',
+      },
+      rules: z.string(),
+      help: '访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头',
+      dependencies: {
+        triggerFields: ['type', 'parentId'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.DIR, SystemMenuTypeEnum.MENU].includes(values.type);
+        },
+        rules: (values) => {
+          const schema = z.string().min(1, '路由地址不能为空');
+          if (isHttpUrl(values.path)) {
+            return schema;
+          }
+          if (values.parentId === 0) {
+            return schema.refine((path) => path.charAt(0) === '/', '路径必须以 / 开头');
+          }
+          return schema.refine((path) => path.charAt(0) !== '/', '路径不能以 / 开头');
+        },
+      }
+    },
+    {
+      fieldName: 'component',
+      label: '组件地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入组件地址',
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.MENU].includes(values.type);
+        }
+      },
+    },
+    {
+      fieldName: 'componentName',
+      label: '组件名称',
+      component: 'AutoComplete',
+      componentProps: {
+        allowClear: true,
+        class: 'w-full',
+        filterOption(input: string, option: { value: string }) {
+          return option.value.toLowerCase().includes(input.toLowerCase());
+        },
+        placeholder: '请选择组件名称',
+        options: componentKeys.map((v) => ({ value: v })),
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.MENU].includes(values.type);
+        }
+      },
+    },
+    {
+      fieldName: 'permission',
+      label: '权限标识',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入菜单描述',
+      },
+      dependencies: {
+        show: (values) => {
+          return [SystemMenuTypeEnum.MENU, SystemMenuTypeEnum.BUTTON].includes(
+            values.type,
+          );
+        },
+        triggerFields: ['type'],
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '显示顺序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        class: 'w-full',
+        controlsPosition: 'right',
+        placeholder: '请输入显示顺序',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '菜单状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'alwaysShow',
+      label: '总是显示',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '总是', value: true },
+          { label: '不是', value: false },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+      defaultValue: true,
+      help: '选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.MENU].includes(values.type);
+        },
+      },
+    },
+    {
+      fieldName: 'keepAlive',
+      label: '缓存状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '缓存', value: true },
+          { label: '不缓存', value: false },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+      defaultValue: true,
+      help: '选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.MENU].includes(values.type);
+        },
+      },
+    },
+  ]
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  onActionClick: OnActionClickFn<SystemMenuApi.SystemMenu>,
+): VxeTableGridOptions<SystemMenuApi.SystemMenu>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '菜单名称',
+      minWidth: 250,
+      align: 'left',
+      fixed: 'left',
+      slots: { default: 'name' },
+      treeNode: true,
+    },
+    {
+      field: 'type',
+      title: '菜单类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_MENU_TYPE },
+      },
+    },
+    {
+      field: 'sort',
+      title: '显示排序',
+      minWidth: 100,
+    },
+    {
+      field: 'permission',
+      title: '权限标识',
+      minWidth: 200,
+    },
+    {
+      field: 'path',
+      title: '组件路径',
+      minWidth: 200,
+    },
+    {
+      field: 'componentName',
+      minWidth: 200,
+      title: '组件名称',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'operation',
+      title: '操作',
+      align: 'right',
+      minWidth: 200,
+      fixed: 'right',
+      headerAlign: 'center',
+      showOverflow: false,
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'append',
+            text: '新增下级',
+          },
+          'edit', // 默认的编辑按钮
+          'delete', // 默认的删除按钮
+        ],
+      },
+    },
+  ];
+}

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

@@ -1,18 +1,19 @@
 <script lang="ts" setup>
-import type { OnActionClickFn, OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemMenuApi } from '#/api/system/menu';
 
+import { Page, useVbenModal } from '@vben/common-ui';
+import { Button, message } from 'ant-design-vue';
+import { IconifyIcon, Plus } from '@vben/icons';
+import Form from './modules/form.vue';
+
 import { ref } from 'vue';
 import { $t } from '#/locales';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getMenuList, deleteMenu } from '#/api/system/menu';
 import { SystemMenuTypeEnum } from '#/utils/constants';
-import { DICT_TYPE } from '#/utils/dict';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { useGridColumns } from './data';
-import { Button, message } from 'ant-design-vue';
-import { IconifyIcon, Plus } from '@vben/icons';
-import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
@@ -24,27 +25,6 @@ function onRefresh() {
   gridApi.query();
 }
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-   code,
-   row,
-}: OnActionClickParams<SystemMenuApi.SystemMenu>) {
-  switch (code) {
-    case 'append': {
-      onAppend(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-  }
-}
-
 /** 创建菜单 */
 function onCreate() {
   formModalApi.setData({}).open();
@@ -79,6 +59,27 @@ async function onDelete(row: SystemMenuApi.SystemMenu) {
   }
 }
 
+/** 表格操作按钮的回调函数 */
+function onActionClick({
+   code,
+   row,
+}: OnActionClickParams<SystemMenuApi.SystemMenu>) {
+  switch (code) {
+    case 'append': {
+      onAppend(row);
+      break;
+    }
+    case 'edit': {
+      onEdit(row);
+      break;
+    }
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
+  }
+}
+
 /** 切换树形展开/收缩状态 */
 const isExpanded = ref(false);
 function toggleExpand() {
@@ -86,84 +87,6 @@ function toggleExpand() {
   gridApi.grid.setAllTreeExpand(isExpanded.value);
 }
 
-function useGridColumns(
-  onActionClick: OnActionClickFn<SystemMenuApi.SystemMenu>,
-): VxeTableGridOptions<SystemMenuApi.SystemMenu>['columns'] {
-  return [
-    {
-      align: 'left',
-      field: 'name',
-      fixed: 'left',
-      slots: { default: 'name' },
-      title: '菜单名称',
-      treeNode: true,
-      minWidth: 250,
-    },
-    {
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.SYSTEM_MENU_TYPE },
-      },
-      field: 'type',
-      title: '菜单类型',
-      minWidth: 100,
-    },
-    {
-      field: 'sort',
-      title: '显示排序',
-      minWidth: 100,
-    },
-    {
-      field: 'permission',
-      title: '权限标识',
-      minWidth: 200,
-    },
-    {
-      field: 'path',
-      title: '组件路径',
-      minWidth: 200,
-    },
-    {
-      field: 'componentName',
-      minWidth: 200,
-      title: '组件名称',
-    },
-    {
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.COMMON_STATUS },
-      },
-      field: 'status',
-      title: '状态',
-      minWidth: 100,
-    },
-    {
-      align: 'right',
-      cellRender: {
-        attrs: {
-          nameField: 'name',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'append',
-            text: '新增下级',
-          },
-          'edit', // 默认的编辑按钮
-          'delete', // 默认的删除按钮
-        ],
-      },
-      field: 'operation',
-      fixed: 'right',
-      headerAlign: 'center',
-      showOverflow: false,
-      title: '操作',
-      minWidth: 200,
-    },
-  ];
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(onActionClick),
@@ -194,6 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions,
 });
 </script>
+
 <template>
   <Page auto-content-height>
     <FormModal @success="onRefresh" />

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

@@ -1,23 +1,16 @@
 <script lang="ts" setup>
 import type { SystemMenuApi } from '#/api/system/menu';
-import type { Recordable } from '@vben/types';
-import type { VbenFormSchema } from '#/adapter/form';
 
 import { $t } from '#/locales';
-import { computed, h, ref } from 'vue';
+import { computed, ref } from 'vue';
-import { componentKeys } from '#/router/routes';
+import { useVbenForm } from '#/adapter/form';
-import { useVbenForm, z } from '#/adapter/form';
 import { createMenu, getMenu, updateMenu } from '#/api/system/menu';
-import { getMenuList } from '#/api/system/menu';
-import { DICT_TYPE, getDictOptions } from '#/utils/dict';
-import { handleTree } from '#/utils/tree';
-import { CommonStatusEnum, SystemMenuTypeEnum } from '#/utils/constants';
-import { isHttpUrl } from '@vben/utils';
 
 import { useVbenModal } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
 import { message } from 'ant-design-vue';
 
+import { useFormSchema } from '../data';
+
 const emit = defineEmits(['success']);
 const formData = ref<SystemMenuApi.SystemMenu>();
 const getTitle = computed(() =>
@@ -25,244 +18,10 @@ const getTitle = computed(() =>
     ? $t('ui.actionTitle.edit', ['菜单'])
     : $t('ui.actionTitle.create', ['菜单']),
 );
-const schema: VbenFormSchema[] = [
-  {
-    component: 'Input',
-    fieldName: 'id',
-    dependencies: {
-      triggerFields: [''],
-      show: () => false,
-    },
-  },
-  {
-    fieldName: 'parentId',
-    label: '上级菜单',
-    component: 'ApiTreeSelect',
-    componentProps: {
-      allowClear: true,
-      api: async () => {
-        const data = await getMenuList();
-        data.unshift({
-          id: 0,
-          name: '顶级部门',
-        } as SystemMenuApi.SystemMenu);
-        return handleTree(data);
-      },
-      class: 'w-full',
-      labelField: 'name',
-      valueField: 'id',
-      childrenField: 'children',
-      placeholder: '请选择上级菜单',
-      filterTreeNode(input: string, node: Recordable<any>) {
-        if (!input || input.length === 0) {
-          return true;
-        }
-        const name: string = node.label ?? '';
-        if (!name) return false;
-        return name.includes(input) || $t(name).includes(input);
-      },
-      showSearch: true,
-      treeDefaultExpandedKeys: [0],
-    },
-    rules: 'selectRequired',
-    renderComponentContent() {
-      return {
-        title({ label, icon }: { label: string; icon: string }) {
-          const components = [];
-          if (!label) return '';
-          if (icon) {
-            components.push(h(IconifyIcon, { class: 'size-4', icon }));
-          }
-          components.push(h('span', { class: '' }, $t(label || '')));
-          return h('div', { class: 'flex items-center gap-1' }, components);
-        },
-      };
-    },
-  },
-  {
-    fieldName: 'name',
-    label: '菜单名称',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入菜单名称',
-    },
-    rules: 'required',
-  },
-  {
-    fieldName: 'type',
-    label: '菜单类型',
-    component: 'RadioGroup',
-    componentProps: {
-      options: getDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE, 'number'),
-      buttonStyle: 'solid',
-      optionType: 'button',
-    },
-    rules: z.number().default(SystemMenuTypeEnum.DIR),
-  },
-  {
-    fieldName: 'icon',
-    label: '菜单图标',
-    component: 'IconPicker',
-    componentProps: {
-      placeholder: '请选择菜单图标',
-      prefix: 'carbon',
-    },
-    rules: 'required',
-    dependencies: {
-      triggerFields: ['type'],
-      show: (values) => {
-        return [SystemMenuTypeEnum.DIR, SystemMenuTypeEnum.MENU].includes(values.type);
-      },
-    },
-  },
-  {
-    fieldName: 'path',
-    label: '路由地址',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入路由地址',
-    },
-    rules: z.string(),
-    help: '访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头',
-    dependencies: {
-      triggerFields: ['type', 'parentId'],
-      show: (values) => {
-        return [SystemMenuTypeEnum.DIR, SystemMenuTypeEnum.MENU].includes(values.type);
-      },
-      rules: (values) => {
-        const schema = z.string().min(1, '路由地址不能为空');
-        if (isHttpUrl(values.path)) {
-          return schema;
-        }
-        if (values.parentId === 0) {
-          return schema.refine((path) => path.charAt(0) === '/', '路径必须以 / 开头');
-        }
-        return schema.refine((path) => path.charAt(0) !== '/', '路径不能以 / 开头');
-      },
-    }
-  },
-  {
-    fieldName: 'component',
-    label: '组件地址',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入组件地址',
-    },
-    dependencies: {
-      triggerFields: ['type'],
-      show: (values) => {
-        return [SystemMenuTypeEnum.MENU].includes(values.type);
-      }
-    },
-  },
-  {
-    fieldName: 'componentName',
-    label: '组件名称',
-    component: 'AutoComplete',
-    componentProps: {
-      allowClear: true,
-      class: 'w-full',
-      filterOption(input: string, option: { value: string }) {
-        return option.value.toLowerCase().includes(input.toLowerCase());
-      },
-      placeholder: '请选择组件名称',
-      options: componentKeys.map((v) => ({ value: v })),
-    },
-    dependencies: {
-      triggerFields: ['type'],
-      show: (values) => {
-        return [SystemMenuTypeEnum.MENU].includes(values.type);
-      }
-    },
-  },
-  {
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入菜单描述',
-    },
-    dependencies: {
-      show: (values) => {
-        return [SystemMenuTypeEnum.MENU, SystemMenuTypeEnum.BUTTON].includes(
-          values.type,
-        );
-      },
-      triggerFields: ['type'],
-    },
-    fieldName: 'permission',
-    label: '权限标识',
-  },
-  {
-    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),
-  },
-  {
-    fieldName: 'alwaysShow',
-    label: '总是显示',
-    component: 'RadioGroup',
-    componentProps: {
-      options: [
-        { label: '总是', value: true },
-        { label: '不是', value: false },
-      ],
-      buttonStyle: 'solid',
-      optionType: 'button',
-    },
-    rules: 'required',
-    defaultValue: true,
-    help: '选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单',
-    dependencies: {
-      triggerFields: ['type'],
-      show: (values) => {
-        return [SystemMenuTypeEnum.MENU].includes(values.type);
-      },
-    },
-  },
-  {
-    fieldName: 'keepAlive',
-    label: '缓存状态',
-    component: 'RadioGroup',
-    componentProps: {
-      options: [
-        { label: '缓存', value: true },
-        { label: '不缓存', value: false },
-      ],
-      buttonStyle: 'solid',
-      optionType: 'button',
-    },
-    rules: 'required',
-    defaultValue: true,
-    help: '选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段',
-    dependencies: {
-      triggerFields: ['type'],
-      show: (values) => {
-        return [SystemMenuTypeEnum.MENU].includes(values.type);
-      },
-    },
-  },
-];
 
 const [Form, formApi] = useVbenForm({
   layout: 'horizontal',
-  schema,
+  schema: useFormSchema(),
   showDefaultActions: false,
 });
 
@@ -273,9 +32,11 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
+    // 提交表单
     const data = (await formApi.getValues()) as SystemMenuApi.SystemMenu;
     try {
       await (formData.value?.id ? updateMenu(data) : createMenu(data));
+      // 关闭并提示
       await modalApi.close();
       emit('success');
       message.success({
@@ -290,6 +51,7 @@ const [Modal, modalApi] = useVbenModal({
     if (!isOpen) {
       return;
     }
+    // 加载数据
     let data = modalApi.getData<SystemMenuApi.SystemMenu>();
     if (!data) {
       return;
@@ -302,11 +64,13 @@ const [Modal, modalApi] = useVbenModal({
         modalApi.lock(false);
       }
     }
+    // 设置到 values
     formData.value = data;
     await formApi.setValues(formData.value);
   },
 });
 </script>
+
 <template>
   <Modal :title="getTitle">
     <Form class="mx-4" />

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 {
+import type { OnActionClickParams, VxeTableGridOptions } 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 { 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) {
+function onRefresh() {
-  formModalApi.setData(row).open();
+  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
+      await (formData.value?.id ? updatePost(data) : createPost(data));
-        ? 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);

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

@@ -10,53 +10,52 @@ import { CommonStatusEnum, SystemDataScopeEnum } from '#/utils/constants';
 export function useFormSchema(): VbenFormSchema[] {
   return [
     {
-      component: 'Input',
       fieldName: 'id',
-      label: 'id',
+      component: 'Input',
       dependencies: {
         triggerFields: [''],
         show: () => false,
       },
     },
     {
-      component: 'Input',
       fieldName: 'name',
       label: '角色名称',
+      component: 'Input',
       rules: 'required',
     },
     {
-      component: 'Input',
       fieldName: 'code',
       label: '角色标识',
+      component: 'Input',
       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',
     },
   ];
 }
@@ -67,16 +66,15 @@ export function useAssignDataPermissionFormSchema(): VbenFormSchema[] {
     {
       component: 'Input',
       fieldName: 'id',
-      label: 'id',
       dependencies: {
         triggerFields: [''],
         show: () => false,
       },
     },
     {
-      component: 'Input',
       fieldName: 'name',
       label: '角色名称',
+      component: 'Input',
       componentProps: {
         disabled: true,
       },
@@ -99,17 +97,16 @@ export function useAssignDataPermissionFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      component: 'Input',
       fieldName: 'dataScopeDeptIds',
       label: '部门范围',
+      component: 'Input',
+      formItemClass: 'items-start',
       dependencies: {
         triggerFields: ['dataScope'],
         show: (values) => {
           return values.dataScope === SystemDataScopeEnum.DEPT_CUSTOM;
         },
       },
-      formItemClass: 'items-start',
-      modelPropName: 'modelValue', // TODO @芋艿：这个是不是可以去掉哈
     },
   ];
 }
@@ -118,36 +115,34 @@ export function useAssignDataPermissionFormSchema(): VbenFormSchema[] {
 export function useAssignMenuFormSchema(): VbenFormSchema[] {
   return [
     {
-      component: 'Input',
       fieldName: 'id',
-      label: 'id',
+      component: 'Input',
       dependencies: {
         triggerFields: [''],
         show: () => false,
       },
     },
     {
-      component: 'Input',
       fieldName: 'name',
       label: '角色名称',
+      component: 'Input',
       componentProps: {
         disabled: true,
       },
     },
     {
-      component: 'Input',
       fieldName: 'code',
       label: '角色标识',
+      component: 'Input',
       componentProps: {
         disabled: true,
       },
     },
     {
-      component: 'Input',
       fieldName: 'menuIds',
       label: '菜单权限',
+      component: 'Input',
       formItemClass: 'items-start',
-      modelPropName: 'modelValue', // TODO @芋艿：这个是不是可以去掉哈
     },
   ];
 }
@@ -156,28 +151,28 @@ export function useAssignMenuFormSchema(): 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: '角色状态',
     },
     {
-      component: 'RangePicker',
       fieldName: 'createTime',
       label: '创建时间',
+      component: 'RangePicker',
     },
   ];
 }
@@ -198,13 +193,13 @@ export function useGridColumns<T = SystemRoleApi.SystemRole>(
       minWidth: 200,
     },
     {
+      field: 'type',
+      title: '角色类型',
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.SYSTEM_ROLE_TYPE },
       },
-      field: 'type',
-      title: '角色类型',
-      minWidth: 100,
     },
     {
       field: 'code',
@@ -213,22 +208,22 @@ export function useGridColumns<T = SystemRoleApi.SystemRole>(
     },
     {
       field: 'sort',
-      title: '角色顺序',
+      title: '显示顺序',
       minWidth: 100,
     },
     {
       field: 'remark',
-      minWidth: 100,
       title: '角色备注',
+      minWidth: 100,
     },
     {
+      field: 'status',
+      title: '角色状态',
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
-      field: 'status',
-      title: '角色状态',
-      minWidth: 100,
     },
     {
       field: 'createTime',
@@ -237,6 +232,10 @@ export function useGridColumns<T = SystemRoleApi.SystemRole>(
       formatter: 'formatDateTime',
     },
     {
+      field: 'operation',
+      title: '操作',
+      width: 240,
+      fixed: 'right',
       align: 'center',
       cellRender: {
         attrs: {
@@ -258,10 +257,6 @@ export function useGridColumns<T = SystemRoleApi.SystemRole>(
           }
         ],
       },
-      field: 'operation',
-      fixed: 'right',
-      title: '操作',
-      width: 240,
     },
   ];
 }

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

@@ -1,23 +1,20 @@
 <script lang="ts" setup>
-import type {
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { SystemRoleApi } from '#/api/system/role';
 
-import { $t } from '#/locales';
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getRolePage, deleteRole, exportRole } from '#/api/system/role';
-
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Button, message } from 'ant-design-vue';
 import { Plus, Download } from '@vben/icons';
+import Form from './modules/form.vue';
+
+import { $t } from '#/locales';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getRolePage, deleteRole, exportRole } from '#/api/system/role';
+import AssignDataPermissionForm from './modules/assign-data-permission-form.vue';
+import AssignMenuForm from './modules/assign-menu-form.vue';
+import { downloadByData } from '#/utils/download';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import Form from './modules/form.vue';
-import AssignDataPermissionForm from './modules/assign-data-permission-form.vue';
-import AssignMenuForm from '#/views/system/role/modules/assign-menu-form.vue';
-import { downloadByData } from '#/utils/download';
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
@@ -34,6 +31,17 @@ const [AssignMenuFormModel, assignMenuFormApi] = useVbenModal({
   destroyOnClose: true,
 })
 
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function onExport() {
+  const data = await exportRole(await gridApi.formApi.getValues());
+  downloadByData(data, '角色.xls');
+}
+
 /** 编辑角色 */
 function onEdit(row: SystemRoleApi.SystemRole) {
   formModalApi.setData(row).open();
@@ -128,18 +136,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<SystemRoleApi.SystemRole>,
 });
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
-
-/** 导出表格 */
-async function onExport() {
-  const data = await exportRole(await gridApi.formApi.getValues());
-  downloadByData(data, '角色.xls');
-}
 </script>
+
 <template>
   <Page auto-content-height>
     <FormModal @success="onRefresh" />

apps/web-antd/src/views/system/role/modules/assign-data-permission-form.vue

@@ -13,9 +13,9 @@ import { getRole } from '#/api/system/role';
 import { assignRoleDataScope } from '#/api/system/permission';
 import { getDeptList } from '#/api/system/dept';
 import { handleTree } from '#/utils/tree';
+import { SystemDataScopeEnum } from '#/utils/constants';
 
 import { useAssignDataPermissionFormSchema } from '../data';
-import { SystemDataScopeEnum } from '#/utils/constants';
 
 const emit = defineEmits(['success']);
 
@@ -70,6 +70,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       await formApi.setValues(await getRole(data.id as number));
+
       // 加载部门列表
       await loadDeptTree();
       toggleExpandAll();

apps/web-antd/src/views/system/role/modules/assign-menu-form.vue

@@ -36,12 +36,14 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
+    // 提交表单
     const data = await formApi.getValues();
     try {
       await assignRoleMenu({
         roleId: data.id,
         menuIds: data.menuIds
       });
+      // 关闭并提示
       await modalApi.close();
       emit('success');
       message.success({
@@ -63,6 +65,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       await formApi.setValues(data);
+
       // 加载角色菜单
       const menuIds = await getRoleMenuList(data.id as number);
       await formApi.setFieldValue('menuIds', menuIds);

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

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