wms / wms4_zhongputaicang · Files

<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:59px;line-height:59px;" v-if="device === 'desktop'">欢迎进入 华恒仓储管理系统</span>&nbsp;
      <span style="height:59px;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 { 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

        this.headerBarFixed = scrollTop > 100

      } else {
        this.headerBarFixed = false
      }
    },

    loadFrom() {
      querySystemActivationInfo().then(res => {

        if (res.success && res.result) {
          this.expirationTime = '系统授权到期日：' + res.result.expirationTime

        }
      })
    },

    toggle() {
      this.$emit('toggle')
    },

    downWord() {

      let 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': '208px' }
          this.topMenuStyle.topSmenuStyle = { width: 'calc(100% - 208px)' }
          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>