xps-web-hos-v6/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <div class="hos-name">
      <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
      <img :src="logo" alt="logo">
      <span v-if="userData.ocName" class="tag">{{ userData.ocName }}</span>
      <countdown :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 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="sideMenuTabIndex===tab.id?'active':''"
        >
          <a v-if="tab.href" :href="tab.href" target="_blank" class="item-cont">
            <img :src="tab.icon" class="icon">
            <p>{{ tab.name }}</p>
          </a>
          <div v-else class="item-cont" @click="sideTabChange(tab.id,tab)">
            <img :src="tab.icon" class="icon">
            <p>{{ tab.name }}</p>
          </div>
        </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'
export default {
  components: {
    Breadcrumb,
    Hamburger,
    ErrorLog,
    Screenfull,
    SizeSelect,
    Search
  },
  data() {
    return {
      logo: require('@/assets/images/logo/lylc_hos.png'),
      sideMenuTabIndex: 0,
      sideMenus: [],
      sideMenuTabList: [
        { name: '数据总览', icon: require('./nav/icon.png'), path: '/', permit: 'hos_overview', id: 0 },
        { name: '平安医院', icon: require('./nav/icon-1.png'), path: '/hos/safe/overview', permit: 'hos_safe', id: 1, href: 'http://baidu.com' },
        { name: '质量医院', icon: require('./nav/icon-2.png'), path: '/hos/quality/overview', permit: 'hos_quality', id: 2 },
        { name: '满意医院', icon: require('./nav/icon-3.png'), path: '/hos/satisfy/overview', permit: 'hos_satisfy', id: 3 },
        { name: '智慧医院', icon: require('./nav/icon-4.png'), path: '/hos/smart/overview', permit: 'hos_smart', id: 4 },
        { name: '健康医院', icon: require('./nav/icon-5.png'), path: '/hos/health/overview', permit: 'hos_health', id: 5 },
        { name: '节约型医院', icon: require('./nav/icon-6.png'), path: '/hos/economic/overview', permit: 'hos_economic', id: 6 },
        { name: '系统管理', icon: require('./nav/icon-7.png'), path: '/hos/profile', permit: 'hos_economic', 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 index = 0
      if (this.isNotNull(localStorage.getItem('tabIndex'))) {
        index = parseFloat(localStorage.getItem('tabIndex'))
      }
      this.sideTabChange(index, {
        path: this.$route.fullPath
      })
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    navToPage(path) {
      this.$emit('initMessage')
    },
    async logout() {
      localStorage.clear('permission_routes') // 垃圾数据清除
      localStorage.clear('tabIndex')
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    sideTabChange(index, item) {
      this.sideMenuTabIndex = index
      this.$router.replace({
        path: item.path
      })
      localStorage.setItem('tabIndex', index)
      var permission_routes = localStorage.getItem('permission_routes')
      if (permission_routes) { permission_routes = JSON.parse(permission_routes) } else {
        permission_routes = this.permission_routes
        localStorage.setItem('permission_routes', JSON.stringify(permission_routes))
      }
      // 获取权限路由，根据groupId进行过滤
      const filterRoutes = permission_routes.filter((item) => {
        if (item.groupId) {
          return item.groupId.includes(index)
        }
        return item
      })
      this.$store.state.permission.routes = filterRoutes
    },
    isNotNull(value) {
      if (value !== undefined && value !== 'undefined' && value !== null && value !== '') return true
      return false
    }
  }
}
</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 #0f3a4a;
  position: fixed;
  width: 100%;
  z-index: 999;
  left: 0;
  box-sizing: border-box;
  background-color: inherit;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
.hos-name{
  height: 100%;
  display: flex;
  align-items: center;
  float: left;
  padding-left: 10px;
  color: #fff;
  // flex: 1;
  img{
      display: block;
      width: auto;
      height: 32px;
  }
  .tag{
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    padding-left: 5px;
    margin-top: 15px;
    &.authorization{
      font-size: 12px;
      margin-top: 20px;
      color: #a33e3e;
      // color: rgba(255, 255, 255, 0.7);
    }
  }
}
  .hamburger-container {
    padding: 3px 6px;
    margin-left: 5px;
    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;

    &: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-end;
    align-items: center;
    flex: 1;
    &: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{
        overflow-x: auto;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-right: 50px;
      .item{
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        transition: 0.2s;
        flex-shrink: 0;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        margin-right: 5px;
        .item-cont{
          display: block;
          height: 100%;
          padding: 0 14px 0 8px;
          border-radius: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        &.active{
          background: rgba(24, 144, 255, 0.9);
          p{
            font-weight: 700;
            color: #fff;
          }
        }
        .icon{
          display: block;
          width: 24px;
          height: 24px;
        }
        .iconfont{
          font-size: 30px;
          &.el-icon-s-platform{
                font-family: "element-icons" !important;
          }
          &.icon-common_health{
            font-size: 28px;
          }
        }
        p{
          padding: 0;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  }
}
</style>