thoth-frontend-test/src/layout/components/Sidebar/index.vue

<template>
  <el-container :class="{'has-logo':showLogo}">
    <el-header style="padding: 0; height: auto;"> <logo v-if="showLogo" :collapse="isCollapse" /></el-header>
    <el-main style="padding: 0;">
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <el-menu
          :default-active="activeMenu"
          :collapse="isCollapse"
          :background-color="variables.menuBg"
          :text-color="variables.menuText"
          :unique-opened="false"
          :active-text-color="variables.menuActiveText"
          :collapse-transition="false"
          mode="vertical"
        >
          <sidebar-item v-for="route in activeRoutes" :key="route.path" :item="route" :base-path="route.path" :show-tips="notice" />
        </el-menu>
      </el-scrollbar>
    </el-main>
    <el-footer class="Efooter" style="padding:2% 0 10% 0; min-height: 5%;">
      <el-divider style="color: #EEF0F5; margin: 0px;" />
      <hamburger :is-active="sidebar.opened" class="hamburger-containers" @toggleClick="toggleSideBar" />
    </el-footer>
    <div v-if="!isKnownBusness && bizId !== -1" class="business-guide">
      <div class="guide-dialog">
        <div class="guide-close"><i class="el-icon-error" @click="knownBusness()" /></div>
        <div class="guide-title">业务线切换在这里哦！</div>
        <div class="guide-confirm" @click="knownBusness()">好的，我知道了</div>
      </div>
    </div>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { logoutUrl } from '@/apiConfig/requestIP.js'
import Hamburger from '@/components/Hamburger'
import websocket from '@/views/workbench/mixins/websocket'

export default {
  components: { SidebarItem, Logo, Hamburger },
  mixins: [websocket],
  data() {
    return {
      isKnownBusness: localStorage.getItem('known-business') || false,
      activeRoutes: []
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'routes',
      'notice',
      'bizId'
    ]),
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo
    },
    variables() {
      return variables
    },
    isCollapse() {
      return !this.sidebar.opened
    }
  },
  watch: {
    $route: {
      handler(to, from) {
        if (to.path.search(/env-platform/) > 0) {
          this.activeRoutes = this.routes.filter(item => item.path.search(/env-platform/) > 0)
        } else if (to.path.search(/views/) > 0) {
          this.activeRoutes = this.routes.filter(item => item.path.search(/views/) > 0)
        }
      },
      immediate: true
    }
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    Logout() {
      location.href = logoutUrl
    },
    knownBusness() {
      localStorage.setItem('known-business', true)
      this.isKnownBusness = true
    },
    websocketonmessage(e) { // websocket数据接收
      const { hasReminding } = JSON.parse(e.data)
      if (hasReminding) {
        this.$store.dispatch('data/setNotice', true)
        const link = document.querySelector('link')
        link.href = link.href.replace(/favicon.ico/, 'favicon-tips.ico')
      } else {
        this.$store.dispatch('data/setNotice', false)
        const link = document.querySelector('link')
        link.href = link.href.replace(/favicon-tips.ico/, 'favicon.ico')
      }
    }
  }
}
</script>
<style lang='scss'>
.hamburger-containers {
  line-height: 46px;
  height: 100%;
  float: right;
  cursor: pointer;
  -webkit-tap-highlight-color:transparent;
  padding: 0px 20px !important;
  color: red !important;
  background: #FFF !important;
}
.Efooter .el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0;
}
.btn span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-submenu__title i {
  color: #333B4A;
}
.business-guide {
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.25);
  font-size: 18px;
  color: #FFFFFF;
  .guide-dialog {
    cursor: pointer;
    width: 250px;
    height: 215px;
    padding-top: 110px;
    position: relative;
    left: 30px;
    top: 15px;
    background-image: url('../../../assets/bisness_guide.png');
    background-size: contain;
  }
  .guide-close {
    display: flex;
    justify-content: flex-end;
    padding: 0 10px;
  }
  .guide-title {
    text-align: center;
  }
  .guide-confirm {
    color: #409EFF;
    background-color: #FFFFFF;
    width: 140px;
    margin: 10px auto;
    text-align: center;
    border-radius: 4px;
  }
}
</style>