feat: 🚀 用户自身修改密码

src/api/v1/adminUser.ts

@@ -64,9 +64,9 @@ export const fetchQueryUser = (data: any) => {
 	return http.request<BaseResult<object>>('get', 'user/noManage/queryUser', { params: data });
 };
 
-/** 用户信息---添加用户信息 */
-export const fetchAddAdminUser = (data: any) => {
-	return http.request<BaseResult<object>>('post', 'user/addAdminUser', { data });
+/** 用户信息---更新用户信息 */
+export const fetchUpdateAdminUser = (data: any) => {
+	return http.request<BaseResult<object>>('put', 'user/updateAdminUser', { data });
 };
 
 /** 用户信息---更新本地用户信息 */
@@ -74,9 +74,14 @@ export const fetchUpdateAdminUserByLocalUser = (data: any) => {
 	return http.request<BaseResult<object>>('put', 'user/noManage/updateAdminUserByLocalUser', { data });
 };
 
-/** 用户信息---更新用户信息 */
-export const fetchUpdateAdminUser = (data: any) => {
-	return http.request<BaseResult<object>>('put', 'user/updateAdminUser', { data });
+/** 用户信息---更新本地用户密码 */
+export const fetchUpdateUserPasswordByLocalUser = (data: any) => {
+	return http.request<BaseResult<object>>('put', 'user/noManage/updateUserPasswordByLocalUser', { data }, { headers: { 'Content-Type': 'multipart/form-data' } });
+};
+
+/** 用户信息---添加用户信息 */
+export const fetchAddAdminUser = (data: any) => {
+	return http.request<BaseResult<object>>('post', 'user/addAdminUser', { data });
 };
 
 /** 用户信息---删除用户信息 */

src/layout/components/lay-navbar/dropdown-menu.vue

@@ -2,6 +2,7 @@
 import { useNav } from '@/layout/hooks/useNav';
 import LogoutCircleRLine from '@iconify-icons/ri/logout-circle-r-line';
 import { $t } from '@/plugins/i18n';
+import AccountSettingsIcon from '@iconify-icons/ri/user-settings-line';
 import { useRouter } from 'vue-router';
 
 const { logout, username, userAvatar, avatarsStyle } = useNav();
@@ -16,9 +17,8 @@ const router = useRouter();
 		</span>
 		<template #dropdown>
 			<el-dropdown-item @click="router.push({ name: 'AccountSettings' })">
-				<IconifyIconOffline :icon="LogoutCircleRLine" style="margin: 5px" />
-				账户设置
-				<!--{{ $t('buttons.pureLoginOut') }}-->
+				<IconifyIconOffline :icon="AccountSettingsIcon" style="margin: 5px" />
+				{{ $t('buttons.pureAccountSettings') }}
 			</el-dropdown-item>
 			<el-dropdown-menu class="logout">
 				<el-dropdown-item @click="logout">

src/store/system/adminUser.ts

@@ -10,6 +10,7 @@ import {
 	fetchUpdateAdminUser,
 	fetchUpdateAdminUserByLocalUser,
 	fetchUpdateUserPasswordByAdmin,
+	fetchUpdateUserPasswordByLocalUser,
 	fetchUpdateUserStatusByAdmin,
 } from '@/api/v1/adminUser';
 
@@ -100,6 +101,12 @@ export const useAdminUserStore = defineStore('adminUserStore', {
 			return storeMessage(result);
 		},
 
+		/** 更新本地用户密码 */
+		async updateUserPasswordByLocalUser(data: any) {
+			const result: any = await fetchUpdateUserPasswordByLocalUser(data);
+			return storeMessage(result);
+		},
+
 		/** 更新用户密码 */
 		async updateAdminUserPasswordByManager(data: any) {
 			const result: any = await fetchUpdateUserPasswordByAdmin(data);

src/views/account-settings/account-management.vue

@@ -1,51 +1,86 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { message } from '@/utils/message';
+<script lang="tsx" setup>
+import { reactive, ref } from 'vue';
 import { deviceDetection } from '@pureadmin/utils';
+import { $t } from '@/plugins/i18n';
+import { addDialog } from '@/components/BaseDialog/index';
+import { useAdminUserStore } from '@/store/system/adminUser';
+import ResetPasswordDialog from '@/components/Table/ResetPasswords.vue';
+import { removeToken } from '@/utils/auth';
+import { useRouter } from 'vue-router';
 
-defineOptions({
-	name: 'AccountManagement',
+// 重置密码表单校验Ref
+const ruleFormByRestPasswordRef = ref();
+const adminUserStore = useAdminUserStore();
+const router = useRouter();
+
+// 重置密码表单
+const restPasswordForm = reactive({
+	password: '',
 });
 
+/** 重置密码 */
+const onResetPassword = () => {
+	addDialog({
+		title: `修改密码`,
+		width: '30%',
+		draggable: true,
+		closeOnClickModal: false,
+		fullscreenIcon: true,
+		destroyOnClose: true,
+		contentRenderer: () => <ResetPasswordDialog ref={ruleFormByRestPasswordRef} form={restPasswordForm} />,
+		beforeSure: (done: any) => {
+			ruleFormByRestPasswordRef.value.ruleFormRef.validate(async (valid: any) => {
+				if (valid) {
+					// 更新用户密码
+					const data = { password: restPasswordForm.password };
+					const result = await adminUserStore.updateUserPasswordByLocalUser(data);
+
+					// 更新成功关闭弹窗
+					if (!result) return;
+					done();
+					removeToken();
+					await router.push('/login');
+				}
+			});
+		},
+	});
+};
+
 const list = ref([
 	{
-		title: '账户密码',
-		illustrate: '当前密码强度：强',
-		button: '修改',
-	},
-	{
-		title: '密保手机',
-		illustrate: '已经绑定手机：158****6789',
-		button: '修改',
-	},
-	{
-		title: '密保问题',
-		illustrate: '未设置密保问题，密保问题可有效保护账户安全',
-		button: '修改',
-	},
-	{
-		title: '备用邮箱',
-		illustrate: '已绑定邮箱：pure***@163.com',
-		button: '修改',
+		title: $t('account_password'),
+		illustrate: $t('rest_password_tip'),
+		button: $t('modify'),
+		callback: onResetPassword,
 	},
+	// {
+	// 	title: '密保手机',
+	// 	illustrate: '已经绑定手机：158****6789',
+	// 	button: '修改',
+	// },
+	// {
+	// 	title: '密保问题',
+	// 	illustrate: '未设置密保问题，密保问题可有效保护账户安全',
+	// 	button: '修改',
+	// },
+	// {
+	// 	title: '备用邮箱',
+	// 	illustrate: '已绑定邮箱：pure***@163.com',
+	// 	button: '修改',
+	// },
 ]);
-
-function onClick(item) {
-	console.log('onClick', item.title);
-	message('请根据具体业务自行实现', { type: 'success' });
-}
 </script>
 
 <template>
 	<div :class="['min-w-[180px]', deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]']">
-		<h3 class="my-8">账户管理</h3>
+		<h3 class="my-8">{{ $t('account_management') }}</h3>
 		<div v-for="(item, index) in list" :key="index">
 			<div class="flex items-center">
 				<div class="flex-1">
 					<p>{{ item.title }}</p>
 					<el-text class="mx-1" type="info">{{ item.illustrate }}</el-text>
 				</div>
-				<el-button text type="primary" @click="onClick(item)">
+				<el-button text type="primary" @click="item.callback">
 					{{ item.button }}
 				</el-button>
 			</div>

src/views/account-settings/utils/hooks.tsx

@@ -9,8 +9,10 @@ import { $t } from '@/plugins/i18n';
 export const cropperBlob = ref();
 // 上传地址路径
 export const uploadAvatarSrc = ref();
+
 // 剪裁头像是否显示
 export const isShow = ref(false);
+
 const userStore = useUserStore();
 
 // 用户信息内容

src/views/system/adminUser/utils/hooks.tsx

@@ -6,7 +6,7 @@ import { message, messageBox } from '@/utils/message';
 import type { FormItemProps } from '@/views/system/adminUser/utils/types';
 import { $t } from '@/plugins/i18n';
 import { isAddUserinfo } from '@/views/system/adminUser/utils/columns';
-import ResetPasswordDialog from '@/views/system/adminUser/reset-passwords.vue';
+import ResetPasswordDialog from '@/components/Table/ResetPasswords.vue';
 import { deviceDetection, handleTree } from '@pureadmin/utils';
 import CropperPreview from '@/components/CropperPreview';
 import AssignUserToRole from '@/views/system/adminUser/assign-roles-to-user.vue';