Merge branch 'master' into deploy

src/router/index.js

@@ -12,7 +12,7 @@ import chartsRouter from './modules/charts'
 import tableRouter from './modules/table'
 import nestedRouter from './modules/nested'
 
-/** note: Submenu only appear when children.length>=1
+/** note: sub-menu only appear when children.length>=1
  *  detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
  **/
 
@@ -25,10 +25,11 @@ import nestedRouter from './modules/nested'
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)
 * meta : {
     roles: ['admin','editor']    will control the page roles (you can set multiple roles)
-    title: 'title'               the name show in submenu and breadcrumb (recommend set)
+    title: 'title'               the name show in sub-menu and breadcrumb (recommend set)
     icon: 'svg-name'             the icon show in the sidebar
     noCache: true                if true, the page will no be cached(default is false)
     breadcrumb: false            if false, the item will hidden in breadcrumb(default is true)
+    affix: true                  if true, the tag will affix in the tags-view
   }
 **/
 export const constantRouterMap = [
@@ -72,7 +73,7 @@ export const constantRouterMap = [
         path: 'dashboard',
         component: () => import('@/views/dashboard/index'),
         name: 'Dashboard',
-        meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
+        meta: { title: 'dashboard', icon: 'dashboard', noCache: true, affix: true }
       }
     ]
   },
@@ -85,7 +86,7 @@ export const constantRouterMap = [
         path: 'index',
         component: () => import('@/views/documentation/index'),
         name: 'Documentation',
-        meta: { title: 'documentation', icon: 'documentation', noCache: true }
+        meta: { title: 'documentation', icon: 'documentation', affix: true }
       }
     ]
   },

src/store/modules/tagsView.js

