From 595594615fa6585707894c46272c8a3b798bdc77 Mon Sep 17 00:00:00 2001
From: miyaohua <2542571191@qq.com>
Date: Thu, 17 Apr 2025 15:34:57 +0800
Subject: [PATCH] feat(user): add password reset functionality

---
 src/service/api/system/user.ts                |  5 +-
 src/typings/api.d.ts                          |  4 +
 src/views/system/user/index.vue               | 48 +++++++----
 .../system/user/modules/reset-password.vue    | 82 +++++++++++++++++++
 4 files changed, 119 insertions(+), 20 deletions(-)
 create mode 100644 src/views/system/user/modules/reset-password.vue

diff --git a/src/service/api/system/user.ts b/src/service/api/system/user.ts
index 1d5d39d..62386b3 100644
--- a/src/service/api/system/user.ts
+++ b/src/service/api/system/user.ts
@@ -35,9 +35,10 @@ export function fetchUpdatedUserStatus(params: Api.SystemManage.StatusDto) {
 }
 
 /** reset password */
-export function fetchResetPassword(id: number) {
+export function fetchResetPassword(id: number | null, data: Api.SystemManage.resetPasswordDto) {
   return request({
     url: `/system/user/resetPassword/${id}`,
-    method: 'put'
+    method: 'put',
+    data
   });
 }
diff --git a/src/typings/api.d.ts b/src/typings/api.d.ts
index 554796c..19692bf 100755
--- a/src/typings/api.d.ts
+++ b/src/typings/api.d.ts
@@ -222,6 +222,10 @@ declare namespace Api {
       status: number;
     };
 
+    type resetPasswordDto = {
+      password: string;
+    };
+
     /** user search params */
     type UserSearchParams = CommonType.RecordNullable<
       Pick<Api.SystemManage.User, 'username' | 'gender' | 'nickName' | 'phone' | 'email' | 'status'> &
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 70e99b9..485dbb6 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="tsx">
 import { NAvatar, NButton, NPopconfirm, NTag, NTime } from 'naive-ui';
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
-import { fetchGetAllRole, fetchGetUserList, fetchResetPassword, fetchUpdatedUserStatus } from '@/service/api';
+import { fetchGetAllRole, fetchGetUserList, fetchUpdatedUserStatus } from '@/service/api';
 import { enableStatusRecord, userGenderRecord } from '@/constants/business';
 import { $t, getLocale } from '@/locales';
 import { useAuth } from '@/hooks/business/auth';
@@ -13,7 +13,7 @@ import { StatusEnum } from '@/constants/enum';
 import { useDetailDescriptions } from '@/hooks/common/detail-descriptions';
 import UserOperateDrawer from './modules/user-operate-drawer.vue';
 import DeptTree from './modules/dept-tree.vue';
-
+import ResetPassword from './modules/reset-password.vue';
 const appStore = useAppStore();
 const { hasAuth } = useAuth();
 
@@ -192,6 +192,9 @@ const detailColumns = useDetailDescriptions<Api.SystemManage.User>(() => [
   }
 ]);
 
+const showModal = ref<boolean>(false);
+const resetId = ref<number | null>(null);
+
 const { columns, columnChecks, data, loading, pagination, getDataByPage, getData, searchParams, resetSearchParams } =
   useTable({
     apiFn: fetchGetUserList,
@@ -353,16 +356,15 @@ const { columns, columnChecks, data, loading, pagination, getDataByPage, getData
                 )
               }}
             </NPopconfirm>
-            <NPopconfirm onPositiveClick={() => resetPassword(row.id)}>
-              {{
-                default: () => $t('page.manage.user.resetPassword'),
-                trigger: () => (
-                  <NButton disabled={!hasAuth('system:user:pass:reset')} type={'error'} ghost size="small">
-                    {$t('page.manage.user.resetPassword')}
-                  </NButton>
-                )
-              }}
-            </NPopconfirm>
+            <NButton
+              onClick={() => resetPasswordEvent(row.id)}
+              disabled={!hasAuth('system:user:pass:reset')}
+              type={'error'}
+              ghost
+              size="small"
+            >
+              {$t('page.manage.user.resetPassword')}
+            </NButton>
           </div>
         )
       }
