irc_web/.svn/pristine/c8/c883efec372fc13985fe0ec42122e280f1645cb2.svn-base

<template>
  <div class="trials-navbar" style="position: relative">
    <div class="leftMenu">
      <img src="@/assets/zzlogo2.png" v-if="language === 'zh'" alt="">
      <img src="@/assets/zzlogo3.png" v-else alt="">
      <span>
        <!-- 中心影像系统（EICS） -->
        {{ $t('trials:trials:title:eics') }}
      </span>
    </div>
    <div class="center-menu">
      <NoticeMarquee />
    </div>
    <div class="right-menu">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        size="mini"
        @select="handleSelect"
      >
        <el-menu-item v-if="!hasPermi(['role:air'])" index="1">
          <i class="el-icon-odometer" />
          <!-- 工作台 -->
          <span slot="title">{{ $t('trials:menuTitle:workbench') }}</span>
        </el-menu-item>
        <el-menu-item index="2" :disabled="TotalNeedSignSystemDocCount !== 0">
          <i class="el-icon-box" />
          <!-- 我的项目 -->
          <span slot="title">
            {{ $t('trials:tab:trials') }}
          </span>
        </el-menu-item>
        <el-menu-item v-if="!hasPermi(['role:air'])" index="3">
          <i class="el-icon-chat-dot-square" />
          <!-- 通知消息 -->
          <span slot="title">{{ $t('trials:tab:notice') }}</span>
        </el-menu-item>

        <el-submenu index="4" class="my_info">
          <span slot="title">
            <i class="el-icon-s-custom" />
            <span>{{ name }}</span>
            <span v="userTypeShortName">({{ userTypeShortName }})</span>
          </span>
          <!-- 账户信息 -->
          <el-menu-item v-if="!hasPermi(['role:air'])" index="4-2">{{ $t('trials:trials-myinfo:title:accountInfo') }}</el-menu-item>
          <!-- 退出 -->
          <el-menu-item index="4-3">{{ $t('trials:trials-myinfo:button:loginout') }}</el-menu-item>
        </el-submenu>
      </el-menu>
      <TopLang />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import TopLang from './topLang'
import NoticeMarquee from './noticeMarquee'
export default {
  components: { TopLang, NoticeMarquee },
  data() {
    return {
      activeIndex: '2',
      isReviewer: false,
      userTypeShortName: zzSessionStorage.getItem('userTypeShortName'),
      notice: ''
    }
  },
  computed: {
    ...mapGetters(['sidebar', 'name', 'device', 'TotalNeedSignSystemDocCount', 'language'])
  },
  watch: {
    $route(v) {
      this.changeRoute(v)
    }
  },
  created() {
    console.log(!this.hasPermi(['role:air']))
    this.isReviewer = JSON.parse(zzSessionStorage.getItem('IsReviewer'))
    this.changeRoute(this.$route)
  },
  methods: {
    changeRoute(v) {
      if (v.path === '/trials/trials-workbench') {
        this.activeIndex = '1'
      }
      if (v.path === '/trials/trials-list' || ~v.path.indexOf('/trials/trials-panel')) {
        this.activeIndex = '2'
      }
      if (v.path === '/trials/trials-notice') {
        this.activeIndex = '3'
      }
      if (v.path === '/trials/trials-myinfo') {
        this.activeIndex = '4-2'
      }
    },
    handleSelect(key, keyPath) {
      switch (key) {
        case '4-2':
          this.go('/trials/trials-myinfo')
          break
        case '4-3':
          this.logout()
          break
        case '1':
          this.go('/trials/trials-workbench')
          break
        case '2':
          if (~this.$route.path.indexOf('/trials/trials-panel')) {
            return
          }
          var lastWorkbench = zzSessionStorage.getItem('lastWorkbench')
          if (lastWorkbench) {
            this.go(lastWorkbench)
          } else {
            this.go('/trials/trials-list')
          }
          break
        case '3':
          this.go('/trials/trials-notice')
          break
      }
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login`)
    },
    go(value) {
      this.$router.push({ path: value })
    },
    account() {
      this.$router.push({ name: 'Account' })
    }
  }
}
</script>

<style lang="scss" scoped>
.trials-navbar{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 70px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  .el-breadcrumb__item{
    font-size: 16px;
  }
  .leftMenu{
    display: flex;
    align-items: center;
    padding-left: 20px;
    img{
      height: 28px;
      margin-right: 10px;
    }
    span{
      font-size: 20px;
      position: relative;
      top: -1px;
    }
  }
  .right-menu, .center-menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
    // line-height: 70px;
    &:focus {
      outline: none;
    }
    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

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

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }
    .avatar-container {
      display: inline-block;
      margin-right: 200px;
      .user-avatar {
        margin-top: 5px;
        width: 40px;
        height: 40px;
        border-radius: 10px;
      }
    }
    .dropdown-container {
      cursor: pointer;
      .el-icon-caret-bottom {
        font-size: 12px;
      }
    }
    .el-dropdown-link {
      color: #999c9e;
      cursor: pointer;
    }
  }
}
</style>
<style>
  .el-menu--horizontal>.my_info.el-submenu .el-submenu__icon-arrow {
    margin-top: 0;
  }
</style>