IDCDatasync-vue/src/components/page/GlobalHeader.vue

<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 v-if="device === 'desktop'"></span>
      <span v-else>Jeecg-Boot</span>

      <user-menu :theme="theme" />
    </div>
    <!-- 顶部导航栏模式 -->
    <div v-else :class="['top-nav-header-index', theme]">
      <div class="header-index-wide">
        <div class="header-nowTime" :style="topMenuStyle.headerIndexLeft">
          <div class="nowTime">{{ nowTime }}</div>
          <div class="nowDate">{{ nowDate }}</div>
          <div class="nowWeek">{{ nowWeek }}</div>
        </div>
        <div class="header-index-center" :style="topMenuStyle.headerIndexCenter">
          <logo class="top-nav-header" :show-title="device !== 'mobile'" />
        </div>
        <user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight" />
      </div>

      <div class="header-index-wide">
        <div class="header-index-left" :style="topMenuStyle.topmenuLeft">
          <img src="~@/assets/img/MenuLeft.png" alt="" style="margin-top: 11px" />
        </div>
        <div class="header-index-center" :style="topMenuStyle.topmenuCenter">
          <s-menu mode="horizontal" :menu="menus" :theme="theme"></s-menu>
        </div>
        <div class="header-index-left" :style="topMenuStyle.topmenuLeft">
          <img src="~@/assets/img/MenuRight.png" alt="" style="float: right; margin-top: 11px" />
        </div>
      </div>
    </div>
  </a-layout-header>
</template>

<script>
import UserMenu from '../tools/UserMenu'
import SMenu from '../menu/'
import Logo from '../tools/Logo'

import { mixin } from '@/utils/mixin.js'

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',
    },
  },
  data() {
    return {
      headerBarFixed: false,
      nowTime: '',
      nowDate: '',
      nowWeek: '',
      //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
      topMenuStyle: {
        headerIndexLeft: {},
        headerIndexCenter: {},
        topNavHeader: {},
        headerIndexRight: {},
        topmenuCenter: {},
        topmenuLeft: {},
      },
      chatStatus: '',
    }
  },
  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()
    }
    this.nowTimes()
  },
  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
      }
    },
    toggle() {
      this.$emit('toggle')
    },
    //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
    buildTopMenuStyle() {
      if (this.mode === 'topmenu') {
        if (this.device === 'mobile') {
          // 手机端需要清空样式，否则显示会错乱
          this.topMenuStyle.topNavHeader = {}
          this.topMenuStyle.headerIndexRight = {}
          this.topMenuStyle.headerIndexLeft = {}
          this.topMenuStyle.headerIndexCenter = {}
          this.topMenuStyle.topmenuCenter = {}
          this.topMenuStyle.topmenuLeft = {}
        } else {
          let rightWidth = '460px'
          let menuLeftWidth = '300px'
          this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth }
          this.topMenuStyle.headerIndexLeft = { width: rightWidth }
          this.topMenuStyle.headerIndexCenter = { width: `calc(100% - ${rightWidth} - ${rightWidth})` }
          this.topMenuStyle.topmenuLeft = { width: menuLeftWidth }
          this.topMenuStyle.topmenuCenter = { width: `calc(100% - ${menuLeftWidth} - ${menuLeftWidth})` }
        }
      }
    },
    //日期显示
    timeFormate(timeStamp) {
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? '0' + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1
      let date =
        new Date(timeStamp).getDate() < 10 ? '0' + new Date(timeStamp).getDate() : new Date(timeStamp).getDate()
      let hh =
        new Date(timeStamp).getHours() < 10 ? '0' + new Date(timeStamp).getHours() : new Date(timeStamp).getHours()
      let mm =
        new Date(timeStamp).getMinutes() < 10
          ? '0' + new Date(timeStamp).getMinutes()
          : new Date(timeStamp).getMinutes()
      let ss =
        new Date(timeStamp).getSeconds() < 10
          ? '0' + new Date(timeStamp).getSeconds()
          : new Date(timeStamp).getSeconds()

      var myddy = new Date(timeStamp).getDay() //获取存储当前日期
      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.nowTime = hh + ':' + mm
      this.nowDate = month + '月' + date + '日'
      this.nowWeek = weekday[myddy]
    },
    nowTimes() {
      this.timeFormate(new Date())
      setInterval(this.nowTimes, 1000)
      this.clear()
    },
    clear() {
      clearInterval(this.nowTimes)
      this.nowTimes = null
    },
  },
}
</script>

<style lang="less" scoped>
/* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/


.layout {
  .top-nav-header-index {
    .header-index-wide {
      margin-left: 10px;

      .ant-menu.ant-menu-horizontal {
        height: 82px;
        line-height: 82px;
      }
    }
    .trigger {
      line-height: 64px;
      &:hover {
        background: rgba(0, 0, 0, 0.05);
      }
    }
  }

  .header {
    z-index: 2;
    color: white;
    height: 82px;
    background-color: @primary-color;
    transition: background 300ms;

    /* dark 样式 */
    &.dark {
      color: #000000;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
      background: transparent !important;
    }
  }

  .header,
  .top-nav-header-index {
    &.dark .trigger:hover {
      background: rgba(0, 0, 0, 0.05);
    }
  }
}

.ant-layout-header {
  height: 82px;
  line-height: 76px;
}
.header-nowTime {
  color: #00c3ff;
  font-family: 'Microsoft YaHei';
  letter-spacing: 2px;
  .nowTime {
    font-size: 40px;
    width: 120px;
    float: left;
    margin-left:27px;
  }
  .nowDate {
    font-size: 14px;
    width: 200px;
    height: 42px;
    float: left;
    line-height: 62px;
  }
  .nowWeek {
    font-size: 14px;
    width: 200px;
    height: 14px;
    float: left;
    line-height: 14px;
  }
}
</style>