app-breadcrumb.vue 5.7 KB
Newer Older
1
<template>
2
    <el-breadcrumb class="app-breadcrumb"  :separator="separator">
3
    <transition-group name="breadcrumb">
4 5 6
      <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 }}
7
             <span v-if="isShowSelected(item)">
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
              <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>
29 30 31 32 33
    </transition-group>
  </el-breadcrumb>
</template>

<script lang="ts">
34
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
35
import { RouteRecord, Route } from 'vue-router'
36
import { Environment } from "@/environments/environment";
37
import { appConfig } from '@/config/appConfig';
38 39
import NavDataService from '@/service/app/navdata-service';
import {Subscription } from 'rxjs';
40 41 42

@Component({
})
43
export default class Breadcrumb extends Vue {
44

45 46 47 48 49 50 51
  /**
   * 面包屑列表
   *
   * @memberof Breadcrumb
   */
  private breadcrumbs: Array<any> = [];

52 53 54 55 56 57 58
  /**
   * 面包屑分隔符
   *
   * @memberof Breadcrumb
   */
  private separator:string = appConfig.breadcrumbSeparator;

59 60 61 62 63 64
  /**
   * 导航服务
   *
   * @memberof Breadcrumb
   */
  private navDataService = NavDataService.getInstance(this.$store);
65
  
66 67 68 69 70 71
  /**
   * 默认视图标识
   *
   * @memberof Breadcrumb
   */
  @Prop() public indexViewTag!: string;
72

73
  /**
74
   * 导航模式
75 76 77
   *
   * @memberof Breadcrumb
   */
78 79 80 81 82 83 84 85 86 87 88 89
  @Prop({default:'tab'}) public navModel?:string;

  /**
   * 监听路由
   *
   * @memberof Breadcrumb
   */
  @Watch('$route')
  private onRouteChange(route: Route) {
    this.getBreadcrumb()
  }

90 91 92 93 94 95 96 97 98

  /**
    * 导航服务事件
    *
    * @public
    * @type {(Subscription | undefined)}
    * @memberof Dev
    */
  public serviceStateEvent: Subscription | undefined;
99

100 101 102 103 104
  /**
   * vue  生命周期
   *
   * @memberof Breadcrumb
   */
105
  created() {
106
    this.getBreadcrumb();
107 108 109 110 111 112 113
    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();
        }
      });
    }
114 115
  }

116 117 118 119 120
  /**
   * 获取面包屑数据
   * 
   * @memberof Breadcrumb
   */
121
  private getBreadcrumb() {
122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
    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;
149 150
  }

151
  /**
152
   * 面包屑点击行为
153 154 155
   * 
   * @memberof Breadcrumb
   */
156
  private handleLink(item: any) {
157 158 159 160 161 162 163 164 165
    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);
        });
166
      }
167
      this.navDataService.removeNavData(item.id);
168
    }else{
169 170 171
      if(item && item.meta && item.meta.viewType && Object.is(item.meta.viewType,"APPINDEX")){
        let path: string | null = window.sessionStorage.getItem(Environment.AppName);
        if (path) {
172
          this.$store.commit("removeAllPage");
173 174 175 176 177 178 179 180 181
          this.$router.push({ path: path });
        } else {
          this.$router.push("/");
        }
      }else{
        this.$router.push(item).catch(err => {
          console.warn(err);
        });
      }
182
    }
183 184 185 186 187 188 189 190 191 192 193
  }

  /**
   * 切换导航行为
   * 
   * @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});
194
  }
195 196 197 198 199 200 201 202 203 204 205 206

    /**
     * 组件销毁
     *
     * @memberof Breadcrumb
     */
    public destroyed() {
        if (this.serviceStateEvent) {
            this.serviceStateEvent.unsubscribe();
        }
    }

207 208 209 210 211 212 213 214 215
    /**
     * 是否显示下拉列表
     *
     * @memberof Breadcrumb
     */
    public isShowSelected(item:any){
      return item.isselected && !this.$util.isEmpty(item.srfkey);
    }

216 217 218 219 220 221
}
</script>

<style lang='less'>
@import "./app-breadcrumb.less";
</style>