@@ -404,11 +406,9 @@ async function handleChangeStatus(id: number, status: number | null) {
   getDataByPage();
 }
 
-async function resetPassword(id: number) {
-  const { error } = await fetchResetPassword(id);
-  if (!error) {
-    window.$message?.success($t('common.resetSuccess'));
-  }
+async function resetPasswordEvent(id: number) {
+  showModal.value = true;
+  resetId.value = id;
 }
 
 async function handleBatchDChangeStatus() {
@@ -437,6 +437,11 @@ async function getAllRoles() {
   }
 }
 
+function resetChange() {
+  showModal.value = false;
+  resetId.value = null;
+}
+
 onMounted(async () => {
   getAllRoles();
 });
@@ -551,6 +556,13 @@ onMounted(async () => {
       :label-style="{ width: '120px' }"
       :data="detailData"
     />
+
+    <ResetPassword
+      v-model:show-modal="showModal"
+      :reset-id="resetId"
+      :title="$t('page.manage.user.resetPassword')"
+      @change="resetChange"
+    />
   </div>
 </template>
 
diff --git a/src/views/system/user/modules/reset-password.vue b/src/views/system/user/modules/reset-password.vue
new file mode 100644
index 0000000..8cc37d8
--- /dev/null
+++ b/src/views/system/user/modules/reset-password.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import type { FormInst, FormItemRule } from 'naive-ui';
+import { fetchResetPassword } from '@/service/api';
+import { $t, getLocale } from '@/locales';
+import { REG_PWD } from '@/constants/reg';
+
+interface Emits {
+  (e: 'change'): void;
+  (e: 'update:showModal', value: boolean): void;
+}
+
+const props = defineProps<{
+  showModal: boolean;
+  resetId: number | null;
+  title: string;
+}>();
+const emit = defineEmits<Emits>();
+const formRef = ref<null | FormInst>(null);
+const formValue = ref({
+  password: ''
+});
+const localShowModal = ref(props.showModal);
+
+watch(
+  () => props.showModal,
+  val => {
+    localShowModal.value = val;
+  }
+);
+
+watch(localShowModal, val => {
+  emit('update:showModal', val);
+  formValue.value.password = '';
+});
+
+const rules = {
+  password: {
+    required: true,
+    validator(_rule: FormItemRule, value: string) {
+      if (!value) {
+        return new Error(getLocale.value === 'zh-CN' ? '密码必填' : 'password is Required');
+      } else if (!REG_PWD.test(value)) {
+        return new Error($t('form.pwd.invalid'));
+      }
+      return true;
+    },
+    trigger: ['input', 'blur']
+  }
+};
+
+const handleValidateClick = async (e: MouseEvent) => {
+  e.preventDefault();
+  await formRef.value?.validate(async (errors: any) => {
+    if (!errors) {
+      const { error } = await fetchResetPassword(props.resetId, {
+        password: formValue.value.password
+      });
+      if (!error) {
+        window.$message?.success($t('common.operateSuccess'));
+        emit('change');
+        localShowModal.value = false;
+      }
+    }
+  });
+};
+</script>
+
+<template>
+  <NModal v-model:show="localShowModal" class="w-130!" preset="dialog" :title="title" @close="localShowModal = false">
+    <NForm ref="formRef" inline class="mt5" :model="formValue" :rules="rules" size="small">
+      <NFormItem label="重置密码" path="password">
+        <NInput v-model:value="formValue.password" type="password" placeholder="请输入重置后密码" />
+      </NFormItem>
+      <NFormItem>
+        <NButton attr-type="button" @click="handleValidateClick">
+          {{ title }}
+        </NButton>
+      </NFormItem>
+    </NForm>
+  </NModal>
+</template>
-- 
Gitee