web/packages/components/Menu/index.vue

<template>
  <div class="aside-menu--group">
    <div class="aside-menu--abbr-group">
      <div class="aside-menu--first-group">
        <div
          class="aside-menu--first-item"
          :class="{
            'active': String(active.apex) === first._compute._key
          }"
          v-for="first in filterMenus"
          :key="first._compute._key"
          @click="onSelectApexMenu(first)"
        >
          <JyIcon :name="first.icon" classPrefix=""></JyIcon>
          <span>{{ first.label }}</span>
        </div>
      </div>
      <div class="aside-menu--toggle-group">
        <div
          class="aside-menu--toggle-item"
          :class="{
            active: item.key === type
          }"
          v-for="(item, i) in menuTypes"
          :key="i"
          @click="onSwitchMenuType(item)"
        >
          {{item.label}}
        </div>
      </div>
    </div>
    <div class="aside-menu--open-group"  v-show="filterSubMenus.length">
      <el-menu
        :default-openeds="defaultOpenSubMenus"
      >
        <el-submenu
          v-for="group in filterSubMenus"
          :key="group._compute._uniqueIndexes[1]"
          :index="group._compute._uniqueIndexes[0] + '-' + group._compute._uniqueIndexes[1]"
        >
          <template slot="title">
            <JyIcon :name="group.icon" classPrefix=""></JyIcon>
            <span class="group-title ellipsis">{{group.label}}</span>
          </template>
          <el-menu-item-group v-if="group.children">
            <template slot="title"></template>
            <el-menu-item
              v-for="menu in group.children"
              :class="{
                active: activeMenu._compute._key === menu._compute._key
              }"
              :key="menu._compute._key"
              :index="menu._compute._key"
              @click="onSelectSubMenu(menu)"
            >
              {{ menu.label }}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

export default {
  name: 'aside-menu',
  props: {
    beforeSelect: {
      type: Function,
      default: () => true
    }
  },
  computed: {
    ...mapState('work-bench/menu', [
      'type',
      'active'
    ]),
    ...mapGetters('work-bench/menu', [
      'filterMenus',
      'menuTypes',
      'filterSubMenus',
      'defaultOpenSubMenus',
      'activeMenu'
    ]),

  },
  created () {},
  methods: {
    ...mapMutations('work-bench/menu', [
      'setActiveOfType'
    ]),
    ...mapActions('work-bench/menu', [
      'setMenuType'
    ]),
    /**
     * 附属菜单选中事件回调
     * @param menu
     * @param sIndex - 附属菜单索引
     * @param gIndex - 分组索引
     */
    async onSelectSubMenu (menu) {
      const canNext = await this.beforeSelect(menu)
      if (!canNext) {
        return
      }
      if (!menu?._compute) {
        menu._compute = {
          _uniqueIndexes: [this.activeMenu._compute._uniqueIndexes[0], 0, 0]
        }
      }
      this.setActiveOfType({
        type: 'group',
        index: menu._compute._uniqueIndexes[1]
      })
      this.setActiveOfType({
        type: 'sub',
        index: menu._compute._uniqueIndexes[2]
      })
      this.openMenuLink()
    },
    /**
     * 顶级菜单选中事件回调
     * @param menu - 菜单
     * @param i - 索引
     */
    async onSelectApexMenu (menu) {
      const canNext = await this.beforeSelect(menu)
      if (!canNext) {
        return
      }
      // 记录当前一级菜单索引
      this.setActiveOfType({
        type: 'apex',
        index: menu._compute._uniqueIndexes[0]
      })
      // 判断是否需要打开二级菜单
      if (menu?.children?.length) {
        this.onSelectSubMenu(menu.children[0].children[0])
      } else {
        this.openMenuLink()
      }
    },
    /**
     * 切换 全部/可用 服务状态
     * @param item
     */
    onSwitchMenuType (item) {
      this.setMenuType(item)
    },
    /**
     * 打开菜单链接
     * @param menu
     */
    openMenuLink () {
      const menu = this.activeMenu
      this.$emit('open', menu)
    }
  }
}
</script>

<style scoped lang="scss">

$aside-menu--color: #ffffff;
$aside-menu--color-main: #2CB7CA;
$aside-menu--color-secondary: #25A3B5;
$aside-menu--color-gray: rgba(255,255,255,0.7000);
$aside-menu--color-black: #2C2E33;

$aside-menu--text-color: #1D1D1D;
$aside-menu--text-secondary-color: #686868;

$aside-menu--apex-width: 60px;
$aside-menu--apex-bg: $aside-menu--color-black;

.aside-menu--{
  &group {
    height: 100%;
    display: flex;
    flex-direction: row;
  }
  &abbr- {
    &group {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: $aside-menu--apex-width;
      padding: 8px 0;
      box-sizing: border-box;
      background: $aside-menu--apex-bg;
      font-size: 14px;
      font-weight: 400;
    }
    &item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
  &toggle- {
    &group {
      color: $aside-menu--color-gray;
      line-height: 16px;
      margin-bottom: 16px;
    }
    &item {
      padding: 8px 14px;
      text-align: center;
      cursor: pointer;
      &.active {
        color: $aside-menu--color-main;
      }
    }
  }
  &first- {
    &group {
      width: 100%;
      color: $aside-menu--color-gray;
      line-height: 22px;
      .iconfont {
        font-size: 18px;
      }
    }
    &item {
      min-height: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      &.active, &:hover {
        background: $aside-menu--color-secondary;
        color: $aside-menu--color;
      }
    }
  }
  &open- {
    &group {
      width: 152px;
      height: 100%;
      background-color: $aside-menu--color;
      .iconfont {
        font-size: 16px;
        margin-right: 8px;
        color: $aside-menu--text-color;
      }
      .group-title {
        display: inline-block;
        max-width: 6em;
      }
      ::v-deep {
        .el-menu {
          border: none;
          padding: 8px;
          box-sizing: border-box;
          background-color: inherit;
          &.el-menu--inline {
            padding: unset;
          }
        }
        .el-submenu__title {
          height: auto;
          font-size: 14px;
          font-weight: 400;
          color: $aside-menu--text-color;
          line-height: 22px;
          margin-top: 4px;
          padding: 8px;
          padding-left: 8px !important;
        }
        .el-menu-item {
          min-width: unset;
          height: auto;
          font-size: 12px;
          font-weight: 400;
          color: $aside-menu--text-secondary-color;
          line-height: 18px;
          padding: 8px;
          padding-left: 32px !important;
          white-space: normal;
          transition: unset;
          &.active,
          &:hover {
            color: $aside-menu--color-main;
          }
        }
        .el-submenu__title:focus,
        .el-menu-item:focus {
          background-color: inherit;
        }

        .el-submenu__title:hover,
        .el-submenu__title.active,
        .el-menu-item.active,
        .el-menu-item:hover {
          background: #EAF8FA;
          border-radius: 4px;
        }
        .el-submenu__title .el-submenu__icon-arrow {
          margin-top: -8px;
          right: 8px;
          font-family: "iconfont" !important;
          font-size: 16px;
          color: #8F9399;
          &::before {
            content: "\e656";
          }
        }
        .el-menu-item-group__title {
          display: none;
        }
      }
    }
  }
}
</style>