<template>
|
<div class="params-container">
|
<el-form
|
ref="ruleForm"
|
size="mini"
|
label-position="top"
|
:model="params"
|
:rules="rules"
|
class="params-dialog">
|
<el-form-item label="用户名" prop="userName" v-if="showName">
|
<el-input type="input" v-model="params.userName"></el-input>
|
</el-form-item>
|
<el-form-item label="旧密码" prop="oldPwd">
|
<el-input type="password" v-model="params.oldPwd"></el-input>
|
</el-form-item>
|
<el-form-item label="新密码" prop="newPwd">
|
<el-input type="password" v-model="params.newPwd"></el-input>
|
</el-form-item>
|
<el-form-item label="确认密码" prop="enPwd">
|
<el-input type="password" v-model="params.enPwd"></el-input>
|
</el-form-item>
|
<div class="form-footer">
|
<three-btn @click="submitForm">确定</three-btn>
|
<three-btn @click="close">取消</three-btn>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import getPasswordRule from "@/assets/js/tools/getPasswordRule";
|
|
export default {
|
name: "PwdChange",
|
props: {
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
name: {
|
type: String,
|
default: ""
|
},
|
firstChange: {
|
type: Boolean,
|
default: false
|
},
|
showName: {
|
type: Boolean,
|
default: false,
|
}
|
},
|
data() {
|
let name = this.name;
|
// 根据密码类型和长度动态生成校验规则
|
let type = sessionStorage.getItem("passwordType");
|
let num = sessionStorage.getItem("passwordNum");
|
type = type?Number(type):5;
|
num = num?Number(num):8;
|
let passwordRule = getPasswordRule(type, num);
|
|
let validatePass = (rule, value, callback) => {
|
let name = this.params.userName;
|
let pwdRegex = passwordRule.pattern;
|
let nameReg = new RegExp(name);
|
if (pwdRegex.test(value)) { // 校验密码规则是否正确
|
callback();
|
} else if(nameReg.test(value)) { // 校验密码中是否存在用户名
|
callback(new Error("密码中存在用户名信息"));
|
} else {
|
callback(new Error(passwordRule.msg));
|
}
|
};
|
return {
|
loading: "",
|
params: {
|
userName: "",
|
oldPwd: "",
|
newPwd: "",
|
enPwd: ""
|
},
|
rules: {
|
userName: [
|
{ required: true, message: '不能为空', trigger: 'blur' },
|
],
|
oldPwd: [
|
{ required: true, message: '不能为空', trigger: 'blur' },
|
],
|
newPwd: [
|
{ required: true, message: '不能为空', trigger: 'blur' },
|
{ validator: validatePass, trigger: 'blur' }
|
],
|
enPwd: [
|
{ required: true, message: '不能为空', trigger: 'blur' },
|
{ validator: validatePass, trigger: 'blur' }
|
],
|
},
|
}
|
},
|
methods: {
|
// 提交表单
|
submitForm() {
|
// 提价表单
|
this.$refs.ruleForm.validate((valid) => {
|
// 校验通过
|
if (valid) {
|
if( this.params.oldPwd == this.params.newPwd){
|
this.$layer.msg("原密码不能与新密码一致");
|
return false;
|
}
|
// 开启等待框
|
this.loading = this.$layer.loading();
|
|
if(this.firstChange) {
|
this.updateUserPwd2(this.params.userName, this.params.oldPwd, this.params.newPwd);
|
}else {
|
// 校验旧密码
|
this.checkUserPwd();
|
}
|
}else {
|
this.$layer.msg('存在校验未通过的数据！');
|
return false;
|
}
|
});
|
},
|
checkUserPwd() {
|
// 校验用户的密码
|
this.$apis.login.checkUserPwd(this.params.oldPwd).then(res=>{
|
let rs = JSON.parse(res.data.result);
|
if(rs.code == 1) {
|
if(this.params.newPwd === this.params.enPwd) {
|
this.confirmChangeUserPwd(this.params.newPwd);
|
}else {
|
// 关闭等待框
|
this.$layer.close(this.loading);
|
this.$layer.msg("新密码和确认密码不一致");
|
}
|
}else {
|
// 关闭等待框
|
this.$layer.close(this.loading);
|
this.$layer.msg("原始密码错误！");
|
}
|
}).catch(error=>{
|
console.log(error);
|
// 关闭等待框
|
this.$layer.close(this.loading);
|
});
|
},
|
// 确认修改用户密码
|
confirmChangeUserPwd(pwd) {
|
// 关闭等待框
|
this.$layer.close(this.loading);
|
|
this.$confirm("确认修改用户密码", '系统提示', {
|
type: 'warning',
|
}).then(()=>{
|
// 开启等待框
|
this.loading = this.$layer.loading();
|
this.updateUserPwd(pwd);
|
}).catch(()=>{});
|
},
|
updateUserPwd(pwd) {
|
this.$apis.login.updateUserPwd(pwd).then(res=>{
|
let rs = JSON.parse(res.data.result);
|
if(rs.code === 1) {
|
alert("密码更新成功,请重新登录！");
|
this.$router.push("/login");
|
}else {
|
this.$layer.msg("密码更新失败");
|
}
|
// 关闭等待框
|
this.$layer.close(this.loading);
|
}).catch(error=>{
|
console.log(error);
|
// 关闭等待框
|
this.$layer.close(this.loading);
|
});
|
},
|
updateUserPwd2(name, oldPwd, newPwd) {
|
this.$apis.login.updateUserPwd2(name, oldPwd, newPwd).then(res=>{
|
let rs = JSON.parse(res.data.result);
|
if(rs.code === 1) {
|
this.$layer.msg("密码更新成功,请重新登录！");
|
this.close();
|
}else {
|
this.$layer.msg("密码修改失败,请检查用户名/密码是否正确");
|
}
|
// 关闭等待框
|
this.$layer.close(this.loading);
|
}).catch(error=>{
|
this.$layer.msg("网络请求异常，密码更新失败");
|
// 关闭等待框
|
this.$layer.close(this.loading);
|
});
|
},
|
close() {
|
this.$emit("update:visible", false);
|
}
|
},
|
mounted() {
|
this.params.userName = this.name;
|
}
|
}
|
</script>
|
|
<style scoped>
|
.params-container {
|
padding: 8px;
|
background-color: #ececec;
|
}
|
.form-footer {
|
margin-top: 16px;
|
margin-bottom: 16px;
|
text-align: right;
|
}
|
|
.form-footer .three-btn {
|
margin-left: 12px;
|
}
|
</style>
|
