123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- <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>
|