Commit a439a912 by gyy

代码初次提交-G

parent 8ab9a33e
...@@ -19,6 +19,7 @@ a, a:hover, a:focus, a:visited ...@@ -19,6 +19,7 @@ a, a:hover, a:focus, a:visited
text-decoration:none; text-decoration:none;
} }
a:-webkit-any-link { a:-webkit-any-link {
color: #3A3A3A;
cursor:pointer; cursor:pointer;
text-decoration: none; text-decoration: none;
} }
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="dl-title">管理系统</div> <div class="dl-title">管理系统</div>
<div class="dl-log">欢迎您,admin[退出]</div> <div class="dl-log">欢迎您,admin[退出]</div>
</div> </div>
<div class="nav_tab y_flex_start"> <div class="nav_tab y_bottom_start">
<div v-for="(item, index) in tab" :class="{'nav_item': true, 'nav_active': tabNow === index}" @click="switchTab(index)"> <div v-for="(item, index) in tab" :class="{'nav_item': true, 'nav_active': tabNow === index}" @click="switchTab(index)">
{{item}} {{item}}
</div> </div>
...@@ -24,7 +24,18 @@ ...@@ -24,7 +24,18 @@
</div> </div>
<div class="main_right"> <div class="main_right">
<div class="crumbs"> <div class="crumbs">
<span class="crumbs_list" v-for="(item, index) in Array.from(visitedViews)">{{item.name}}</span> <div class="y_flex_start">
<div class="crumbs_list" v-for="(item, index) in Array.from(visitedViews)" :class="isActive(item)?'crumbs_active':''" @contextmenu.prevent="openMenu(item,$event)">
<router-link :to="item.path">{{item.name}}</router-link>
<span class="crumbs_close" @click="closeSelectedTag(item)">×</span>
</div>
</div>
<ul v-show="visible" :style="{left:left+'px'}" class="contextmenu">
<li>刷新</li>
<li @click="closeSelectedTag(selectedTag)">关闭</li>
<li @click="closeOthersTags">关闭其他</li>
<li @click="closeAllTags">关闭所有</li>
</ul>
</div> </div>
<nuxt class="content"/> <nuxt class="content"/>
</div> </div>
...@@ -43,7 +54,10 @@ export default { ...@@ -43,7 +54,10 @@ export default {
orderList: [], orderList: [],
lapsList: [], lapsList: [],
financeList: [], financeList: [],
clientHeight: 0 clientHeight: 0,
visible: false,
left: 0,
selectedTag: {}
} }
}, },
computed: { computed: {
...@@ -63,6 +77,13 @@ export default { ...@@ -63,6 +77,13 @@ export default {
watch: { watch: {
$route() { $route() {
this.addViewTags() this.addViewTags()
},
visible(value) {
if (value) {
document.body.addEventListener('click', this.closeMenu)
} else {
document.body.removeEventListener('click', this.closeMenu)
}
} }
}, },
methods: { methods: {
...@@ -72,6 +93,7 @@ export default { ...@@ -72,6 +93,7 @@ export default {
} }
return false return false
}, },
// 向tag中添加打开的页面名称
addViewTags() { addViewTags() {
const route = this.generateRoute() const route = this.generateRoute()
if (!route) { if (!route) {
...@@ -88,6 +110,84 @@ export default { ...@@ -88,6 +110,84 @@ export default {
this.$store.dispatch('fAddVisitedViews', route) this.$store.dispatch('fAddVisitedViews', route)
} }
}, },
// 判断是否为当前页面
isActive(route) {
return route.path === this.$route.path
},
// 关闭当前tag中的页面
closeSelectedTag(view) {
let delVisitedViews
if (this.tabNow === 0) {
delVisitedViews = 'sDelVisitedViews'
} else if (this.tabNow === 1) {
delVisitedViews = 'gDelVisitedViews'
} else if (this.tabNow === 2) {
delVisitedViews = 'oDelVisitedViews'
} else {
delVisitedViews = 'fDelVisitedViews'
}
this.$store.dispatch(delVisitedViews, view).then((views) => {
if (this.isActive(view)) {
const latestView = views.slice(-1)[0]
if (latestView) {
this.$router.push(latestView)
} else {
this.$router.push('/')
}
}
})
},
// 右键打开
openMenu(tag, e) {
this.visible = true
this.selectedTag = tag
let clientWidth = document.documentElement.clientWidth * 0.1
this.left = e.clientX - clientWidth + 40 // 15: margin right
},
// 关闭其他
closeOthersTags() {
this.$router.push(this.selectedTag)
let delOthersViews
if (this.tabNow === 0) {
delOthersViews = 'sDelOthersViews'
} else if (this.tabNow === 1) {
delOthersViews = 'gDelOthersViews'
} else if (this.tabNow === 2) {
delOthersViews = 'oDelOthersViews'
} else {
delOthersViews = 'fDelOthersViews'
}
this.$store.dispatch(delOthersViews, this.selectedTag)
},
moveToCurrentTag() {
const tags = this.$refs.tag
this.$nextTick(() => {
for (const tag of tags) {
if (tag.to.path === this.$route.path) {
this.$refs.scrollPane.moveToTarget(tag.$el)
break
}
}
})
},
// 关闭所有
closeAllTags() {
let delAllViews
if (this.tabNow === 0) {
delAllViews = 'sDelAllViews'
} else if (this.tabNow === 1) {
delAllViews = 'gDelAllViews'
} else if (this.tabNow === 2) {
delAllViews = 'oDelAllViews'
} else {
delAllViews = 'fDelAllViews'
}
this.$store.dispatch(delAllViews)
this.$router.push('/')
},
closeMenu() {
this.visible = false
},
// 获取列表数据 // 获取列表数据
getOrderCtg() { getOrderCtg() {
let order = [] let order = []
...@@ -154,22 +254,41 @@ export default { ...@@ -154,22 +254,41 @@ export default {
} }
}, },
switchTab(e) { switchTab(e) {
if (this.tabNow === 0) {
YCookie.setLocalCookie('firstPath', this.$route.path)
} else if (this.tabNow === 1) {
YCookie.setLocalCookie('secondPath', this.$route.path)
} else if (this.tabNow === 2) {
YCookie.setLocalCookie('threePath', this.$route.path)
} else if (this.tabNow === 3) {
YCookie.setLocalCookie('fourthPath', this.$route.path)
}
this.tabNow = e this.tabNow = e
YCookie.setLocalCookie('tabNow', this.tabNow) YCookie.setLocalCookie('tabNow', this.tabNow)
this.orderList = [] this.orderList = []
this.lapsList = [] this.lapsList = []
this.financeList = [] this.financeList = []
this.getOrderCtg() this.getOrderCtg()
let nowPath
if (e === 0) {
nowPath = YCookie.readLocalCookie('firstPath')
} else if (e === 1) {
nowPath = YCookie.readLocalCookie('secondPath')
} else if (e === 2) {
nowPath = YCookie.readLocalCookie('threePath')
} else if (e === 3) {
nowPath = YCookie.readLocalCookie('fourthPath')
}
this.$router.push({ this.$router.push({
path: '/' path: nowPath
}) })
// console.log(this.$store.state.tagsView.visitedViews) // console.log(this.visitedViews)
}, },
entriesClick(item) { entriesClick(item) {
this.$router.push({ this.$router.push({
path: item.pagePath path: item.pagePath
}) })
// console.log(this.$store.state.tagsView.visitedViews) console.log(this.visitedViews)
}, },
// 获取窗口可视范围的高度 // 获取窗口可视范围的高度
getClientHeight() { getClientHeight() {
...@@ -259,8 +378,13 @@ export default { ...@@ -259,8 +378,13 @@ export default {
font-size: 14px; font-size: 14px;
position: relative; position: relative;
width: 130px; width: 130px;
padding-left: 8px; margin-left: 8px;
cursor: pointer; cursor: pointer;
height: 30px;
line-height: 30px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
} }
.nav_active{ .nav_active{
background: #E8E9EE; background: #E8E9EE;
...@@ -279,13 +403,33 @@ export default { ...@@ -279,13 +403,33 @@ export default {
background: #E8E9EE; background: #E8E9EE;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
overflow: hidden;
height: 21px; height: 21px;
position: relative;
padding: 5px 23px;
} }
.crumbs_list{ .crumbs_list{
border: 1px solid #fff; background: #FFFFFF;
border: 1px solid #d8dce5;
color: #495060;
font-size: 12px;
height: 21px;
line-height: 21px;
padding: 0 8px;
margin-right: 15px; margin-right: 15px;
} }
.crumbs_active{
border: 1px solid #DBE1EC;
background: #409eff;
}
.crumbs_active a{
color: #FFFFFF;
}
.crumbs_close{
margin-left: 10px;
}
.crumbs_active .crumbs_close{
color: #FFFFFF;
}
.orderCtg_txt{ .orderCtg_txt{
} }
...@@ -302,13 +446,35 @@ export default { ...@@ -302,13 +446,35 @@ export default {
position: relative; position: relative;
min-height: ; min-height: ;
} }
.contextmenu {
margin: 0;
background: #fff;
z-index: 100;
position: absolute;
top: 20px;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
}
.contextmenu li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
}
.contextmenu li:hover {
background: #eee;
}
.content{ .content{
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid #000; border-top: 1px solid #000;
border-left: 1px solid #000; border-left: 1px solid #000;
position: absolute; position: absolute;
top: 21px; top: 31px;
bottom: 0px; bottom: 0px;
right: 0px; right: 0px;
} }
......
...@@ -6,7 +6,7 @@ const financalTags = { ...@@ -6,7 +6,7 @@ const financalTags = {
mutations: { mutations: {
F_ADD_VISITED_VIEWS: (state, view) => { F_ADD_VISITED_VIEWS: (state, view) => {
if (state.fVisitedViews.some(v => v.path === view.path)) return if (state.fVisitedViews.some(v => v.path === view.path)) return
// if (view.path === '/') return if (view.path === '/') return
state.fVisitedViews.push( state.fVisitedViews.push(
Object.assign({}, view, { Object.assign({}, view, {
title: view.meta.title || 'no-name' title: view.meta.title || 'no-name'
......
...@@ -6,7 +6,7 @@ const goodsTags = { ...@@ -6,7 +6,7 @@ const goodsTags = {
mutations: { mutations: {
G_ADD_VISITED_VIEWS: (state, view) => { G_ADD_VISITED_VIEWS: (state, view) => {
if (state.gVisitedViews.some(v => v.path === view.path)) return if (state.gVisitedViews.some(v => v.path === view.path)) return
// if (view.path === '/') return if (view.path === '/') return
state.gVisitedViews.push( state.gVisitedViews.push(
Object.assign({}, view, { Object.assign({}, view, {
title: view.meta.title || 'no-name' title: view.meta.title || 'no-name'
......
...@@ -6,7 +6,7 @@ const systemTags = { ...@@ -6,7 +6,7 @@ const systemTags = {
mutations: { mutations: {
S_ADD_VISITED_VIEWS: (state, view) => { S_ADD_VISITED_VIEWS: (state, view) => {
if (state.sVisitedViews.some(v => v.path === view.path)) return if (state.sVisitedViews.some(v => v.path === view.path)) return
// if (view.path === '/') return if (view.path === '/') return
state.sVisitedViews.push( state.sVisitedViews.push(
Object.assign({}, view, { Object.assign({}, view, {
title: view.meta.title || 'no-name' title: view.meta.title || 'no-name'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment