|
@@ -5,10 +5,10 @@ export default {
|
|
|
name: 'MultiTab',
|
|
|
data () {
|
|
|
return {
|
|
|
- fullPathList: [],
|
|
|
- tabsList: [],
|
|
|
- pages: [],
|
|
|
- activeKey: '',
|
|
|
+ pagesRecordList: [], // 记录打开过的页面
|
|
|
+ tabsList: [], // 已打开页签
|
|
|
+ pages: [], // 已打开页面
|
|
|
+ activeKey: '', // 当前页面
|
|
|
newTabIndex: 0
|
|
|
}
|
|
|
},
|
|
@@ -38,6 +38,7 @@ export default {
|
|
|
|
|
|
this.pages.push(this.$route)
|
|
|
this.tabsList.push(this.$route.name)
|
|
|
+ this.pagesRecordList.push(this.$route.name)
|
|
|
this.selectedLastPath()
|
|
|
},
|
|
|
methods: {
|
|
@@ -66,6 +67,11 @@ export default {
|
|
|
selectedLastPath () {
|
|
|
this.activeKey = this.tabsList[this.tabsList.length - 1]
|
|
|
},
|
|
|
+ replaceTab (newtab, oldtab) {
|
|
|
+ const index = this.pages.findIndex(item => item.name == oldtab.name)
|
|
|
+ this.pages.splice(index, 1, newtab)
|
|
|
+ this.tabsList.splice(index, 1, newtab.name)
|
|
|
+ },
|
|
|
// content menu
|
|
|
refashThat (e) {
|
|
|
this.reloadView()
|
|
@@ -143,35 +149,55 @@ export default {
|
|
|
},
|
|
|
watch: {
|
|
|
'$route': function (newVal, oldVal) {
|
|
|
- const index = this.tabsList.indexOf(newVal.name)
|
|
|
+ console.log(newVal, oldVal)
|
|
|
if (newVal.name == oldVal.name) { return }
|
|
|
// 解决页面地址相同参数不同时打开多个页签问题(例 详情页id或sn不同时)
|
|
|
+ const index = this.tabsList.indexOf(newVal.name)
|
|
|
if (index < 0) { // 不存在
|
|
|
- this.tabsList.push(newVal.name)
|
|
|
- this.pages.push(newVal)
|
|
|
- this.$store.state.app.isNewTab = true
|
|
|
+ console.log(1, '不存在')
|
|
|
+ // 判断是否是新增,编辑,详情页
|
|
|
+ const na = newVal.meta.title.indexOf('详情') >= 0
|
|
|
+ const nb = newVal.meta.title.indexOf('新增') >= 0
|
|
|
+ const nc = newVal.meta.title.indexOf('编辑') >= 0
|
|
|
+ const oa = oldVal.meta.title.indexOf('详情') >= 0
|
|
|
+ const ob = oldVal.meta.title.indexOf('新增') >= 0
|
|
|
+ const oc = oldVal.meta.title.indexOf('编辑') >= 0
|
|
|
+ if (na || nb || nc || oa || ob || oc) {
|
|
|
+ // 替换当前页签
|
|
|
+ this.replaceTab(newVal, oldVal)
|
|
|
+ } else {
|
|
|
+ this.tabsList.push(newVal.name)
|
|
|
+ this.pages.push(newVal)
|
|
|
+ this.pagesRecordList.push(newVal.name)
|
|
|
+ }
|
|
|
+ // 从列表打开新增,编辑
|
|
|
+ this.$store.state.app.isNewTab = na || nb || nc
|
|
|
+ // 从编辑,新增返回列表
|
|
|
+ this.$store.state.app.updateList = ob || oc
|
|
|
} else { // 已存在
|
|
|
this.pages.splice(index, 1, newVal)
|
|
|
+ this.tabsList.splice(index, 1, newVal.name)
|
|
|
this.$store.state.app.isNewTab = false
|
|
|
+ console.log(1, '已存在')
|
|
|
}
|
|
|
// 父页面(列表)进入子页面(编辑、详情)再返回至父页面时关闭子页面页签 子页面点击“返回列表”
|
|
|
- if (oldVal && oldVal.name && newVal.query.closeLastOldTab) {
|
|
|
- if (oldVal.name.indexOf('List') == -1) { // 要关闭的页面不能是列表页
|
|
|
- this.remove(oldVal.name) // 关闭子页面
|
|
|
- this.$store.state.app.isNewTab = !(oldVal.meta.title.indexOf('详情') >= 0)
|
|
|
- }
|
|
|
- }
|
|
|
+ // if (oldVal && oldVal.name && newVal.query.closeLastOldTab) {
|
|
|
+ // if (oldVal.name.indexOf('List') == -1) { // 要关闭的页面不能是列表页
|
|
|
+ // this.remove(oldVal.name) // 关闭子页面
|
|
|
+ // this.$store.state.app.isNewTab = !(oldVal.meta.title.indexOf('详情') >= 0)
|
|
|
+ // }
|
|
|
+ // }
|
|
|
this.activeKey = newVal.name
|
|
|
},
|
|
|
activeKey: function (newPathKey) {
|
|
|
- console.log(newPathKey, 'newVal')
|
|
|
- const row = this.pages.find(item => item.name == newPathKey)
|
|
|
- if (row.fullPath.indexOf('/list') == -1) {
|
|
|
- this.$router.push({ path: row.fullPath })
|
|
|
- } else {
|
|
|
- // this.$router.push({ path: row.fullPath, query: { closeLastOldTab: true } }) // 需求:切换页签需关掉子页面
|
|
|
- this.$router.push({ path: row.path }) // 需求:切换页签不需关掉子页面
|
|
|
- }
|
|
|
+ this.$router.push({ name: newPathKey })
|
|
|
+ // const row = this.pages.find(item => item.name == newPathKey)
|
|
|
+ // if (row.fullPath.indexOf('/list') == -1) {
|
|
|
+ // this.$router.push({ path: row.fullPath })
|
|
|
+ // } else {
|
|
|
+ // // this.$router.push({ path: row.fullPath, query: { closeLastOldTab: true } }) // 需求:切换页签需关掉子页面
|
|
|
+ // this.$router.push({ path: row.path }) // 需求:切换页签不需关掉子页面
|
|
|
+ // }
|
|
|
}
|
|
|
},
|
|
|
render () {
|