cip-components/main/cip-main-breadcrumb/index.vue

<template>
  <div class="cip-main-breadcrumb">
    <BackButton @click="lBack" class="cip-main-breadcrumb__back" v-if="lCanBack"/>
    <el-breadcrumb  v-if="routeMatched.length>0">
      <template v-for="(item,index) in routeMatched" :key="item.name">
        <!--      :to="item.router" @click.prevent="runRouter(item)"-->
        <el-breadcrumb-item >
          <template v-if="item.router && index!==routeMatched.length-1">
            <span class="cip-main-breadcrumb--link" @click.prevent="runRouter(item)">{{getRouteName(item)}}</span>
          </template>
          <template v-else>
            {{getRouteName(item)}}
          </template>
        </el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>
<script>
import { computed, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
import { depthFirstSearchTree, getUsingConfig, isNotEmpty } from '@cip/utils/util'
import { getMenuTitle, isHideInMenu } from '../helper'
import BackButton from '../../page-layout/widgets/back-button'
export default {
  props: {
    navMenu: Array,
    menuNameMap: Map,
    canBack: { type: Boolean, default: undefined },
    back: Function
  },
  components: {
    ElBreadcrumb, ElBreadcrumbItem, BackButton
  },
  setup (props, { emit }) {
    const cipMenu = inject('cip-menu', {})
    const _navMenu = computed(() => {
      return getUsingConfig(props.navMenu, cipMenu.navMenu)
    })
    const _menuNameMap = computed(() => {
      return getUsingConfig(props.menuNameMap, cipMenu.menuNameMap)
    })
    const route = useRoute()
    const router = useRouter()
    const routeMatched = computed(() => {
      const loop = _navMenu.value?.length ?? 0
      for (let i = 0; i < loop; i++) {
        const result = depthFirstSearchTree(_navMenu.value[i], route.name, 'name')
        if (result) {
          return result
        }
      }
      return []
    })
    const getRouteName = (item) => {
      return _menuNameMap.value.get(item.name) ? getMenuTitle(item) + '-' + _menuNameMap.value.get(item.name) : getMenuTitle(item)
    }

    const lCanBack = computed(() => {
      if (isNotEmpty(props.canBack)) return props.canBack
      if (routeMatched.value) {
        const lastRoute = routeMatched.value[routeMatched.value.length - 1]
        return isHideInMenu(lastRoute) // hideRoute 需要back
      } else {
        return false
      }
    })
    const runRouter = (item) => {
      if (item.router) {
        if (typeof item.router === 'function') {
          item.router(router, route)
        } else {
          router.replace(item.router === true ? { name: item.name } : item.router)
        }
      }
    }
    const lBack = () => {
      if (props.back) {
        props.back()
      } else {
        for (let i = 0; i < routeMatched.value.length; i++) {
          const route = routeMatched.value[routeMatched.value.length - 1 - i]
          if (!isHideInMenu(route)) {
            if (route.router) {
              runRouter(route)
            } else {
              router.replace(route)
            }
            return // 不继续执行
          }
        }
        // 没有找到true就go(-1)
        router.back()
      }
      // 直接在此处处理
    }
    return { routeMatched, runRouter, getRouteName, lCanBack, lBack }
  }
}
</script>
<style lang="less">
.cip-main-breadcrumb{
  display: flex;
  align-items: center;
  padding:4px 20px;
  &__back{
    margin-right: 8px;
  }
  &--link{
    cursor: pointer;
    color: #303133;
    font-weight: bold;
    &:hover{
      color: @primary;
    }
  }
}
</style>