marking-cet-web/src/layout/main/MenuItem.vue

<template>
  <el-menu-item
    v-if="!hasChildren"
    :index="menuInfo.index"
    popper-class="main-layout-submenu-popper"
    class="main-layout-sub-menu"
    :class="{ 'is-collapse': mainLayoutStore.collapse, 'active-index': currentIndex === menuInfo.index }"
    @click="$emit('handle')"
  >
    <component
      :is="menuInfo.path ? 'router-link' : 'div'"
      v-if="mainLayoutStore.collapse"
      :to="menuInfo.path"
      class="flex items-center collapse-icon"
    >
      <svg-icon v-if="menuInfo.icon" :name="menuInfo.icon" />
    </component>

    <template #title>
      <div
        v-if="!mainLayoutStore.collapse"
        class="flex items-center flex-1 menu-padding-left main-layout-sub-menu-title"
      >
        <component
          :is="menuInfo.path ? 'router-link' : 'div'"
          :to="menuInfo.path"
          class="flex items-center flex-1 menu-item"
        >
          <span class="icon">
            <svg-icon v-if="menuInfo.icon" :name="menuInfo.icon" />
          </span>
          <span class="menu-label">{{ menuInfo.label }}</span>
        </component>
      </div>
      <div v-else>{{ menuInfo.label }}</div>
    </template>

    <!-- <div class="flex items-center flex-1 menu-padding-left main-layout-sub-menu-title">
      <component
        :is="menuInfo.path ? 'router-link' : 'div'"
        :to="menuInfo.path"
        class="flex items-center flex-1 menu-item"
      >
        <span class="icon">
          <svg-icon v-if="menuInfo.icon" :name="menuInfo.icon" />
        </span>
        <span v-if="!mainLayoutStore.collapse" class="menu-label">{{ menuInfo.label }}</span>
      </component>
    </div> -->
  </el-menu-item>
  <el-sub-menu
    v-else
    :index="menuInfo.index"
    popper-class="main-layout-submenu-popper"
    class="main-layout-sub-menu"
    :class="{ 'is-collapse': mainLayoutStore.collapse, 'active-index': checkActive() }"
  >
    <template #title>
      <div
        class="flex items-center flex-1 main-layout-sub-menu-title"
        :class="{ 'menu-padding-left': hasChildren }"
        @click="mClick(menuInfo)"
      >
        <component
          :is="menuInfo.path ? 'router-link' : 'div'"
          :to="menuInfo.path"
          class="flex items-center flex-1 menu-item"
        >
          <span class="icon"><svg-icon v-if="menuInfo.icon" :name="menuInfo.icon" /></span>
          <span v-if="!mainLayoutStore.collapse" class="menu-label">{{ menuInfo.label }}</span>
        </component>
      </div>
    </template>
    <template v-for="child in menuInfo.children" :key="child.key">
      <el-menu-item
        v-if="!child.children?.length"
        :index="child.index"
        class="main-layout-menu-item"
        :class="{ 'active-index': currentIndex === child.index }"
      >
        <component :is="child.path ? 'router-link' : 'div'" :to="child.path" class="flex items-center flex-1 menu-item">
          <span class="menu-label">{{ child.label }}</span>
        </component>
      </el-menu-item>
      <main-layout-menu-item v-else :menu="child"></main-layout-menu-item>
    </template>
  </el-sub-menu>
</template>

<script setup lang="ts" name="MainLayoutMenuItem">
import SvgIcon from '@/components/common/SvgIcon.vue'
import useMainLayoutStore from '@/store/layout'
import { computed } from 'vue'
import { ElSubMenu, ElMenuItem } from 'element-plus'
const mainLayoutStore = useMainLayoutStore()
const props = defineProps<{
  currentIndex?: string
  menu: ExtractArrayValue<typeof mainLayoutStore.menuList>
}>()
const mClick = (info: any) => {
  if (
    info.label === '评阅试卷' &&
    info.path === '/marking' &&
    !info.children.find((item: any) => item.path === '/marking/training-record')
  ) {
    mainLayoutStore.getRenderMenuList()
  }
}
const menuInfo = computed(() => {
  // console.log('menuInfo:', { ...props.menu, children: props.menu.children || [] })
  return { ...props.menu, children: props.menu.children || [] }
})

const hasChildren = computed(() => !!menuInfo.value.children.length)
const checkActive = () => {
  if (props.currentIndex?.startsWith('marking_standard') && props.menu.index === 'marking') {
    return false
  }
  return props.currentIndex?.startsWith(props.menu.index)
}
</script>

<style scoped lang="scss">
.main-layout-sub-menu,
.main-layout-submenu-popper {
  ::v-deep(.el-sub-menu__icon-arrow) {
    display: none;
  }
  ::v-deep(.el-sub-menu__title) {
    margin-bottom: $SmallGapSpace;
    .router-link-active.router-link-exact-active {
      background: $color--primary;
    }
  }
  &.is-collapse {
    ::v-deep(.el-sub-menu__title) {
      .router-link-active.router-link-exact-active {
        background: transparent;
      }
    }
    .menu-item {
      padding-left: 0;
    }
  }
  &.main-layout-sub-menu {
    margin-bottom: $ExtraSmallGapSpace;
  }
  .menu-padding-left {
    padding-left: $ExtraBaseGapSpace;
  }
  .main-layout-sub-menu-title {
    // color: $LayoutLeftSubMenuColor;
    // color: #fff;
    color: #666;
    .menu-label {
      margin-left: $ExtraSmallGapSpace;
    }
    * {
      vertical-align: middle;
    }
  }
  .main-layout-menu-item {
    color: $LayoutLeftMenuItemColor;
    margin-bottom: $ExtraMiniGapSpace;
    &:hover {
      color: $LayoutLeftMenuItemHoverColor;
    }
    &.active-index {
      color: $LayoutLeftMenuItemActiveColor;
    }
  }

  .menu-item {
    color: inherit;
    padding-left: 10px;
    border-radius: $LayoutLeftMenuRadius;
  }

  &.is-collapse {
    > .main-layout-sub-menu-title,
    > .el-sub-menu__title > .main-layout-sub-menu-title {
      padding: 0;
      text-align: center;
    }
  }
  .collapse-icon {
    // color: #fff;
    color: #666;
    &.router-link-active {
      color: $color--primary;
    }
  }
  &.active-index {
    .collapse-icon {
      // color: $color--primary;
    }
    > .main-layout-sub-menu-title,
    > .el-sub-menu__title > .main-layout-sub-menu-title {
      color: $color--primary;
    }
  }

  &:not(.is-collapse) {
    // &.is-opened,
    &.active-index {
      > .main-layout-sub-menu-title,
      > .el-sub-menu__title > .main-layout-sub-menu-title {
        // background: $color--primary;
        border-radius: $LayoutLeftMenuRadius;
        color: $color--white;
      }
    }
  }
}
</style>