<template>
|
<div class="trigger">
|
<div class="user">
|
<div>您好，{{ nickName }}</div>
|
<div>
|
<el-link type="primary" @click="dialogFormVisible = true"
|
>修改密码</el-link
|
>
|
</div>
|
</div>
|
<el-dialog
|
append-to-body
|
title="修改密码"
|
:visible.sync="dialogFormVisible"
|
width="30%"
|
:close-on-click-modal="false"
|
custom-class="data-dialog"
|
>
|
<el-form :model="form" ref="pwdForm" :rules="rules">
|
<el-form-item label="原密码">
|
<el-input
|
show-password
|
v-model="form.oldPassword"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="新密码" prop="newPassword">
|
<el-input
|
show-password
|
v-model="form.newPassword"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="确认密码" prop="checkPassword">
|
<el-input
|
show-password
|
v-model="form.checkPassword"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="closeDig('pwdForm')">取 消</el-button>
|
<el-button type="primary" @click="onSubmit('pwdForm')">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { getUserInfo, updateUserPwd } from "@/api/api";
|
import qs from "qs";
|
import axios from "axios";
|
|
export default {
|
name: "lefttop",
|
data() {
|
|
let checkpass = (rule, value, callback) => {
|
if (value == this.form.newPassword) {
|
callback();
|
} else {
|
callback(new Error("密码不一致"));
|
}
|
};
|
return {
|
rules: {
|
newPassword: [
|
{ required: true, message: "请输入新密码", trigger: "blur" },
|
],
|
checkPassword: [
|
{ required: true, message: "不能为空", trigger: "blur" },
|
{ validator: checkpass, trigger: "blur" },
|
],
|
},
|
dialogFormVisible: false,
|
nickName: "用户",
|
form: {
|
oldPassword: "",
|
newPassword: "",
|
checkPassword: "",
|
},
|
};
|
},
|
mounted() {
|
getUserInfo().then((res) => {
|
if (res.code == 200) {
|
this.nickName = res.data.nickName;
|
let userInfo = {
|
userId: res.data.userId,
|
userName: res.data.userName,
|
};
|
this.$store.commit("saveUserInfo", userInfo);
|
}
|
});
|
},
|
methods: {
|
onSubmit(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
let pwdItem = {
|
newPassword: this.form.newPassword,
|
oldPassword: this.form.oldPassword,
|
};
|
|
const options = {
|
method: "PUT",
|
headers: {
|
"content-type": "application/x-www-form-urlencoded",
|
Authorization: window.localStorage.getItem("TokenKey"),
|
},
|
data: qs.stringify(pwdItem),
|
url: "http://10.10.4.116:8089/system/user/profile/updatePwd",
|
};
|
axios(options).then((res) => {
|
if (res.data.code != 200) {
|
this.$message.error(res.data.msg);
|
} else {
|
this.$message({
|
message: res.data.msg,
|
type: "success",
|
});
|
this.form.newPassword = "";
|
this.form.oldPassword = "";
|
this.form.checkPassword = "";
|
this.dialogFormVisible = false;
|
setTimeout(() => {
|
localStorage.removeItem("TokenKey");
|
localStorage.removeItem("TokenTime");
|
this.$router.push("/login");
|
}, 3000);
|
}
|
});
|
} else {
|
alert("验证不通过");
|
return false;
|
}
|
});
|
},
|
closeDig(formName) {
|
this.form.newPassword = "";
|
this.form.oldPassword = "";
|
this.form.checkPassword = "";
|
this.dialogFormVisible = false;
|
this.$refs[formName].resetFields();
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.lefttopBox {
|
pointer-events: all;
|
}
|
.user {
|
color: #fff;
|
font-weight: 500;
|
font-size: 14px;
|
position: absolute;
|
left: 26px;
|
top: 17px;
|
padding: 10px;
|
background-image: url("~@/assets/img/new/listbg.png");
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
line-height: 19px;
|
}
|
.el-link {
|
margin-left: 5px;
|
color: #fff;
|
font-size: 14px;
|
line-height: 20px;
|
vertical-align: middle;
|
}
|
</style>
|
