thoth-frontend-test/src/components/newLayout/Head.vue

<template>
  <div class="head-wrapper">
    <div class="head-logo">
      <svg-icon icon-class="zhihui-logo" />
    </div>
    <div v-for="item in headList" :key="item.path" class="nav-tag" @click="changeNavTag(item)">
      <div v-if="item.icon" class="icon">
        <svg-icon :icon-class="item.icon" />
      </div>
      <div class="name">{{ item.name }}</div>
    </div>
    <div v-show="navTagType === 2" class="nav-tag-type" @click="setNavTagType(1)">
      <i class="el-icon-notebook-2" style="transform: rotate(90deg);" />
    </div>
    <div v-show="navTagType === 1" class="nav-tag-type" @click="setNavTagType(2)">
      <i class="el-icon-notebook-2" />
    </div>
    <div v-if="userInfo" class="user-info">
      <a-popover placement="rightBottom" overlay-class-name="head-popover">
        <template #content>
          <div class="user-control">
            <div class="user-name">{{ userInfo.name }}</div>
            <div class="line" />
            <div class="user-logout">
              <el-button type="primary" plain size="small" @click="layout()">退出登录</el-button>
            </div>
          </div>
        </template>
        <img :src="userInfo.phoneUrl">
      </a-popover>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import routes from '@/router/newRouter'
import { memberGetLoginInMemberInfoByLdap } from '@/api/projectIndex'
import { logoutUrl } from '@/apiConfig/requestIP.js'
export default {
  data() {
    return {
      headList: routes.filter(item => item.name !== '业务线'),
      userInfo: null
    }
  },
  computed: {
    ...mapGetters(['activeNavTag', 'navTagType'])
  },
  watch: {
    $route: {
      handler(to) {
        this.findRoute(to.name)
      },
      immediate: true
    }
  },
  created() {
    this.getLoginUser()
  },
  methods: {
    findRoute(routeName) {
      for (const element of routes) {
        if (element.name === routeName) {
          // 先对父元素进行查找
          this.$store.dispatch('global/setActiveNavTag', element.name)
        } else if (element.children) {
          const child = element.children.find(item => item.name === routeName) // 对子元素进行查找
          child ? this.$store.dispatch('global/setActiveNavTag', element.name) : '' // 父元素的名字设为路径
        }
      }
    },
    // 切换二级导航
    changeNavTag(nav) {
      this.$store.dispatch('global/setActiveNavTag', nav.name) // 设置二级导航的类别
      this.$router.push({ name: nav.name }) // 跳转
    },
    // 设置二级导航类型
    setNavTagType(type) {
      this.$store.dispatch('global/setNavTagType', type)
    },
    // 获取登录人员信息
    async getLoginUser() {
      const res = await memberGetLoginInMemberInfoByLdap()
      if (res && res.data) this.userInfo = res.data || null
    },
    // 退出登录
    layout() {
      window.location.href = logoutUrl
    }
  }
}
</script>
<style lang="scss" scoped>
.head-wrapper {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 99;
  width: 80px;
  align-items: center;
  background: #409eff;
  font-size: 20px;
  color: #333;
  padding-top: 17px;
}
.head-logo {
  height: 40px;
  width: 40px;
  margin-bottom: 42px;
  .svg-icon {
    width: 100%;
    height: 100%;
  }
}
.nav-tag {
  width: 100%;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 28px;
  cursor: pointer;
  .icon {
    position: relative;
    color: #ffffff;
    height: 20px;
    width: 20px;
    margin: 7px auto;
    font-size: 32px;
  }
  .svg-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
.nav-tag-type {
  margin-top: auto;
  color: #ffffff;
  cursor: pointer;
}
.user-info {
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
  margin-top: auto;
  margin-bottom: 30px;
  img {
    height: 30px;
  }
}
.user-control {
  height: 95px;
  width: 95px;
  display: flex;
  flex-direction: column;
  display: grid;
  grid-template-rows: 47px 1px 47px;
  justify-items: center;
  align-items: center;
  .line {
    width: 100%;
    height: 1px;
    background-color: rgba(112, 112, 112, 0.2);
  }
}
</style>
<style lang="scss">
.head-popover {
  box-shadow: 10px 0px 11px #dedede;
  /deep/ .ant-popover-inner-content {
    padding: 0;
  }
}
</style>