feat: add multipage mode

chenghx

2018-09-13 0b836882c59a9e979dc3da3be6fd3dff772d76df

feat: add multipage mode

 src/components/setting/Setting.vue

@@ -55,6 +55,10 @@
          显示抽屉按钮
          <a-switch slot="actions" size="small" />
        </a-list-item>
        <a-list-item>
          多页签模式
          <a-switch :checked="multipage" slot="actions" size="small" @change="setMultipage" />
        </a-list-item>
      </a-list>
    </setting-item>
    <a-divider />
@@ -99,6 +103,11 @@
    SettingItem,
    AIcon,
    ALayoutSider},
  computed: {
    multipage () {
      return this.$store.state.setting.multipage
    }
  },
  methods: {
    onColorChange (values, colors) {
      if (colors.length > 0) {
@@ -118,6 +127,9 @@
        _this.$message.success(`复制成功`)
        clipboard.destroy()
      })
    },
    setMultipage (checked) {
      this.$store.commit('setting/setMultipage', checked)
    }
  }
}

 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>


 src/layouts/PageView.vue

@@ -4,7 +4,10 @@
      <img :src="extraImage"/>
    </div>
    <transition name="page-toggle">
      <router-view  ref="page"/>
      <keep-alive v-if="multipage">
        <router-view ref="page" />
      </keep-alive>
      <router-view ref="page" v-else />
    </transition>
  </page-layout>
</template>
@@ -23,6 +26,11 @@
      extraImage: ''
    }
  },
  computed: {
    multipage () {
      return this.$store.state.setting.multipage
    }
  },
  mounted () {
    this.getPageHeaderInfo()
  },

 src/layouts/RouteView.vue

@@ -1,12 +1,20 @@
<template>
  <transition name="page-toggle">
  <router-view />
    <keep-alive v-if="multipage">
      <router-view />
    </keep-alive>
    <router-view v-else />
  </transition>
</template>

<script>
export default {
  name: 'RouteView'
  name: 'RouteView',
  computed: {
    multipage () {
      return this.$store.state.setting.multipage
    }
  }
}
</script>


 src/store/modules/setting.js

@@ -10,7 +10,8 @@
      {link: 'https://pro.ant.design', name: 'Pro首页'},
      {link: 'https://github.com/iczer/vue-antd-admin', icon: 'github'},
      {link: 'https://ant.design', name: 'Ant Design'}
    ]
    ],
    multipage: true
  },
  mutations: {
    setDevice (state, isMobile) {
@@ -21,6 +22,9 @@
    },
    setLayout (state, layout) {
      state.layout = layout
    },
    setMultipage (state, multipage) {
      state.multipage = multipage
    }
  }
}