foton-laws-system-front/src/components/comHeader/index.vue

<!-- header头部 面包屑、退出 -->
<template>
  <div class="com-header">
    <div class="toggle-btn iconfont" style="color: #333333;" @click="handleToggleSideBar">&#xe647;</div>
    <div class="header-content-wrap">
      <div class="header-left">
        <!--面包屑-->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
                  v-for="(item, index) in routerList"
                  :key="index"
          >
            {{ item.meta.title }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- header头部 右侧内容 当前登录人和退出-->
      <!--      <div class="header-right">-->
      <!--        <div class="user-info">-->
      <!--          <el-dropdown-->
      <!--            trigger="click"-->
      <!--            @command="handleCommand"-->
      <!--          >-->
      <!--            <div class="user-box">-->
      <!--              <img :src="userAvator" v-if="$store.getters.userInfo.avator">-->
      <!--              <span class="iconfont" v-else style="color: #333333;">&#xe69b;</span>-->
      <!--              <span>您好，{{ $store.getters.userInfo.uName }}</span>-->
      <!--              <i class="el-icon-arrow-down"/>-->
      <!--            </div>-->
      <!--            <el-dropdown-menu slot="dropdown">-->
      <!--              <el-dropdown-item command="loginOut">退出</el-dropdown-item>-->
      <!--            </el-dropdown-menu>-->
      <!--          </el-dropdown>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
  </div>
</template>
<script>
  import { mapMutations, mapGetters } from 'vuex'
  export default {
    name: 'ComHeader',
    data () {
      return {
        routerList: [] // 面包屑数组
      }
    },
    created () {
      // 渲染面包屑数组
      this.routerList = this.$route.matched
    },
    computed: {
      // 获取用户头像
      userAvator () {
        return this.$store.getters.userInfo.avator || require('@/assets/images/avator_default.png')
      },
      ...mapGetters(['isCollapse'])
    },
    watch: {
      // 监听路由 重新渲染面包屑
      $route () {
        this.routerList = this.$route.matched
      }
    },
    methods: {
      // 点击下拉选项事件
      handleCommand (command) {
        // 退出登录
        if (command === 'loginOut') {
          this.$confirm('您确认要退出吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            confirmButtonClass: 'common-button-primary',
            roundButton: false
          }).then(() => {
            // this.$http.post('/logout', {}, res => {
            //   window.location.href = 'http://testsso1.foton.com.cn/oauth2.0/authorize?client_id=app_slrs&redirect_uri=http://127.0.0.1:9090&response_type=code'
            // })
            // return
            this.$store.commit('setTypeFlag', 'loginOut')
            this.$http.get('logout', {}, {
              _this: this
            }, res => {
              this.$store.dispatch('logout')
              this.$router.push('/login')
            }, e => {})
          }).catch(() => {
          })
        }
      },

      handleToggleSideBar() {
        this.toggleSideBar(!this.isCollapse)
      },

      ...mapMutations(['toggleSideBar'])
    }
  }
</script>
<style lang="less" scoped>
  .com-header{
    padding: 0 10px;
    height: 50px;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    .toggle-btn {
      margin-right: 8px;
      font-size: 28px;
      &:hover {
        cursor: pointer;
        color: #888;
      }
    }
    .header-content-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .header-right {
      display: flex;
      align-items: center;
      .el-dropdown{
        .user-box {
          display: flex;
          align-items: center;
          .iconfont {
            font-size: 22px;
          }
          & > img{
            width: 25px;
          }
        }
        .user-box:hover{
          cursor: pointer;
        }
        .el-dropdown-menu {
          outline: none;
          border: none;
        }
      }
      .search {
        font-size: 20px;
        color: rgba(165, 165, 165, 1);
        position: relative;
        &:hover {
          cursor: pointer;
          color: #666;
        }
      }
      .line {
        width: 1px;
        height: 18px;
        background: #D1D1D1;
        margin: 0 12px;
      }
    }
  }
</style>