Merge branch 'master' into deploy

This commit is contained in:
Pan 2018-08-31 16:20:10 +08:00
commit a5f373dcf7
6 changed files with 118 additions and 68 deletions

View File

@ -2,7 +2,7 @@
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" v-if="item.meta.title" :key="item.path">
<span v-if="item.redirect===&quot;noredirect&quot;||index==levelList.length-1" class="no-redirect">{{ generateTitle(item.meta.title) }}</span>
<span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{ generateTitle(item.meta.title) }}</span>
<router-link v-else :to="item.redirect||item.path">{{ generateTitle(item.meta.title) }}</router-link>
</el-breadcrumb-item>
</transition-group>

View File

@ -1,9 +1,7 @@
<template>
<div ref="scrollContainer" class="scroll-container" @wheel.prevent="handleScroll">
<div ref="scrollWrapper" :style="{left: left + 'px'}" class="scroll-wrapper">
<slot/>
</div>
</div>
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
<slot/>
</el-scrollbar>
</template>
<script>
@ -18,41 +16,22 @@ export default {
},
methods: {
handleScroll(e) {
const eventDelta = e.wheelDelta || -e.deltaY * 3
const $container = this.$refs.scrollContainer
const $containerWidth = $container.offsetWidth
const $wrapper = this.$refs.scrollWrapper
const $wrapperWidth = $wrapper.offsetWidth
if (eventDelta > 0) {
this.left = Math.min(0, this.left + eventDelta)
} else {
if ($containerWidth - padding < $wrapperWidth) {
if (this.left < -($wrapperWidth - $containerWidth + padding)) {
this.left = this.left
} else {
this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding)
}
} else {
this.left = 0
}
}
const eventDelta = e.wheelDelta || -e.deltaY * 40
const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
},
moveToTarget($target) {
const $container = this.$refs.scrollContainer
const $container = this.$refs.scrollContainer.$el
const $containerWidth = $container.offsetWidth
const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap
const $targetLeft = $target.offsetLeft
const $targetWidth = $target.offsetWidth
if ($targetLeft < -this.left) {
// tag in the left
this.left = -$targetLeft + padding
} else if ($targetLeft + padding > -this.left && $targetLeft + $targetWidth < -this.left + $containerWidth - padding) {
// tag in the current view
// eslint-disable-line
} else {
if ($targetLeft > $containerWidth) {
// tag in the right
this.left = -($targetLeft - ($containerWidth - $targetWidth) + padding)
$scrollWrapper.scrollLeft = $targetLeft - $containerWidth + $targetWidth + padding
} else {
// tag in the left
$scrollWrapper.scrollLeft = $targetLeft - padding
}
}
}
@ -65,8 +44,13 @@ export default {
position: relative;
overflow: hidden;
width: 100%;
.scroll-wrapper {
position: absolute;
/deep/ {
.el-scrollbar__bar {
bottom: 0px;
}
.el-scrollbar__wrap {
height: 49px;
}
}
}
</style>

View File

@ -30,17 +30,7 @@ export default {
},
refreshView() {
// In order to make the cached page re-rendered
const visitedViews = [...this.$store.getters.visitedViews].map(i => {
i.meta.noCache = true
return i
})
this.$store.dispatch('delAllViews', this.$route).then(() => {
console.log(visitedViews)
for (const i of visitedViews) {
this.$store.dispatch('addVisitedViews', i)
}
})
this.$store.dispatch('delAllCachedViews', this.$route)
const { path } = this.$route

View File

@ -264,7 +264,7 @@ export const asyncRouterMap = [
{
path: 'export-selected-excel',
component: () => import('@/views/excel/selectExcel'),
name: 'EelectExcel',
name: 'SelectExcel',
meta: { title: 'selectExcel' }
},
{

View File

@ -4,24 +4,31 @@ const tagsView = {
cachedViews: []
},
mutations: {
ADD_VISITED_VIEWS: (state, view) => {
ADD_VISITED_VIEW: (state, view) => {
if (state.visitedViews.some(v => v.path === view.path)) return
state.visitedViews.push(
Object.assign({}, view, {
title: view.meta.title || 'no-name'
})
)
},
ADD_CACHED_VIEW: (state, view) => {
if (state.cachedViews.includes(view.name)) return
if (!view.meta.noCache) {
state.cachedViews.push(view.name)
}
},
DEL_VISITED_VIEWS: (state, view) => {
DEL_VISITED_VIEW: (state, view) => {
for (const [i, v] of state.visitedViews.entries()) {
if (v.path === view.path) {
state.visitedViews.splice(i, 1)
console.log('1')
break
}
}
},
DEL_CACHED_VIEW: (state, view) => {
for (const i of state.cachedViews) {
if (i === view.name) {
const index = state.cachedViews.indexOf(i)
@ -30,13 +37,16 @@ const tagsView = {
}
}
},
DEL_OTHERS_VIEWS: (state, view) => {
DEL_OTHERS_VISITED_VIEWS: (state, view) => {
for (const [i, v] of state.visitedViews.entries()) {
if (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) {
if (i === view.name) {
const index = state.cachedViews.indexOf(i)
@ -45,32 +55,94 @@ const tagsView = {
}
}
},
DEL_ALL_VIEWS: state => {
DEL_ALL_VISITED_VIEWS: state => {
state.visitedViews = []
},
DEL_ALL_CACHED_VIEWS: state => {
state.cachedViews = []
}
},
actions: {
addVisitedViews({ commit }, view) {
commit('ADD_VISITED_VIEWS', view)
addView({ dispatch }, view) {
dispatch('addVisitedView', view)
dispatch('addCachedView', view)
},
delVisitedViews({ commit, state }, view) {
addVisitedView({ commit }, view) {
commit('ADD_VISITED_VIEW', view)
},
addCachedView({ commit }, view) {
commit('ADD_CACHED_VIEW', view)
},
delView({ dispatch, state }, view) {
return new Promise(resolve => {
commit('DEL_VISITED_VIEWS', view)
dispatch('delVisitedView', view)
dispatch('delCachedView', view)
resolve({
visitedViews: [...state.visitedViews],
cachedViews: [...state.cachedViews]
})
})
},
delVisitedView({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_VISITED_VIEW', view)
resolve([...state.visitedViews])
})
},
delOthersViews({ commit, state }, view) {
delCachedView({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_OTHERS_VIEWS', view)
commit('DEL_CACHED_VIEW', view)
resolve([...state.cachedViews])
})
},
delOthersViews({ dispatch, state }, view) {
return new Promise(resolve => {
dispatch('delOthersVisitedViews', view)
dispatch('delOthersCachedViews', view)
resolve({
visitedViews: [...state.visitedViews],
cachedViews: [...state.cachedViews]
})
})
},
delOthersVisitedViews({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_OTHERS_VISITED_VIEWS', view)
resolve([...state.visitedViews])
})
},
delAllViews({ commit, state }) {
delOthersCachedViews({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_ALL_VIEWS')
commit('DEL_OTHERS_CACHED_VIEWS', view)
resolve([...state.cachedViews])
})
},
delAllViews({ dispatch, state }, view) {
return new Promise(resolve => {
dispatch('delAllVisitedViews', view)
dispatch('delAllCachedViews', view)
resolve({
visitedViews: [...state.visitedViews],
cachedViews: [...state.cachedViews]
})
})
},
delAllVisitedViews({ commit, state }) {
return new Promise(resolve => {
commit('DEL_ALL_VISITED_VIEWS')
resolve([...state.visitedViews])
})
},
delAllCachedViews({ commit, state }) {
return new Promise(resolve => {
commit('DEL_ALL_CACHED_VIEWS')
resolve([...state.cachedViews])
})
}
}
}

View File

@ -72,7 +72,7 @@ export default {
if (!route) {
return false
}
this.$store.dispatch('addVisitedViews', route)
this.$store.dispatch('addView', route)
},
moveToCurrentTag() {
const tags = this.$refs.tag
@ -86,9 +86,9 @@ export default {
})
},
closeSelectedTag(view) {
this.$store.dispatch('delVisitedViews', view).then((views) => {
this.$store.dispatch('delView', view).then(({ visitedViews }) => {
if (this.isActive(view)) {
const latestView = views.slice(-1)[0]
const latestView = visitedViews.slice(-1)[0]
if (latestView) {
this.$router.push(latestView)
} else {
@ -123,11 +123,12 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped>
.tags-view-container {
height: 34px;
width: 100%;
background: #fff;
border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
.tags-view-wrapper {
background: #fff;
height: 34px;
border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
.tags-view-item {
display: inline-block;
position: relative;
@ -143,6 +144,9 @@ export default {
&:first-of-type {
margin-left: 15px;
}
&:last-of-type {
margin-right: 15px;
}
&.active {
background-color: #42b983;
color: #fff;