reactor：【system 系统管理】role 进一步统一代码风格

2025-09-06 20:17:38 +08:00
parent 6d47871f02
commit 8d5a6d8aa0
8 changed files with 224 additions and 206 deletions
--- a/apps/web-antd/src/views/system/role/data.ts
+++ b/apps/web-antd/src/views/system/role/data.ts
@@ -1,12 +1,14 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';

-import { CommonStatusEnum, SystemDataScopeEnum } from '@vben/constants';
-
-import { z } from '#/adapter/form';
-import { DICT_TYPE } from '@vben/constants';
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  SystemDataScopeEnum,
+} from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';

+import { z } from '#/adapter/form';
 import { getRangePickerDefaultProps } from '#/utils';

 /** 新增/修改的表单 */
@@ -155,19 +157,28 @@ export function useGridFormSchema(): VbenFormSchema[] {
      fieldName: 'name',
      label: '角色名称',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入角色名称',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'code',
      label: '角色标识',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入角色标识',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'status',
      label: '角色状态',
      component: 'Select',
      componentProps: {
-        allowClear: true,
        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择角色状态',
+        allowClear: true,
      },
    },
    {
@@ -189,14 +200,17 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'id',
      title: '角色编号',
+      minWidth: 100,
    },
    {
      field: 'name',
      title: '角色名称',
+      minWidth: 200,
    },
    {
      field: 'type',
      title: '角色类型',
+      minWidth: 100,
      cellRender: {
        name: 'CellDict',
        props: { type: DICT_TYPE.SYSTEM_ROLE_TYPE },
@@ -205,18 +219,22 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'code',
      title: '角色标识',
+      minWidth: 200,
    },
    {
      field: 'sort',
      title: '显示顺序',
+      minWidth: 100,
    },
    {
      field: 'remark',
      title: '角色备注',
+      minWidth: 100,
    },
    {
      field: 'status',
      title: '角色状态',
+      minWidth: 100,
      cellRender: {
        name: 'CellDict',
        props: { type: DICT_TYPE.COMMON_STATUS },
@@ -225,6 +243,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'createTime',
      title: '创建时间',
+      minWidth: 180,
      formatter: 'formatDateTime',
    },
    {
--- a/apps/web-antd/src/views/system/role/index.vue
+++ b/apps/web-antd/src/views/system/role/index.vue
@@ -4,7 +4,7 @@ import type { SystemRoleApi } from '#/api/system/role';

 import { ref } from 'vue';

-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';

 import { message } from 'ant-design-vue';
@@ -40,7 +40,7 @@ const [AssignMenuFormModel, assignMenuFormApi] = useVbenModal({
 });

 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
  gridApi.query();
 }

@@ -50,29 +50,43 @@ async function handleExport() {
  downloadFileFromBlobPart({ fileName: '角色.xls', source: data });
 }

-/** 编辑角色 */
-function handleEdit(row: SystemRoleApi.Role) {
-  formModalApi.setData(row).open();
-}
-
 /** 创建角色 */
 function handleCreate() {
  formModalApi.setData(null).open();
 }

+/** 编辑角色 */
+function handleEdit(row: SystemRoleApi.Role) {
+  formModalApi.setData(row).open();
+}
+
 /** 删除角色 */
 async function handleDelete(row: SystemRoleApi.Role) {
  const hideLoading = message.loading({
    content: $t('ui.actionMessage.deleting', [row.name]),
-    key: 'action_key_msg',
+    duration: 0,
  });
  try {
    await deleteRole(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 批量删除角色 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteRoleList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
  } finally {
    hideLoading();
  }
@@ -87,23 +101,6 @@ function handleRowCheckboxChange({
  checkedIds.value = records.map((item) => item.id!);
 }

-/** 批量删除角色 */
-async function handleDeleteBatch() {
-  const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting'),
-    duration: 0,
-    key: 'action_process_msg',
-  });
-  try {
-    await deleteRoleList(checkedIds.value);
-    checkedIds.value = [];
-    message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    hideLoading();
-  }
-}
-
 /** 分配角色的数据权限 */
 function handleAssignDataPermission(row: SystemRoleApi.Role) {
  assignDataPermissionFormApi.setData(row).open();
@@ -159,9 +156,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
      <DocAlert title="数据权限" url="https://doc.iocoder.cn/data-permission" />
    </template>

-    <FormModal @success="onRefresh" />
-    <AssignDataPermissionFormModel @success="onRefresh" />
-    <AssignMenuFormModel @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
+    <AssignDataPermissionFormModel @success="handleRefresh" />
+    <AssignMenuFormModel @success="handleRefresh" />
    <Grid table-title="角色列表">
      <template #toolbar-tools>
        <TableAction
@@ -181,11 +178,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
              onClick: handleExport,
            },
            {
-              label: '批量删除',
+              label: $t('ui.actionTitle.deleteBatch'),
              type: 'primary',
              danger: true,
-              disabled: isEmpty(checkedIds),
              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
              auth: ['system:role:delete'],
              onClick: handleDeleteBatch,
            },
--- 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
@@ -76,8 +76,8 @@ const [Modal, modalApi] = useVbenModal({
    try {
      // 加载部门列表
      await loadDeptTree();
-      toggleExpandAll();
-      // 设置表单值, 一定要在加载树之后
+      handleExpandAll();
+      // 设置表单值，一定要在加载树之后
      await formApi.setValues(await getRole(data.id));
    } finally {
      modalApi.unlock();
@@ -97,7 +97,7 @@ async function loadDeptTree() {
 }

 /** 全选/全不选 */
-function toggleSelectAll() {
+function handleSelectAll() {
  isAllSelected.value = !isAllSelected.value;
  if (isAllSelected.value) {
    const allIds = getAllNodeIds(deptTree.value);
@@ -108,14 +108,13 @@ function toggleSelectAll() {
 }

 /** 展开/折叠所有节点 */
-function toggleExpandAll() {
+function handleExpandAll() {
  isExpanded.value = !isExpanded.value;
-  // 获取所有节点的 ID
  expandedKeys.value = isExpanded.value ? getAllNodeIds(deptTree.value) : [];
 }

 /** 切换父子联动 */
-function toggleCheckStrictly() {
+function handleCheckStrictly() {
  isCheckStrictly.value = !isCheckStrictly.value;
 }

@@ -151,13 +150,13 @@ function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
    </Form>
    <template #prepend-footer>
      <div class="flex flex-auto items-center">
-        <Checkbox :checked="isAllSelected" @change="toggleSelectAll">
+        <Checkbox :checked="isAllSelected" @change="handleSelectAll">
          全选
        </Checkbox>
-        <Checkbox :checked="isExpanded" @change="toggleExpandAll">
+        <Checkbox :checked="isExpanded" @change="handleExpandAll">
          全部展开
        </Checkbox>
-        <Checkbox :checked="isCheckStrictly" @change="toggleCheckStrictly">
+        <Checkbox :checked="isCheckStrictly" @change="handleCheckStrictly">
          父子联动
        </Checkbox>
      </div>
--- 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
@@ -4,7 +4,7 @@ import type { Recordable } from '@vben/types';
 import type { SystemMenuApi } from '#/api/system/menu';
 import type { SystemRoleApi } from '#/api/system/role';

-import { ref } from 'vue';
+import {nextTick, ref} from 'vue';

 import { useVbenModal, VbenTree } from '@vben/common-ui';
 import { SystemMenuTypeEnum } from '@vben/constants';
@@ -80,6 +80,7 @@ const [Modal, modalApi] = useVbenModal({

      await formApi.setValues(data);
    } finally {
+      await nextTick(); // 菜单过多，渲染较慢，需要等下一次事件循环
      modalApi.unlock();
    }
  },
@@ -97,7 +98,7 @@ async function loadMenuTree() {
 }

 /** 全选/全不选 */
-function toggleSelectAll() {
+function handleSelectAll() {
  isAllSelected.value = !isAllSelected.value;
  if (isAllSelected.value) {
    const allIds = getAllNodeIds(menuTree.value);
@@ -108,9 +109,8 @@ function toggleSelectAll() {
 }

 /** 展开/折叠所有节点 */
-function toggleExpandAll() {
+function handleExpandAll() {
  isExpanded.value = !isExpanded.value;
-  // 获取所有节点的 ID
  expandedKeys.value = isExpanded.value ? getAllNodeIds(menuTree.value) : [];
 }

@@ -158,10 +158,10 @@ function getNodeClass(node: Recordable<any>) {
    </Form>
    <template #prepend-footer>
      <div class="flex flex-auto items-center">
-        <Checkbox :checked="isAllSelected" @change="toggleSelectAll">
+        <Checkbox :checked="isAllSelected" @change="handleSelectAll">
          全选
        </Checkbox>
-        <Checkbox :checked="isExpanded" @change="toggleExpandAll">
+        <Checkbox :checked="isExpanded" @change="handleExpandAll">
          全部展开
        </Checkbox>
      </div>