<template>
|
<el-form style="width: 500px;margin: auto" ref="form" :model="user" :rules="rules" label-width="80px">
|
<el-form-item label="旧密码" prop="oldMixPd">
|
<el-input v-model="user.oldMixPd" placeholder="请输入旧密码" type="password" show-password/>
|
</el-form-item>
|
<el-form-item label="新密码" prop="newMixPd">
|
<el-input v-model="user.newMixPd" placeholder="请输入新密码" type="password" show-password/>
|
<div style="font-size: 12px;color: #999"><span style="color: red;margin-right: 4px">*</span>密码长度在 8 到 12 个字符间,必须包含数字、大小写字母、特殊字符</div>
|
</el-form-item>
|
<el-form-item label="确认密码" prop="btnMixPd">
|
<el-input v-model="user.btnMixPd" placeholder="请确认新密码" type="password" show-password/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" size="mini" @click="submit">保存</el-button>
|
<el-button type="danger" size="mini" @click="close">关闭</el-button>
|
</el-form-item>
|
</el-form>
|
</template>
|
|
<script>
|
import {updatePassword} from "@/api/user";
|
import {encrypt} from "@/utils/jsencrypt";
|
|
export default {
|
data() {
|
const equalToPassword = (rule, value, callback) => {
|
if (this.user.newMixPd !== value) {
|
callback(new Error("两次输入的密码不一致"));
|
} else {
|
callback();
|
}
|
};
|
return {
|
user: {
|
oldMixPd: undefined,
|
newMixPd: undefined,
|
btnMixPd: undefined
|
},
|
// 表单校验
|
rules: {
|
oldMixPd: [
|
{required: true, message: "旧密码不能为空", trigger: "blur"}
|
],
|
newMixPd: [
|
{required: true, message: "新密码不能为空", trigger: "blur"},
|
{ min: 8, max: 12, message: "长度在 8 到 12 个字符", trigger: "blur" }
|
],
|
btnMixPd: [
|
{required: true, message: "确认密码不能为空", trigger: "blur"},
|
{required: true, validator: equalToPassword, trigger: "blur"}
|
]
|
}
|
};
|
},
|
methods: {
|
submit() {
|
this.$refs["form"].validate(valid => {
|
if (valid) {
|
let params = {
|
oldMixPd: encrypt(this.user.oldMixPd),
|
newMixPd: encrypt(this.user.newMixPd),
|
btnMixPd: encrypt(this.user.btnMixPd),
|
}
|
updatePassword(params).then(response => {
|
this.user = {
|
oldMixPd: undefined,
|
newMixPd: undefined,
|
btnMixPd: undefined
|
}
|
this.$modal.msgSuccess("修改成功");
|
});
|
}
|
});
|
},
|
close() {
|
this.$store.dispatch('tagsView/delView', this.$route).then(({visitedViews}) => {
|
const latestView = visitedViews.slice(-1)[0];
|
if (latestView) {
|
this.$router.push(latestView.fullPath);
|
} else {
|
if (this.$route.name === 'Dashboard') {
|
// to reload home page
|
this.$router.replace({path: '/redirect' + this.$route.fullPath});
|
} else {
|
this.$router.push('/dashboard');
|
}
|
}
|
});
|
}
|
}
|
};
|
</script>
|
