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

2025-09-08 09:52:43 +08:00 · 2025-09-08 09:52:43 +08:00 · 28df31cc37
parent 74ffefb09f
commit 28df31cc37
6 changed files with 123 additions and 92 deletions
--- a/apps/web-antd/src/views/system/user/data.ts
+++ b/apps/web-antd/src/views/system/user/data.ts
@ -4,6 +4,7 @@ import type { SystemUserApi } from '#/api/system/user';

 import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
+import { $t } from '@vben/locales';
 import { handleTree } from '@vben/utils';

 import { z } from '#/adapter/form';
@ -45,6 +46,7 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'Input',
      rules: 'required',
    },
+    // TODO @xingyu：【重要】这个字段出不来
    {
      fieldName: 'deptId',
      label: '归属部门',
@ -126,31 +128,50 @@ export function useResetPasswordFormSchema(): VbenFormSchema[] {
      },
    },
    {
-      fieldName: 'newPassword',
-      label: '新密码',
-      component: 'InputPassword',
+      component: 'VbenInputPassword',
      componentProps: {
+        passwordStrength: true,
        placeholder: '请输入新密码',
      },
+      dependencies: {
+        rules(values) {
+          return z
+            .string({ message: '请输入新密码' })
+            .min(5, '密码长度不能少于 5 个字符')
+            .max(20, '密码长度不能超过 20 个字符')
+            .refine(
+              (value) => value !== values.oldPassword,
+              '新旧密码不能相同',
+            );
+        },
+        triggerFields: ['newPassword', 'oldPassword'],
+      },
+      fieldName: 'newPassword',
+      label: '新密码',
      rules: 'required',
    },
    {
-      fieldName: 'confirmPassword',
-      label: '确认密码',
-      component: 'InputPassword',
+      component: 'VbenInputPassword',
      componentProps: {
-        placeholder: '请再次输入新密码',
+        passwordStrength: true,
+        placeholder: $t('authentication.confirmPassword'),
      },
      dependencies: {
-        rules(values: Record<string, any>) {
-          const { newPassword } = values;
+        rules(values) {
          return z
-            .string()
-            .nonempty('确认密码不能为空')
-            .refine((value) => value === newPassword, '两次输入的密码不一致');
+            .string({ message: '请输入确认密码' })
+            .min(5, '密码长度不能少于 5 个字符')
+            .max(20, '密码长度不能超过 20 个字符')
+            .refine(
+              (value) => value === values.newPassword,
+              '新密码和确认密码不一致',
+            );
        },
-        triggerFields: ['newPassword'],
+        triggerFields: ['newPassword', 'confirmPassword'],
      },
+      fieldName: 'confirmPassword',
+      label: '确认密码',
+      rules: 'required',
    },
  ];
 }
@ -207,6 +228,7 @@ export function useImportFormSchema(): VbenFormSchema[] {
      rules: 'required',
      help: '仅允许导入 xls、xlsx 格式文件',
    },
