<template> <div class="ibiz-page-tag" v-if="$store.state.pageMetas.length > 0"> <div class="move-btn move-left" @click="leftMove"> <icon type="ios-arrow-back" /> </div> <div ref="scrollBody" class="tags-body"> <div ref="scrollChild" class="tags-container" :style="{left: styleLeft + 'px'}"> <transition-group name="tags-transition"> <template v-for="(meta, index) of $store.state.pageMetas"> <Tag ref="tagElement" :key="index" :class="isActive(index) ? 'tag-is-active' : ''" :name="index" closable @click.native="changePage(index)" @on-close="onClose(index)"> <div class="tag-text"> <tooltip :content="getCaption(meta.caption, meta.info)" transfer :max-width="300"> <i v-if="meta.iconCls && !Object.is(meta.iconCls, '')" :class="meta.iconCls"></i> <img v-else :src="meta.imgPath" class="text-icon" /> {{getCaption(meta.caption, meta.info)}} </tooltip> </div> </Tag> </template> </transition-group> </div> </div> <div class="move-btn move-right" @click="rightMove"> <icon type="ios-arrow-forward" /> </div> <Dropdown @on-click="doTagAction" placement="bottom-end"> <div class="move-btn"> <icon type="ios-close-circle-outline" /> </div> <DropdownMenu slot="list"> <template v-for="(action, index) of actions"> <DropdownItem :key="index" :name="action.value">{{$t(action.text)}}</DropdownItem> </template> </DropdownMenu> </Dropdown > </div > </template> <script lang="ts"> import { Vue, Component, Provide, Prop, Watch } from 'vue-property-decorator'; import { Environment } from '../../environments/environment'; @Component({}) export default class TabPageExp extends Vue { @Provide() public styleLeft: number = 0; @Provide() public actions: any[] = [{ text: 'app.tabpage.closeall', value: 'closeAll' }, { text: 'app.tabpage.closeother', value: 'closeOther' }]; @Watch("$route") public onRouteChange(newVal: any) { this.moveToView(newVal); this.$emit('change', newVal); } public created() { Vue.prototype.$tabPageExp = this; } public getCaption(caption: any, info: any):any { return info && !Object.is(info, '') ? `${this.$t(caption)} - ${info}` : this.$t(caption); } /** * 向左移动 * * @memberof TabPageExp */ public leftMove() { const scrollBody: any = this.$refs.scrollBody; const scrollChild: any = this.$refs.scrollChild; if (scrollBody && scrollChild && scrollChild.offsetWidth > scrollBody.offsetWidth) { if ((scrollChild.offsetWidth - scrollBody.offsetWidth + this.styleLeft) > 100) { this.styleLeft -= 100; } else { this.styleLeft = scrollBody.offsetWidth - scrollChild.offsetWidth; } } } /** * 向右移动 * * @memberof TabPageExp */ public rightMove() { if (this.styleLeft < 0) { if (this.styleLeft + 100 > 0) { this.styleLeft = 0; } else { this.styleLeft += 100; } } } /** * 是否选中 * * @param {(string | number)} index * @returns * @memberof TabPageExp */ public isActive(index: string | number) { const page = this.$store.state.pageTagList[index]; if (Object.is(page.fullPath, this.$route.fullPath)) { return true; } return false; } /** * 关闭 * * @param {*} event * @param {*} name * @memberof TabPageExp */ public onClose(name: any) { const page = this.$store.getters.getPage(name); if (!page) { this.$store.commit("deletePage", name); this.gotoPage(); } const appview = this.$store.getters['viewaction/getAppView'](page.viewtag); if (appview && appview.viewdatachange) { const title: any = this.$t('app.tabpage.sureclosetip.title'); const content: any = this.$t('app.tabpage.sureclosetip.content'); this.$Modal.confirm({ title: title, content: content, onOk: () => { this.$store.commit("deletePage", name); this.gotoPage(); }, onCancel: () => { } }); } else { this.$store.commit("deletePage", name); this.gotoPage(); } } /** * 是否显示关闭 * * @returns * @memberof TabPageExp */ public isClose() { const pageTagList = this.$store.state.pageTagList; if (pageTagList.length > 1) { return true; } return false; } /** * 切换分页 * * @param {*} index * @memberof TabPageExp */ public changePage(index: any) { this.$store.commit("setCurPage", index); this.gotoPage(); } /** * 跳转页面 * * @returns * @memberof TabPageExp */ public gotoPage() { const length = this.$store.state.historyPathList.length; if (length > 0) { const path = this.$store.state.historyPathList[length - 1]; if (Object.is(path, this.$route.fullPath)) { return; } const index = this.$store.state.pageTagList.findIndex((page: any) => Object.is(page.fullPath, path)); if (index >= 0) { const page = this.$store.state.pageTagList[index]; this.$router.push({ path: page.path, params: page.params, query: page.query }); } } else { let path: string | null = window.sessionStorage.getItem(Environment.AppName); if(path) { this.$router.push({path: path}); } else { this.$router.push('/'); } } } /** * 设置当前页标题 * * @param {*} caption * @memberof TabPageExp */ public setCurPageCaption(routename: string, caption: any, info: string) { if(!Object.is(this.$route.name, routename)) { return; } this.$store.commit("setCurPageCaption", { route: this.$route, caption: caption, info: info }); setTimeout(() => { this.moveToView(this.$route); }, 1); } /** * 移动至指定页面标签 * * @param {*} to * @memberof TabPageExp */ public moveToView(to: any) { const pages: any[] = this.$store.state.pageTagList; let leftWidth: number = 0; this.$nextTick(() => { pages.forEach((page, index) => { const tag: any = this.$refs.tagElement; if (!tag) { return ; } const el = tag[index].$el; if (Object.is(page.fullPath, to.fullPath)) { this.setLeft(el, leftWidth); } else { leftWidth += el.offsetWidth; } }); }); } /** * 设置左侧边距 * * @param {{ offsetWidth: number; }} tag * @param {number} leftWidth * @memberof TabPageExp */ public setLeft(tag: { offsetWidth: number; }, leftWidth: number) { if (tag) { const scrollBody: any = this.$refs.scrollBody; if (leftWidth < -this.styleLeft) { this.styleLeft = -leftWidth; } else if ((leftWidth + tag.offsetWidth) > (scrollBody.offsetWidth - this.styleLeft)) { this.styleLeft -= (leftWidth + tag.offsetWidth) - (scrollBody.offsetWidth - this.styleLeft); } } } /** * 执行行为操作 * * @param {string} name * @memberof TabPageExp */ public doTagAction(name: string) { if (Object.is(name, 'closeAll')) { this.$store.commit("removeAllPage"); this.gotoPage(); } else if (Object.is(name, 'closeOther')) { this.$store.commit("removeOtherPage"); this.moveToView(this.$route); } } } </script> <style lang="less"> @import './tab-page-exp.less'; </style>