first commit

apps/bdrp-admin-web/src/views/system/user/data.ts

@@ -0,0 +1,137 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api';
+
+import { ref } from 'vue';
+
+import { $t } from '#/locales';
+
+// 角色列表引用，可以在加载后更新
+export const roleOptions = ref<{ label: string; value: number | string }[]>([]);
+
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'username',
+      label: $t('system.user.userName'),
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'real_name',
+      label: $t('system.user.realName'),
+      rules: 'required',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: $t('common.enabled'), value: 1 },
+          { label: $t('common.disabled'), value: 0 },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: 1,
+      fieldName: 'status',
+      label: $t('system.user.status'),
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        mode: 'multiple',
+        allowClear: true,
+        options: roleOptions,
+        class: 'w-full',
+      },
+      fieldName: 'role_ids',
+      formItemClass: 'items-start',
+      label: $t('system.user.setPermissions'),
+    },
+  ];
+}
+
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'username',
+      label: $t('system.user.userName'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'real_name',
+      label: $t('system.user.realName'),
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: $t('common.enabled'), value: 1 },
+          { label: $t('common.disabled'), value: 0 },
+        ],
+      },
+      fieldName: 'status',
+      label: $t('system.user.status'),
+    },
+    {
+      component: 'RangePicker',
+      fieldName: 'create_time',
+      label: $t('system.user.createTime'),
+    },
+  ];
+}
+
+export function useColumns<T = SystemUserApi.SystemUser>(
+  onActionClick: OnActionClickFn<T>,
+  onStatusChange?: (newStatus: any, row: T) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'username',
+      title: $t('system.user.userName'),
+      minWidth: 200,
+    },
+    {
+      field: 'real_name',
+      title: $t('system.user.realName'),
+      minWidth: 200,
+    },
+    {
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: onStatusChange ? 'CellSwitch' : 'CellTag',
+      },
+      field: 'status',
+      title: $t('system.user.status'),
+      minWidth: 100,
+    },
+    {
+      field: 'create_time',
+      title: $t('system.user.createTime'),
+      minWidth: 200,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'username',
+          nameTitle: $t('system.user.userName'),
+          onClick: onActionClick,
+        },
+        options: [
+          { code: 'edit', text: '编辑' },
+          { code: 'resetPassword', text: '重置密码' },
+          { code: 'delete', text: '删除' },
+        ],
+        name: 'CellOperation',
+      },
+      field: 'operation',
+      fixed: 'right',
+      title: $t('system.user.operation'),
+      width: 200,
+    },
+  ];
+}

apps/bdrp-admin-web/src/views/system/user/list.vue

