xps-web-csat-v5/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <div class="hos-name">

      <!--Logo-->
      <img :src="logo" class="logo" alt="logo">

      <!--开关左边导航-->
      <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

      <!--单位名称-->
      <span v-if="userData.ocName" class="tag">{{ userData.ocName }}</span>

      <!--消息-->
      <countdown v-if="userData.licExpiredTime" :end-time="userData.licExpiredTime">
        <div
          slot="process"
          slot-scope="{ timeObj }"
          class="tag authorization"
        >(授权时长:{{ `${timeObj.d}天${timeObj.h}:${timeObj.m}:${timeObj.s}` }})</div>
        <div slot="finish" class="tag authorization error">(请续费使用)</div>
      </countdown>
    </div>

    <!-- 隐藏标签 -->
    <breadcrumb v-if="0" id="breadcrumb-container" class="breadcrumb-container" />

    <div class="right-menu">
      <template v-if="device!=='mobile'">
        <search v-if="false" id="header-search" class="right-menu-item" />

        <error-log v-if="false" class="errLog-container right-menu-item hover-effect" />

        <screenfull v-if="false" id="screenfull" class="right-menu-item hover-effect" />

        <el-tooltip v-if="false" content="Global Size" effect="dark" placement="bottom">
          <size-select id="size-select" class="right-menu-item hover-effect" />
        </el-tooltip>

      </template>

      <!--上面导航-->
      <div class="sideMenuTab">
        <div
          v-for="(tab,index) in sideMenus"
          :key="'sideMenuTab'+index"
          class="item"
          :class="sideMenuTabId===tab.id?'active-'+sideMenuTabId:''"
          @click="sideTabChange(tab.id,tab)"
        >
          <i class="iconfont" :class="tab.icon" />
          <p>{{ tab.name }}</p>
        </div>
      </div>

      <!--消息-->
      <div class="right-menu-item" @click="navToPage('/message')">
        <el-badge :is-dot="false" class="nav-icon">
          <i class="el-icon-message-solid" />
        </el-badge>
      </div>

      <!--用户-->
      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <el-avatar v-if="userData" :src="userData.userAvatar" />
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/profile/index">
            <el-dropdown-item>
              个人中心
            </el-dropdown-item>
          </router-link>
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </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 '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import { getUnReadCounter } from '@/api/system/msgApi'
import { isNotNull } from '@/utils'

