|
@@ -1,24 +1,24 @@
|
|
<template>
|
|
<template>
|
|
<div class="router-history">
|
|
<div class="router-history">
|
|
<el-tabs
|
|
<el-tabs
|
|
- :closable="!(historys.length==1&&this.$route.name==defaultRouter)"
|
|
|
|
|
|
+ v-model="activeValue"
|
|
|
|
+ :closable="!(historys.length===1&&this.$route.name===defaultRouter)"
|
|
|
|
+ type="card"
|
|
@contextmenu.prevent.native="openContextMenu($event)"
|
|
@contextmenu.prevent.native="openContextMenu($event)"
|
|
@tab-click="changeTab"
|
|
@tab-click="changeTab"
|
|
@tab-remove="removeTab"
|
|
@tab-remove="removeTab"
|
|
- type="card"
|
|
|
|
- v-model="activeValue"
|
|
|
|
>
|
|
>
|
|
<el-tab-pane
|
|
<el-tab-pane
|
|
|
|
+ v-for="item in historys"
|
|
:key="item.name + JSON.stringify(item.query)+JSON.stringify(item.params)"
|
|
:key="item.name + JSON.stringify(item.query)+JSON.stringify(item.params)"
|
|
:label="item.meta.title"
|
|
:label="item.meta.title"
|
|
:name="item.name + JSON.stringify(item.query)+JSON.stringify(item.params)"
|
|
:name="item.name + JSON.stringify(item.query)+JSON.stringify(item.params)"
|
|
:tab="item"
|
|
:tab="item"
|
|
- v-for="item in historys"
|
|
|
|
- ></el-tab-pane>
|
|
|
|
|
|
+ />
|
|
</el-tabs>
|
|
</el-tabs>
|
|
|
|
|
|
<!--自定义右键菜单html代码-->
|
|
<!--自定义右键菜单html代码-->
|
|
- <ul :style="{left:left+'px',top:top+'px'}" class="contextmenu" v-show="contextMenuVisible">
|
|
|
|
|
|
+ <ul v-show="contextMenuVisible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
|
|
<li @click="closeAll">关闭所有</li>
|
|
<li @click="closeAll">关闭所有</li>
|
|
<li @click="closeLeft">关闭左侧</li>
|
|
<li @click="closeLeft">关闭左侧</li>
|
|
<li @click="closeRight">关闭右侧</li>
|
|
<li @click="closeRight">关闭右侧</li>
|
|
@@ -26,84 +26,107 @@
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
+
|
|
<script>
|
|
<script>
|
|
-import { mapGetters } from "vuex";
|
|
|
|
- const getFmtString = (item)=>{
|
|
|
|
- return item.name +
|
|
|
|
- JSON.stringify(item.query) +
|
|
|
|
- JSON.stringify(item.params)
|
|
|
|
- }
|
|
|
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
|
+const getFmtString = (item) => {
|
|
|
|
+ return item.name +
|
|
|
|
+ JSON.stringify(item.query) +
|
|
|
|
+ JSON.stringify(item.params)
|
|
|
|
+}
|
|
export default {
|
|
export default {
|
|
- name: "HistoryComponent",
|
|
|
|
|
|
+ name: 'HistoryComponent',
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
historys: [],
|
|
historys: [],
|
|
- activeValue: "",
|
|
|
|
|
|
+ activeValue: '',
|
|
contextMenuVisible: false,
|
|
contextMenuVisible: false,
|
|
left: 0,
|
|
left: 0,
|
|
top: 0,
|
|
top: 0,
|
|
isCollapse: false,
|
|
isCollapse: false,
|
|
isMobile: false,
|
|
isMobile: false,
|
|
- rightActive: ""
|
|
|
|
- };
|
|
|
|
|
|
+ rightActive: ''
|
|
|
|
+ }
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
- ...mapGetters("user", ["userInfo"]),
|
|
|
|
|
|
+ ...mapGetters('user', ['userInfo']),
|
|
defaultRouter() {
|
|
defaultRouter() {
|
|
- return this.userInfo.authority.defaultRouter;
|
|
|
|
|
|
+ return this.userInfo.authority.defaultRouter
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ contextMenuVisible() {
|
|
|
|
+ if (this.contextMenuVisible) {
|
|
|
|
+ document.body.addEventListener('click', () => {
|
|
|
|
+ this.contextMenuVisible = false
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ document.body.removeEventListener('click', () => {
|
|
|
|
+ this.contextMenuVisible = false
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ $route(to, now) {
|
|
|
|
+ this.historys = this.historys.filter(item => !item.meta.closeTab)
|
|
|
|
+ this.setTab(to)
|
|
|
|
+ sessionStorage.setItem('historys', JSON.stringify(this.historys))
|
|
|
|
+ this.activeValue = window.sessionStorage.getItem('activeValue')
|
|
|
|
+ if (now && to && now.name === to.name) {
|
|
|
|
+ this.$bus.$emit('reload')
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
- this.$bus.on("mobile", isMobile => {
|
|
|
|
- this.isMobile = isMobile;
|
|
|
|
- });
|
|
|
|
- this.$bus.on("collapse", isCollapse => {
|
|
|
|
- this.isCollapse = isCollapse;
|
|
|
|
- });
|
|
|
|
|
|
+ this.$bus.on('mobile', isMobile => {
|
|
|
|
+ this.isMobile = isMobile
|
|
|
|
+ })
|
|
|
|
+ this.$bus.on('collapse', isCollapse => {
|
|
|
|
+ this.isCollapse = isCollapse
|
|
|
|
+ })
|
|
const initHistorys = [
|
|
const initHistorys = [
|
|
{
|
|
{
|
|
name: this.defaultRouter,
|
|
name: this.defaultRouter,
|
|
meta: {
|
|
meta: {
|
|
- title: "首页"
|
|
|
|
|
|
+ title: '首页'
|
|
},
|
|
},
|
|
query: {},
|
|
query: {},
|
|
params: {}
|
|
params: {}
|
|
}
|
|
}
|
|
- ];
|
|
|
|
|
|
+ ]
|
|
this.historys =
|
|
this.historys =
|
|
- JSON.parse(sessionStorage.getItem("historys")) || initHistorys;
|
|
|
|
- if(!window.sessionStorage.getItem("activeValue")){
|
|
|
|
- this.activeValue = getFmtString(this.$route)
|
|
|
|
- }else{
|
|
|
|
- this.activeValue = window.sessionStorage.getItem("activeValue");
|
|
|
|
- }
|
|
|
|
- this.setTab(this.$route);
|
|
|
|
|
|
+ JSON.parse(sessionStorage.getItem('historys')) || initHistorys
|
|
|
|
+ if (!window.sessionStorage.getItem('activeValue')) {
|
|
|
|
+ this.activeValue = getFmtString(this.$route)
|
|
|
|
+ } else {
|
|
|
|
+ this.activeValue = window.sessionStorage.getItem('activeValue')
|
|
|
|
+ }
|
|
|
|
+ this.setTab(this.$route)
|
|
},
|
|
},
|
|
|
|
|
|
beforeDestroy() {
|
|
beforeDestroy() {
|
|
- this.$bus.off("collapse");
|
|
|
|
- this.$bus.off("mobile");
|
|
|
|
|
|
+ this.$bus.off('collapse')
|
|
|
|
+ this.$bus.off('mobile')
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
-
|
|
|
|
|
|
+
|
|
openContextMenu(e) {
|
|
openContextMenu(e) {
|
|
- if (this.historys.length == 1 && this.$route.name == this.defaultRouter) {
|
|
|
|
- return false;
|
|
|
|
|
|
+ if (this.historys.length === 1 && this.$route.name === this.defaultRouter) {
|
|
|
|
+ return false
|
|
}
|
|
}
|
|
if (e.srcElement.id) {
|
|
if (e.srcElement.id) {
|
|
- this.contextMenuVisible = true;
|
|
|
|
- let width;
|
|
|
|
|
|
+ this.contextMenuVisible = true
|
|
|
|
+ let width
|
|
if (this.isCollapse) {
|
|
if (this.isCollapse) {
|
|
- width = 54;
|
|
|
|
|
|
+ width = 54
|
|
} else {
|
|
} else {
|
|
- width = 220;
|
|
|
|
|
|
+ width = 220
|
|
}
|
|
}
|
|
if (this.isMobile) {
|
|
if (this.isMobile) {
|
|
- width = 0;
|
|
|
|
|
|
+ width = 0
|
|
}
|
|
}
|
|
- this.left = e.clientX - width;
|
|
|
|
- this.top = e.clientY + 10;
|
|
|
|
- this.rightActive = e.srcElement.id.split("-")[1];
|
|
|
|
|
|
+ this.left = e.clientX - width
|
|
|
|
+ this.top = e.clientY + 10
|
|
|
|
+ this.rightActive = e.srcElement.id.split('-')[1]
|
|
}
|
|
}
|
|
},
|
|
},
|
|
closeAll() {
|
|
closeAll() {
|
|
@@ -111,155 +134,134 @@ export default {
|
|
{
|
|
{
|
|
name: this.defaultRouter,
|
|
name: this.defaultRouter,
|
|
meta: {
|
|
meta: {
|
|
- title: "首页"
|
|
|
|
|
|
+ title: '首页'
|
|
},
|
|
},
|
|
query: {},
|
|
query: {},
|
|
params: {}
|
|
params: {}
|
|
}
|
|
}
|
|
- ];
|
|
|
|
- this.$router.push({ name: this.defaultRouter });
|
|
|
|
- this.contextMenuVisible = false;
|
|
|
|
- sessionStorage.setItem("historys", JSON.stringify(this.historys));
|
|
|
|
|
|
+ ]
|
|
|
|
+ this.$router.push({ name: this.defaultRouter })
|
|
|
|
+ this.contextMenuVisible = false
|
|
|
|
+ sessionStorage.setItem('historys', JSON.stringify(this.historys))
|
|
},
|
|
},
|
|
closeLeft() {
|
|
closeLeft() {
|
|
- let right;
|
|
|
|
|
|
+ let right
|
|
const rightIndex = this.historys.findIndex(item => {
|
|
const rightIndex = this.historys.findIndex(item => {
|
|
- if (getFmtString(item) == this.rightActive) {
|
|
|
|
- right = item;
|
|
|
|
|
|
+ if (getFmtString(item) === this.rightActive) {
|
|
|
|
+ right = item
|
|
}
|
|
}
|
|
return (
|
|
return (
|
|
- getFmtString(item) == this.rightActive
|
|
|
|
- );
|
|
|
|
- });
|
|
|
|
|
|
+ getFmtString(item) === this.rightActive
|
|
|
|
+ )
|
|
|
|
+ })
|
|
const activeIndex = this.historys.findIndex(
|
|
const activeIndex = this.historys.findIndex(
|
|
- item => getFmtString(item) == this.activeValue
|
|
|
|
- );
|
|
|
|
- this.historys.splice(0, rightIndex);
|
|
|
|
|
|
+ item => getFmtString(item) === this.activeValue
|
|
|
|
+ )
|
|
|
|
+ this.historys.splice(0, rightIndex)
|
|
if (rightIndex > activeIndex) {
|
|
if (rightIndex > activeIndex) {
|
|
- this.$router.push(right);
|
|
|
|
|
|
+ this.$router.push(right)
|
|
}
|
|
}
|
|
- sessionStorage.setItem("historys", JSON.stringify(this.historys));
|
|
|
|
|
|
+ sessionStorage.setItem('historys', JSON.stringify(this.historys))
|
|
},
|
|
},
|
|
closeRight() {
|
|
closeRight() {
|
|
- let right;
|
|
|
|
|
|
+ let right
|
|
const leftIndex = this.historys.findIndex(item => {
|
|
const leftIndex = this.historys.findIndex(item => {
|
|
- if ( getFmtString(item) == this.rightActive ) {
|
|
|
|
- right = item;
|
|
|
|
|
|
+ if (getFmtString(item) === this.rightActive) {
|
|
|
|
+ right = item
|
|
}
|
|
}
|
|
- return ( getFmtString(item) == this.rightActive );
|
|
|
|
- });
|
|
|
|
|
|
+ return (getFmtString(item) === this.rightActive)
|
|
|
|
+ })
|
|
const activeIndex = this.historys.findIndex(
|
|
const activeIndex = this.historys.findIndex(
|
|
- item => getFmtString(item) == this.activeValue
|
|
|
|
- );
|
|
|
|
- this.historys.splice(leftIndex + 1, this.historys.length);
|
|
|
|
|
|
+ item => getFmtString(item) === this.activeValue
|
|
|
|
+ )
|
|
|
|
+ this.historys.splice(leftIndex + 1, this.historys.length)
|
|
if (leftIndex < activeIndex) {
|
|
if (leftIndex < activeIndex) {
|
|
- this.$router.push(right);
|
|
|
|
|
|
+ this.$router.push(right)
|
|
}
|
|
}
|
|
- sessionStorage.setItem("historys", JSON.stringify(this.historys));
|
|
|
|
|
|
+ sessionStorage.setItem('historys', JSON.stringify(this.historys))
|
|
},
|
|
},
|
|
closeOther() {
|
|
closeOther() {
|
|
- let right;
|
|
|
|
|
|
+ let right
|
|
this.historys = this.historys.filter(item => {
|
|
this.historys = this.historys.filter(item => {
|
|
- if ( getFmtString(item) == this.rightActive
|
|
|
|
|
|
+ if (getFmtString(item) === this.rightActive
|
|
) {
|
|
) {
|
|
- right = item;
|
|
|
|
|
|
+ right = item
|
|
}
|
|
}
|
|
- return ( getFmtString(item) == this.rightActive
|
|
|
|
- );
|
|
|
|
- });
|
|
|
|
- this.$router.push(right);
|
|
|
|
- sessionStorage.setItem("historys", JSON.stringify(this.historys));
|
|
|
|
|
|
+ return (getFmtString(item) === this.rightActive
|
|
|
|
+ )
|
|
|
|
+ })
|
|
|
|
+ this.$router.push(right)
|
|
|
|
+ sessionStorage.setItem('historys', JSON.stringify(this.historys))
|
|
},
|
|
},
|
|
isSame(route1, route2) {
|
|
isSame(route1, route2) {
|
|
- if (route1.name != route2.name) {
|
|
|
|
- return false;
|
|
|
|
|
|
+ if (route1.name !== route2.name) {
|
|
|
|
+ return false
|
|
}
|
|
}
|
|
- for (let key in route1.query) {
|
|
|
|
- if (route1.query[key] != route2.query[key]) {
|
|
|
|
- return false;
|
|
|
|
|
|
+ for (const key in route1.query) {
|
|
|
|
+ if (route1.query[key] !== route2.query[key]) {
|
|
|
|
+ return false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- for (let key in route1.params) {
|
|
|
|
- if (route1.params[key] != route2.params[key]) {
|
|
|
|
- return false;
|
|
|
|
|
|
+ for (const key in route1.params) {
|
|
|
|
+ if (route1.params[key] !== route2.params[key]) {
|
|
|
|
+ return false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- return true;
|
|
|
|
|
|
+ return true
|
|
},
|
|
},
|
|
setTab(route) {
|
|
setTab(route) {
|
|
if (!this.historys.some(item => this.isSame(item, route))) {
|
|
if (!this.historys.some(item => this.isSame(item, route))) {
|
|
- const obj = {};
|
|
|
|
- obj.name = route.name;
|
|
|
|
- obj.meta = route.meta;
|
|
|
|
- obj.query = route.query;
|
|
|
|
- obj.params = route.params;
|
|
|
|
- this.historys.push(obj);
|
|
|
|
|
|
+ const obj = {}
|
|
|
|
+ obj.name = route.name
|
|
|
|
+ obj.meta = route.meta
|
|
|
|
+ obj.query = route.query
|
|
|
|
+ obj.params = route.params
|
|
|
|
+ this.historys.push(obj)
|
|
}
|
|
}
|
|
window.sessionStorage.setItem(
|
|
window.sessionStorage.setItem(
|
|
- "activeValue",
|
|
|
|
|
|
+ 'activeValue',
|
|
getFmtString(this.$route)
|
|
getFmtString(this.$route)
|
|
- );
|
|
|
|
|
|
+ )
|
|
},
|
|
},
|
|
changeTab(component) {
|
|
changeTab(component) {
|
|
- const tab = component.$attrs.tab;
|
|
|
|
|
|
+ const tab = component.$attrs.tab
|
|
this.$router.push({
|
|
this.$router.push({
|
|
name: tab.name,
|
|
name: tab.name,
|
|
query: tab.query,
|
|
query: tab.query,
|
|
params: tab.params
|
|
params: tab.params
|
|
- });
|
|
|
|
|
|
+ })
|
|
},
|
|
},
|
|
removeTab(tab) {
|
|
removeTab(tab) {
|
|
const index = this.historys.findIndex(
|
|
const index = this.historys.findIndex(
|
|
- item => getFmtString(item) == tab
|
|
|
|
- );
|
|
|
|
|
|
+ item => getFmtString(item) === tab
|
|
|
|
+ )
|
|
if (
|
|
if (
|
|
- getFmtString(this.$route) == tab
|
|
|
|
|
|
+ getFmtString(this.$route) === tab
|
|
) {
|
|
) {
|
|
- if (this.historys.length == 1) {
|
|
|
|
- this.$router.push({ name: this.defaultRouter });
|
|
|
|
|
|
+ if (this.historys.length === 1) {
|
|
|
|
+ this.$router.push({ name: this.defaultRouter })
|
|
} else {
|
|
} else {
|
|
if (index < this.historys.length - 1) {
|
|
if (index < this.historys.length - 1) {
|
|
this.$router.push({
|
|
this.$router.push({
|
|
name: this.historys[index + 1].name,
|
|
name: this.historys[index + 1].name,
|
|
query: this.historys[index + 1].query,
|
|
query: this.historys[index + 1].query,
|
|
params: this.historys[index + 1].params
|
|
params: this.historys[index + 1].params
|
|
- });
|
|
|
|
|
|
+ })
|
|
} else {
|
|
} else {
|
|
this.$router.push({
|
|
this.$router.push({
|
|
name: this.historys[index - 1].name,
|
|
name: this.historys[index - 1].name,
|
|
query: this.historys[index - 1].query,
|
|
query: this.historys[index - 1].query,
|
|
params: this.historys[index - 1].params
|
|
params: this.historys[index - 1].params
|
|
- });
|
|
|
|
|
|
+ })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- 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;
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- $route(to, now) {
|
|
|
|
- this.historys = this.historys.filter(item => !item.meta.closeTab);
|
|
|
|
- this.setTab(to);
|
|
|
|
- sessionStorage.setItem("historys", JSON.stringify(this.historys));
|
|
|
|
- this.activeValue = window.sessionStorage.getItem("activeValue");
|
|
|
|
- if (now && to && now.name == to.name) {
|
|
|
|
- this.$bus.$emit("reload");
|
|
|
|
- }
|
|
|
|
|
|
+ this.historys.splice(index, 1)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-};
|
|
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
+
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
.contextmenu {
|
|
.contextmenu {
|
|
width: 100px;
|
|
width: 100px;
|
|
@@ -283,4 +285,4 @@ export default {
|
|
background: #f2f2f2;
|
|
background: #f2f2f2;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
-</style>
|
|
|
|
|
|
+</style>
|