<template> <el-breadcrumb class="app-breadcrumb" :separator="separator"> <transition-group name="breadcrumb"> <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.tag"> <span v-if="index === breadcrumbs.length - 1" class="no-redirect" >{{ item.title }} <span v-if="isShowSelected(item)"> <dropdown trigger="click" @on-click="selectNavData($event, item)"> <span class="app-breadcrumb-selected"> <i class="el-icon-caret-bottom"></i> </span> <dropdown-menu slot="list"> <dropdown-item v-for="dataitem in getPreNavData(item)" :name="dataitem.srfkey" :key="dataitem.srfkey" > <span :class="{ curselected: isCurSelected(item, dataitem) }">{{ dataitem.srfmajortext }}</span> </dropdown-item> </dropdown-menu> </dropdown> </span> </span> <a v-else @click.prevent="handleLink(item)">{{ item.title }}</a> </el-breadcrumb-item> </transition-group> </el-breadcrumb> </template> <script lang="ts"> import { Component, Vue, Watch, Prop } from 'vue-property-decorator'; import { Subscription } from 'rxjs'; import { LogUtil } from 'ibiz-core'; import { NavDataService } from 'ibiz-vue'; import { appConfig } from '@/config/appConfig'; import { Environment } from '@/environments/environment'; @Component({}) export default class Breadcrumb extends Vue { /** * 面包屑列表 * * @memberof Breadcrumb */ private breadcrumbs: Array<any> = []; /** * 面包屑分隔符 * * @memberof Breadcrumb */ private separator: string = appConfig.breadcrumbSeparator; /** * 导航服务 * * @memberof Breadcrumb */ private navDataService = NavDataService.getInstance(this.$store); /** * 首页tag * * @memberof Breadcrumb */ @Prop() public indexViewTag?: string; /** * 监听路由 * * @memberof Breadcrumb */ @Watch('navDataService.navDataStack') private onNavDataStackChange(data: any) { this.getBreadcrumb(); } /** * 导航服务事件 * * @public * @type {(Subscription | undefined)} * @memberof Dev */ public serviceStateEvent: Subscription | undefined; /** * vue 生命周期 * * @memberof Breadcrumb */ created() { this.getBreadcrumb(); } /** * 获取面包屑数据 * * @memberof Breadcrumb */ private getBreadcrumb() { const navData: Array<any> = this.navDataService.getNavData(); if (navData && navData.length > 0) { this.breadcrumbs = navData.filter((item: any) => { return item.viewmode; }); } else { this.breadcrumbs = []; } this.$forceUpdate(); } /** * 获取面包屑指定元素前一条数据 * * @memberof Breadcrumb */ private getPreNavData(item: any) { let preNavData: any = this.navDataService.getPreNavData(item.tag); return preNavData?.data; } /** * 判断是否为当前选中项 * * @memberof Breadcrumb */ private isCurSelected(item: any, singleItem: any) { return item.key === singleItem.srfkey; } /** * 面包屑点击行为 * * @memberof Breadcrumb */ private handleLink(item: any) { if (item && Object.is(item.tag, this.indexViewTag)) { this.$router.push(window.sessionStorage.getItem(Environment.AppName) as string).catch(err => { LogUtil.warn(err); }); this.navDataService.removeNavDataFrist(); } else { this.$router.push(item.path).catch(err => { LogUtil.warn(err); }); this.navDataService.skipNavData(item.tag); } } /** * 切换导航行为 * * @memberof Breadcrumb */ private selectNavData($event: any, item: any) { this.navDataService.serviceState.next({ action: 'viewrefresh', name: item.tag, data: $event }); this.$forceUpdate(); } /** * 是否显示下拉列表 * * @memberof Breadcrumb */ public isShowSelected(item: any) { if (!item || !item.tag) { return false; } const preElementData: any = this.getPreNavData(item); return preElementData && Array.isArray(preElementData) ? true : false; } /** * 组件销毁 * * @memberof Breadcrumb */ public destroyed() { if (this.serviceStateEvent) { this.serviceStateEvent.unsubscribe(); } } } </script> <style lang='less'> @import './app-breadcrumb.less'; </style>