import { Component , OnInit , ElementRef , Output , EventEmitter } from '@angular/core' ; import { Router , ActivatedRoute , NavigationEnd } from '@angular/router' ; import { Title } from '@angular/platform-browser' ; import { filter , map , mergeMap , take } from 'rxjs/operators' ; import { fromEvent } from 'rxjs' ; import { PlatformCoreService } from 'src/app/services/platform/platform-core.service' ; import { AppReuseStrategy } from 'src/app/services/core/app-reuse-strategy' ; @ Component ( { selector : 'app-reuse-tab' , templateUrl : './reuse-tab.component.html' , styleUrls : [ './reuse-tab.component.less' ] } ) export class ReuseTabComponent { /**
     * 当前选中的tab
     */ currentIndex = - 1 ; /**
     * 当前鼠标经过的tab
     */ currentOverIndex = - 1 ; /**
     * tab实际容器宽度
     */ tabRealWidth : any ; /**
     * 侧边栏宽度
     */ sidebarWidth : 256 ; /**
     * tab改变时发送回值给外部使用
     */ @ Output ( ) changeTabSize : EventEmitter < number > = new EventEmitter ( ) ; /**
     * 所有缓存的tabItem
     */ tabItemList : Array < { title : string ; module : string ; power : string ; isSelect : boolean ; } > = [ ] ; /**
     * 显示tabItem
     */ tabItemShowList : Array < { title : string ; module : string ; power : string ; isSelect : boolean ; } > = [ ] ; /**
     * 折叠菜单
     */ tabItemCollapsedList : Array < { title : string ; module : string ; power : string ; isSelect : boolean ; } > = [ ] ; /**
     * 是否显示折叠
     */ isCollapsedTab : boolean ; constructor ( private hst , private platformCoreService , private router , private activatedRoute , private titleService ) { const firstUrl = this . platformCoreService . getDesktop ( ) ; this . tabItemList . push ( firstUrl ) ; this . router . events . pipe ( filter ( event => event instanceof NavigationEnd ) ) . pipe ( map ( ( ) => this . activatedRoute ) ) . pipe ( map ( ( route ) => { while ( route . firstChild ) { route = route . firstChild ; } return route ; } ) ) . pipe ( filter ( route => route . outlet === 'primary' ) ) . pipe ( mergeMap ( route => route . data ) ) . subscribe ( routeData => { const url = this . router . url ; this . titleService . setTitle ( routeData . title ) ; const exitMenu = this . tabItemList . find ( p => p . module === url ) ; if ( ! exitMenu ) { this . tabItemList . push ( { title : routeData . title , module : url , power : '' , isSelect : true } ) ; this . tabResize ( this . sidebarWidth ) ; } this . tabItemList . forEach ( p => p . isSelect = p . module === url ) ; this . currentIndex = this . tabItemList . findIndex ( p => p . module === url ) ; } ) ; } closeTab ( module , isSelect , event ) { event . preventDefault ( ) ; const index = this . tabItemList . findIndex ( p => p . module === module ) ; if ( this . tabItemList . length === 1 ) { return ; } delete AppReuseStrategy . deleteRouteSnapshot [ module ] ; if ( ! isSelect ) { return ; } let menu = this . tabItemList [ index + 1 ] ; if ( ! menu ) { menu = this . tabItemList [ index - 1 ] ; } this . tabItemList . forEach ( p => p . isSelect = p . module === menu . module ) ; this . tabItemList = this . tabItemList . filter ( p => p . module !== module ) ; this . router . navigate ( [ '/' + menu . module ] ) ; this . tabResize ( this . sidebarWidth ) ; } param sw tabResize ( sw ? ) { const winWidth = document . body . offsetWidth ; this . sidebarWidth = sw !== undefined ? sw : 256 ; const sidebarCollapsedWidth = 68 ; const headerWidth = 270 ; const menuDrapDownWidth = 38 ; const tabItemWidth = 96 ; const tabMaxWidth = winWidth - this . sidebarWidth - sidebarCollapsedWidth - headerWidth - 2 ; this . tabRealWidth = tabMaxWidth - menuDrapDownWidth ; this . changeTabSize . emit ( tabMaxWidth ) ; const tabMaxNum = Math . floor ( this . tabRealWidth / tabItemWidth ) ; let tabNum = this . tabItemList . length > tabMaxNum ? tabMaxNum : this . tabItemList . length ; if ( tabNum < 0 ) { tabNum = 0 ; } this . tabItemShowList = this . tabItemList . slice ( 0 , tabNum ) ; this . tabItemCollapsedList = this . tabItemList . slice ( tabNum ) ; if ( this . tabItemList . length > tabNum ) { this . isCollapsedTab = true ; } else { this . isCollapsedTab = false ; } } tabItemShowSelect ( ev , index ) { this . currentIndex = index ; const menu = this . tabItemShowList [ this . currentIndex ] ; this . router . navigate ( [ menu . module ] ) ; } tabItemCollapsedSelect ( ev , index ) { this . currentIndex = index ; const menu = this . tabItemCollapsedList [ this . currentIndex ] ; this . router . navigate ( [ menu . module ] ) ; } /**
     * 显示关闭
     */ showClose ( tabItem , i ) { if ( i === 0 && tabItem === '__tabItemShow' ) { return ; } this . currentOverIndex = i ; document . getElementById ( tabItem + i ) . style . display = 'inline-block' ; } /**
     * 隐藏关闭
     */ hideClose ( tabItem , i ) { this . currentOverIndex = i ; document . getElementById ( tabItem + i ) . style . display = 'none' ; } }