web/packages/work-bench-frame/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, index) in filterMenus"
          :key="first._compute._key"
          @click="onSelectApexMenu(first)"
          @mouseenter="onMouseEnterMenu(first, index)"
          @mouseleave="onMouseLeaveMenu($event, first)"
        >
          <JyIcon :name="first.icon" classPrefix=""></JyIcon>
          <span v-html="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)"
          v-html="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 newFilterSubMenus"
          :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" v-html="group.label"></span>
          </template>
          <el-menu-item-group v-if="group.child">
            <template slot="title"></template>
            <el-menu-item
              v-for="menu in group.child"
              :class="{
                active: activeMenu._compute._key === menu._compute._key
              }"
              :key="menu._compute._key"
              :index="menu._compute._key"
              @click="onSelectSubMenu(menu)"
            >
              <span v-html="menu.label"></span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
    <div class="aside-menu--open-group aside-menu--float-group" v-show="showFloatMenus" @mouseleave="showFloatMenus = false">
      <el-menu :default-openeds="openedSubMenu">
        <el-submenu
          v-for="group in floatMenusList"
          :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" v-html="group.label"></span>
          </template>
          <el-menu-item-group v-if="group.child">
            <template slot="title"></template>
            <el-menu-item
              v-for="menu in group.child"
              :class="{
                active: activeMenu._compute._key === menu._compute._key
              }"
              :key="menu._compute._key"
              :index="menu._compute._key"
              @click="onSelectSubMenu(menu)"
            >
              <span v-html="menu.label"></span>
            </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'
    ]),
    // 过滤三级分类为空的二级分类
    newFilterSubMenus () {
      return this.filterSubMenus.filter(v => v.child && v.child.length > 0)
    }
  },
  data () {
    return {
      showFloatMenus: false,
      floatMenusList: [],
      openedSubMenu: [] // 鼠标悬浮默认打开的子菜单索引（index）列表
    }
  },
  methods: {
    ...mapMutations('work-bench/menu', [
      'setActiveOfType'
    ]),
    ...mapActions('work-bench/menu', [
      'setMenuType'
    ]),
    checkSkipSetActive ({ appType = '', openType = '' }) {
      return appType === 'outer' || openType === '_blank'
    },
    /**
     * 附属菜单选中事件回调
     * @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]
        }
      }
      const skipSetActive = this.checkSkipSetActive(menu)
      if (skipSetActive) {
        this.openMenuLink(menu)
      } else {
        this.setActiveOfType({
          type: 'apex',
          index: menu._compute._uniqueIndexes[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
      }
      const skipSetActive = this.checkSkipSetActive(menu)
      if (!skipSetActive) {
        // 记录当前一级菜单索引
        this.setActiveOfType({
          type: 'apex',
          index: menu._compute._uniqueIndexes[0]
        })
      }
      // 判断是否需要打开二级菜单
      if (menu?.child?.length) {
        this.onSelectSubMenu(menu.child[0].child[0])
      } else {
        this.openMenuLink(menu)
      }
      this.showFloatMenus = false
    },
    /**
     * 切换 全部/可用 服务状态
     * @param item
     */
    onSwitchMenuType (item) {
      this.$BRACE.$emit({
        fKey: 'setMenuType',
        spareFn: (item, next) => next(item)
      }, item, this.setMenuType.bind(this))
    },
    /**
     * 打开菜单链接
     * @param menu
     */
    openMenuLink (menu) {
      this.$emit('open', menu || this.activeMenu)
    },
    onMouseEnterMenu (menu, index) {
      const noChild = !menu.child || (menu.child && menu.child.length === 0)
      const isActive = index === this.active?.apex
      if (noChild || isActive) return this.showFloatMenus = false
      this.floatMenusList = menu.child.filter(v => v.child.length > 0)
      const arr = []
      menu.child.forEach(v => {
        arr.push(v._compute._key)
      })
      this.openedSubMenu = arr
      this.showFloatMenus = true
    },
    onMouseLeaveMenu (e, menu) {
      const className = e.relatedTarget?.className
      if (className && (className === 'el-menu' || className.indexOf('aside-menu--') > -1)) return
      this.showFloatMenus = false
      this.floatMenusList = []
    }
  }
}
</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;
      overflow-y: scroll;

      .iconfont {
        font-size: 16px;
        margin-right: 8px;
        color: $aside-menu--text-color;
      }

      .group-title {
        display: inline-block;
        max-width: 5em;
      }

      ::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;
        }
      }
    }
  }

  &float-{
    &group{
      position: fixed;
      width: 152px;
      height: calc(100vh - 64px);
      left: 60px;
      top: 64px;
      background: #fff;
      overflow-y: scroll;
      z-index: 10;
      box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.08);
    }
  }
}
</style>