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

2025-04-03 07:49:00 +08:00
parent ff67eb3380
commit 0d5993527e
14 changed files with 555 additions and 545 deletions
--- a/apps/web-antd/src/views/system/role/data.ts
+++ b/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,
    },
  ];
 }
--- a/apps/web-antd/src/views/system/role/index.vue
+++ b/apps/web-antd/src/views/system/role/index.vue
@@ -1,23 +1,20 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { 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" />
--- a/apps/web-antd/src/views/system/role/modules/assign-data-permission-form.vue
+++ b/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();
--- a/apps/web-antd/src/views/system/role/modules/assign-menu-form.vue
+++ b/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);
--- a/apps/web-antd/src/views/system/role/modules/form.vue
+++ b/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
-        ? updateRole(data)
-        : createRole(data));
+      await (formData.value?.id ? 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);