@@ -0,0 +1,179 @@
+<script lang="ts" setup>
+import type { Recordable } from '@vben/types';
+
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { Plus } from '@vben/icons';
+
+import { Button, message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteUser, getUserList, updateUser } from '#/api';
+import { $t } from '#/locales';
+
+import { useColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import ResetPasswordForm from './modules/reset-password-form.vue';
+
+const [FormDrawer, formDrawerApi] = useVbenDrawer({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [ResetPasswordDrawer, resetPasswordDrawerApi] = useVbenDrawer({
+  connectedComponent: ResetPasswordForm,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    fieldMappingTime: [['create_time', ['startTime', 'endTime']]],
+    schema: useGridFormSchema(),
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useColumns(onActionClick, onStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getUserList({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+
+    toolbarConfig: {
+      custom: true,
+      export: false,
+      refresh: { code: 'query' },
+      search: true,
+      zoom: true,
+    },
+  } as VxeTableGridOptions<SystemUserApi.SystemUser>,
+});
+
+function onActionClick(e: OnActionClickParams<SystemUserApi.SystemUser>) {
+  switch (e.code) {
+    case 'delete': {
+      onDelete(e.row);
+      break;
+    }
+    case 'edit': {
+      onEdit(e.row);
+      break;
+    }
+    case 'resetPassword': {
+      onResetPassword(e.row);
+      break;
+    }
+  }
+}
+
+/**
+ * 将Antd的Modal.confirm封装为promise，方便在异步函数中调用。
+ * @param content 提示内容
+ * @param title 提示标题
+ */
+function confirm(content: string, title: string) {
+  return new Promise((reslove, reject) => {
+    Modal.confirm({
+      content,
+      onCancel() {
+        reject(new Error('已取消'));
+      },
+      onOk() {
+        reslove(true);
+      },
+      title,
+    });
+  });
+}
+
+/**
+ * 状态开关即将改变
+ * @param newStatus 期望改变的状态值
+ * @param row 行数据
+ * @returns 返回false则中止改变，返回其他值（undefined、true）则允许改变
+ */
+async function onStatusChange(
+  newStatus: number,
+  row: SystemUserApi.SystemUser,
+) {
+  const status: Recordable<string> = {
+    0: '禁用',
+    1: '启用',
+  };
+  try {
+    await confirm(
+      `你要将${row.username}的状态切换为 【${status[newStatus.toString()]}】 吗？`,
+      `切换状态`,
+    );
+    await updateUser(row.id, { status: newStatus });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function onEdit(row: SystemUserApi.SystemUser) {
+  formDrawerApi.setData(row).open();
+}
+
+function onResetPassword(row: SystemUserApi.SystemUser) {
+  resetPasswordDrawerApi.setData(row).open();
+}
+
+function onDelete(row: SystemUserApi.SystemUser) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.username]),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  deleteUser(row.id)
+    .then(() => {
+      message.success({
+        content: $t('ui.actionMessage.deleteSuccess', [row.username]),
+        key: 'action_process_msg',
+      });
+      onRefresh();
+    })
+    .catch(() => {
+      hideLoading();
+    });
+}
+
+function onRefresh() {
+  gridApi.query();
+}
+
+function onCreate() {
+  formDrawerApi.setData({}).open();
+}
+</script>
+<template>
+  <Page auto-content-height>
+    <FormDrawer />
+    <ResetPasswordDrawer @success="onRefresh" />
+    <Grid :table-title="$t('system.user.list')">
+      <template #toolbar-tools>
+        <Button type="primary" @click="onCreate">
+          <Plus class="size-5" />
+          {{ $t('ui.actionTitle.create', [$t('system.user.name')]) }}
+        </Button>
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/bdrp-admin-web/src/views/system/user/modules/form.vue

@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import type { Recordable } from '@vben/types';
+
+import type { SystemUserApi } from '#/api/system/user';
+
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { Spin } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { getRoleList } from '#/api/system/role';
+import { createUser, updateUser } from '#/api/system/user';
+import { $t } from '#/locales';
+
+import { roleOptions, useFormSchema } from '../data';
+
+const emits = defineEmits(['success']);
+
+const formData = ref<SystemUserApi.SystemUser>();
+
+const [Form, formApi] = useVbenForm({
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const roles = ref<Recordable<any>[]>([]);
+const loadingRoles = ref(false);
+
+const id = ref();
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) return;
+    const values = await formApi.getValues();
+
+    // 确保role_ids是数字数组
+    if (values.role_ids && Array.isArray(values.role_ids)) {
+      values.role_ids = values.role_ids.map((id) =>
+        typeof id === 'string' ? Number.parseInt(id, 10) : id,
+      );
+    }
+
+    drawerApi.lock();
+    (id.value ? updateUser(id.value, values) : createUser(values))
+      .then(() => {
+        emits('success');
+        drawerApi.close();
+      })
+      .catch(() => {
+        drawerApi.unlock();
+      });
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = drawerApi.getData<SystemUserApi.SystemUser>();
+      formApi.resetForm();
+      if (data) {
+        formData.value = data;
+        id.value = data.id;
+
+        // 确保role_ids存在且为数组
+        if (data.role_ids && !Array.isArray(data.role_ids)) {
+          data.role_ids = [data.role_ids];
+        }
+
+        formApi.setValues(data);
+      } else {
+        id.value = undefined;
+      }
+
+      if (roleOptions.value.length === 0) {
+        loadRoles();
+      }
+    }
+  },
+});
+
+async function loadRoles() {
+  loadingRoles.value = true;
+  try {
+    const res = await getRoleList({ page: 1, pageSize: 1000 });
+    roles.value = res.items;
+
+    // 更新全局的roleOptions
+    roleOptions.value = roles.value.map((role) => ({
+      label: role.role_name,
+      value: role.id,
+    }));
+  } finally {
+    loadingRoles.value = false;
+  }
+}
+
+const getDrawerTitle = computed(() => {
+  return formData.value?.id
+    ? $t('common.edit', $t('system.user.name'))
+    : $t('common.create', $t('system.user.name'));
+});
+</script>
+<template>
+  <Drawer :title="getDrawerTitle">
+    <Spin :spinning="loadingRoles">
+      <Form />
+    </Spin>
+  </Drawer>
+</template>
+<style lang="css" scoped>
+:deep(.ant-tree-title) {
+  .tree-actions {
+    display: none;
+    margin-left: 20px;
+  }
+}
+
+:deep(.ant-tree-title:hover) {
+  .tree-actions {
+    display: flex;
+    flex: auto;
+    justify-content: flex-end;
+    margin-left: 20px;
+  }
+}
+</style>

apps/bdrp-admin-web/src/views/system/user/modules/reset-password-form.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer, z } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { resetPassword } from '#/api/system/user';
+
+const emits = defineEmits(['success']);
+
+const formData = ref<SystemUserApi.SystemUser>();
+
+const [Form, formApi] = useVbenForm({
+  schema: [
+    {
+      component: 'InputPassword',
+      fieldName: 'password',
+      label: '新密码',
+      rules: z.string().min(1, { message: '请输入新密码' }),
+    },
+    {
+      component: 'InputPassword',
+      fieldName: 'confirmPassword',
+      label: '确认密码',
+      dependencies: {
+        rules(values) {
+          const { password } = values;
+          return z
+            .string()
+            .min(1, { message: '请确认密码' })
+            .refine((value) => value === password, {
+              message: '两次输入的密码不一致',
+            });
+        },
+        triggerFields: ['password'],
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const id = ref();
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) return;
+    const values = await formApi.getValues();
+
+    drawerApi.lock();
+    resetPassword(id.value, { password: values.password })
+      .then(() => {
+        emits('success');
+        drawerApi.close();
+      })
+      .catch(() => {
+        drawerApi.unlock();
+      });
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = drawerApi.getData<SystemUserApi.SystemUser>();
+      formApi.resetForm();
+      if (data) {
+        formData.value = data;
+        id.value = data.id;
+      } else {
+        id.value = undefined;
+      }
+    }
+  },
+});
+
+const getDrawerTitle = computed(() => {
+  return '重置密码';
+});
+</script>
+<template>
+  <Drawer :title="getDrawerTitle">
+    <Form />
+  </Drawer>
+</template>