workorder_front/src/page/index/top/index.vue

<template>
  <div class="avue-top">
    <div class="top-left">{{tag.label==="首页"?"数据看板":tag.label}}</div>
    <div class="top-right">
      <div class="avatar">
        <img :src="userInfo.avatar" alt="" width="56px" height="56px">
      </div>
      <el-dropdown >
        <span class="el-dropdown-link">
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link>
          </el-dropdown-item>
          <el-dropdown-item v-if="this.website.switchMode" @click.native="switchDept"
                            >{{$t('navbar.switchDept')}}
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout"
                            divided>{{$t('navbar.logOut')}}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { resetRouter } from '@/router/router'
export default {
  name: "top",
  data () {
    return {
    }
  },
  filters: {},
  created () {
  },
  mounted () {
    console.log(this.userInfo)
  },
  computed: {
    ...mapGetters([
      "userInfo",
      "tag",
    ])
  },
  methods: {
    logout () {
      this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning"
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          resetRouter()
          this.$router.push({ path: "/login" })
        })
      })
    }

  }
};
</script>

<style lang="scss" scoped>
.top-left {
  color: #273240;
  font-size: 30px;
  font-weight: 500;
}
.top-right {
  display: flex;
  align-items: center;
  .avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-right: 18px;
    border: 2px solid #fff;
  }
  i {
    font-style: normal;
    font-size: 20px;
    color: #6e7e92;
    font-weight: 800;
  }
}
</style>