123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223 |
- 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) })
- }
- })
|