<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="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">
|
<el-button @click="submitForm">确定</el-button>
|
<el-button @click="close">取消</el-button>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import { changeSnId } from "@/views/login/api";
|
export default {
|
name: "PwdChange",
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
data() {
|
let validatePass = (rule, value, callback) => {
|
let pwdRegex = new RegExp("(?=.*[0-9])(?=.*[a-zA-Z]).{6,30}");
|
if (pwdRegex.test(value)) {
|
callback();
|
} else {
|
callback(
|
new Error("您的密码复杂度太低（密码中必须包含字母、数字、至少6位)")
|
);
|
}
|
};
|
return {
|
params: {
|
oldPwd: "",
|
newPwd: "",
|
enPwd: "",
|
},
|
rules: {
|
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.newPwd === this.params.enPwd) {
|
this.confirmChangeUserPwd(this.params.newPwd, this.params.oldPwd);
|
} else {
|
this.$layer.msg("新密码和确认密码不一致");
|
}
|
} else {
|
this.$layer.msg("存在校验未通过的数据！");
|
return false;
|
}
|
});
|
},
|
// 确认修改用户密码
|
confirmChangeUserPwd(pwd, oldPwd) {
|
this.$confirm("确认修改用户密码", "系统提示", {
|
type: "warning",
|
})
|
.then(() => {
|
this.updateUserPwd(pwd, oldPwd);
|
})
|
.catch(() => {});
|
},
|
updateUserPwd(pwd, oldPwd) {
|
let loading = this.$layer.loading();
|
changeSnId(pwd, oldPwd)
|
.then((res) => {
|
let { code, data, msg } = res.data;
|
this.$layer.close(loading);
|
if (code && data) {
|
this.close();
|
alert("密码更新成功,请重新登录！");
|
this.$store.dispatch("user/logout");
|
// this.$router.push("/login");
|
} else {
|
this.$layer.msg(msg);
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
this.$layer.close(loading);
|
});
|
},
|
close() {
|
this.$emit("update:visible", false);
|
},
|
},
|
};
|
</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>
|
