feat(用户): 添加重置密码功能
- 在用户下拉菜单中新增重置密码选项 - 实现密码重置对话框及表单验证 - 添加API接口处理密码重置请求
This commit is contained in:
parent
a88e152594
commit
5fda4e4df8
|
|
@ -43,3 +43,12 @@ export const getUploadUrl = (data: any) => {
|
|||
data,
|
||||
});
|
||||
};
|
||||
|
||||
// 重置密码
|
||||
export const resetPassword = (params: any) => {
|
||||
return request({
|
||||
url: '/user/password/reset',
|
||||
method: 'post',
|
||||
params,
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -78,11 +78,27 @@
|
|||
<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="/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-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -98,6 +114,7 @@ import { useThemeConfig } from '/@/stores/themeConfig';
|
|||
import other from '/@/utils/other';
|
||||
import mittBus from '/@/utils/mitt';
|
||||
import { Session, Local } from '/@/utils/storage';
|
||||
import { resetPassword } from '/@/api/jnh';
|
||||
|
||||
// 引入组件
|
||||
const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/topBar/userNews.vue'));
|
||||
|
|
@ -148,6 +165,55 @@ const onUserNewsClick = () => {
|
|||
const onLayoutSetingClick = () => {
|
||||
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) => {
|
||||
if (path === 'logOut') {
|
||||
|
|
@ -182,12 +248,15 @@ const onHandleCommandClick = (path: string) => {
|
|||
window.location.reload();
|
||||
})
|
||||
.catch(() => {});
|
||||
} else if (path === 'restPwd') {
|
||||
restDialogVisible.value = true;
|
||||
} else if (path === 'wareHouse') {
|
||||
window.open('https://gitee.com/lyt-top/vue-next-admin');
|
||||
} else {
|
||||
router.push(path);
|
||||
}
|
||||
};
|
||||
|
||||
// 菜单搜索点击
|
||||
const onSearchClick = () => {
|
||||
searchRef.value.openSearch();
|
||||
|
|
|
|||
Loading…
Reference in New Issue