|
|
@@ -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>
|
QM303176530