<template>
|
<div class="header">
|
<!-- 折叠按钮 -->
|
<div class="collapse-btn" @click="collapseChage">
|
<i class="el-icon-menu"></i>
|
</div>
|
<div class="logo">峰峰智慧泊车系统</div>
|
<div class="header-right">
|
<div class="header-user-con">
|
<!-- 全屏显示 -->
|
<!--<div class="btn-fullscreen" @click="handleFullScreen">-->
|
<!--<el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">-->
|
<!--<i class="el-icon-rank"></i>-->
|
<!--</el-tooltip>-->
|
<!--</div>-->
|
<!--<div >-->
|
<!--<el-tooltip effect="dark" placement="bottom">-->
|
<!--<span><i class="el-icon-user"></i>{{this.userNames}}</span>-->
|
<!--</el-tooltip>-->
|
<!--</div>-->
|
<!-- <div class="btn-fullscreen" @click="dialogFormVisible = true">-->
|
<!-- <el-tooltip effect="dark" :content="`修改密码`" placement="bottom">-->
|
<!-- <i class="el-icon-setting"></i>-->
|
<!-- </el-tooltip>-->
|
<!-- </div>-->
|
<el-dialog title="修改密码" :visible.sync="dialogFormVisible">
|
<el-form :model="form">
|
<el-form-item label="原始密码" :label-width="formLabelWidth">
|
<el-input v-model="form.oldPassword" type="password" autocomplete="off" placeholder="请输入原始密码"></el-input>
|
</el-form-item>
|
<el-form-item label="新密码" :label-width="formLabelWidth">
|
<el-input v-model="form.newPassword" type="password" autocomplete="off" placeholder="请输入新密码"></el-input>
|
</el-form-item>
|
<el-form-item label="确认密码" :label-width="formLabelWidth">
|
<el-input v-model="form.surePassword" type="password" autocomplete="off" placeholder="请再输入一次"></el-input>
|
</el-form-item>
|
<span style="color:red;margin-left:120px">{{errTishi}}</span>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
<el-button
|
type="primary"
|
@click="makeSure(form.newPassword,form.surePassword)"
|
>确 定</el-button>
|
</div>
|
</el-dialog>
|
<!-- 消息中心 -->
|
<!--<div class="btn-bell">-->
|
<!--<el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">-->
|
<!--<router-link to="/tabs">-->
|
<!--<i class="el-icon-bell"></i>-->
|
<!--</router-link>-->
|
<!--</el-tooltip>-->
|
<!--<span class="btn-bell-badge" v-if="message"></span>-->
|
<!--</div>-->
|
<!-- 用户头像 -->
|
<!--<div class="user-avator"><img src="../../assets/img/img.jpg"></div>-->
|
<!-- 用户名下拉菜单 -->
|
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
|
<span class="el-dropdown-link">
|
{{loginName}} <i class="el-icon-caret-bottom"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item divided command="editPassword">修改密码</el-dropdown-item>
|
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
<!-- {{this.loginName}}-->
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import bus from '../common/bus';
|
export default {
|
data() {
|
return {
|
dialogFormVisible:false,
|
collapse: true,
|
fullscreen: false,
|
name: '',
|
formLabelWidth: '120px',
|
userNames:'',
|
errTishi:'',
|
userGuid:'',
|
form: {
|
oldPassword: '',
|
newPassword: '',
|
surePassword: ''
|
},
|
message: 2,
|
loginName:''
|
}
|
},
|
computed:{
|
|
},
|
created() {
|
let username = localStorage.getItem('name')
|
this.loginName = username
|
},
|
|
methods:{
|
// 用户名下拉菜单选择事件
|
handleCommand(command) {
|
if(command == 'loginout'){
|
sessionStorage.accessToken = ''
|
sessionStorage.userRoleNames = ''
|
sessionStorage.userGuid = ''
|
sessionStorage.userName = ''
|
this.$router.push('/login');
|
// this.$confirm("是否退出登录?", "提示", {
|
// confirmButtonText: "确定",
|
// cancelButtonText: "取消",
|
// type: "warning"
|
// }).then(() => {
|
// this.$store.commit("setToken", '');
|
// this.$store.commit("setUserName", '');
|
// this.$store.commit("setUserGuid", '');
|
// this.$store.commit("setUserRoleNames", '');
|
// this.$store.commit("setUserId", '');
|
// console.log(this.$store.commit());
|
// console.log(111);
|
// this.$router.push('/login');
|
// })
|
// .catch(() => {
|
// // this.$message({
|
// // type: 'info',
|
// // message: '已取消退出登录'
|
// // })
|
// });
|
// localStorage.removeItem('ms_username')
|
// this.$router.push('/login');
|
}else if(command == 'editPassword'){
|
this.dialogFormVisible = true
|
}
|
},
|
// 侧边栏折叠
|
collapseChage(){
|
this.collapse = !this.collapse;
|
bus.$emit('collapse', this.collapse);
|
},
|
//确定修改密码
|
makeSure(a, b){
|
if(!localStorage.userId){
|
this.$router.push({'path': '/login'});
|
}
|
if (a != b) {
|
this.errTishi = '密码不一致'
|
}else{
|
this.$axios({
|
method:"post",
|
data:{
|
userId:localStorage.userId,
|
oldPassword: this.form.oldPassword,
|
newPassword: this.form.newPassword,
|
},
|
url:this.$systemconfig.basePath + '/user/updatePassword '
|
}).then(res => {
|
if(res.data.code==0){
|
this.form.oldPassword = ''
|
this.form.newPassword = ''
|
this.form.surePassword = ''
|
this.errTishi = ''
|
this.$message({message:'修改成功', type: 'success'});
|
this.dialogFormVisible = false
|
}else{
|
this.$message({message: '修改失败', type: 'false'});
|
}
|
})
|
}
|
|
},
|
|
// 全屏事件
|
handleFullScreen(){
|
let element = document.documentElement;
|
if (this.fullscreen) {
|
if (document.exitFullscreen) {
|
document.exitFullscreen();
|
} else if (document.webkitCancelFullScreen) {
|
document.webkitCancelFullScreen();
|
} else if (document.mozCancelFullScreen) {
|
document.mozCancelFullScreen();
|
} else if (document.msExitFullscreen) {
|
document.msExitFullscreen();
|
}
|
} else {
|
if (element.requestFullscreen) {
|
element.requestFullscreen();
|
} else if (element.webkitRequestFullScreen) {
|
element.webkitRequestFullScreen();
|
} else if (element.mozRequestFullScreen) {
|
element.mozRequestFullScreen();
|
} else if (element.msRequestFullscreen) {
|
// IE11
|
element.msRequestFullscreen();
|
}
|
}
|
this.fullscreen = !this.fullscreen;
|
}
|
},
|
mounted(){
|
this.userNames = sessionStorage.getItem('userName');
|
this.userGuid = sessionStorage.getItem('userGuid');
|
if(document.body.clientWidth < 1500){
|
this.collapseChage();
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.header {
|
position: relative;
|
box-sizing: border-box;
|
width: 100%;
|
height: 70px;
|
font-size: 22px;
|
color: #fff;
|
}
|
.collapse-btn{
|
float: left;
|
padding: 0 21px;
|
cursor: pointer;
|
line-height: 70px;
|
}
|
.header .logo{
|
float: left;
|
width:250px;
|
line-height: 70px;
|
}
|
.header-right{
|
float: right;
|
padding-right: 50px;
|
}
|
.header-user-con{
|
display: flex;
|
height: 70px;
|
align-items: center;
|
}
|
.btn-fullscreen{
|
transform: rotate(45deg);
|
margin-right: 5px;
|
font-size: 24px;
|
}
|
.btn-bell, .btn-fullscreen{
|
position: relative;
|
width: 30px;
|
height: 30px;
|
text-align: center;
|
border-radius: 15px;
|
cursor: pointer;
|
}
|
.btn-bell-badge{
|
position: absolute;
|
right: 0;
|
top: -2px;
|
width: 8px;
|
height: 8px;
|
border-radius: 4px;
|
background: #f56c6c;
|
color: #fff;
|
}
|
.btn-bell .el-icon-bell{
|
color: #fff;
|
}
|
.user-name{
|
margin-left: 10px;
|
}
|
.user-avator{
|
margin-left: 20px;
|
}
|
.user-avator img{
|
display: block;
|
width:40px;
|
height:40px;
|
border-radius: 50%;
|
}
|
.el-dropdown-link{
|
color: #fff;
|
cursor: pointer;
|
}
|
.el-dropdown-menu__item{
|
text-align: center;
|
}
|
</style>
|
