<template>
|
<div class="layout-header-compontent">
|
<div class="left">
|
<el-icon class="menu-collapse-change-icon-btn" :class="[collapse?'reserve':'']" @click="onChangeMenuCollapse"><e-icon-fold /></el-icon>
|
<el-breadcrumb class="main-breadcrumb">
|
<el-breadcrumb-item v-for="(item,index) in breadcrumbs" :key="'breadcrumb-'+index">
|
<span class="last-breadcrumb__item-text" v-if="index===breadcrumbs.length-1">{{item.name}}</span>
|
<template v-else>{{item.name}}</template>
|
</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
<div class="right">
|
<el-dropdown @command="onDropDownCommand">
|
<div class="user-trigger-target">
|
<div class="user-icon-box">
|
<el-icon><e-icon-avatar /></el-icon>
|
</div>
|
<div class="user-name-view">{{userName}}</div>
|
</div>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item class="user-dropdown-item" command="modifyPwd">修改密码</el-dropdown-item>
|
<el-dropdown-item class="user-dropdown-item" command="logout"><span class="iconfont icon-out"></span>退出</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
|
<modify-password-modal v-model:visible="modifyPasswordModalVisible" />
|
</div>
|
</template>
|
|
<script>
|
import {Fold,Avatar} from '@element-plus/icons'
|
import ModifyPasswordModal from '@/pages/system/users/compontents/ModifyMyPassword.vue'
|
export default {
|
name:'layoutHeaderCompontent',
|
components:{eIconFold:Fold,eIconAvatar:Avatar,ModifyPasswordModal},
|
data(){
|
return {
|
modifyPasswordModalVisible:false
|
}
|
},
|
computed:{
|
collapse(){
|
return this.$store.getters['system/getCollapse'];
|
},
|
userName(){
|
let user = this.$store.getters['user/getUserInfo'];
|
let res = user['user_name'];
|
if (!res) res = '未命名'
|
return res;
|
},
|
breadcrumbs(){
|
return this.$store.getters['system/getCurrentFullMenuPath'];
|
}
|
},
|
methods:{
|
onChangeMenuCollapse(){
|
this.$store.commit('system/setCollapse',!this.collapse)
|
},
|
onDropDownCommand(command){
|
if (command === 'logout') {
|
this.logout()
|
} else if (command === 'modifyPwd') {
|
this.modifyPasswordModalVisible = true
|
}
|
},
|
logout(){
|
this.$router.push('/login')
|
this.$store.commit('user/clear')
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.layout-header-compontent{
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
padding-left: 24px;
|
box-shadow: 0px 7px 7px -7px #F2F2F2;
|
&>*{
|
height: 100%;
|
display: flex;
|
align-items: center;
|
}
|
&>.right{
|
padding-right: 12px;
|
}
|
.menu-collapse-change-icon-btn{
|
font-size: 24px;
|
cursor: pointer;
|
&.reserve{
|
transform:rotate(180deg);
|
}
|
}
|
.main-breadcrumb{
|
margin-left: 24px;
|
}
|
.last-breadcrumb__item-text{
|
color: #333333;
|
}
|
.user-trigger-target{
|
display: flex;
|
align-items: center;
|
}
|
.user-icon-box{
|
width: 24px;
|
height: 24px;
|
border-radius: 50%;
|
border: 1px solid #666666;
|
color: #666666;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-right: 6px;
|
}
|
}
|
</style>
|
<style>
|
.user-dropdown-item .iconfont{
|
font-size: 1.2em;
|
margin-right: 4px;
|
}
|
</style>
|