@@ -38,12 +38,9 @@ const tagsView = {
     },
 
     DEL_OTHERS_VISITED_VIEWS: (state, view) => {
-      for (const [i, v] of state.visitedViews.entries()) {
+      state.visitedViews = state.visitedViews.filter(v => {
-        if (v.path === view.path) {
+        return v.meta.affix || v.path === view.path
-          state.visitedViews = state.visitedViews.slice(i, i + 1)
+      })
-          break
-        }
-      }
     },
     DEL_OTHERS_CACHED_VIEWS: (state, view) => {
       for (const i of state.cachedViews) {
@@ -56,7 +53,9 @@ const tagsView = {
     },
 
     DEL_ALL_VISITED_VIEWS: state => {
-      state.visitedViews = []
+      // keep affix tags
+      const affixTags = state.visitedViews.filter(tag => tag.meta.affix)
+      state.visitedViews = affixTags
     },
     DEL_ALL_CACHED_VIEWS: state => {
       state.cachedViews = []

src/views/layout/components/Sidebar/FixiOSBug.js

@@ -5,16 +5,16 @@ export default {
     }
   },
   mounted() {
-    // In order to fix the click on menu on the ios device will trigger the mouseeleave bug
+    // In order to fix the click on menu on the ios device will trigger the mouseleave bug
     // https://github.com/PanJiaChen/vue-element-admin/issues/1135
     this.fixBugIniOS()
   },
   methods: {
     fixBugIniOS() {
-      const $submenu = this.$refs.submenu
+      const $subMenu = this.$refs.subMenu
-      if ($submenu) {
+      if ($subMenu) {
-        const handleMouseleave = $submenu.handleMouseleave
+        const handleMouseleave = $subMenu.handleMouseleave
-        $submenu.handleMouseleave = (e) => {
+        $subMenu.handleMouseleave = (e) => {
           if (this.device === 'mobile') {
             return
           }

src/views/layout/components/Sidebar/SidebarItem.vue

@@ -9,7 +9,7 @@
       </app-link>
     </template>
 
-    <el-submenu v-else ref="submenu" :index="resolvePath(item.path)">
+    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)">
       <template slot="title">
         <item v-if="item.meta" :icon="item.meta.icon" :title="generateTitle(item.meta.title)" />
       </template>

src/views/layout/components/Sidebar/index.vue

@@ -1,7 +1,6 @@
 <template>
   <el-scrollbar wrap-class="scrollbar-wrapper">
     <el-menu
-      :show-timeout="200"
       :default-active="$route.path"
       :collapse="isCollapse"
       :background-color="variables.menuBg"

src/views/layout/components/TagsView.vue

@@ -12,14 +12,15 @@
         @click.middle.native="closeSelectedTag(tag)"
         @contextmenu.prevent.native="openMenu(tag,$event)">
         {{ generateTitle(tag.title) }}
-        <span class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
       </router-link>
     </scroll-pane>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)">{{ $t('tagsView.refresh') }}</li>
-      <li @click="closeSelectedTag(selectedTag)">{{ $t('tagsView.close') }}</li>
+      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">{{
+      $t('tagsView.close') }}</li>
       <li @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
-      <li @click="closeAllTags">{{ $t('tagsView.closeAll') }}</li>
+      <li @click="closeAllTags(selectedTag)">{{ $t('tagsView.closeAll') }}</li>
     </ul>
   </div>
 </template>
@@ -27,6 +28,7 @@
 <script>
 import ScrollPane from '@/components/ScrollPane'
 import { generateTitle } from '@/utils/i18n'
+import path from 'path'
 
 export default {
   components: { ScrollPane },
@@ -35,17 +37,21 @@ export default {
       visible: false,
       top: 0,
       left: 0,
-      selectedTag: {}
+      selectedTag: {},
+      affixTags: []
     }
   },
   computed: {
     visitedViews() {
       return this.$store.state.tagsView.visitedViews
+    },
+    routers() {
+      return this.$store.state.permission.routers
     }
   },
   watch: {
     $route() {
-      this.addViewTags()
+      this.addTags()
       this.moveToCurrentTag()
     },
     visible(value) {
@@ -57,14 +63,44 @@ export default {
     }
   },
   mounted() {
-    this.addViewTags()
+    this.initTags()
+    this.addTags()
   },
   methods: {
     generateTitle, // generateTitle by vue-i18n
     isActive(route) {
       return route.path === this.$route.path
     },
-    addViewTags() {
+    filterAffixTags(routes, basePath = '/') {
+      let tags = []
+      routes.forEach(route => {
+        if (route.meta && route.meta.affix) {
+          tags.push({
+            path: path.resolve(basePath, route.path),
+            name: route.name,
+            meta: { ...route.meta }
+          })
+        }
+        if (route.children) {
+          const tempTags = this.filterAffixTags(route.children, route.path)
+          if (tempTags.length >= 1) {
+            tags = [...tags, ...tempTags]
+          }
+        }
+      })
+
+      return tags
+    },
+    initTags() {
+      const affixTags = this.affixTags = this.filterAffixTags(this.routers)
+      for (const tag of affixTags) {
+        // Must have tag name
+        if (tag.name) {
+          this.$store.dispatch('addVisitedView', tag)
+        }
+      }
+    },
+    addTags() {
       const { name } = this.$route
       if (name) {
         this.$store.dispatch('addView', this.$route)
@@ -101,12 +137,7 @@ export default {
     closeSelectedTag(view) {
       this.$store.dispatch('delView', view).then(({ visitedViews }) => {
         if (this.isActive(view)) {
-          const latestView = visitedViews.slice(-1)[0]
+          this.toLastView(visitedViews)
-          if (latestView) {
-            this.$router.push(latestView)
-          } else {
-            this.$router.push('/')
-          }
         }
       })
     },
@@ -116,9 +147,22 @@ export default {
         this.moveToCurrentTag()
       })
     },
-    closeAllTags() {
+    closeAllTags(view) {
-      this.$store.dispatch('delAllViews')
+      this.$store.dispatch('delAllViews').then(({ visitedViews }) => {
-      this.$router.push('/')
+        if (this.affixTags.some(tag => tag.path === view.path)) {
+          return
+        }
+        this.toLastView(visitedViews)
+      })
+    },
+    toLastView(visitedViews) {
+      const latestView = visitedViews.slice(-1)[0]
+      if (latestView) {
+        this.$router.push(latestView)
+      } else {
+        // You can set another route
+        this.$router.push('/')
+      }
     },
     openMenu(tag, e) {
       const menuMinWidth = 105