feat(@vben/common-ui): 重置用户密码功能并优化用户相关操作

apps/web-antd/src/api/core/user.ts

@@ -40,6 +40,10 @@ export namespace UserApi {
     confirmPassword: string;
   }
 
+  export interface PasswordModel {
+    password: string;
+  }
+
   export interface RoleCreateRecord {
     name: string;
     dataScope: string;
@@ -95,7 +99,7 @@ export namespace UserApi {
   }
 
   export interface UserUpdateRecord {
-    username?: string;
+    name?: string;
     email?: string;
     phone?: string;
     address?: string;
@@ -115,6 +119,17 @@ export function resetPassword(data: UserApi.PasswordReSetModel) {
   return requestClient.patch('/rest/user/self/update-password', data);
 }
 
+// 重置密码
+export function resetPasswordApi(id: any, data: UserApi.PasswordModel) {
+  return requestClient.patch(
+    `/rest/user/${id}/update-password`,
+    {},
+    {
+      params: data,
+    },
+  );
+}
+
 // 注册用户
 export function register(data: UserApi.CreateRecord) {
   return requestClient.post('/rest/user/register', data);

apps/web-antd/src/views/person/modules/basic-form.vue

@@ -22,7 +22,7 @@ const { userInfo } = toRefs(props);
 // 表单提交方法
 const handleSubmit = async () => {
   const res = await selfUpdate({
-    username: userInfo.value.username,
+    name: userInfo.value.name,
     phone: userInfo.value.phone,
     email: userInfo.value.email,
     address: userInfo.value.address,
@@ -51,7 +51,7 @@ const handleSubmit = async () => {
     style="max-width: 500px; margin: 0 auto"
   >
     <Form.Item label="用户名">
-      <Input v-model:value="userInfo.username" />
+      <Input v-model:value="userInfo.name" />
     </Form.Item>
     <Form.Item label="邮箱" name="email">
       <Input v-model:value="userInfo.email" />

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

@@ -188,6 +188,10 @@ export function useColumns<T = UserApi.User>(
           onClick: onActionClick,
         },
         options: [
+          {
+            code: 'resetPassword',
+            text: '重置密码',
+          },
           {
             code: 'edit',
             text: '修改',
@@ -202,7 +206,7 @@ export function useColumns<T = UserApi.User>(
       field: 'operation',
       fixed: 'right',
       title: '操作',
-      width: 130,
+      width: 200,
     },
   ];
 }

apps/web-antd/src/views/user/list.vue

@@ -7,10 +7,10 @@ import type {
 } from '#/adapter/vxe-table';
 import type { UserApi } from '#/api';
 
-import { Page, useVbenDrawer } from '@vben/common-ui';
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { Plus } from '@vben/icons';
 
-import { Button, message, Modal } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
@@ -19,12 +19,18 @@ import { $t } from '#/locales';
 
 import { useColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
+import ResetModal from './modules/reset-form.vue';
 
 const [FormDrawer, formDrawerApi] = useVbenDrawer({
   connectedComponent: Form,
   destroyOnClose: true,
 });
 
+const [ResetPasswordModal, modalApi] = useVbenModal({
+  connectedComponent: ResetModal,
+  destroyOnClose: true,
+});
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
@@ -73,6 +79,10 @@ function onActionClick(e: OnActionClickParams<UserApi.User>) {
       onEdit(e.row);
       break;
     }
+    case 'resetPassword': {
+      onResetPassword(e.row);
+      break;
+    }
   }
 }
 
@@ -123,6 +133,10 @@ function onEdit(row: UserApi.User) {
   formDrawerApi.setData(row).open();
 }
 
+function onResetPassword(row: UserApi.User) {
+  modalApi.setData(row).open();
+}
+
 function onDelete(row: UserApi.User) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
@@ -152,6 +166,7 @@ function onCreate() {
 </script>
 <template>
   <Page auto-content-height>
+    <ResetPasswordModal />
     <FormDrawer />
     <Grid table-title="用户列表">
       <template #toolbar-tools>

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

@@ -21,7 +21,7 @@ import { useFormSchema } from '../data';
 const emits = defineEmits(['success']);
 
 const formData = ref<UserApi.User>();
-
+const id = ref();
 const [Form, formApi] = useVbenForm({
   schema: useFormSchema(),
   showDefaultActions: false,
@@ -30,7 +30,6 @@ const [Form, formApi] = useVbenForm({
 const permissions = ref<DataNode[]>([]);
 const loadingPermissions = ref(false);
 
-const id = ref();
 const [Drawer, drawerApi] = useVbenDrawer({
   async onConfirm() {
     const { valid } = await formApi.validate();

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { UserApi } from '#/api';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Input } from 'ant-design-vue';
+
+import { resetPasswordApi } from '#/api';
+
+const emits = defineEmits(['success']);
+const userId = ref();
+const resetpasswordData = ref();
+const formData = ref();
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (!resetpasswordData.value) return;
+
+    modalApi.lock();
+    try {
+      await resetPasswordApi(userId.value, {
+        password: resetpasswordData.value,
+      });
+      emits('success');
+      modalApi.close();
+    } finally {
+      modalApi.lock(false);
+    }
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      formData.value = modalApi.getData<UserApi.User>();
+      userId.value = formData.value.id;
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="重置密码">
+    <Input.Password
+      class="my-4"
+      placeholder="请输入密码"
+      v-model:value="resetpasswordData"
+    />
+  </Modal>
+</template>
+
+<style scoped></style>