feat：增加 user 用户的分配角色、重置密码

apps/web-antd/src/api/system/role/index.ts

@@ -22,7 +22,7 @@ export function getRolePage(params: PageParam) {
 }
 
 /** 查询角色（精简)列表 */
-export function getSimpleRoleList(): Promise<SystemRoleApi.SystemRole[]> {
+export function getSimpleRoleList() {
   return requestClient.get<SystemRoleApi.SystemRole[]>('/system/role/simple-list');
 }
 

apps/web-antd/src/api/system/user/index.ts

@@ -1,4 +1,4 @@
-import type { PageParam } from '@vben/request';
+import type {PageParam, PageResult} from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
@@ -23,17 +23,12 @@ export namespace SystemUserApi {
 
 /** 查询用户管理列表 */
 export function getUserPage(params: PageParam) {
-  return requestClient.get('/system/user/page', { params });
+  return requestClient.get<PageResult<SystemUserApi.SystemUser>>('/system/user/page', { params });
-}
-
-/** 查询所有用户列表 */
-export function getAllUser() {
-  return requestClient.get('/system/user/all');
 }
 
 /** 查询用户详情 */
 export function getUser(id: number) {
-  return requestClient.get(`/system/user/get?id=${id}`);
+  return requestClient.get<SystemUserApi.SystemUser>(`/system/user/get?id=${id}`);
 }
 
 /** 新增用户 */
@@ -62,7 +57,7 @@ export function importUserTemplate() {
 }
 
 /** 用户密码重置 */
-export function resetUserPwd(id: number, password: string) {
+export function resetUserPassword(id: number, password: string) {
   return requestClient.put('/system/user/update-password', { id, password });
 }
 
@@ -72,6 +67,6 @@ export function updateUserStatus(id: number, status: number) {
 }
 
 /** 获取用户精简信息列表 */
-export function getSimpleUserList(): Promise<SystemUserApi.SystemUser[]> {
+export function getSimpleUserList() {
-  return requestClient.get('/system/user/simple-list');
+  return requestClient.get<SystemUserApi.SystemUser[]>('/system/user/simple-list');
 }

apps/web-antd/src/utils/dict.ts

@@ -8,8 +8,21 @@ import { useDictStore } from '#/store';
 
 const dictStore = useDictStore();
 
+/**
+ * 获取字典标签
+ *
+ * @param dictType 字典类型
+ * @param value 字典值
+ * @returns 字典标签
+ */
+function getDictLabel(dictType: string, value: any) {
+  const dictObj = dictStore.getDictData(dictType, value);
+  return isObject(dictObj)? dictObj.label : '';
+}
+
 /**
  * 获取字典对象
+ *
  * @param dictType 字典类型
  * @param value 字典值
  * @returns 字典对象
@@ -21,6 +34,7 @@ function getDictObj(dictType: string, value: any) {
 
 /**
  * 获取字典数组 用于select radio 等
+ *
  * @param dictType 字典类型
  * @returns 字典数组
  */
@@ -191,4 +205,4 @@ enum DICT_TYPE {
   TRADE_ORDER_TYPE = 'trade_order_type', // 订单 - 类型
   USER_TYPE = 'user_type',
 }
-export { DICT_TYPE, getDictObj, getDictOptions };
+export { DICT_TYPE, getDictObj, getDictLabel, getDictOptions };

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

@@ -22,6 +22,9 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '租户名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入租户名称',
+      },
       rules: 'required',
     },
     {
@@ -41,17 +44,26 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'contactName',
       label: '联系人',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人',
+      },
       rules: 'required',
     },
     {
       fieldName: 'contactMobile',
       label: '联系手机',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系手机',
+      },
     },
     {
       label: '用户名称',
       fieldName: 'username',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名称',
+      },
       rules: 'required',
       dependencies: {
         triggerFields: ['id'],
@@ -62,6 +74,9 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '用户密码',
       fieldName: 'password',
       component: 'InputPassword',
+      componentProps: {
+        placeholder: '请输入用户密码',
+      },
       rules: 'required',
       dependencies: {
         triggerFields: ['id'],
@@ -86,6 +101,7 @@ export function useFormSchema(): VbenFormSchema[] {
         format: 'YYYY-MM-DD',
         valueFormat: 'x',
         class: 'w-full',
+        placeholder: '请选择过期时间',
       },
       rules: 'required',
     },
@@ -93,6 +109,9 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '绑定域名',
       fieldName: 'website',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入绑定域名',
+      },
       rules: 'required',
     },
     {

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

@@ -1,9 +1,14 @@
-import { type VbenFormSchema, z } from '#/adapter/form';
+import type {  VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemUserApi } from '#/api/system/user';
 
+import { z } from '#/adapter/form';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 import { CommonStatusEnum } from '#/utils/constants';
+import { getDeptList } from '#/api/system/dept';
+import { getSimplePostList } from '#/api/system/post';
+import { getSimpleRoleList } from '#/api/system/role';
+import { handleTree } from '#/utils/tree';
 
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
@@ -18,15 +23,34 @@ export function useFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      component: 'Input',
       fieldName: 'username',
       label: '用户名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名称',
+      },
       rules: 'required',
     },
     {
-      component: 'Input',
+      label: '用户密码',
+      fieldName: 'password',
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: '请输入用户密码',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        show: (values) => !values.id,
+      },
+    },
+    {
       fieldName: 'nickname',
       label: '用户昵称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户昵称',
+      },
       rules: 'required',
     },
     {
@@ -34,37 +58,47 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '归属部门',
       component: 'ApiTreeSelect',
       componentProps: {
-        api: () => Promise.resolve([]),
+        api: async () => {
-        fieldNames: {
+          const data = await getDeptList();
-          label: 'name',
+          return handleTree(data);
-          key: 'id',
-          value: 'id',
         },
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择归属部门',
+        treeDefaultExpandAll: true,
       },
-      rules: 'required',
     },
     {
       fieldName: 'postIds',
       label: '岗位',
       component: 'ApiSelect',
       componentProps: {
-        api: () => Promise.resolve([]),
+        api: getSimplePostList,
+        class: 'w-full',
         labelField: 'name',
         valueField: 'id',
         mode: 'multiple',
+        placeholder: '请选择岗位',
       },
-      rules: 'required',
     },
     {
       fieldName: 'email',
       label: '邮箱',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
       rules: z.string().email('邮箱格式不正确').optional(),
     },
     {
       fieldName: 'mobile',
       label: '手机号码',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号码',
+      }
     },
     {
       fieldName: 'sex',
@@ -92,10 +126,99 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'remark',
       label: '备注',
       component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      }
     },
   ];
 }
 