+    // TODO @xingyu：【重要】看不到 switch 这个按钮
    {
      fieldName: 'updateSupport',
      label: '是否覆盖',
@ -266,26 +288,32 @@ export function useGridColumns<T = SystemUserApi.User>(
    {
      field: 'id',
      title: '用户编号',
+      minWidth: 100,
    },
    {
      field: 'username',
      title: '用户名称',
+      minWidth: 120,
    },
    {
      field: 'nickname',
      title: '用户昵称',
+      minWidth: 120,
    },
    {
      field: 'deptName',
      title: '部门',
+      minWidth: 120,
    },
    {
      field: 'mobile',
      title: '手机号码',
+      minWidth: 120,
    },
    {
      field: 'status',
      title: '状态',
+      minWidth: 100,
      align: 'center',
      cellRender: {
        attrs: { beforeChange: onStatusChange },
@ -299,6 +327,7 @@ export function useGridColumns<T = SystemUserApi.User>(
    {
      field: 'createTime',
      title: '创建时间',
+      minWidth: 180,
      formatter: 'formatDateTime',
    },
    {
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/apps/web-antd/src/views/system/user/index.vue
@ -50,7 +50,7 @@ const [ImportModal, importModalApi] = useVbenModal({
 });

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

@ -62,10 +62,9 @@ async function handleExport() {

 /** 选择部门 */
 const searchDeptId = ref<number | undefined>(undefined);
-
 async function handleDeptSelect(dept: SystemDeptApi.Dept) {
  searchDeptId.value = dept.id;
-  onRefresh();
+  handleRefresh();
 }

 /** 创建用户 */
@ -87,15 +86,29 @@ function handleEdit(row: SystemUserApi.User) {
 async function handleDelete(row: SystemUserApi.User) {
  const hideLoading = message.loading({
    content: $t('ui.actionMessage.deleting', [row.username]),
-    key: 'action_key_msg',
+    duration: 0,
  });
  try {
    await deleteUser(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.username]),
-      key: 'action_key_msg',
-    });
-    onRefresh();
+    message.success($t('ui.actionMessage.deleteSuccess', [row.username]));
+    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 deleteUserList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
  } finally {
    hideLoading();
  }
@ -110,23 +123,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 deleteUserList(checkedIds.value);
-    checkedIds.value = [];
-    message.success($t('ui.actionMessage.deleteSuccess'));
-    onRefresh();
-  } finally {
-    hideLoading();
-  }
-}
-
 /** 重置密码 */
 function handleResetPassword(row: SystemUserApi.User) {
  resetPasswordModalApi.setData(row).open();
@ -210,10 +206,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
      />
    </template>

-    <FormModal @success="onRefresh" />
-    <ResetPasswordModal @success="onRefresh" />
-    <AssignRoleModal @success="onRefresh" />
-    <ImportModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
+    <ResetPasswordModal @success="handleRefresh" />
+    <AssignRoleModal @success="handleRefresh" />
+    <ImportModal @success="handleRefresh" />

    <div class="flex h-full w-full">
      <!-- 左侧部门树 -->
@ -248,11 +244,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
                  onClick: handleImport,
                },
                {
-                  label: '批量删除',
+                  label: $t('ui.actionTitle.deleteBatch'),
                  type: 'primary',
                  danger: true,
-                  disabled: isEmpty(checkedIds),
                  icon: ACTION_ICON.DELETE,
+                  disabled: isEmpty(checkedIds),
                  auth: ['system:user:delete'],
                  onClick: handleDeleteBatch,
                },
--- a/apps/web-antd/src/views/system/user/modules/form.vue
+++ b/apps/web-antd/src/views/system/user/modules/form.vue
@ -26,8 +26,9 @@ const [Form, formApi] = useVbenForm({
    componentProps: {
      class: 'w-full',
    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
  },
-  wrapperClass: 'grid-cols-2',
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
--- a/apps/web-ele/src/views/system/user/data.ts
+++ b/apps/web-ele/src/views/system/user/data.ts
@ -282,10 +282,7 @@ export function useGridColumns<T = SystemUserApi.User>(
  ) => PromiseLike<boolean | undefined>,
 ): VxeTableGridOptions['columns'] {
  return [
-    {
-      type: 'checkbox',
-      width: 40,
-    },
+    { type: 'checkbox', width: 40 },
    {
      field: 'id',
      title: '用户编号',
--- a/apps/web-ele/src/views/system/user/index.vue
+++ b/apps/web-ele/src/views/system/user/index.vue
@ -50,59 +50,66 @@ const [ImportModal, importModalApi] = useVbenModal({
 });

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

 /** 导出表格 */
-async function onExport() {
+async function handleExport() {
  const data = await exportUser(await gridApi.formApi.getValues());
  downloadFileFromBlobPart({ fileName: '用户.xls', source: data });
 }

 /** 选择部门 */
 const searchDeptId = ref<number | undefined>(undefined);
-async function onDeptSelect(dept: SystemDeptApi.Dept) {
+async function handleDeptSelect(dept: SystemDeptApi.Dept) {
  searchDeptId.value = dept.id;
-  onRefresh();
+  handleRefresh();
 }

 /** 创建用户 */
-function onCreate() {
+function handleCreate() {
  formModalApi.setData(null).open();
 }

 /** 导入用户 */
-function onImport() {
+function handleImport() {
  importModalApi.open();
 }

 /** 编辑用户 */
-function onEdit(row: SystemUserApi.User) {
+function handleEdit(row: SystemUserApi.User) {
  formModalApi.setData(row).open();
 }

 /** 删除用户 */
-async function onDelete(row: SystemUserApi.User) {
+async function handleDelete(row: SystemUserApi.User) {
  const loadingInstance = ElLoading.service({
    text: $t('ui.actionMessage.deleting', [row.username]),
  });
  try {
    await deleteUser(row.id as number);
    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.username]));
-    onRefresh();
+    handleRefresh();
  } finally {
    loadingInstance.close();
  }
 }

 /** 批量删除用户 */
-async function onDeleteBatch() {
-  await confirm('确定要批量删除该用户吗？');
-  await deleteUserList(checkedIds.value);
-  checkedIds.value = [];
-  ElMessage.success($t('ui.actionMessage.deleteSuccess'));
-  onRefresh();
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deletingBatch'),
+  });
+  try {
+    await deleteUserList(checkedIds.value);
+    checkedIds.value = [];
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }

 const checkedIds = ref<number[]>([]);
@ -115,17 +122,17 @@ function handleRowCheckboxChange({
 }

 /** 重置密码 */
-function onResetPassword(row: SystemUserApi.User) {
+function handleResetPassword(row: SystemUserApi.User) {
  resetPasswordModalApi.setData(row).open();
 }

 /** 分配角色 */
-function onAssignRole(row: SystemUserApi.User) {
+function handleAssignRole(row: SystemUserApi.User) {
  assignRoleModalApi.setData(row).open();
 }

 /** 更新用户状态 */
-async function onStatusChange(
+async function handleStatusChange(
  newStatus: number,
  row: SystemUserApi.User,
 ): Promise<boolean | undefined> {
@ -155,7 +162,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    schema: useGridFormSchema(),
  },
  gridOptions: {
-    columns: useGridColumns(onStatusChange),
+    columns: useGridColumns(handleStatusChange),
    height: 'auto',
    keepSource: true,
    proxyConfig: {
@ -172,6 +179,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
    rowConfig: {
      keyField: 'id',
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
@ -196,15 +204,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
      />
    </template>

-    <FormModal @success="onRefresh" />
-    <ResetPasswordModal @success="onRefresh" />
-    <AssignRoleModal @success="onRefresh" />
-    <ImportModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
+    <ResetPasswordModal @success="handleRefresh" />
+    <AssignRoleModal @success="handleRefresh" />
+    <ImportModal @success="handleRefresh" />

    <div class="flex h-full w-full">
      <!-- 左侧部门树 -->
      <div class="h-full w-1/6 pr-4">
-        <DeptTree @select="onDeptSelect" />
+        <DeptTree @select="handleDeptSelect" />
      </div>
      <!-- 右侧用户列表 -->
      <div class="w-5/6">
@ -217,21 +225,21 @@ const [Grid, gridApi] = useVbenVxeGrid({
                  type: 'primary',
                  icon: ACTION_ICON.ADD,
                  auth: ['system:user:create'],
-                  onClick: onCreate,
+                  onClick: handleCreate,
                },
                {
                  label: $t('ui.actionTitle.export'),
                  type: 'primary',
                  icon: ACTION_ICON.DOWNLOAD,
                  auth: ['system:user:export'],
-                  onClick: onExport,
+                  onClick: handleExport,
                },
                {
                  label: $t('ui.actionTitle.import', ['用户']),
                  type: 'primary',
                  icon: ACTION_ICON.UPLOAD,
                  auth: ['system:user:import'],
-                  onClick: onImport,
+                  onClick: handleImport,
                },
                {
                  label: $t('ui.actionTitle.deleteBatch'),
@ -239,7 +247,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                  icon: ACTION_ICON.DELETE,
                  disabled: isEmpty(checkedIds),
                  auth: ['system:user:delete'],
-                  onClick: onDeleteBatch,
+                  onClick: handleDeleteBatch,
                },
              ]"
            />
@ -249,35 +257,38 @@ const [Grid, gridApi] = useVbenVxeGrid({
              :actions="[
                {
                  label: $t('common.edit'),
-                  type: 'text',
+                  type: 'primary',
+                  link: true,
                  icon: ACTION_ICON.EDIT,
                  auth: ['system:user:update'],
-                  onClick: onEdit.bind(null, row),
+                  onClick: handleEdit.bind(null, row),
                },
                {
                  label: $t('common.delete'),
                  type: 'danger',
-                  text: true,
+                  link: true,
                  icon: ACTION_ICON.DELETE,
                  auth: ['system:user:delete'],
                  popConfirm: {
                    title: $t('ui.actionMessage.deleteConfirm', [row.username]),
-                    confirm: onDelete.bind(null, row),
+                    confirm: handleDelete.bind(null, row),
                  },
                },
              ]"
              :drop-down-actions="[
                {
                  label: '分配角色',
-                  type: 'text',
+                  type: 'primary',
+                  link: true,
                  auth: ['system:permission:assign-user-role'],
-                  onClick: onAssignRole.bind(null, row),
+                  onClick: handleAssignRole.bind(null, row),
                },
                {
                  label: '重置密码',
-                  type: 'text',
+                  type: 'primary',
+                  link: true,
                  auth: ['system:user:update-password'],
-                  onClick: onResetPassword.bind(null, row),
+                  onClick: handleResetPassword.bind(null, row),
                },
              ]"
            />
--- a/apps/web-ele/src/views/system/user/modules/import-form.vue
+++ b/apps/web-ele/src/views/system/user/modules/import-form.vue
@ -16,11 +16,8 @@ const emit = defineEmits(['success']);

 const [Form, formApi] = useVbenForm({
  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
    formItemClass: 'col-span-2',
-    labelWidth: 80,
+    labelWidth: 120,
  },
  layout: 'horizontal',
  schema: useImportFormSchema(),
@ -55,7 +52,7 @@ function beforeUpload(file: UploadRawFile) {
 }

 /** 下载模版 */
-async function onDownload() {
+async function handleDownload() {
  const data = await importUserTemplate();
  downloadFileFromBlobPart({ fileName: '用户导入模板.xls', source: data });
 }
@ -79,7 +76,7 @@ async function onDownload() {
    </Form>
    <template #prepend-footer>
      <div class="flex flex-auto items-center">
-        <ElButton @click="onDownload"> 下载导入模板 </ElButton>
+        <ElButton @click="handleDownload"> 下载导入模板 </ElButton>
      </div>
    </template>
  </Modal>