<template>
|
<div class="avue-tags" v-if="showTag">
|
<!-- tag盒子 -->
|
<div
|
v-if="contextmenuFlag"
|
class="avue-tags__contentmenu"
|
:style="{ left: contentmenuX + 'px', top: contentmenuY + 'px' }"
|
>
|
<div class="item" @click="clearCacheTags">
|
{{ $t("tagsView.clearCache") }}
|
</div>
|
<div class="item" @click="closeOthersTags">
|
{{ $t("tagsView.closeOthers") }}
|
</div>
|
<div class="item" @click="closeAllTags">
|
{{ $t("tagsView.closeAll") }}
|
</div>
|
</div>
|
<div
|
class="avue-tags__box"
|
:class="{ 'avue-tags__box--close': !website.isFirstPage }"
|
>
|
<el-tabs
|
v-model="active"
|
type="card"
|
@contextmenu.native="handleContextmenu"
|
:closable="tagLen !== 1"
|
@tab-click="openTag"
|
@edit="menuTag"
|
>
|
<el-tab-pane
|
:key="item.value"
|
v-for="item in tagList"
|
:label="generateTitle(item)"
|
:name="item.value"
|
>
|
</el-tab-pane>
|
</el-tabs>
|
<el-dropdown class="avue-tags__menu">
|
<el-button type="primary" size="mini">
|
{{ $t("tagsView.menu") }}
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
</el-button>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item @click.native="$parent.isSearch = true">{{
|
$t("tagsView.search")
|
}}</el-dropdown-item>
|
<el-dropdown-item @click.native="closeOthersTags">{{
|
$t("tagsView.closeOthers")
|
}}</el-dropdown-item>
|
<el-dropdown-item @click.native="closeAllTags">{{
|
$t("tagsView.closeAll")
|
}}</el-dropdown-item>
|
<el-dropdown-item @click.native="clearCacheTags">{{
|
$t("tagsView.clearCache")
|
}}</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { mapGetters, mapState } from "vuex";
|
import { clearCache } from "@/api/user";
|
|
export default {
|
name: "tags",
|
data() {
|
return {
|
active: "",
|
contentmenuX: "",
|
contentmenuY: "",
|
contextmenuFlag: false,
|
};
|
},
|
created() {},
|
mounted() {
|
this.setActive();
|
// if(this.userInfo.role_name == )
|
// console.log(this.website, "website");//改变首页
|
},
|
watch: {
|
tag() {
|
this.setActive();
|
},
|
contextmenuFlag() {
|
window.addEventListener("mousedown", this.watchContextmenu);
|
},
|
},
|
computed: {
|
...mapGetters(["tagWel", "tagList", "tag", "website", "userInfo"]),
|
...mapState({
|
showTag: (state) => state.common.showTag,
|
}),
|
tagLen() {
|
return this.tagList.length || 0;
|
},
|
},
|
methods: {
|
generateTitle(item) {
|
return this.$router.$avueRouter.generateTitle(
|
item.label,
|
(item.meta || {}).i18n
|
);
|
},
|
watchContextmenu(event) {
|
if (!this.$el.contains(event.target) || event.button !== 0) {
|
this.contextmenuFlag = false;
|
}
|
window.removeEventListener("mousedown", this.watchContextmenu);
|
},
|
handleContextmenu(event) {
|
let target = event.target;
|
// 解决 https://github.com/d2-projects/d2-admin/issues/54
|
let flag = false;
|
if (target.className.indexOf("el-tabs__item") > -1) flag = true;
|
else if (target.parentNode.className.indexOf("el-tabs__item") > -1) {
|
target = target.parentNode;
|
flag = true;
|
}
|
if (flag) {
|
event.preventDefault();
|
event.stopPropagation();
|
this.contentmenuX = event.clientX;
|
this.contentmenuY = event.clientY;
|
this.tagName = target.getAttribute("aria-controls").slice(5);
|
this.contextmenuFlag = true;
|
}
|
},
|
//激活当前选项
|
setActive() {
|
this.active = this.tag.value;
|
},
|
menuTag(value, action) {
|
if (action === "remove") {
|
let { tag, key } = this.findTag(value);
|
this.$store.commit("DEL_TAG", tag);
|
if (tag.value === this.tag.value) {
|
tag = this.tagList[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个
|
this.openTag(tag);
|
}
|
}
|
},
|
openTag(item) {
|
let tag;
|
if (item.name) {
|
tag = this.findTag(item.name).tag;
|
} else {
|
tag = item;
|
}
|
this.$router.push({
|
path: this.$router.$avueRouter.getPath(
|
{
|
name: tag.label,
|
src: tag.value,
|
},
|
tag.meta
|
),
|
query: tag.query,
|
});
|
},
|
closeOthersTags() {
|
this.contextmenuFlag = false;
|
this.$store.commit("DEL_TAG_OTHER");
|
},
|
findTag(value) {
|
let tag, key;
|
this.tagList.map((item, index) => {
|
if (item.value === value) {
|
tag = item;
|
key = index;
|
}
|
});
|
return { tag: tag, key: key };
|
},
|
closeAllTags() {
|
this.contextmenuFlag = false;
|
this.$store.commit("DEL_ALL_TAG");
|
this.$router.push({
|
path: this.$router.$avueRouter.getPath({
|
src: this.tagWel.value,
|
}),
|
query: this.tagWel.query,
|
});
|
},
|
clearCacheTags() {
|
this.$confirm("是否需要清除缓存?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
clearCache().then(() => {
|
this.contextmenuFlag = false;
|
this.$message.success("清除完毕");
|
});
|
});
|
},
|
},
|
};
|
</script>
|