export default {
  name: 'NavBar',
  components: {
    Breadcrumb,
    Hamburger,
    ErrorLog,
    Screenfull,
    SizeSelect,
    Search
  },

  data() {
    return {
      logo: require('@/assets/images/logo/logo.png'),
      sideMenuTabId: 0,
      sideMenus: [],
      sideMenuTabList: [
        { name: '数字全景', icon: 'icon-common_panorama1', path: '/hos/satisfy/panorama', permit: 'hos_satisfy_panorama', id: 0 },
        { name: '工作总览', icon: 'el-icon-s-platform', path: '/hos/satisfy/overview', permit: 'hos_satisfy_overview', id: 1 },
        { name: '建设计划', icon: 'icon-common_saving', path: '/hos/satisfy/instruction', permit: 'hos_satisfy_instruction', id: 2 },
        { name: '工作动态', icon: 'icon-common_task', path: '/hos/satisfy/task', permit: 'hos_satisfy_task', id: 3 },
        { name: '成果评价', icon: 'icon-common_evaluate', path: '/hos/satisfy/assess', permit: 'hos_satisfy_assess', id: 4 },
        { name: '文件中心', icon: 'icon-common_file', path: '/hos/satisfy/doc', permit: 'hos_satisfy_doc', id: 5 },
        { name: '业务配置', icon: 'el-icon-setting', path: '/hos/checklist', permit: 'hos_checklist', id: 6 },
        { name: '系统管理', icon: 'icon-common_workbench', path: '/hos/profile', permit: 'hos_setting', id: 7 }
      ]
    }
  },

  computed: {
    ...mapGetters([
      'device',
      'sidebar',
      'avatar',
      'userData',
      'permission_routes',
      'menuSiderTab',
      'permits'
    ])
  },
  watch: {
    menuSiderTab(val) {
      const item = this.sideMenuTabList[val]
      this.sideTabChange(val, item)
    }
  },
  mounted() {
    this.getUnReadMsg()
    this.initSideMenu()
    this.initSideTab()
  },
  methods: {

    // 未读消息
    getUnReadMsg() {
      getUnReadCounter().then((resp) => {
        this.unReadCount = resp.data
      })
    },

    // 渲染导航
    initSideMenu() {
      const permits = JSON.parse(JSON.stringify(this.permits))
      let sideMenuTabList = JSON.parse(JSON.stringify(this.sideMenuTabList))
      sideMenuTabList = sideMenuTabList.filter(item => permits.includes(item.permit))
      this.sideMenus = sideMenuTabList
    },

    // 渲染导航
    initSideTab() {
      let id = this.sideMenuTabId
      if (isNotNull(localStorage.getItem('csat_tabId'))) {
        id = parseFloat(localStorage.getItem('csat_tabId'))
      }
      const path = this.sideMenuTabList.filter(item => item.id === id)[0].path
      this.sideTabChange(id, {
        path
      })
    },

    // 开关导航
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },

    // 导航到路径
    navToPage(path) {
      this.$emit('initMessage')
    },

    // 退出
    async logout() {
      localStorage.clear()
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },

    // 导航变化
    sideTabChange(id, item) {
      this.sideMenuTabId = id
      this.$router.replace({
        path: item.path
      })
      localStorage.setItem('csat_tabId', id)
      let permission_routes = localStorage.getItem('csat_permission_routes')
      if (permission_routes) { permission_routes = JSON.parse(permission_routes) } else {
        permission_routes = this.permission_routes
        localStorage.setItem('csat_permission_routes', JSON.stringify(permission_routes))
      }
      // 获取权限路由，根据groupId进行过滤
      const filterRoutes = permission_routes.filter((item) => {
        if (item.groupId) {
          return item.groupId.includes(id)
        }
        return item
      })
      this.$store.state.permission.routes = filterRoutes
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: var(--navHeight);
  overflow: hidden;
  background: unset;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  border-bottom: 1px solid #457486;
  position: fixed;
  width: 100%;
  z-index: 999;
  left: 0;
  box-sizing: border-box;
  background-color: inherit;
  top: 0;
  .hos-name{
    height: 100%;
    display: flex;
    align-items: center;
    float: left;
    padding-left: 10px;
    color: #fff;
    flex: 1;
    .logo {
      display: block;
      width: auto;
      height: 38px;
    }

    .tag{
      font-size: 16px;
      line-height: 1;
      font-weight: 300;
      padding-left: 5px;
      margin-top: 3px;
      &.authorization{
        font-size: 12px;
        margin-top: 13px;
        color: #a33e3e;
        // color: rgba(255, 255, 255, 0.7);
      }
    }
  }
  .hamburger-container {
    padding: 3px;
    line-height: var(--navHeight);
    height: 100%;
    font-size: 16px;
    float: left;
    color: rgb(219, 204, 204) !important;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color:transparent;
    text-align: center;
    &:hover {
      background: rgba(0, 0, 0, .025)
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: var(--navHeight);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #fff;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background .3s;

        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        margin-top: 12px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
    .sideMenuTab{
      height: 100%;
      display: flex;
      justify-content: flex-start;
      padding-right: 50px;
      .item{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #ccc;
        line-height: 1;
        font-weight: 600;
        padding: 0 15px;
        cursor: pointer;
        transition: 0.2s;
        &.active-0{color: #1890ff;font-weight: 600;}
        &.active-1{color: #b97741;font-weight: 600;}
        &.active-2{color: #97cd38;font-weight: 600;}
        &.active-3{color: #dc5a2c;font-weight: 600;}
        &.active-4{color: #414ab9;font-weight: 600;}
        &.active-5{color: #c13ac9;font-weight: 600;}
        &.active-6{color: #29c761;font-weight: 600;}
        &.active-7{color: #f9e871;font-weight: 600;}
        .iconfont{
          font-size: 36px;
          color: inherit;
           &[class^=el-icon-],  &[class*=" el-icon-"]{
                font-family: "element-icons" !important;
          }
          &.icon-common_health{
            font-size: 28px;
          }
        }
        p{
          padding: 0;
          margin: 5px 0 0 0;
          font-size: 14px;
          color: #ccc;
        }
      }
    }
  }
}
</style>