|
|
|
|
@ -7,12 +7,13 @@ |
|
|
|
|
:page-list="pageList" |
|
|
|
|
@change="changePage" |
|
|
|
|
@close="remove" |
|
|
|
|
@refresh="refresh" |
|
|
|
|
@contextmenu="onContextmenu" |
|
|
|
|
/> |
|
|
|
|
<div :class="['tabs-view-content', layout, pageWidth]" :style="`margin-top: ${multiPage ? -24 : 0}px`"> |
|
|
|
|
<page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction"> |
|
|
|
|
<a-keep-alive v-if="multiPage" v-model="clearCaches"> |
|
|
|
|
<router-view ref="tabContent" :key="$route.fullPath" /> |
|
|
|
|
<router-view v-if="!refreshing" ref="tabContent" :key="$route.fullPath" /> |
|
|
|
|
</a-keep-alive> |
|
|
|
|
<router-view v-else /> |
|
|
|
|
</page-toggle-transition> |
|
|
|
|
@ -38,7 +39,8 @@ export default { |
|
|
|
|
clearCaches: [], |
|
|
|
|
pageList: [], |
|
|
|
|
activePage: '', |
|
|
|
|
menuVisible: false |
|
|
|
|
menuVisible: false, |
|
|
|
|
refreshing: false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
@ -47,7 +49,8 @@ export default { |
|
|
|
|
return [ |
|
|
|
|
{ key: '1', icon: 'vertical-right', text: this.$t('closeLeft') }, |
|
|
|
|
{ key: '2', icon: 'vertical-left', text: this.$t('closeRight') }, |
|
|
|
|
{ key: '3', icon: 'close', text: this.$t('closeOthers') } |
|
|
|
|
{ key: '3', icon: 'close', text: this.$t('closeOthers') }, |
|
|
|
|
{ key: '4', icon: 'sync', text: this.$t('refresh') }, |
|
|
|
|
] |
|
|
|
|
}, |
|
|
|
|
tabsOffset() { |
|
|
|
|
@ -106,9 +109,6 @@ export default { |
|
|
|
|
this.activePage = key |
|
|
|
|
this.$router.push(key) |
|
|
|
|
}, |
|
|
|
|
editPage (key, action) { |
|
|
|
|
this[action](key) // remove |
|
|
|
|
}, |
|
|
|
|
remove (key, next) { |
|
|
|
|
if (this.pageList.length === 1) { |
|
|
|
|
return this.$message.warning(this.$t('warn')) |
|
|
|
|
@ -124,19 +124,30 @@ export default { |
|
|
|
|
this.$router.push(this.activePage) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onContextmenu (e) { |
|
|
|
|
const pageKey = getPageKey(e.target) |
|
|
|
|
refresh (key, page) { |
|
|
|
|
page = page || this.pageList.find(item => item.fullPath === key) |
|
|
|
|
page.loading = true |
|
|
|
|
this.clearCache(page) |
|
|
|
|
if (key === this.activePage) { |
|
|
|
|
this.reloadContent(() => page.loading = false) |
|
|
|
|
} else { |
|
|
|
|
// 其实刷新很快，加这个延迟纯粹为了 loading 状态多展示一会儿，让用户感知刷新这一过程 |
|
|
|
|
setTimeout(() => page.loading = false, 500) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onContextmenu(pageKey, e) { |
|
|
|
|
if (pageKey) { |
|
|
|
|
e.preventDefault() |
|
|
|
|
e.meta = pageKey |
|
|
|
|
this.menuVisible = true |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onMenuSelect (key, target) { |
|
|
|
|
let pageKey = getPageKey(target) |
|
|
|
|
onMenuSelect (key, target, pageKey) { |
|
|
|
|
switch (key) { |
|
|
|
|
case '1': this.closeLeft(pageKey); break |
|
|
|
|
case '2': this.closeRight(pageKey); break |
|
|
|
|
case '3': this.closeOthers(pageKey); break |
|
|
|
|
case '4': this.refresh(pageKey); break |
|
|
|
|
default: break |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
@ -172,6 +183,22 @@ export default { |
|
|
|
|
this.$router.push(this.activePage) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
clearCache(page) { |
|
|
|
|
page._init_ = false |
|
|
|
|
this.clearCaches = [page.cachedKey] |
|
|
|
|
}, |
|
|
|
|
reloadContent(onLoaded) { |
|
|
|
|
this.refreshing = true |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.refreshing = false |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
this.setCachedKey(this.$route) |
|
|
|
|
if (typeof onLoaded === 'function') { |
|
|
|
|
onLoaded.apply(this, []) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, 200) |
|
|
|
|
}, |
|
|
|
|
pageName(page) { |
|
|
|
|
return this.$t(getI18nKey(page.keyPath)) |
|
|
|
|
}, |
|
|
|
|
@ -180,6 +207,7 @@ export default { |
|
|
|
|
*/ |
|
|
|
|
addListener() { |
|
|
|
|
window.addEventListener('page:close', this.closePageListener) |
|
|
|
|
window.addEventListener('page:refresh', this.refreshPageListener) |
|
|
|
|
window.addEventListener('unload', this.unloadListener) |
|
|
|
|
}, |
|
|
|
|
/** |
|
|
|
|
@ -187,6 +215,7 @@ export default { |
|
|
|
|
*/ |
|
|
|
|
removeListener() { |
|
|
|
|
window.removeEventListener('page:close', this.closePageListener) |
|
|
|
|
window.removeEventListener('page:refresh', this.refreshPageListener) |
|
|
|
|
window.removeEventListener('unload', this.unloadListener) |
|
|
|
|
}, |
|
|
|
|
/** |
|
|
|
|
@ -198,6 +227,14 @@ export default { |
|
|
|
|
const closePath = typeof closeRoute === 'string' ? closeRoute : closeRoute.path |
|
|
|
|
this.remove(closePath, nextRoute) |
|
|
|
|
}, |
|
|
|
|
/** |
|
|
|
|
* 页面刷新事件监听 |
|
|
|
|
* @param event 页签关闭事件 |
|
|
|
|
*/ |
|
|
|
|
refreshPageListener(event) { |
|
|
|
|
const {pageKey} = event.detail |
|
|
|
|
this.refresh(pageKey) |
|
|
|
|
}, |
|
|
|
|
/** |
|
|
|
|
* 页面 unload 事件监听器，添加页签到 session 缓存，用于刷新时保留页签 |
|
|
|
|
*/ |
|
|
|
|
@ -206,7 +243,7 @@ export default { |
|
|
|
|
sessionStorage.setItem(process.env.VUE_APP_TBAS_KEY, JSON.stringify(tabs)) |
|
|
|
|
}, |
|
|
|
|
createPage(route) { |
|
|
|
|
return {keyPath: route.matched[route.matched.length - 1].path, fullPath: route.fullPath} |
|
|
|
|
return {keyPath: route.matched[route.matched.length - 1].path, fullPath: route.fullPath, loading: false} |
|
|
|
|
}, |
|
|
|
|
/** |
|
|
|
|
* 设置页面缓存的key |
|
|
|
|
@ -240,20 +277,6 @@ export default { |
|
|
|
|
...mapMutations('setting', ['correctPageMinHeight']) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 由于ant-design-vue组件库的TabPane组件暂不支持自定义监听器，无法直接获取到右键target所在标签页的 pagekey 。故增加此方法用于 |
|
|
|
|
* 查询右键target所在标签页的标识 pagekey ，以用于自定义右键菜单的事件处理。 |
|
|
|
|
* 注：TabPane组件支持自定义监听器后可去除该方法并重构 ‘自定义右键菜单的事件处理’ |
|
|
|
|
* @param target 查询开始目标 |
|
|
|
|
* @param depth 查询层级深度 （查找层级最多不超过3层，超过3层深度直接返回 null） |
|
|
|
|
* @returns {String} |
|
|
|
|
*/ |
|
|
|
|
function getPageKey (target, depth = 0) { |
|
|
|
|
if (depth > 2 || !target) { |
|
|
|
|
return null |
|
|
|
|
} |
|
|
|
|
return target.getAttribute('pagekey') || getPageKey(target.firstElementChild, ++depth) |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped lang="less"> |
|
|
|
|
|
chenghongxing
5 years ago