<template>
|
<div class="navbar">
|
<div class="sys-name"> {{ basicInfo.sysName }} </div>
|
<hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container" />
|
<!-- <breadcrumb class="breadcrumb-container" /> -->
|
|
<div class="right-menu">
|
<template v-if="device!=='mobile'">
|
<error-log class="errLog-container right-menu-item" />
|
|
<!-- <el-tooltip :content="$t('navbar.screenfull')" class="right-menu-item" effect="dark" placement="bottom">
|
<screenfull class="screenfull right-menu-item" />
|
</el-tooltip> -->
|
|
<!-- <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
|
<size-select class="right-menu-item"/>
|
</el-tooltip> -->
|
|
<!-- <lang-select class="right-menu-item" /> -->
|
|
<!-- <el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
|
<theme-picker class="theme-switch right-menu-item"/>
|
</el-tooltip> -->
|
</template>
|
|
<el-dropdown class="avatar-container right-menu-item" trigger="click">
|
<div class="avatar-wrapper">
|
<!-- <img :src="common.showFirstImage(basicInfo.icon)" class="user-avatar"> -->
|
<span class="user-true-name">欢迎登录: {{ common.getUserInfo().userTrueName }} </span>
|
<i class="el-icon-caret-bottom" />
|
</div>
|
<el-dropdown-menu slot="dropdown">
|
<router-link to="/">
|
<el-dropdown-item>
|
{{ $t('navbar.dashboard') }}
|
</el-dropdown-item>
|
</router-link>
|
<el-dropdown-item>
|
<span style="display:block;" @click="modifypwd">修改密码</span>
|
</el-dropdown-item>
|
<el-dropdown-item divided>
|
<span style="display:block;" @click="logout">{{ $t('navbar.logOut') }}</span>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
|
<!--修改密码弹出页面-->
|
<modify-pwd ref="modifypwd-dialog" :visible.sync="modifyPwdVisible"></modify-pwd>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import Breadcrumb from '@/components/Breadcrumb'
|
import Hamburger from '@/components/Hamburger'
|
import ErrorLog from '@/components/ErrorLog'
|
import Screenfull from './Screenfull'
|
import SizeSelect from './SizeSelect'
|
import LangSelect from '@/components/LangSelect'
|
import ModifyPwd from '@/views/sys/permission/components/modify-pwd'
|
|
export default {
|
components: {
|
Breadcrumb,
|
Hamburger,
|
ErrorLog,
|
Screenfull,
|
SizeSelect,
|
LangSelect,
|
ModifyPwd
|
},
|
data() {
|
return {
|
// 系统信息
|
basicInfo: {},
|
// 修改密码页面默认不显示
|
modifyPwdVisible: false
|
}
|
},
|
computed: {
|
VersionName: function() {
|
var userInfo = this.common.getUserInfo()
|
if (userInfo.VersionName) {
|
return '(' + userInfo.VersionName + ')'
|
} else {
|
return ''
|
}
|
},
|
...mapGetters(['sidebar', 'name', 'avatar', 'device'])
|
},
|
created() {
|
this.getBasicInfo()
|
},
|
methods: {
|
toggleSideBar() {
|
this.$store.dispatch('toggleSideBar')
|
},
|
/*
|
logout() {
|
this.$store.dispatch('LogOut').then(() => {
|
var storageKey = '$tokenInfo' + this.$store.getters.userType
|
localStorage.removeItem(storageKey)
|
location.reload()
|
})
|
},
|
//*/
|
logout() {
|
//debugger;
|
//alert(2);
|
var url = "/api/auth/logOut";
|
var params={
|
userName: this.common.getUserInfo().userName,
|
sourceMachine:'WMS'
|
}
|
var callback = res => {
|
if (res.result) {
|
this.$store.dispatch('LogOut').then(() => {
|
var storageKey = '$tokenInfo' + this.$store.getters.userType
|
localStorage.removeItem(storageKey)
|
location.reload()
|
})
|
} else {
|
this.$message.error(res.msg);
|
}
|
};
|
this.common.ajax(url, params, callback);
|
},
|
// 获得系统信息
|
getBasicInfo() {
|
const href = window.location.href
|
const url = '/api/sys/basicInfo/getSysInfo'
|
this.common.ajax(url, { href: href }, res => {
|
this.basicInfo = res.data
|
this.$store.dispatch('setBasicInfo', this.basicInfo)
|
this.common.basicInfo = res.data // 记录权限
|
document.title = this.basicInfo.sysName
|
let $favicon = document.querySelector('link[rel="icon"]')
|
const link = this.basicInfo.icon
|
if ($favicon !== null) {
|
$favicon.href = link
|
} else {
|
$favicon = document.createElement('link')
|
$favicon.rel = 'icon'
|
$favicon.href = link
|
document.head.appendChild($favicon)
|
}
|
})
|
},
|
modifypwd() {
|
this.modifyPwdVisible = true
|
},
|
iconUrl(images) {
|
if (images) {
|
if (images.indexOf('[') >= 0) {
|
const imgs = JSON.parse(images)
|
return imgs[0].src
|
} else {
|
return images
|
}
|
}
|
return ''
|
}
|
}
|
}
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
.navbar {
|
height: 50px;
|
border-radius: 0px !important;
|
background-color: white;
|
.sys-name {
|
padding: 13px 10px 10px;
|
font-size: 20px;
|
display: inline-block;
|
}
|
.user-true-name {
|
position: relative;
|
top: -5px;
|
}
|
.hamburger-container {
|
line-height: 58px;
|
height: 50px;
|
float: left;
|
padding: 0 10px;
|
}
|
.breadcrumb-container {
|
float: left;
|
}
|
.errLog-container {
|
display: inline-block;
|
vertical-align: top;
|
}
|
.right-menu {
|
float: right;
|
height: 100%;
|
&:focus {
|
outline: none;
|
}
|
.right-menu-item {
|
display: inline-block;
|
margin: 0 8px;
|
height: 50px;
|
vertical-align: text-top;
|
padding-top: 15px;
|
}
|
.theme-switch {
|
vertical-align: 15px;
|
}
|
.avatar-container {
|
height: 50px;
|
margin-right: 100px;
|
.avatar-wrapper {
|
cursor: pointer;
|
position: relative;
|
.user-avatar {
|
width: 200px;
|
height: 34px;
|
border-radius: 24px;
|
}
|
.el-icon-caret-bottom {
|
position: absolute;
|
right: 85px;
|
top: 10px;
|
font-size: 22px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
