Browse Source
Merge remote-tracking branch 'origin/gin-vue-admin_v2_dev' into gin-vue-admin_v2_dev
main
Merge remote-tracking branch 'origin/gin-vue-admin_v2_dev' into gin-vue-admin_v2_dev
main
QM303176530
5 years ago
7 changed files with 275 additions and 71 deletions
-
10server/resource/template/fe/table.vue.tpl
-
8web/package-lock.json
-
0web/src/view/about/index.vue
-
78web/src/view/iconList/index.vue
-
243web/src/view/layout/aside/historyComponent/history.vue
-
3web/src/view/layout/index.vue
-
4web/src/view/superAdmin/menu/menu.vue
@ -1,76 +1,195 @@ |
|||
<template> |
|||
<div class="router-history"> |
|||
<el-tabs v-model="activeValue" type="card" :closable="!(historys.length==1&&this.$route.name=='dashboard')" @tab-click="changeTab" @tab-remove="removeTab"> |
|||
<el-tab-pane |
|||
v-for="item in historys" |
|||
:key="item.name" |
|||
:label="item.meta.title" |
|||
:name="item.name" |
|||
> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
<div class="router-history"> |
|||
<el-tabs |
|||
:closable="!(historys.length==1&&this.$route.name=='dashboard')" |
|||
@contextmenu.prevent.native="openContextMenu($event)" |
|||
@tab-click="changeTab" |
|||
@tab-remove="removeTab" |
|||
type="card" |
|||
v-model="activeValue" |
|||
> |
|||
<el-tab-pane |
|||
:key="item.name" |
|||
:label="item.meta.title" |
|||
:name="item.name" |
|||
v-for="item in historys" |
|||
></el-tab-pane> |
|||
</el-tabs> |
|||
|
|||
<!--自定义右键菜单html代码--> |
|||
<ul :style="{left:left+'px',top:top+'px'}" class="contextmenu" v-show="contextMenuVisible"> |
|||
<li @click="closeAll">关闭所有</li> |
|||
<li @click="closeLeft">关闭左边</li> |
|||
<li @click="closeRight">关闭右边</li> |
|||
<li @click="closeOther">关闭其他</li> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name:"HistoryComponent", |
|||
data(){ |
|||
return{ |
|||
historys:[], |
|||
activeValue:"dashboard" |
|||
name: 'HistoryComponent', |
|||
data() { |
|||
return { |
|||
historys: [], |
|||
activeValue: 'dashboard', |
|||
contextMenuVisible: false, |
|||
left: 0, |
|||
top: 0, |
|||
isCollapse: false, |
|||
rightActive: '' |
|||
} |
|||
}, |
|||
created() { |
|||
const initHistorys = [ |
|||
{ |
|||
name: 'dashboard', |
|||
meta: { |
|||
title: '仪表盘' |
|||
} |
|||
} |
|||
] |
|||
this.historys = |
|||
JSON.parse(sessionStorage.getItem('historys')) || initHistorys |
|||
this.setTab(this.$route) |
|||
}, |
|||
mounted() { |
|||
this.$bus.on('totalCollapse', () => { |
|||
this.isCollapse = !this.isCollapse |
|||
}) |
|||
}, |
|||
methods: { |
|||
openContextMenu(e) { |
|||
if (this.historys.length == 1 && this.$route.name == 'dashboard') { |
|||
return false |
|||
} |
|||
if (e.srcElement.id) { |
|||
this.contextMenuVisible = true |
|||
let width |
|||
if (this.isCollapse) { |
|||
width = 60 |
|||
} else { |
|||
width = 220 |
|||
} |
|||
this.left = e.clientX - width |
|||
this.top = e.clientY + 10 |
|||
this.rightActive = e.srcElement.id.split('-')[1] |
|||
} |
|||
}, |
|||
closeAll() { |
|||
this.historys = [ |
|||
{ |
|||
name: 'dashboard', |
|||
meta: { |
|||
title: '仪表盘' |
|||
} |
|||
} |
|||
] |
|||
this.$router.push({ name: 'dashboard' }) |
|||
this.contextMenuVisible = false |
|||
sessionStorage.setItem('historys', JSON.stringify(this.historys)) |
|||
}, |
|||
closeLeft() { |
|||
const rightIndex = this.historys.findIndex( |
|||
item => item.name == this.rightActive |
|||
) |
|||
const activeIndex = this.historys.findIndex( |
|||
item => item.name == this.activeValue |
|||
) |
|||
this.historys.splice(0, rightIndex) |
|||
if (rightIndex > activeIndex) { |
|||
this.$router.push({ name: this.rightActive }) |
|||
} |
|||
sessionStorage.setItem('historys', JSON.stringify(this.historys)) |
|||
}, |
|||
closeRight() { |
|||
const leftIndex = this.historys.findIndex( |
|||
item => item.name == this.rightActive |
|||
) |
|||
const activeIndex = this.historys.findIndex( |
|||
item => item.name == this.activeValue |
|||
) |
|||
this.historys.splice(leftIndex, this.historys.length) |
|||
if (leftIndex < activeIndex) { |
|||
this.$router.push({ name: this.rightActive }) |
|||
} |
|||
sessionStorage.setItem('historys', JSON.stringify(this.historys)) |
|||
}, |
|||
created(){ |
|||
const initHistorys = [ |
|||
{ |
|||
name:"dashboard", |
|||
meta:{ |
|||
title:"仪表盘" |
|||
} |
|||
} |
|||
] |
|||
this.historys = JSON.parse(sessionStorage.getItem("historys")) || initHistorys |
|||
this.setTab(this.$route) |
|||
closeOther() { |
|||
this.historys = this.historys.filter( |
|||
item => item.name == this.rightActive |
|||
) |
|||
this.$router.push({ name: this.rightActive }) |
|||
sessionStorage.setItem('historys', JSON.stringify(this.historys)) |
|||
}, |
|||
methods:{ |
|||
setTab(route){ |
|||
if(!this.historys.some(item=>item.name==route.name)){ |
|||
const obj = {} |
|||
obj.name = route.name |
|||
obj.meta = route.meta |
|||
this.historys.push(obj) |
|||
} |
|||
this.activeValue = this.$route.name |
|||
}, |
|||
changeTab(tab){ |
|||
this.$router.push({name:tab.name}) |
|||
}, |
|||
removeTab(tab){ |
|||
const index = this.historys.findIndex(item=>item.name == tab) |
|||
if(this.$route.name == tab){ |
|||
if(this.historys.length==1){ |
|||
this.$router.push({name:"dashboard"}) |
|||
}else{ |
|||
if(index<this.historys.length-1){ |
|||
this.$router.push({name:this.historys[index+1].name}) |
|||
}else{ |
|||
this.$router.push({name:this.historys[index-1].name}) |
|||
} |
|||
} |
|||
} |
|||
this.historys.splice(index,1) |
|||
setTab(route) { |
|||
if (!this.historys.some(item => item.name == route.name)) { |
|||
const obj = {} |
|||
obj.name = route.name |
|||
obj.meta = route.meta |
|||
this.historys.push(obj) |
|||
} |
|||
this.activeValue = this.$route.name |
|||
}, |
|||
changeTab(tab) { |
|||
this.$router.push({ name: tab.name }) |
|||
}, |
|||
removeTab(tab) { |
|||
const index = this.historys.findIndex(item => item.name == tab) |
|||
if (this.$route.name == tab) { |
|||
if (this.historys.length == 1) { |
|||
this.$router.push({ name: 'dashboard' }) |
|||
} else { |
|||
if (index < this.historys.length - 1) { |
|||
this.$router.push({ name: this.historys[index + 1].name }) |
|||
} else { |
|||
this.$router.push({ name: this.historys[index - 1].name }) |
|||
} |
|||
} |
|||
} |
|||
this.historys.splice(index, 1) |
|||
} |
|||
}, |
|||
watch: { |
|||
contextMenuVisible() { |
|||
if (this.contextMenuVisible) { |
|||
document.body.addEventListener('click', () => { |
|||
this.contextMenuVisible = false |
|||
}) |
|||
} else { |
|||
document.body.removeEventListener('click', () => { |
|||
this.contextMenuVisible = false |
|||
}) |
|||
} |
|||
}, |
|||
watch:{ |
|||
$route( to ){ |
|||
this.historys = this.historys.filter(item=>!item.meta.hidden) |
|||
this.setTab(to) |
|||
sessionStorage.setItem("historys",JSON.stringify(this.historys)) |
|||
} |
|||
|
|||
$route(to) { |
|||
this.historys = this.historys.filter(item => !item.meta.hidden) |
|||
this.setTab(to) |
|||
sessionStorage.setItem('historys', JSON.stringify(this.historys)) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
|
|||
.contextmenu { |
|||
width: 100px; |
|||
margin: 0; |
|||
border: 1px solid #ccc; |
|||
background: #fff; |
|||
z-index: 3000; |
|||
position: absolute; |
|||
list-style-type: none; |
|||
padding: 5px 0; |
|||
border-radius: 4px; |
|||
font-size: 14px; |
|||
color: #333; |
|||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2); |
|||
} |
|||
.contextmenu li { |
|||
margin: 0; |
|||
padding: 7px 16px; |
|||
} |
|||
.contextmenu li:hover { |
|||
background: #f2f2f2; |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue