<template> <el-breadcrumb class="app-breadcrumb" :separator="separator"> <transition-group name="breadcrumb"> <template v-if="Object.is(this.navModel,'route')"> <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.id"> <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> </template> <template v-if="!Object.is(this.navModel,'route')"> <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path"> <span v-if="index === breadcrumbs.length-1" class="no-redirect" >{{ $t(item.meta.caption)}}</span> <a v-else @click.prevent="handleLink(item)" >{{ $t(item.meta.caption) }}</a> </el-breadcrumb-item> </template> </transition-group> </el-breadcrumb> </template> <script lang="ts"> import { Component, Vue, Watch, Prop } from 'vue-property-decorator' import { RouteRecord, Route } from 'vue-router' import { Environment } from "@/environments/environment"; import { appConfig } from '@/config/appConfig'; import NavDataService from '@/service/app/navdata-service'; import {Subscription } from 'rxjs'; @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(); /** * 默认视图标识 * * @memberof Breadcrumb */ @Prop() public indexViewTag!: string; /** * 导航模式 * * @memberof Breadcrumb */ @Prop({default:'tab'}) public navModel?:string; /** * 监听路由 * * @memberof Breadcrumb */ @Watch('$route') private onRouteChange(route: Route) { this.getBreadcrumb() } /** * 导航服务事件 * * @public * @type {(Subscription | undefined)} * @memberof Dev */ public serviceStateEvent: Subscription | undefined; /** * vue 生命周期 * * @memberof Breadcrumb */ created() { this.getBreadcrumb(); if(Object.is(this.navModel,"route")){ this.serviceStateEvent = this.navDataService.serviceState.subscribe(({ action,name, data }:{ action:string,name:any,data:any }) => { if (Object.is(action, 'datarefresh')) { this.getBreadcrumb(); } }); } } /** * 获取面包屑数据 * * @memberof Breadcrumb */ private getBreadcrumb() { if(Object.is(this.navModel,"route")){ this.breadcrumbs = this.navDataService.getNavData(); this.$forceUpdate(); }else{ this.breadcrumbs = this.$route.matched.filter((item) => { return item.meta && item.meta.caption }) } } /** * 获取面包屑指定元素前一条数据 * * @memberof Breadcrumb */ private getPreNavData(item:any){ let preNavData:any = this.navDataService.getPreNavDataById(item.id); return preNavData.data; } /** * 判断是否为当前选中项 * * @memberof Breadcrumb */ private isCurSelected(item:any,singleItem:any){ return item.srfkey === singleItem.srfkey; } /** * 面包屑点击行为 * * @memberof Breadcrumb */ private handleLink(item: any) { if(Object.is(this.navModel,"route")){ // 首页 if(Object.is(item.id,this.indexViewTag)){ this.$router.push((window.sessionStorage.getItem(Environment.AppName))as string); }else{ // 非首页 this.$router.push(item.path).catch(err => { console.warn(err); }); } this.navDataService.removeNavData(item.id); }else{ if(item && item.meta && item.meta.viewType && Object.is(item.meta.viewType,"APPINDEX")){ let path: string | null = window.sessionStorage.getItem(Environment.AppName); if (path) { this.$store.commit("removeAllPage"); this.$router.push({ path: path }); } else { this.$router.push("/"); } }else{ this.$router.push(item).catch(err => { console.warn(err); }); } } } /** * 切换导航行为 * * @memberof Breadcrumb */ private selectNavData($event:any,item:any){ let preNavData:any = this.getPreNavData(item); let curSrfkey:any = $event; this.navDataService.serviceState.next({action:'viewrefresh',name:item.id, data:curSrfkey}); } /** * 组件销毁 * * @memberof Breadcrumb */ public destroyed() { if (this.serviceStateEvent) { this.serviceStateEvent.unsubscribe(); } } /** * 是否显示下拉列表 * * @memberof Breadcrumb */ public isShowSelected(item:any){ return item.isselected && !this.$util.isEmpty(item.srfkey); } } </script> <style lang='less'> @import "./app-breadcrumb.less"; </style>