data_governance/src/views/homecomponents/Head.vue

<template>
  <header class="header navbar">
    <ul class="menu-list">
      <li class="logo" @click="onMenu(0)">
        <img src="@/assets/images/logo.png"/>
          <!-- <img src="@/assets/images/logo_m.png" @click="onMenu(0)"/> -->
      </li>
      <li class="nav-item header-item" :class="!activeId ? 'active' : ''" @click="onMenu(0)">
        <i class="iconfont icon-shouye"></i>首页
      </li>
      <li class="nav-item header-item" v-for="item of menus" :key="item.menuId" :class="activeId === item.menuId ? 'active' : ''" @click="onMenu(item.menuId , item.menuName)">
        <i :class="'iconfont '+ item.imageUrl" style="vertical-align: middle;"></i>{{item.menuName}}
      </li>
    </ul>
    <div class="menu-right">
       <i class="iconfont icon-xiaoxi"></i>
       <div class="portrait">
         <img src="@/assets/images/headPortrait.png" >
         <p>
           <span class="portrait-name">{{userName}}</span>
           <span class="portrait-role">{{roleName}}</span>
         </p>
       </div>
       <div class="sign-out" @click="signOut">
        <i class="iconfont icon-084tuichu"></i><span class="sign-out-text">退出</span>
       </div>
    </div>
    <!-- 确认退出 -->
    <Modal
      v-model="signOutModal"
      title="退出"
      width="400"
      ref="modalGragSign"
      draggable
      reset-drag-position
      :mask-closable="false"
      class-name="common-modal">
      <Icon type="ios-information-circle" class="modal-icon" style="color: #ff8432;"></Icon>
      <span class="modal-text">确认退出</span>
      <div slot="footer">
          <Button @click="signOutCancel">取消</Button>
          <Button type="primary" @click="signOutOk">确定</Button>
        </div>
    </Modal>
   </header>
</template>
<script>
import utils from '../../libs/utils';
export default {
  name: "Head",
  components:{
  },
  data() {
    return {
      menus: [],
      roleName: '',
      userName: utils.storage('sw_user').user,
      activeId: 0,
      signOutModal: false,
      menuNameArr: []
    };
  },
  watch: {
      '$route' (to, from) {
        // 菜单头部浏览器前进或后退
        let arr = utils.storage('sw_user').menus;
        arr.forEach((item,i) => {
          if (item.childMenus) {
            item.childMenus.forEach((val,index)=> {
              if (val.linkUrl == to.path) {
              this.activeId = val.parentMenuId
              this.$emit('listenMenuId', this.activeId);
              sessionStorage.setItem('routname', to.path);
              this.$router.push( to.path );
              }
            })
          }
        })
        // 菜单头部浏览器前进或后退首页选中首页菜单
        if (to.path == '/mainPage') {
           this.activeId = 0
        }
      }
    },
  mounted() {
    this.menus = utils.storage('sw_user').menus
    this.roleName = this.getCookie('role_name')
    const ID = sessionStorage.getItem('id')
    this.activeId = parseInt(ID)
    this.$emit('listenMenuId', parseInt(ID));
  },
  methods: {
    // 获取cookie里某个参数的值
    getCookie(name) {
      let cookieValue = null;
      if (document.cookie && document.cookie !== '') {
          let cookies = document.cookie.split(';');
          for (let i = 0; i < cookies.length; i++) {
              let cookie = cookies[i].trim();
              // 判断这个cookie的参数名是不是我们想要的
              if (cookie.substring(0, name.length + 1) === (name + '=')) {
                  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                  break;
              }
          }
      }
      return cookieValue;
    },
    onMenu: function(id,menuName) {
      let menuNameArr = []
      menuNameArr[0] = menuName
      if(this.activeId === id) {
          return ;
        }
        this.activeId = id;
        const { currRouterName } = utils.toRouter(id);
        this.$emit('listenMenuId', id);
        this.menus.forEach((item)=> {
          if (item.menuId == id) {
           menuNameArr[1] = item.childMenus[0].menuName
          }
        })
        sessionStorage.setItem('routname', currRouterName);
        sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr));
        this.$router.push( currRouterName );
    },
    signOut () {
      this.signOutModal = true
    },
    signOutOk () {
      utils.removeSessionData();
      this.$router.push('/');
      this.signOutModal = false
    },
    signOutCancel () {
      this.signOutModal = false
    },
  },  
};
</script>
<style scoped lang="stylus">
.header {
  width: 100%;
  height: 90px;
  background: linear-gradient(180deg, #06215F, #0D429E);
  display: flex;
}
.menu-list {
  height: 100%;
  display: flex;
  flex: 1;
  align-items: center;
}
.logo {
  height: 100%;
  display: flex;
  align-items: center;
  margin-right: 30px;
}
.nav-item {
  width: 96px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: #F1F1F1;
  cursor: pointer;
}
.active {
  background: linear-gradient(0deg, rgba(1, 133, 234, 0.6), rgba(21, 51, 107, 0.06));
  border-bottom: 3px solid #259FF8;
}
.menu-right {
  display: flex;
  align-items: center;
  color: #FFFFFF;
}
.portrait {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 12px;
  p {
    display: flex;
    flex-direction: column;
    margin-left: 12px;
    .portrait-name {
      font-size: 16px;
    }
    .portrait-role {
      font-size: 12px;
    }
  }
}
.sign-out {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 35px;
  cursor: pointer;
}
.sign-out-text {
  font-size: 16px;
  padding-left: 12px;
}
>>> .iconfont {
  font-size: 30px;
  color: #F1F1F1;
}
</style>