feat(用户): 添加重置密码功能

- 在用户下拉菜单中新增重置密码选项
- 实现密码重置对话框及表单验证
- 添加API接口处理密码重置请求
This commit is contained in:
34701892@qq.com 2025-12-13 12:30:30 +08:00
parent a88e152594
commit 5fda4e4df8
2 changed files with 78 additions and 0 deletions

View File

@ -43,3 +43,12 @@ export const getUploadUrl = (data: any) => {
data, data,
}); });
}; };
// 重置密码
export const resetPassword = (params: any) => {
return request({
url: '/user/password/reset',
method: 'post',
params,
});
};

View File

@ -78,11 +78,27 @@
<el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item> <el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
<el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item> <el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>
<el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item> --> <el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item> -->
<el-dropdown-item command="restPwd">重置密码</el-dropdown-item>
<el-dropdown-item command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item> <el-dropdown-item command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
<Search ref="searchRef" /> <Search ref="searchRef" />
<el-dialog title="重置密码" v-model="restDialogVisible" width="30%">
<el-form :model="restForm" :rules="rules" ref="formRef" label-width="100px">
<el-form-item label="新密码" prop="newPassword">
<el-input v-model="restForm.password" type="password" placeholder="请输入新密码" />
</el-form-item>
<el-form-item label="确认新密码" prop="confirmPassword">
<el-input v-model="restForm.confirmPassword" type="password" placeholder="请确认新密码" />
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" @click="restDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleRestPwd">确认</el-button>
</template>
</el-dialog>
</div> </div>
</template> </template>
@ -98,6 +114,7 @@ import { useThemeConfig } from '/@/stores/themeConfig';
import other from '/@/utils/other'; import other from '/@/utils/other';
import mittBus from '/@/utils/mitt'; import mittBus from '/@/utils/mitt';
import { Session, Local } from '/@/utils/storage'; import { Session, Local } from '/@/utils/storage';
import { resetPassword } from '/@/api/jnh';
// //
const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/topBar/userNews.vue')); const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/topBar/userNews.vue'));
@ -148,6 +165,55 @@ const onUserNewsClick = () => {
const onLayoutSetingClick = () => { const onLayoutSetingClick = () => {
mittBus.emit('openSetingsDrawer'); mittBus.emit('openSetingsDrawer');
}; };
//
/**
* @param {Object} rule - 校验规则对象
* @param {String} value - 当前字段confirmPassword的值
* @param {Function} callback - 校验完成的回调必须调用
*/
const validateConfirmPassword = (rule, value, callback) => {
// 1.
if (!value) {
return callback(new Error('请确认密码'));
}
// 2.
if (value !== restForm.value.password) {
callback(new Error('两次密码输入不一致')); //
} else {
callback(); // callback()
}
};
const restForm = ref({});
const restDialogVisible = ref(false);
const rules = reactive({
// +
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
],
// +
confirmPassword: [
{ required: true, message: '请确认密码', trigger: 'blur' },
//
{
validator: validateConfirmPassword, //
trigger: ['blur', 'change'], // /
},
],
});
const formRef = ref(null);
async function handleRestPwd() {
await formRef.value.validate();
resetPassword(restForm.value).then((res) => {
if (res.code == 200) {
ElMessage.success('重置密码成功');
restDialogVisible.value = false;
}
});
}
// //
const onHandleCommandClick = (path: string) => { const onHandleCommandClick = (path: string) => {
if (path === 'logOut') { if (path === 'logOut') {
@ -182,12 +248,15 @@ const onHandleCommandClick = (path: string) => {
window.location.reload(); window.location.reload();
}) })
.catch(() => {}); .catch(() => {});
} else if (path === 'restPwd') {
restDialogVisible.value = true;
} else if (path === 'wareHouse') { } else if (path === 'wareHouse') {
window.open('https://gitee.com/lyt-top/vue-next-admin'); window.open('https://gitee.com/lyt-top/vue-next-admin');
} else { } else {
router.push(path); router.push(path);
} }
}; };
// //
const onSearchClick = () => { const onSearchClick = () => {
searchRef.value.openSearch(); searchRef.value.openSearch();