<template>
<!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%' -->
<a-layout-header
v-if="!headerBarFixed"
:class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
:style="{ padding: '0' }">
<div v-if="mode === 'sidemenu'" class="header" :class="theme">
<a-icon
v-if="device === 'mobile'"
class="trigger"
:type="collapsed ? 'menu-fold' : 'menu-unfold'"
@click="toggle"
></a-icon>
<a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle" />
<span style="height:59;line-height:59px;" v-if="device === 'desktop'">{{$t('system.welcomeToEnterThe')}} {{$t('system.name')}}</span>
<span style="height:59;line-height:59px;color: #d71345" v-if="manual === 'desktop'">{{ expirationTime }}</span>
<user-menu :theme="theme" />
</div>
<!-- 顶部导航栏模式 -->
<div v-else :class="['top-nav-header-index', theme]">
<div class="header-index-wide">
<div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
<logo class="top-nav-header" :show-title="device !== 'mobile'" :style="topMenuStyle.topNavHeader" />
<div v-if="device !== 'mobile'" :style="topMenuStyle.topSmenuStyle">
<s-menu mode="horizontal" :menu="menus" :theme="theme" @updateMenuTitle="handleUpdateMenuTitle"></s-menu>
</div>
<a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"></a-icon>
</div>
<user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight" />
</div>
</div>
</a-layout-header>
</template>
<script>
import UserMenu from '../tools/UserMenu'
import SMenu from '../menu/'
import Logo from '../tools/Logo'
import { downLoad, querySystemActivationInfo } from '@/api/api'
import { mixin } from '@/utils/mixin.js'
import { downFile } from '@/api/manage'
export default {
name: 'GlobalHeader',
components: {
UserMenu,
SMenu,
Logo
},
mixins: [mixin],
props: {
mode: {
type: String,
// sidemenu, topmenu
default: 'sidemenu'
},
menus: {
type: Array,
required: true
},
theme: {
type: String,
required: false,
default: 'dark'
},
collapsed: {
type: Boolean,
required: false,
default: false
},
device: {
type: String,
required: false,
default: 'desktop'
},
manual: {
type: String,
required: false,
default: 'desktop'
}
},
data() {
return {
headerBarFixed: false,
//update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
topMenuStyle: {
headerIndexLeft: {},
topNavHeader: {},
headerIndexRight: {},
topSmenuStyle: {}
},
expirationTime: '',
chatStatus: '',
url: {
downLoad: '/sys/common/downLoad'
}
}
},
created() {
this.loadFrom();
},
watch: {
/** 监听设备变化 */
device() {
if (this.mode === 'topmenu') {
this.buildTopMenuStyle()
}
},
/** 监听导航栏模式变化 */
mode(newVal) {
if (newVal === 'topmenu') {
this.buildTopMenuStyle()
}
}
},
//update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
mounted() {
window.addEventListener('scroll', this.handleScroll)
//update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
if (this.mode === 'topmenu') {
this.buildTopMenuStyle()
}
//update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
},
methods: {
handleScroll() {
if (this.autoHideHeader) {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop > 100) {
this.headerBarFixed = true
} else {
this.headerBarFixed = false
}
} else {
this.headerBarFixed = false
}
},
loadFrom() {
querySystemActivationInfo().then(res => {
if (res.success) {
this.expirationTime = this.$t('system.systemLicenseExpirationDate') + "：" + res.result.expirationTime;
}
})
},
toggle() {
this.$emit('toggle')
},
downWord() {
var fileName = '华恒WMS4操作说明书.doc'
return downFile(this.url.downLoad, fileName).then(data => {
debugger
this.$message.info('华恒WMS4操作说明书开始下载....')
if (!data || data.size === 0) {
this.$message.error('文件下载失败')
return
}
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(new Blob([data]), fileName)
} else {
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
document.body.removeChild(link) //下载完成移除元素
window.URL.revokeObjectURL(url) //释放掉blob对象
}
})
},
//update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
buildTopMenuStyle() {
if (this.mode === 'topmenu') {
if (this.device === 'mobile') {
// 手机端需要清空样式，否则显示会错乱
this.topMenuStyle.topNavHeader = {}
this.topMenuStyle.topSmenuStyle = {}
this.topMenuStyle.headerIndexRight = {}
this.topMenuStyle.headerIndexLeft = {}
} else {
let rightWidth = '356px'
this.topMenuStyle.topNavHeader = { 'min-width': '216px' }
this.topMenuStyle.topSmenuStyle = { width: 'calc(100% - 216px)' }
this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth, 'white-space': 'nowrap' }
this.topMenuStyle.headerIndexLeft = { width: `calc(100% - ${rightWidth})` }
}
}
},
//update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
// update-begin-author:sunjianlei date:20210508 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
handleUpdateMenuTitle(value) {
this.$emit('updateMenuTitle', value)
}
// update-end-author:sunjianlei date:20210508 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
}
}
</script>
<style lang="less" scoped>
/* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
@height: 59px;
.layout {
.top-nav-header-index {
.header-index-wide {
margin-left: 0px;
.ant-menu.ant-menu-horizontal {
height: @height;
line-height: @height;
}
}
.trigger {
height: 59px;
line-height: 59px;
&:hover {
background: rgba(0, 0, 0, 0.05);
}
}
}
.header {
z-index: 2;
color: white;
height: @height;
background-color: #111;
transition: background 300ms;
/* dark 样式 */
&.dark {
color: #000000;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
background-color: white !important;
}
}
.header,
.top-nav-header-index {
&.dark .trigger:hover {
background: rgba(0, 0, 0, 0.05);
}
}
}
.ant-layout-header {
height: @height;
line-height: @height;
}
/* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
</style>