forked from AkkomaGang/admin-fe
fearure[TagsView]: add affix option (#1577)
This commit is contained in:
parent
4e0559833f
commit
48e47e86f1
3 changed files with 69 additions and 25 deletions
|
@ -29,6 +29,7 @@ import nestedRouter from './modules/nested'
|
||||||
icon: 'svg-name' the icon show in the sidebar
|
icon: 'svg-name' the icon show in the sidebar
|
||||||
noCache: true if true, the page will no be cached(default is false)
|
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)
|
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 = [
|
export const constantRouterMap = [
|
||||||
|
@ -72,7 +73,7 @@ export const constantRouterMap = [
|
||||||
path: 'dashboard',
|
path: 'dashboard',
|
||||||
component: () => import('@/views/dashboard/index'),
|
component: () => import('@/views/dashboard/index'),
|
||||||
name: 'Dashboard',
|
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',
|
path: 'index',
|
||||||
component: () => import('@/views/documentation/index'),
|
component: () => import('@/views/documentation/index'),
|
||||||
name: 'Documentation',
|
name: 'Documentation',
|
||||||
meta: { title: 'documentation', icon: 'documentation', noCache: true }
|
meta: { title: 'documentation', icon: 'documentation', affix: true }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
@ -38,12 +38,9 @@ const tagsView = {
|
||||||
},
|
},
|
||||||
|
|
||||||
DEL_OTHERS_VISITED_VIEWS: (state, view) => {
|
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) => {
|
DEL_OTHERS_CACHED_VIEWS: (state, view) => {
|
||||||
for (const i of state.cachedViews) {
|
for (const i of state.cachedViews) {
|
||||||
|
@ -56,7 +53,9 @@ const tagsView = {
|
||||||
},
|
},
|
||||||
|
|
||||||
DEL_ALL_VISITED_VIEWS: state => {
|
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 => {
|
DEL_ALL_CACHED_VIEWS: state => {
|
||||||
state.cachedViews = []
|
state.cachedViews = []
|
||||||
|
|
|
@ -12,14 +12,15 @@
|
||||||
@click.middle.native="closeSelectedTag(tag)"
|
@click.middle.native="closeSelectedTag(tag)"
|
||||||
@contextmenu.prevent.native="openMenu(tag,$event)">
|
@contextmenu.prevent.native="openMenu(tag,$event)">
|
||||||
{{ generateTitle(tag.title) }}
|
{{ 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>
|
</router-link>
|
||||||
</scroll-pane>
|
</scroll-pane>
|
||||||
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
|
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
|
||||||
<li @click="refreshSelectedTag(selectedTag)">{{ $t('tagsView.refresh') }}</li>
|
<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="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
|
||||||
<li @click="closeAllTags">{{ $t('tagsView.closeAll') }}</li>
|
<li @click="closeAllTags(selectedTag)">{{ $t('tagsView.closeAll') }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -27,6 +28,7 @@
|
||||||
<script>
|
<script>
|
||||||
import ScrollPane from '@/components/ScrollPane'
|
import ScrollPane from '@/components/ScrollPane'
|
||||||
import { generateTitle } from '@/utils/i18n'
|
import { generateTitle } from '@/utils/i18n'
|
||||||
|
import path from 'path'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { ScrollPane },
|
components: { ScrollPane },
|
||||||
|
@ -35,17 +37,21 @@ export default {
|
||||||
visible: false,
|
visible: false,
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
selectedTag: {}
|
selectedTag: {},
|
||||||
|
affixTags: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
visitedViews() {
|
visitedViews() {
|
||||||
return this.$store.state.tagsView.visitedViews
|
return this.$store.state.tagsView.visitedViews
|
||||||
|
},
|
||||||
|
routers() {
|
||||||
|
return this.$store.state.permission.routers
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
$route() {
|
$route() {
|
||||||
this.addViewTags()
|
this.addTags()
|
||||||
this.moveToCurrentTag()
|
this.moveToCurrentTag()
|
||||||
},
|
},
|
||||||
visible(value) {
|
visible(value) {
|
||||||
|
@ -57,14 +63,44 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.addViewTags()
|
this.initTags()
|
||||||
|
this.addTags()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
generateTitle, // generateTitle by vue-i18n
|
generateTitle, // generateTitle by vue-i18n
|
||||||
isActive(route) {
|
isActive(route) {
|
||||||
return route.path === this.$route.path
|
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
|
const { name } = this.$route
|
||||||
if (name) {
|
if (name) {
|
||||||
this.$store.dispatch('addView', this.$route)
|
this.$store.dispatch('addView', this.$route)
|
||||||
|
@ -101,12 +137,7 @@ export default {
|
||||||
closeSelectedTag(view) {
|
closeSelectedTag(view) {
|
||||||
this.$store.dispatch('delView', view).then(({ visitedViews }) => {
|
this.$store.dispatch('delView', view).then(({ visitedViews }) => {
|
||||||
if (this.isActive(view)) {
|
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()
|
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) {
|
openMenu(tag, e) {
|
||||||
const menuMinWidth = 105
|
const menuMinWidth = 105
|
||||||
|
|
Loading…
Reference in a new issue