<template>
|
<div class="system-add-gas-container">
|
<el-dialog
|
title="修改密码"
|
v-model="state.isShowUserDialog"
|
width="600px"
|
>
|
<el-form :model="state.infoForm" size="default" ref="pwdRef" label-width="120px" :rules="state.rules" style="padding: 10px 20px ">
|
<el-form-item label="原密码：" prop="oldPwd" v-if="showOld">
|
<el-input
|
v-model="state.infoForm.oldPwd"
|
type="password"
|
size="large"
|
placeholder="请输入原密码"
|
show-password
|
/>
|
</el-form-item>
|
<el-form-item label="新密码：" prop="newPwd">
|
<el-input
|
v-model="state.infoForm.newPwd"
|
type="password"
|
size="large"
|
placeholder="请输入新密码"
|
show-password
|
/>
|
</el-form-item>
|
<el-form-item label="重复新密码：" prop="reNewPwd">
|
<el-input
|
v-model="state.infoForm.reNewPwd"
|
type="password"
|
size="large"
|
placeholder="请再次输入新密码"
|
show-password
|
/>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="handleClose" size="default">取 消</el-button>
|
<el-button type="primary" @click="onSubmit" size="default">确 定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import {reactive, ref} from "vue";
|
import { userApi } from "/@/api/systemManage/user";
|
import {ElMessage} from "element-plus";
|
import Cookies from "js-cookie";
|
import {ElMessageBox} from "element-plus/es";
|
import {useLoginApi} from "/@/api/login";
|
import {Session} from "/@/utils/storage";
|
import {useI18n} from "vue-i18n";
|
|
|
const validatePwd2 = (rule:any, value:any, callback:any)=>{
|
if(value === ''){
|
callback(new Error('请再次输入密码'))
|
}else if(value !== state.infoForm.newPwd){
|
callback(new Error('两次输入密码不同'))
|
}else{
|
callback()
|
}
|
}
|
const verifyPwd =(val:any) => {
|
// false: 强密码不正确
|
if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[.\-/!@#$%^&*()_+])[A-Za-z\d.\-/!@#$%^&*()_+]{8,}$/.test(val)) return false;
|
// true: 强密码正确
|
else return true;
|
}
|
|
let validatePwd = (rule:any, value:any, callback:any)=>{
|
if(value === ''){
|
callback(new Error('请输入密码'))
|
}else{
|
if(!verifyPwd(value)){
|
callback(new Error('密码须包含大小写字母、数字、特殊字符，长度不少于8位'))
|
}else{
|
callback()
|
}
|
}
|
}
|
|
|
const pwdRef = ref();
|
const emit = defineEmits(["getInfoData"]);
|
const state = reactive({
|
title: '',
|
isShowUserDialog: false,
|
disabled: false,
|
infoForm: {
|
uid: '',
|
oldPwd: '',
|
newPwd: '',
|
reNewPwd: ''
|
},
|
rules: {
|
oldPwd: [{ required: true, message: '请输入原密码', trigger: 'blur'}],
|
newPwd: [{ required: true, validator: validatePwd, trigger: 'blur'}],
|
reNewPwd: [{ required: true, validator: validatePwd2, trigger: 'blur'}]
|
}
|
});
|
|
const showOld = ref(false);
|
const openDialog = (type: string,value: any) => {
|
if(type == 'all'){
|
state.infoForm.uid = Cookies.get('uid');
|
showOld.value = true;
|
}else {
|
state.infoForm.uid = value;
|
showOld.value = false;
|
}
|
state.isShowUserDialog = true;
|
};
|
|
const { t } = useI18n();
|
const onSubmit = async () => {
|
const valid = await pwdRef.value.validate();
|
if(valid) {
|
let {reNewPwd, ...data} = state.infoForm
|
const res = await userApi().updatePwd(data);
|
if(res.data.code == 100) {
|
ElMessageBox({
|
closeOnClickModal: false,
|
closeOnPressEscape: false,
|
title: t('message.user.logOutTitle'),
|
message: t('密码修改成功，请重新登陆！'),
|
showCancelButton: true,
|
confirmButtonText: t('message.user.logOutConfirm'),
|
cancelButtonText: t('message.user.logOutCancel'),
|
buttonSize: 'default',
|
beforeClose: (action, instance, done) => {
|
if (action === 'confirm') {
|
instance.confirmButtonLoading = true;
|
instance.confirmButtonText = t('message.user.logOutExit');
|
setTimeout(() => {
|
done();
|
setTimeout(() => {
|
instance.confirmButtonLoading = false;
|
}, 300);
|
}, 700);
|
} else {
|
done();
|
}
|
}
|
})
|
.then(async () => {
|
|
let res = await useLoginApi().signOut();
|
if (res.data.code === 100) {
|
Session.clear(); // 清除缓存/token等
|
// 使用 reload 时，不需要调用 resetRoute() 重置路由
|
window.location.reload();
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
})
|
.catch(() => {});
|
handleClose();
|
}else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
}
|
const handleClose = () => {
|
state.infoForm = {
|
uid: '',
|
oldPwd: '',
|
newPwd: '',
|
reNewPwd: ''
|
};
|
state.isShowUserDialog = false;
|
pwdRef.value.clearValidate();
|
}
|
defineExpose({
|
openDialog
|
});
|
</script>
|
