<template>
|
<el-dropdown @command="handleCommand">
|
<span class="avatar-dropdown">
|
<!--<el-avatar class="user-avatar" :src="avatar"></el-avatar>-->
|
<img class="user-avatar" :src="avatar" alt />
|
<div class="user-name">
|
{{ username }}
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
</div>
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="password" divided>修改密码</el-dropdown-item>
|
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
|
</el-dropdown-menu>
|
|
<el-dialog
|
title="修改密码"
|
:visible.sync="dialogVisible"
|
width="25%"
|
:modal="false"
|
:close-on-click-modal="false"
|
destroy-on-close
|
>
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
<el-form-item label="原密码" prop="oldPassword">
|
<el-input
|
v-model.trim="form.oldPassword"
|
autocomplete="off"
|
show-password
|
></el-input>
|
</el-form-item>
|
<el-form-item label="新密码" prop="newPassword">
|
<el-input
|
v-model.trim="form.newPassword"
|
autocomplete="off"
|
show-password
|
></el-input>
|
</el-form-item>
|
<el-form-item label="确认密码" prop="confirmPassword">
|
<el-input
|
v-model.trim="form.confirmPassword"
|
autocomplete="off"
|
show-password
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="resetPassword">确 定</el-button>
|
</span>
|
</el-dialog>
|
</el-dropdown>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import { recordRoute } from "@/config";
|
import { updatePassword } from "@/api/user";
|
|
export default {
|
name: "VabAvatar",
|
data() {
|
var validatePass = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请再次输入密码"));
|
} else if (value.length < 6) {
|
callback(new Error("请输入6位以上密码"));
|
} else {
|
callback();
|
}
|
};
|
|
var validatePass2 = (rule, value, callback) => {
|
if (value === "") {
|
callback(new Error("请再次输入密码"));
|
} else if (value !== this.form.newPassword) {
|
callback(new Error("两次输入密码不一致!"));
|
} else {
|
callback();
|
}
|
};
|
return {
|
form: {},
|
rules: {
|
oldPassword: [
|
{
|
required: true,
|
trigger: "blur",
|
message: "原密码不能为空",
|
},
|
],
|
newPassword: [
|
{
|
validator: validatePass,
|
required: true,
|
trigger: "blur",
|
},
|
],
|
confirmPassword: [
|
{
|
validator: validatePass2,
|
required: true,
|
trigger: "blur",
|
},
|
],
|
},
|
dialogVisible: false,
|
};
|
},
|
computed: {
|
...mapGetters({
|
avatar: "user/avatar",
|
username: "user/username",
|
userId: "user/userId",
|
}),
|
},
|
methods: {
|
handleCommand(command) {
|
switch (command) {
|
case "logout":
|
this.logout();
|
break;
|
case "password":
|
this.dialogVisible = true;
|
this.form = {};
|
break;
|
}
|
},
|
logout() {
|
this.$baseConfirm(
|
"您确定要退出" + this.$baseTitle + "吗?",
|
null,
|
async () => {
|
await this.$store.dispatch("user/logout");
|
if (recordRoute) {
|
const fullPath = this.$route.fullPath;
|
this.$router.push(`/login?redirect=${fullPath}`);
|
} else {
|
this.$router.push("/login");
|
}
|
}
|
);
|
},
|
resetPassword() {
|
this.$refs["form"].validate(async (valid) => {
|
if (valid) {
|
let rsp = await updatePassword(this.userId, {
|
oldPassword: this.form.oldPassword,
|
newPassword: this.form.newPassword,
|
});
|
if (rsp && rsp.success) {
|
this.$baseMessage(rsp.msg, "success");
|
this.$refs["form"].resetFields();
|
this.dialogVisible = false;
|
}
|
}
|
});
|
},
|
handleClose() {
|
console.log("close");
|
this.$refs["form"].resetFields();
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.avatar-dropdown {
|
display: flex;
|
align-content: center;
|
align-items: center;
|
justify-content: center;
|
justify-items: center;
|
height: 50px;
|
padding: 0;
|
|
.user-avatar {
|
width: 40px;
|
height: 40px;
|
cursor: pointer;
|
border-radius: 50%;
|
}
|
|
.user-name {
|
position: relative;
|
margin-left: 5px;
|
margin-left: 5px;
|
cursor: pointer;
|
}
|
}
|
</style>
|