+/** 重置密码的表单 */
+export function useResetPasswordFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      label: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'newPassword',
+      label: '新密码',
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: '请输入新密码',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'confirmPassword',
+      label: '确认密码',
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: '请再次输入新密码',
+      },
+      dependencies: {
+        rules(values: Record<string, any>) {
+          const { newPassword } = values;
+          return z
+            .string()
+            .nonempty('确认密码不能为空')
+            .refine((value) => value === newPassword, '两次输入的密码不一致');
+        },
+        triggerFields: ['newPassword'],
+      },
+    },
+  ]
+}
+
+/** 分配角色的表单 */
+export function useAssignRoleFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      label: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'username',
+      label: '用户名称',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '用户昵称',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'roleIds',
+      label: '角色',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleRoleList,
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'id',
+        mode: 'multiple',
+        placeholder: '请选择角色',
+      },
+    },
+  ]
+}
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -117,16 +240,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
-    {
-      fieldName: 'status',
-      label: '状态',
-      component: 'Select',
-      componentProps: {
-        placeholder: '请输入用户状态',
-        allowClear: true,
-        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-      },
-    },
     {
       fieldName: 'createTime',
       label: '创建时间',
@@ -144,6 +257,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns<T = SystemUserApi.SystemUser>(
   onActionClick: OnActionClickFn<T>,
+  onStatusChange?: (newStatus: number, row: T) => PromiseLike<boolean | undefined>,
 ): VxeTableGridOptions['columns'] {
   return [
     {
@@ -171,17 +285,17 @@ export function useGridColumns<T = SystemUserApi.SystemUser>(
       title: '手机号码',
       minWidth: 120,
     },
-    // TODO @芋艿：switch 的接入
     {
       field: 'status',
       title: '状态',
       minWidth: 100,
       align: 'center',
       cellRender: {
+        attrs: { beforeChange: onStatusChange },
         name: 'CellSwitch',
         props: {
-          activeValue: 0,
+          checkedValue: CommonStatusEnum.ENABLE,
-          inactiveValue: 1
+          unCheckedValue: CommonStatusEnum.DISABLE,
         },
       },
     },
@@ -199,22 +313,23 @@ export function useGridColumns<T = SystemUserApi.SystemUser>(
       align: 'center',
       cellRender: {
         attrs: {
-          nameField: 'name',
+          nameField: 'username',
-          nameTitle: '角色',
+          nameTitle: '用户',
           onClick: onActionClick,
         },
         name: 'CellOperation',
+        // TODO @芋艿：后续把 delete、assign-role、reset-password 搞成“更多”
         options: [
           'edit', // 默认的编辑按钮
           'delete', // 默认的删除按钮
           {
-            code: 'assign-data-permission',
+            code: 'assign-role',
-            text: '数据权限',
+            text: '分配角色',
           },
           {
-            code: 'assign-menu',
+            code: 'reset-password',
-            text: '菜单权限',
+            text: '重置密码',
-          }
+          },
         ],
       },
     },

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

@@ -1,26 +1,37 @@
 <script lang="ts" setup>
-import type {
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { SystemUserApi } from '#/api/system/user';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Button, message } from 'ant-design-vue';
+import { Button, message, Modal } from 'ant-design-vue';
 import { Plus, Download } from '@vben/icons';
 import Form from './modules/form.vue';
+import ResetPasswordForm from './modules/reset-password-form.vue';
+import AssignRoleForm from './modules/assign-role-form.vue';
 
 import { $t } from '#/locales';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getUserPage, deleteUser, exportUser } from '#/api/system/user';
+import { getUserPage, deleteUser, exportUser, updateUserStatus } from '#/api/system/user';
-import { useGridColumns, useGridFormSchema } from './data';
 import { downloadByData } from '#/utils/download';
+import { DICT_TYPE, getDictLabel } from '#/utils/dict';
+
+import { useGridColumns, useGridFormSchema } from './data';
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
 });
 
