mirroring/cool-admin-vue
1
0
Fork 0
mirror of https://github.com/cool-team-official/cool-admin-vue.git synced 2024-11-01 14:10:27 +08:00
Code Issues Projects Releases Wiki Activity

优化部门转移、路由导航组件

Browse Source
This commit is contained in:
icssoa 2021-03-15 14:36:26 +08:00
parent 1dc6b27e04
commit 1790897400
1 changed files with 48 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
src/cool/modules/base/components/process/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="app-process"> <div class="app-process">
<div class="app-process__left hidden-xs-only" @click="toLeft"> <div class="app-process__left hidden-xs-only" @click="toScroll(true)">
<i class="el-icon-arrow-left"></i> <i class="el-icon-arrow-left"></i>
</div> </div>
@ -11,11 +11,8 @@
:key="index" :key="index"
:class="{ active: item.active }" :class="{ active: item.active }"
:data-index="index" :data-index="index"
@mousedown=" @click="onTap(item)"
e => { @contextmenu.stop.prevent="openCM($event, item)"
onTap(e, item);
}
"
> >
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
@ -23,125 +20,89 @@
class="el-icon-close" class="el-icon-close"
v-if="index > 0" v-if="index > 0"
:class="{ active: index > 0 }" :class="{ active: index > 0 }"
@mousedown.stop="onDel(index)" @click.stop="onDel(index)"
></i> ></i>
</div> </div>
</div> </div>
<div class="app-process__right hidden-xs-only" @click="toRight"> <div class="app-process__right hidden-xs-only" @click="toScroll(false)">
<i class="el-icon-arrow-right"></i> <i class="el-icon-arrow-right"></i>
</div> </div>
<ul class="context-menu" v-show="menu.visible" :style="menu.style">
<li @click="onClose('current')" v-if="isHit">关闭当前</li>
<li @click="onClose('other')">关闭其他</li>
<li @click="onClose('all')">关闭所有</li>
</ul>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters, mapMutations } from "vuex"; import { mapGetters, mapMutations } from "vuex";
import { ContextMenu } from "cl-admin-crud";
import { last } from "cl-admin/utils";
export default { export default {
name: "cl-process", name: "cl-process",
data() {
return {
menu: {
visible: false,
current: {},
style: {
left: 0,
top: 0
}
},
isHit: false
};
},
computed: { computed: {
...mapGetters(["processList"]) ...mapGetters(["processList"])
}, },
mounted() {
this.$el.oncontextmenu = e => {
e.returnValue = false;
};
document.body.addEventListener("click", () => {
if (this.menu.visible) {
this.menu.visible = false;
}
});
},
methods: { methods: {
...mapMutations(["ADD_PROCESS", "DEL_PROCESS", "SET_PROCESS"]), ...mapMutations(["ADD_PROCESS", "DEL_PROCESS", "SET_PROCESS"]),
onTap(e, item) { onTap(item) {
this.isHit = item.active;
if (e.button == 0) {
this.$router.push(item.value); this.$router.push(item.value);
} else {
this.menu = {
current: item,
visible: true,
style: {
left: e.layerX + "px",
top: e.layerY + "px"
}
};
}
}, },
onDel(index) { onDel(index) {
this.DEL_PROCESS(index); this.DEL_PROCESS(index);
this.toPath(); this.toPath();
}, },
onClose(cmd) { openCM(e, item) {
const { current } = this.menu; ContextMenu.open(e, {
list: [
switch (cmd) { {
case "current": label: "关闭当前",
this.onDel(this.processList.findIndex(e => e.value == current.value)); hidden: this.$route.path !== item.value,
break; callback: (_, done) => {
this.onDel(this.processList.findIndex(e => e.value == item.value));
case "other": done();
this.SET_PROCESS(
this.processList.filter(e => e.value == current.value || e.value == "/")
);
break;
case "all":
this.SET_PROCESS(this.processList.filter(e => e.value == "/"));
break;
}
this.toPath(); this.toPath();
}
},
{
label: "关闭其他",
callback: (_, done) => {
this.SET_PROCESS(
this.processList.filter(
e => e.value == item.value || e.value == "/"
)
);
done();
this.toPath();
}
},
{
label: "关闭所有",
callback: (_, done) => {
this.SET_PROCESS(this.processList.filter(e => e.value == "/"));
done();
this.toPath();
}
}
]
});
}, },
toPath() { toPath() {
const active = this.processList.find(e => e.active); const active = this.processList.find(e => e.active);
if (!active) { if (!active) {
const next = this.processList[this.processList.length - 1]; const next = last(this.processList);
this.$router.push(next ? next.value : "/"); this.$router.push(next ? next.value : "/");
} }
}, },
toLeft() { toScroll(f) {
let scroller = this.$el.querySelector(".app-process__scroller"); const scroller = this.$el.querySelector(".app-process__scroller");
scroller.scrollTo(scroller.scrollLeft - 100, 0); scroller.scrollTo(scroller.scrollLeft + (f ? -100 : 100), 0);
},
toRight() {
let scroller = this.$el.querySelector(".app-process__scroller");
scroller.scrollTo(scroller.scrollLeft + 100, 0);
} }
} }
}; };
@ -219,7 +180,7 @@ export default {
&:hover { &:hover {
.el-icon-close { .el-icon-close {
width: auto; width: 14px;
margin-left: 5px; margin-left: 5px;
} }
} }
@ -239,29 +200,5 @@ export default {
} }
} }
} }
.context-menu {
margin: 0;
background: #fff;
z-index: 100;
position: absolute;
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, 0.3);
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
&:hover {
background: #eee;
}
}
}
} }
</style> </style>