GCLS_Page_BMS/src/layouts/components/LayoutHeader.vue

<template>
  <div class="header">
    <div class="header-top">
      <el-row type="flex" justify="space-between">
        <el-col :span="4" class="header-top-logo">LOGO</el-col>
        <el-col class="header-top-tab" :span="16">
          <span>主页</span>
          <template v-for="item in routerList">
            <router-link v-if="item.isShow" :key="item.path" :to="item.path">
              {{ item.name }}
            </router-link>
          </template>
        </el-col>
        <el-col class="header-top-user" :span="4">
          <el-avatar :src="$store.state.user.image_url"> user </el-avatar>
          <el-dropdown class="header-top-user-name" placement="bottom">
            <span>{{ realName }}</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="signOut">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-badge :is-dot="isDot" class="header-top-user-bell">
            <i class="el-icon-bell"></i>
          </el-badge>
        </el-col>
      </el-row>
    </div>
    <div class="header-crumbs">
      <div class="header-crumbs-navigation">
        <span class="home-page">后台主页 ></span>
        <router-link v-for="item in levelList" :key="item.path" :to="item.path">
          {{ item.meta.title }}
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LayoutHeader',
  data() {
    return {
      levelList: null,
      isDot: false
    };
  },
  computed: {
    realName() {
      let user = this.$store.state.user;
      return user.user_real_name ? user.user_real_name : user.user_name;
    },
    routerList() {
      let popedomList = this.$store.state.user.popedom_code_list;
      if (popedomList === undefined) {
        popedomList = [];
      }
      let list = [
        {
          path: '/org_manager',
          name: '机构管理',
          isShow: popedomList.indexOf(1000001) !== -1
        },
        {
          path: '/account_manager',
          name: '账户管理',
          isShow: popedomList.indexOf(1000002) !== -1
        },
        {
          path: '/teacher_manager',
          name: '机构教师',
          isShow: popedomList.indexOf(1000003) !== -1
        },
        {
          path: '/vocabulary',
          name: '多语言词汇',
          isShow: true
        },
        {
          path: '/upload/uploadList',
          name: '文件静态资源',
          isShow: true
        }
      ];

      return list;
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    }
  },
  created() {
    this.getBreadcrumb();
  },
  methods: {
    getBreadcrumb() {
      this.levelList = this.$route.matched.filter(item => item.meta && item.meta.title);
    },
    async signOut() {
      await this.$store.dispatch('user/signOut');
      this.$router.push(`/login`);
    }
  }
};
</script>

<style lang="scss">
.header {
  width: 100%;
  min-width: 1200px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;

  // 顶部
  &-top {
    height: 74px;
    padding: 15px 24px;
    line-height: 44px;
    background-color: #fff;

    &-logo {
      font-size: 30px;
      font-weight: 700;
      padding-right: 20px;
    }

    &-tab {
      a {
        margin-left: 24px;
      }
    }

    &-user {
      &-name {
        vertical-align: top;
        margin-left: 8px;
        cursor: pointer;
      }

      & > &-bell {
        top: -12px;
        margin-left: 26px;
        line-height: 18px;
      }
    }
  }

  // 面包屑导航
  &-crumbs {
    height: 56px;
    background-color: #ddeaf6;

    &-navigation {
      width: 1200px;
      height: 100%;
      min-width: 1200px;
      margin: 0 auto;
      padding: 15px 0;
      font-size: 18px;
      font-weight: 700;
      line-height: 26px;
      vertical-align: middle;

      &::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 100%;
        vertical-align: bottom;
        margin-right: 24px;
        background-color: #0085ff;
      }

      .home-page {
        color: #848b91;

        & ~ a {
          margin-left: 8px;
        }
      }
    }
  }
}
</style>