+const [ResetPasswordModal, resetPasswordModalApi] = useVbenModal({
+  connectedComponent: ResetPasswordForm,
+  destroyOnClose: true,
+});
+
+const [AssignRoleModal, assignRoleModalApi] = useVbenModal({
+  connectedComponent: AssignRoleForm,
+  destroyOnClose: true,
+});
+
 /** 刷新表格 */
 function onRefresh() {
   gridApi.query();
@@ -61,6 +72,45 @@ async function onDelete(row: SystemUserApi.SystemUser) {
   }
 }
 
+/** 重置密码 */
+function onResetPassword(row: SystemUserApi.SystemUser) {
+  resetPasswordModalApi.setData(row).open();
+}
+
+/** 分配角色 */
+function onAssignRole(row: SystemUserApi.SystemUser) {
+  assignRoleModalApi.setData(row).open();
+}
+
+// TODO @芋艿：后续怎么简化一下 confirm 的实现。
+/** 更新用户状态 */
+async function onStatusChange(newStatus: number, row: SystemUserApi.SystemUser): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    Modal.confirm({
+      title: '切换状态',
+      content: `你要将${row.username}的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
+      onCancel() {
+        reject(new Error('已取消'));
+      },
+      onOk() {
+        // 更新用户状态
+        updateUserStatus(row.id as number, newStatus)
+          .then(() => {
+            // 提示并返回成功
+            message.success({
+              content: $t('ui.actionMessage.operationSuccess'),
+              key: 'action_process_msg',
+            });
+            resolve(true);
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      },
+    });
+  });
+}
+
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
@@ -75,6 +125,14 @@ function onActionClick({
       onDelete(row);
       break;
     }
+    case 'reset-password': {
+      onResetPassword(row);
+      break;
+    }
+    case 'assign-role': {
+      onAssignRole(row);
+      break;
+    }
   }
 }
 
@@ -83,7 +141,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(onActionClick, onStatusChange),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -111,6 +169,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
 <template>
   <Page auto-content-height>
     <FormModal @success="onRefresh" />
+    <ResetPasswordModal @success="onRefresh" />
+    <AssignRoleModal @success="onRefresh" />
     <Grid table-title="用户列表">
       <template #toolbar-tools>
         <Button type="primary" @click="onCreate">

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

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { useVbenModal } from '@vben/common-ui';
+import { message } from 'ant-design-vue';
+
+import { $t } from '#/locales';
+import { useVbenForm } from '#/adapter/form';
+import { getUserRoleList, assignUserRole } from '#/api/system/permission';
+
+import { useAssignRoleFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const [Form, formApi] = useVbenForm({
+  layout: 'horizontal',
+  schema: useAssignRoleFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const values = await formApi.getValues();
+    try {
+      await assignUserRole({
+        userId: values.id,
+        roleIds: values.roleIds,
+      });
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success({
+        content: $t('ui.actionMessage.operationSuccess'),
+        key: 'action_process_msg',
+      });
+    } finally {
+      modalApi.lock(false);
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemUserApi.SystemUser>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const roleIds = await getUserRoleList(data.id as number);
+      // 设置到 values
+      await formApi.setValues({
+        ...data,
+        roleIds,
+      });
+    } finally {
+      modalApi.lock(false);
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="分配角色">
+    <Form class="mx-4" />
+  </Modal>
+</template>

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

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { useVbenModal } from '@vben/common-ui';
+import { message } from 'ant-design-vue';
+
+import { $t } from '#/locales';
+import { useVbenForm } from '#/adapter/form';
+import { resetUserPassword } from '#/api/system/user';
+
+import { useResetPasswordFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const [Form, formApi] = useVbenForm({
+  layout: 'horizontal',
+  schema: useResetPasswordFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await resetUserPassword(data.id, data.newPassword);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success({
+        content: $t('ui.actionMessage.operationSuccess'),
+        key: 'action_process_msg',
+      });
+    } finally {
+      modalApi.lock(false);
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemUserApi.SystemUser>();
+    if (!data || !data.id) {
+      return;
+    }
+    // 设置到 values
+    await formApi.setValues(data);
+  },
+});
+</script>
+
+<template>
+  <Modal title="重置密码">
+    <Form class="mx-4" />
+  </Modal>
+</template>