web/src/components/work-desktop/Slidebar.vue

<template>
  <div class="work-slidebar">
    <el-menu
      :default-active="defaultActive"
      class="el-menu-vertical-demo"
      :default-openeds="defalutOpends"
      ref="menu"
      @select="onMenuSelect"
    >
      <el-menu-item index="我的主页" @click.native="toIndex">
        <i class="iconfont icon-hui7"></i>
        <span slot="title">我的主页</span>
      </el-menu-item>
      <el-submenu :index="item.firstlevel" v-for="item in menus" :key="item.firstlevel">
        <template slot="title">
          <i class="iconfont" :class="item.icon"></i>
          <span>{{item.firstlevel}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item :index="v.name" v-for="v in item.secondarylevel" :key="v.name" @click="goRouteItem(v)">
            <span class="router-name" v-html="v.name"></span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import '@/assets/style/iconfont.css'
import { Menu, Submenu, MenuItem, MenuItemGroup, MessageBox } from 'element-ui'
import { getLeftMenu } from '@/api/modules'
export default {
  name: 'work-slidebar',
  computed: {},
  components: {
    [Menu.name]: Menu,
    [Submenu.name]: Submenu,
    [MenuItem.name]: MenuItem,
    [MenuItemGroup.name]: MenuItemGroup,
    [MessageBox.name]: MessageBox
  },
  data () {
    return {
      menuKey: '0', // 用来强制刷新menu
      menus: [],
      defalutOpends: [],
      defaultActive: '我的主页',
      // 使用SideBar的index列表
      useSideBar: [
        '我的主页',
        '定制化分析报告'
      ]
    }
  },
  watch: {
    $router (to, from) {
      this.setDefaultActive()
    }
  },
  created () {
    this.getHomeLeftMenu()
  },
  methods: {
    getHomeLeftMenu () {
      getLeftMenu().then(res => {
        if (res.error_code === 0 && res.data) {
          res.data.forEach((v, i) => {
            switch (v.firstlevel) {
              case '我的订阅':
                v.icon = 'icon-hui2'
                break
              case '我的关注':
                v.icon = 'icon-hui'
                break
              case '我的收藏':
                v.icon = 'icon-hui3'
                break
              case '会员服务':
                v.icon = 'icon-hui4'
                break
              case '我的资产':
                v.icon = 'icon-hui5'
                break
              case '交易管理':
                v.icon = 'icon-hui6'
                break
              default:
                v.icon = 'icon-hui2'
                break
            }
            if (v.firstlevel === '会员服务') {
              this.defalutOpends.push(v.firstlevel) // 加空字符串
              v.secondarylevel.forEach(s => {
                if (s.name.indexOf('/') > -1) {
                  s.name = s.name.replace('/', '/<br>')
                }
              })
            }
          })
          this.menus = res.data
          this.setDefaultActive()
        } else {
          this.menus = []
        }
      })
    },
    goRouteItem (item) {
      if (item.isusable) {
        window.open(item.url)
        this.$refs.menu.activeIndex = this.defaultActive
      } else {
        MessageBox.confirm('您未购买此服务，如需使用请联系您的销售人员或客服升级套餐，谢谢！', '提示信息', {
          customClass: 'custom-message-box',
          confirmButtonText: '我知道了',
          confirmButtonClass: 'custom-confirm-btn',
          showClose: false,
          showCancelButton: false,
          closeOnClickModal: false,
          center: true
        }).then(() => {
          console.log('关闭')
        })
      }
    },
    onMenuSelect (e) {
      this.$nextTick(() => {
        this.$refs.menu.activeIndex = this.defaultActive
      })
    },
    toIndex () {
      if (this.$route.name === 'desktop') return
      const routeUrl = this.$router.resolve({
        path: '/'
      })
      window.open(routeUrl.href)
    },
    setDefaultActive () {
      if (this.$route.name === 'desktop') {
        this.defaultActive = '我的主页'
      } else if (this.$route.path.indexOf('report_analysis') !== -1) {
        this.defaultActive = '定制化分析报告'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.work-slidebar{
  .iconfont{
    margin-right: 8px;
    font-size: 18px;
    color: #1D1D1D;
  }
  ::v-deep{
    .el-menu{
      border-right: 0;
    }
    .el-submenu{
      width: 100%;
    }
    .el-menu-item{
      height: 42px;
      line-height: 42px;
      min-width: 0;
      padding: 0 10px!important;
      width: 100%;
      color: #1D1D1D;
      &:hover{
        color: #2CB7CA;
        background: #eaf8fa;
        border-radius: 4px;
        i,span{
          color: #2CB7CA;
        }
      }
      &.is-active{
        .iconfont{
          color: #2CB7CA;
        }
      }
    }
    .el-submenu__title{
      height: 42px;
      line-height: 42px;
      padding: 0 10px!important;
      color: #1D1D1D;
      &:hover{
        color: #2CB7CA;
        background: #eaf8fa;
        border-radius: 4px;
        i{
          color: #2CB7CA;
        }
      }
    }
    .el-menu-item-group{
      width: 100%;
      .el-menu-item{
        height: auto;
        line-height: 22px;
        padding: 6px 0!important;
        white-space: normal;
        font-size: 14px;
        color: #686868;
      }
    }
    .el-menu-item.is-active {
      color: #2CB7CA;
      background: #eaf8fa;
      padding-left: 0;
      border-radius: 4px;
    }
    .el-menu-item-group__title{
      padding: 0;
    }
    .el-submenu__icon-arrow{
      // display: none;
    }
    .router-name{
      padding-left: 36px;
      display: inline-block;
    }
  }
}
</style>