irc_web/src/views/trials/trials-layout/components/trialsNavbar.vue

<template>
  <div class="trials-navbar" style="position: relative">
    <div class="leftMenu">
      <img src="@/assets/title-logo.png" alt="" class="title-logo" />
      <span style="white-space: nowrap" v-if="NODE_ENV !== 'usa'">
        <!-- 中心影像系统（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',
              'role:rpm',
              'role:radmin',
              'role:rcrc',
              'role:rir',
            ])
          "
          index="1"
        >
          <i class="el-icon-odometer" />
          <!-- 工作台 -->
          <span slot="title">{{ $t("trials:menuTitle:workbench") }}</span>
        </el-menu-item>
        <el-menu-item
          v-if="!hasPermi(['role:zys'])"
          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',
              'role:rpm',
              'role:radmin',
              'role:rcrc',
              'role:rir',
              'role:zys',
            ])
          "
          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" />
            {{ `${name} (${userTypeShortName})` }}
            <!-- <span>{{ userName }}</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
            v-if="hasPermi(['role:dev', 'role:oa', 'role:admin'])"
            index="4-4"
            >{{ $t("trials:trials-myinfo:title:system") }}</el-menu-item
          >
          <!-- 退出 -->
          <el-menu-item index="4-3">{{
            $t("trials:trials-myinfo:button:loginout")
          }}</el-menu-item>
        </el-submenu>
      </el-menu>
      <TopLang v-if="VUE_APP_OSS_CONFIG_REGION !== 'oss-us-west-1'" />
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } 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: "",
      VUE_APP_OSS_CONFIG_REGION: process.env.VUE_APP_OSS_CONFIG_REGION,
      NODE_ENV: process.env.NODE_ENV,
    };
  },
  computed: {
    ...mapGetters([
      "sidebar",
      "name",
      "userName",
      "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: {
    ...mapMutations({ setLanguage: "lang/setLanguage" }),
    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 "4-4":
          this.go("/system");
          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`);
      this.$i18n.locale = "zh";
      this.setLanguage("zh");
      this.$updateDictionary();
    },
    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: flex-end;
    padding-left: 20px;
    padding-bottom: 20px;
    img {
      height: 28px;
      margin-right: 10px;
    }
    .title-logo {
      height: 36px;
    }
    span {
      font-size: 20px;
      position: relative;
      bottom: -3px;
    }
  }
  .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;
    }
  }
  .center-menu {
    width: calc(100% - 1200px);
  }
}
</style>
<style>
.el-menu--horizontal > .my_info.el-submenu .el-submenu__icon-arrow {
  margin-top: 0;
}
</style>