From 0b836882c59a9e979dc3da3be6fd3dff772d76df Mon Sep 17 00:00:00 2001
From: chenghx <chenghx@nfex.com>
Date: 星期四, 13 九月 2018 14:26:22 +0800
Subject: [PATCH] feat: add multipage mode
---
src/layouts/MenuView.vue | 71 ++++++++++++++++++++++++++++++++++-
1 files changed, 69 insertions(+), 2 deletions(-)
diff --git a/src/layouts/MenuView.vue b/src/layouts/MenuView.vue
index 4dcbf91..8ed8431 100644
--- a/src/layouts/MenuView.vue
+++ b/src/layouts/MenuView.vue
@@ -1,16 +1,83 @@
<template>
<global-layout>
+ <a-tabs v-if="multipage" :active-key="activePage" style="margin-bottom: 8px" :hide-add="true" type="editable-card" @change="changePage" @edit="editPage">
+ <a-tab-pane v-on="$listeners" :key="page.fullPath" v-for="page in pageList" :tab="page.name"/>
+ </a-tabs>
<transition name="page-toggle">
- <router-view />
+ <keep-alive v-if="multipage">
+ <router-view />
+ </keep-alive>
+ <router-view v-else />
</transition>
</global-layout>
</template>
<script>
import GlobalLayout from './GlobalLayout'
+import ATabs from 'ant-design-vue/es/tabs'
+const ATabPane = ATabs.TabPane
export default {
name: 'MenuView',
- components: {GlobalLayout}
+ components: {ATabPane, ATabs, GlobalLayout},
+ data () {
+ return {
+ pageList: [],
+ linkList: [],
+ activePage: ''
+ }
+ },
+ computed: {
+ multipage () {
+ return this.$store.state.setting.multipage
+ }
+ },
+ created () {
+ this.pageList.push(this.$route)
+ this.linkList.push(this.$route.fullPath)
+ this.activePage = this.$route.fullPath
+ },
+ watch: {
+ '$route': function (newRoute, oldRoute) {
+ this.activePage = newRoute.fullPath
+ if (!this.multipage) {
+ this.linkList = [newRoute.fullPath]
+ this.pageList = [newRoute]
+ } else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
+ this.linkList.push(newRoute.fullPath)
+ this.pageList.push(newRoute)
+ }
+ },
+ 'activePage': function (key) {
+ this.$router.push(key)
+ },
+ 'multipage': function (newVal, oldVal) {
+ if (!newVal) {
+ this.linkList = [this.$route.fullPath]
+ this.pageList = [this.$route]
+ }
+ }
+ },
+ methods: {
+ changePage (key) {
+ this.activePage = key
+ },
+ editPage (key, action) {
+ this[action](key)
+ },
+ add () {
+ },
+ remove (key) {
+ if (this.pageList.length === 1) {
+ this.$message.warning('杩欐槸鏈�鍚庝竴椤碉紝涓嶈兘鍐嶅叧闂簡鍟�')
+ return
+ }
+ this.pageList = this.pageList.filter(item => item.fullPath !== key)
+ let index = this.linkList.indexOf(key)
+ this.linkList = this.linkList.filter(item => item !== key)
+ index = index >= this.linkList.length ? this.linkList.length - 1 : index
+ this.activePage = this.linkList[index]
+ }
+ }
}
</script>
--
Gitblit v1.9.1