cip-components/main/cip-main-nav/index.js

import { defineComponent, h, ref, watch, computed } from 'vue'
import { ElMenu, ElSubmenu, ElMenuItem, ElTag } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { isArray, isEmpty, isInputEmpty } from '@cip/utils/util'
import { getMenuTitle, isHideInMenu, matchMenuByRouteName } from '../helper'
import './index.less'
import CipMainIcon from '../cip-main-icon'
export default defineComponent({
  name: 'CipMainNav',
  props: {
    navMenu: Array, // 菜单项
    mode: String, // 菜单模式 horizontal-水平(此模式下 isCollapse无效) vertical-垂直
    isCollapse: Boolean, // 是否收缩
    privileges: Array, // 权限
    topMenuOnly: Boolean, // 是否子渲染一级菜单
    badgeMap: Object
  },
  emits: ['update:activeMenu', 'triggerGetBadge'],
  setup (props, { emit }) {
    const router = useRouter()
    const route = useRoute()
    const getDeepChildren = (children) => {
      return children.map(child => {
        if (child.children && child.children.length > 0) {
          return getDeepChildren(child.children).concat(child.name)
        } else {
          return child.name
        }
      }).flat(Infinity).filter(v => v !== undefined)
    }
    // 分析顶层菜单和 子菜单的关系
    const analysisRelationship = computed(() => {
      if (props.topMenuOnly === true) {
        return props.navMenu.reduce((acc, b) => {
          if (b.children) {
            acc[b.name] = getDeepChildren(b.children)
          }
          return acc
        }, {})
      } else {
        // 非topMenuOnly不进行分析
        return {}
      }
    })
    // 判断权限
    const hasPrivilege = (item) => {
      const code = item.code || item.meta?.code
      if (isInputEmpty(code)) return true // 没有code即表示此不需要权限
      if (isArray(code)) {
        // code为数组的情况
        if (code.length === 0) return true // 空数组代表不需要权限
        return code.some(v => {
          if (isInputEmpty(v)) return true // 没有code即表示此不需要权限
          return props.privileges?.includes(v)
        })
      } else {
        return props.privileges?.includes(code)
      }
    }
    // 判断是否有可展示子菜单
    const checkChildren = (children) => {
      if (isEmpty(children)) return false
      // 非隐藏菜单及非无权限菜单
      const showChildren = children?.filter(child =>
        !isHideInMenu(child) &&
        hasPrivilege(child)
      )
      return showChildren?.length > 0
    }
    // 处理起始字符串为_cache的父路由
    const checkCacheRoute = (route) => {
      if (/^_cache/.test(route.name)) {
        return route.children
      } else {
        return route
      }
    }
    // 渲染菜单货子菜单的内容[注: 内容包含子菜单和菜单项]
    const renderMenu = (menuContentList) => {
      return menuContentList.map(item => {
        const route = checkCacheRoute(item)
        // 如果是数组则调用自身
        if (isArray(route)) {
          return renderMenu(route)
        }
        // 对子模块进行过滤
        if (checkChildren(route.children)) {
          return renderSubmenu(route)
        } else {
          return renderMenuItem(route) // 渲染为 menu-item
        }
      })
    }
    // 根据子菜单项计算子菜单的badge
    const computedSubBadge = (childNodeList) => {
      let count = 0
      childNodeList.forEach(childNode => {
        const badge = childNode?.props?.badge
        if (typeof badge === 'number') {
          count += badge
        }
      })
      if (count > 0) return count
      return undefined
    }
    // 渲染子菜单[注: 如果没有可渲染的菜单项, 将会本身渲染为菜单项]
    const renderSubmenu = (submenu) => {
      if (isHideInMenu(submenu) || !hasPrivilege(submenu)) return null
      const children = renderMenu(submenu.children) // 渲染为节点
      const filterEmptyChildren = children.filter(child => !isEmpty(child))
      if (filterEmptyChildren.length > 0) {
        // 子菜单存在需要显示的菜单进行此渲染
        submenu._hasChildren = true
        let subBadge
        if (!submenu.hideBadge) {
          subBadge = !isEmpty(submenu.badge) ? submenu.badge : computedSubBadge(children)
        }
        if (props.topMenuOnly !== true) {
          return h(ElSubmenu, { popperClass: 'cip-menu-popper', key: submenu.name, index: submenu.name, badge: subBadge }, {
            title: () => [renderMenuIcon(submenu), renderMenuItemTitle(submenu), renderMenuBadge(subBadge)],
            default: () => children
          })
        } else {
          // 存在子路由
          const redirectName = filterEmptyChildren[0].props.index
          const redirectRoute = filterEmptyChildren[0].props.route
          const { children, ...item } = submenu
          return renderMenuItem({ ...item, name: redirectName, route: redirectRoute, originName: item.name })
        }
      } else {
        // 其他情况页渲染为item
        return renderMenuItem(submenu)
      }
    }
    // 渲染菜单内容的icon[注: 包含子菜单及菜单项]
    const renderMenuIcon = (menuContent = {}) => {
      const iconName = menuContent.meta?.icon || menuContent.icon
      return <CipMainIcon name={iconName}/>
      // const iconName = menuContent?.meta?.icon || menuContent?.icon
      // if (iconName) {
      //   if (iconName.indexOf('_') === 0) {
      //     const name = iconName.substr(1)
      //     return <CipSvgIcon name={name}/>
      //   } else {
      //     return h('i', { class: iconName })
      //   }
      // } else {
      //   return undefined
      // }
    }
    const renderMenuBadge = (badge) => {
      if (badge) {
        return <ElTag size={'mini'} effect={'dark'} type={'danger'} class={'cip-menu__badge'}>{badge}</ElTag>
      } else {
        return undefined
      }
    }
    const renderMenuItemTitle = (menuContent) => {
      return <span class={'cip-menu__title'}>{getMenuTitle(menuContent)}</span>
    }
    const getCurrentBadge = (item) => {
      if (props.topMenuOnly && analysisRelationship.value[item.originName]) {
        return analysisRelationship.value[item.originName].reduce((acc, childName) => {
          if (props.badgeMap[childName]) {
            acc += props.badgeMap[childName]
          }
          return acc
        }, 0)
      } else {
        return props.badgeMap[item.name] ?? item.badge
      }
    }
    // 渲染菜单项 [注：隐藏的、没有权限的、以_开头但是不是只渲染一层菜单的模式下的菜单项将不渲染]
    const renderMenuItem = (item) => {
      // 过滤隐藏及权限的菜单
      if (isHideInMenu(item) || !hasPrivilege(item)) return null
      // 过滤name以_开通的菜单
      if (item.name.indexOf('_') === 0 && props.topMenuOnly !== true) return null
      // 获取badge

      const badge = getCurrentBadge(item) // props.badgeMap[item.name] ?? item.badge
      emit('triggerGetBadge', item.name) // 通知触发
      return h(ElMenuItem, { key: item.name, index: item.name, route: item.route, badge }, {
        default: () => renderMenuIcon(item),
        title: () => [renderMenuItemTitle(item), renderMenuBadge(badge)]
      })
    }

    // 当前激活菜单项名称
    const currentActiveName = ref()
    watch([() => route.name, () => props.navMenu], () => {
      if (currentActiveName.value !== route.name) {
        currentActiveName.value = route.name
      }
      if (props.topMenuOnly === true) {
        // 此处的menu需要很完善才能正常使用(需要包含详情页等非展示视图的菜单信息)
        // 未进行未匹配处理[注：仅在激活的路由不再navMenu中才会导致未找到]
        const menuMatched = matchMenuByRouteName(props.navMenu, route.name)
        if (menuMatched) {
          const activeMenu = props.navMenu.find(menu => menu.name === menuMatched[0].name)
          emit('update:activeMenu', activeMenu)
        } else {
          emit('update:activeMenu', undefined)
        }
      }
    }, { immediate: true })
    return () => h(ElMenu, {
      class: ['cip-main-nav'],
      defaultActive: currentActiveName.value,
      uniqueOpened: true,
      collapse: props.isCollapse,
      mode: props.mode,
      onSelect: (index, indexPath, item) => {
        const { route } = item
        if (route) {
          router.push(route)
        } else {
          router.push({ name: index })
        }
      }
    }, { default: () => renderMenu(props.navMenu) })
  }
})