|
|
@@ -1,3 +1,442 @@
|
|
|
+<script lang="ts">
|
|
|
+export default {
|
|
|
+ computed: {
|
|
|
+ dynamicTagList() {
|
|
|
+ return this.$storage.routesInStorage;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import {
|
|
|
+ ref,
|
|
|
+ watch,
|
|
|
+ onBeforeMount,
|
|
|
+ unref,
|
|
|
+ nextTick,
|
|
|
+ getCurrentInstance
|
|
|
+} from "vue";
|
|
|
+import { RouteConfigs } from "../../types";
|
|
|
+import { emitter } from "/@/utils/mitt";
|
|
|
+import { templateRef } from "@vueuse/core";
|
|
|
+import { storageLocal } from "/@/utils/storage";
|
|
|
+import { useRoute, useRouter } from "vue-router";
|
|
|
+import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
|
|
|
+
|
|
|
+import close from "/@/assets/svg/close.svg";
|
|
|
+import refresh from "/@/assets/svg/refresh.svg";
|
|
|
+import closeAll from "/@/assets/svg/close_all.svg";
|
|
|
+import closeLeft from "/@/assets/svg/close_left.svg";
|
|
|
+import closeOther from "/@/assets/svg/close_other.svg";
|
|
|
+import closeRight from "/@/assets/svg/close_right.svg";
|
|
|
+
|
|
|
+let refreshButton = "refresh-button";
|
|
|
+const instance = getCurrentInstance();
|
|
|
+let st: any;
|
|
|
+const route = useRoute();
|
|
|
+const router = useRouter();
|
|
|
+const showTags = ref(storageLocal.getItem("tagsVal") || false);
|
|
|
+const containerDom = templateRef<HTMLElement | null>("containerDom", null);
|
|
|
+const activeIndex = ref(-1);
|
|
|
+let routerArrays: Array<RouteConfigs> = [
|
|
|
+ {
|
|
|
+ path: "/welcome",
|
|
|
+ parentPath: "/",
|
|
|
+ meta: {
|
|
|
+ title: "message.hshome",
|
|
|
+ icon: "el-icon-s-home",
|
|
|
+ showLink: true,
|
|
|
+ savedPosition: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+];
|
|
|
+const tagsViews = ref<ForDataType<undefined>>([
|
|
|
+ {
|
|
|
+ icon: refresh,
|
|
|
+ text: "重新加载",
|
|
|
+ divided: false,
|
|
|
+ disabled: false,
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: close,
|
|
|
+ text: "关闭当前标签页",
|
|
|
+ divided: false,
|
|
|
+ disabled: routerArrays.length > 1 ? false : true,
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: closeLeft,
|
|
|
+ text: "关闭左侧标签页",
|
|
|
+ divided: true,
|
|
|
+ disabled: routerArrays.length > 1 ? false : true,
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: closeRight,
|
|
|
+ text: "关闭右侧标签页",
|
|
|
+ divided: false,
|
|
|
+ disabled: routerArrays.length > 1 ? false : true,
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: closeOther,
|
|
|
+ text: "关闭其他标签页",
|
|
|
+ divided: true,
|
|
|
+ disabled: routerArrays.length > 2 ? false : true,
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: closeAll,
|
|
|
+ text: "关闭全部标签页",
|
|
|
+ divided: false,
|
|
|
+ disabled: routerArrays.length > 1 ? false : true,
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+]);
|
|
|
+
|
|
|
+// 显示模式，默认灵动模式显示
|
|
|
+const showModel = ref(storageLocal.getItem("showModel") || "smart");
|
|
|
+if (!showModel.value) {
|
|
|
+ storageLocal.setItem("showModel", "card");
|
|
|
+}
|
|
|
+
|
|
|
+let visible = ref(false);
|
|
|
+let buttonLeft = ref(0);
|
|
|
+let buttonTop = ref(0);
|
|
|
+
|
|
|
+// 当前右键选中的路由信息
|
|
|
+let currentSelect = ref({});
|
|
|
+
|
|
|
+function dynamicRouteTag(value: string, parentPath: string): void {
|
|
|
+ const hasValue = st.routesInStorage.some((item: any) => {
|
|
|
+ return item.path === value;
|
|
|
+ });
|
|
|
+
|
|
|
+ function concatPath(arr: object[], value: string, parentPath: string) {
|
|
|
+ if (!hasValue) {
|
|
|
+ arr.forEach((arrItem: any) => {
|
|
|
+ let pathConcat = parentPath + arrItem.path;
|
|
|
+ if (arrItem.path === value || pathConcat === value) {
|
|
|
+ routerArrays.push({
|
|
|
+ path: value,
|
|
|
+ parentPath: `/${parentPath.split("/")[1]}`,
|
|
|
+ meta: arrItem.meta
|
|
|
+ });
|
|
|
+ st.routesInStorage = routerArrays;
|
|
|
+ } else {
|
|
|
+ if (arrItem.children && arrItem.children.length > 0) {
|
|
|
+ concatPath(arrItem.children, value, parentPath);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ concatPath(router.options.routes, value, parentPath);
|
|
|
+}
|
|
|
+
|
|
|
+// 重新加载
|
|
|
+function onFresh() {
|
|
|
+ toggleClass(true, refreshButton, document.querySelector(".rotate"));
|
|
|
+ const { fullPath } = unref(route);
|
|
|
+ router.replace({
|
|
|
+ path: "/redirect" + fullPath
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ removeClass(document.querySelector(".rotate"), refreshButton);
|
|
|
+ }, 600);
|
|
|
+}
|
|
|
+
|
|
|
+function deleteDynamicTag(obj: any, current: any, tag?: string) {
|
|
|
+ let valueIndex: number = routerArrays.findIndex((item: any) => {
|
|
|
+ return item.path === obj.path;
|
|
|
+ });
|
|
|
+
|
|
|
+ const spliceRoute = (start?: number, end?: number, other?: boolean): void => {
|
|
|
+ if (other) {
|
|
|
+ st.routesInStorage = [
|
|
|
+ {
|
|
|
+ path: "/welcome",
|
|
|
+ parentPath: "/",
|
|
|
+ meta: {
|
|
|
+ title: "message.hshome",
|
|
|
+ icon: "el-icon-s-home",
|
|
|
+ showLink: true,
|
|
|
+ savedPosition: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ obj
|
|
|
+ ];
|
|
|
+ routerArrays = st.routesInStorage;
|
|
|
+ } else {
|
|
|
+ routerArrays.splice(start, end);
|
|
|
+ st.routesInStorage = routerArrays;
|
|
|
+ }
|
|
|
+ router.push(obj.path);
|
|
|
+ };
|
|
|
+
|
|
|
+ if (tag === "other") {
|
|
|
+ spliceRoute(1, 1, true);
|
|
|
+ } else if (tag === "left") {
|
|
|
+ spliceRoute(1, valueIndex - 1);
|
|
|
+ } else if (tag === "right") {
|
|
|
+ spliceRoute(valueIndex + 1, routerArrays.length);
|
|
|
+ } else {
|
|
|
+ // 从当前匹配到的路径中删除
|
|
|
+ spliceRoute(valueIndex, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (current === obj.path) {
|
|
|
+ // 如果删除当前激活tag就自动切换到最后一个tag
|
|
|
+ let newRoute: any = routerArrays.slice(-1);
|
|
|
+ nextTick(() => {
|
|
|
+ router.push({
|
|
|
+ path: newRoute[0].path
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function deleteMenu(item, tag?: string) {
|
|
|
+ deleteDynamicTag(item, item.path, tag);
|
|
|
+}
|
|
|
+
|
|
|
+function onClickDrop(key, item, selectRoute?: RouteConfigs) {
|
|
|
+ if (item && item.disabled) return;
|
|
|
+ // 当前路由信息
|
|
|
+ switch (key) {
|
|
|
+ case 0:
|
|
|
+ // 重新加载
|
|
|
+ onFresh();
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ // 关闭当前标签页
|
|
|
+ selectRoute
|
|
|
+ ? deleteMenu({ path: selectRoute.path, meta: selectRoute.meta })
|
|
|
+ : deleteMenu({ path: route.path, meta: route.meta });
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ // 关闭左侧标签页
|
|
|
+ selectRoute
|
|
|
+ ? deleteMenu(
|
|
|
+ {
|
|
|
+ path: selectRoute.path,
|
|
|
+ meta: selectRoute.meta
|
|
|
+ },
|
|
|
+ "left"
|
|
|
+ )
|
|
|
+ : deleteMenu({ path: route.path, meta: route.meta }, "left");
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ // 关闭右侧标签页
|
|
|
+ selectRoute
|
|
|
+ ? deleteMenu(
|
|
|
+ {
|
|
|
+ path: selectRoute.path,
|
|
|
+ meta: selectRoute.meta
|
|
|
+ },
|
|
|
+ "right"
|
|
|
+ )
|
|
|
+ : deleteMenu({ path: route.path, meta: route.meta }, "right");
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ // 关闭其他标签页
|
|
|
+ selectRoute
|
|
|
+ ? deleteMenu(
|
|
|
+ {
|
|
|
+ path: selectRoute.path,
|
|
|
+ meta: selectRoute.meta
|
|
|
+ },
|
|
|
+ "other"
|
|
|
+ )
|
|
|
+ : deleteMenu({ path: route.path, meta: route.meta }, "other");
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ // 关闭全部标签页
|
|
|
+ routerArrays.splice(1, routerArrays.length);
|
|
|
+ st.routesInStorage = routerArrays;
|
|
|
+ router.push("/welcome");
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ showMenuModel(route.fullPath);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 触发右键中菜单的点击事件
|
|
|
+function selectTag(key, item) {
|
|
|
+ onClickDrop(key, item, currentSelect.value);
|
|
|
+}
|
|
|
+
|
|
|
+function closeMenu() {
|
|
|
+ visible.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+function showMenus(value: Boolean) {
|
|
|
+ Array.of(1, 2, 3, 4, 5).forEach(v => {
|
|
|
+ tagsViews.value[v].show = value;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function disabledMenus(value: Boolean) {
|
|
|
+ Array.of(1, 2, 3, 4, 5).forEach(v => {
|
|
|
+ tagsViews.value[v].disabled = value;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是首页，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页
|
|
|
+function showMenuModel(currentPath: string, refresh = false) {
|
|
|
+ let allRoute = unref(st.routesInStorage);
|
|
|
+ let routeLength = unref(st.routesInStorage).length;
|
|
|
+ // currentIndex为1时，左侧的菜单是首页，则不显示关闭左侧标签页
|
|
|
+ let currentIndex = allRoute.findIndex(v => v.path === currentPath);
|
|
|
+ // 如果currentIndex等于routeLength-1，右侧没有菜单，则不显示关闭右侧标签页
|
|
|
+ showMenus(true);
|
|
|
+
|
|
|
+ if (refresh) {
|
|
|
+ tagsViews.value[0].show = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (currentIndex === 1 && routeLength !== 2) {
|
|
|
+ // 左侧的菜单是首页，右侧存在别的菜单
|
|
|
+ tagsViews.value[2].show = false;
|
|
|
+ Array.of(1, 3, 4, 5).forEach(v => {
|
|
|
+ tagsViews.value[v].disabled = false;
|
|
|
+ });
|
|
|
+ tagsViews.value[2].disabled = true;
|
|
|
+ } else if (currentIndex === 1 && routeLength === 2) {
|
|
|
+ disabledMenus(false);
|
|
|
+ // 左侧的菜单是首页，右侧不存在别的菜单
|
|
|
+ Array.of(2, 3, 4).forEach(v => {
|
|
|
+ tagsViews.value[v].show = false;
|
|
|
+ tagsViews.value[v].disabled = true;
|
|
|
+ });
|
|
|
+ } else if (routeLength - 1 === currentIndex && currentIndex !== 0) {
|
|
|
+ // 当前路由是所有路由中的最后一个
|
|
|
+ tagsViews.value[3].show = false;
|
|
|
+ Array.of(1, 2, 4, 5).forEach(v => {
|
|
|
+ tagsViews.value[v].disabled = false;
|
|
|
+ });
|
|
|
+ tagsViews.value[3].disabled = true;
|
|
|
+ } else if (currentIndex === 0) {
|
|
|
+ // 当前路由为首页
|
|
|
+ disabledMenus(true);
|
|
|
+ } else {
|
|
|
+ disabledMenus(false);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function openMenu(tag, e) {
|
|
|
+ closeMenu();
|
|
|
+ if (tag.path === "/welcome") {
|
|
|
+ // 右键菜单为首页，只显示刷新
|
|
|
+ showMenus(false);
|
|
|
+ tagsViews.value[0].show = true;
|
|
|
+ } else if (route.path !== tag.path) {
|
|
|
+ // 右键菜单不匹配当前路由，隐藏刷新
|
|
|
+ tagsViews.value[0].show = false;
|
|
|
+ showMenuModel(tag.path);
|
|
|
+ // eslint-disable-next-line no-dupe-else-if
|
|
|
+ } else if (st.routesInStorage.length === 2 && route.path !== tag.path) {
|
|
|
+ showMenus(true);
|
|
|
+ // 只有两个标签时不显示关闭其他标签页
|
|
|
+ tagsViews.value[4].show = false;
|
|
|
+ } else if (route.path === tag.path) {
|
|
|
+ // 右键当前激活的菜单
|
|
|
+ showMenuModel(tag.path, true);
|
|
|
+ }
|
|
|
+
|
|
|
+ currentSelect.value = tag;
|
|
|
+ const menuMinWidth = 105;
|
|
|
+ const offsetLeft = unref(containerDom).getBoundingClientRect().left;
|
|
|
+ const offsetWidth = unref(containerDom).offsetWidth;
|
|
|
+ const maxLeft = offsetWidth - menuMinWidth;
|
|
|
+ const left = e.clientX - offsetLeft + 5;
|
|
|
+ if (left > maxLeft) {
|
|
|
+ buttonLeft.value = maxLeft;
|
|
|
+ } else {
|
|
|
+ buttonLeft.value = left;
|
|
|
+ }
|
|
|
+ buttonTop.value = e.clientY + 10;
|
|
|
+ setTimeout(() => {
|
|
|
+ visible.value = true;
|
|
|
+ }, 10);
|
|
|
+}
|
|
|
+
|
|
|
+// 触发tags标签切换
|
|
|
+function tagOnClick(item) {
|
|
|
+ showMenuModel(item.path);
|
|
|
+}
|
|
|
+
|
|
|
+// 鼠标移入
|
|
|
+function onMouseenter(item, index) {
|
|
|
+ if (index) activeIndex.value = index;
|
|
|
+ if (unref(showModel) === "smart") {
|
|
|
+ if (hasClass(instance.refs["schedule" + index], "schedule-active")) return;
|
|
|
+ toggleClass(true, "schedule-in", instance.refs["schedule" + index]);
|
|
|
+ toggleClass(false, "schedule-out", instance.refs["schedule" + index]);
|
|
|
+ } else {
|
|
|
+ if (hasClass(instance.refs["dynamic" + index], "card-active")) return;
|
|
|
+ toggleClass(true, "card-in", instance.refs["dynamic" + index]);
|
|
|
+ toggleClass(false, "card-out", instance.refs["dynamic" + index]);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 鼠标移出
|
|
|
+function onMouseleave(item, index) {
|
|
|
+ activeIndex.value = -1;
|
|
|
+ if (unref(showModel) === "smart") {
|
|
|
+ if (hasClass(instance.refs["schedule" + index], "schedule-active")) return;
|
|
|
+ toggleClass(false, "schedule-in", instance.refs["schedule" + index]);
|
|
|
+ toggleClass(true, "schedule-out", instance.refs["schedule" + index]);
|
|
|
+ } else {
|
|
|
+ if (hasClass(instance.refs["dynamic" + index], "card-active")) return;
|
|
|
+ toggleClass(false, "card-in", instance.refs["dynamic" + index]);
|
|
|
+ toggleClass(true, "card-out", instance.refs["dynamic" + index]);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => visible.value,
|
|
|
+ val => {
|
|
|
+ if (val) {
|
|
|
+ document.body.addEventListener("click", closeMenu);
|
|
|
+ } else {
|
|
|
+ document.body.removeEventListener("click", closeMenu);
|
|
|
+ }
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
+onBeforeMount(() => {
|
|
|
+ if (!instance) return;
|
|
|
+ st = instance.appContext.app.config.globalProperties.$storage;
|
|
|
+ routerArrays = st.routesInStorage ?? routerArrays;
|
|
|
+
|
|
|
+ // 根据当前路由初始化操作标签页的禁用状态
|
|
|
+ showMenuModel(route.fullPath);
|
|
|
+
|
|
|
+ // 触发隐藏标签页
|
|
|
+ emitter.on("tagViewsChange", key => {
|
|
|
+ if (unref(showTags) === key) return;
|
|
|
+ showTags.value = key;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 改变标签风格
|
|
|
+ emitter.on("tagViewsShowModel", key => {
|
|
|
+ showModel.value = key;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 接收侧边栏切换传递过来的参数
|
|
|
+ emitter.on("changLayoutRoute", ({ indexPath, parentPath }) => {
|
|
|
+ dynamicRouteTag(indexPath, parentPath);
|
|
|
+ setTimeout(() => {
|
|
|
+ showMenuModel(indexPath);
|
|
|
+ });
|
|
|
+ });
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
<template>
|
|
|
<div ref="containerDom" class="tags-view" v-if="!showTags">
|
|
|
<el-scrollbar wrap-class="scrollbar-wrapper" class="scroll-container">
|
|
|
@@ -87,479 +526,6 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script lang="ts">
|
|
|
-import {
|
|
|
- ref,
|
|
|
- watch,
|
|
|
- onBeforeMount,
|
|
|
- unref,
|
|
|
- nextTick,
|
|
|
- getCurrentInstance
|
|
|
-} from "vue";
|
|
|
-import { useRoute, useRouter } from "vue-router";
|
|
|
-import { storageLocal } from "/@/utils/storage";
|
|
|
-import { emitter } from "/@/utils/mitt";
|
|
|
-import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
|
|
|
-import { templateRef } from "@vueuse/core";
|
|
|
-import closeOther from "/@/assets/svg/close_other.svg";
|
|
|
-import closeLeft from "/@/assets/svg/close_left.svg";
|
|
|
-import closeRight from "/@/assets/svg/close_right.svg";
|
|
|
-import close from "/@/assets/svg/close.svg";
|
|
|
-import refresh from "/@/assets/svg/refresh.svg";
|
|
|
-import closeAll from "/@/assets/svg/close_all.svg";
|
|
|
-
|
|
|
-let refreshButton = "refresh-button";
|
|
|
-let routerArrays: Array<object> = [
|
|
|
- {
|
|
|
- path: "/welcome",
|
|
|
- parentPath: "/",
|
|
|
- meta: {
|
|
|
- title: "message.hshome",
|
|
|
- icon: "el-icon-s-home",
|
|
|
- showLink: true,
|
|
|
- savedPosition: false
|
|
|
- }
|
|
|
- }
|
|
|
-];
|
|
|
-
|
|
|
-export default {
|
|
|
- name: "tag",
|
|
|
- components: {
|
|
|
- closeOther,
|
|
|
- closeLeft,
|
|
|
- closeRight,
|
|
|
- close,
|
|
|
- refresh,
|
|
|
- closeAll
|
|
|
- },
|
|
|
- // @ts-ignore
|
|
|
- computed: {
|
|
|
- dynamicTagList() {
|
|
|
- return this.$storage.routesInStorage;
|
|
|
- }
|
|
|
- },
|
|
|
- setup() {
|
|
|
- const instance = getCurrentInstance();
|
|
|
- let st: any;
|
|
|
- const route = useRoute();
|
|
|
- const router = useRouter();
|
|
|
- const showTags = ref(storageLocal.getItem("tagsVal") || false);
|
|
|
- const containerDom = templateRef<HTMLElement | null>("containerDom", null);
|
|
|
- const activeIndex = ref(-1);
|
|
|
- const tagsViews = ref([
|
|
|
- {
|
|
|
- icon: "refresh",
|
|
|
- text: "重新加载",
|
|
|
- divided: false,
|
|
|
- disabled: false,
|
|
|
- show: true
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "close",
|
|
|
- text: "关闭当前标签页",
|
|
|
- divided: false,
|
|
|
- disabled: routerArrays.length > 1 ? false : true,
|
|
|
- show: true
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "closeLeft",
|
|
|
- text: "关闭左侧标签页",
|
|
|
- divided: true,
|
|
|
- disabled: routerArrays.length > 1 ? false : true,
|
|
|
- show: true
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "closeRight",
|
|
|
- text: "关闭右侧标签页",
|
|
|
- divided: false,
|
|
|
- disabled: routerArrays.length > 1 ? false : true,
|
|
|
- show: true
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "closeOther",
|
|
|
- text: "关闭其他标签页",
|
|
|
- divided: true,
|
|
|
- disabled: routerArrays.length > 2 ? false : true,
|
|
|
- show: true
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "closeAll",
|
|
|
- text: "关闭全部标签页",
|
|
|
- divided: false,
|
|
|
- disabled: routerArrays.length > 1 ? false : true,
|
|
|
- show: true
|
|
|
- }
|
|
|
- ]);
|
|
|
-
|
|
|
- // 显示模式，默认灵动模式显示
|
|
|
- const showModel = ref(storageLocal.getItem("showModel") || "smart");
|
|
|
- if (!showModel.value) {
|
|
|
- storageLocal.setItem("showModel", "card");
|
|
|
- }
|
|
|
-
|
|
|
- let visible = ref(false);
|
|
|
- let buttonLeft = ref(0);
|
|
|
- let buttonTop = ref(0);
|
|
|
-
|
|
|
- // 当前右键选中的路由信息
|
|
|
- let currentSelect = ref({});
|
|
|
-
|
|
|
- function dynamicRouteTag(value: string, parentPath: string): void {
|
|
|
- const hasValue = st.routesInStorage.some((item: any) => {
|
|
|
- return item.path === value;
|
|
|
- });
|
|
|
-
|
|
|
- function concatPath(arr: object[], value: string, parentPath: string) {
|
|
|
- if (!hasValue) {
|
|
|
- arr.forEach((arrItem: any) => {
|
|
|
- let pathConcat = parentPath + arrItem.path;
|
|
|
- if (arrItem.path === value || pathConcat === value) {
|
|
|
- routerArrays.push({
|
|
|
- path: value,
|
|
|
- parentPath: `/${parentPath.split("/")[1]}`,
|
|
|
- meta: arrItem.meta
|
|
|
- });
|
|
|
- st.routesInStorage = routerArrays;
|
|
|
- } else {
|
|
|
- if (arrItem.children && arrItem.children.length > 0) {
|
|
|
- concatPath(arrItem.children, value, parentPath);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- concatPath(router.options.routes, value, parentPath);
|
|
|
- }
|
|
|
-
|
|
|
- // 重新加载
|
|
|
- function onFresh() {
|
|
|
- toggleClass(true, refreshButton, document.querySelector(".rotate"));
|
|
|
- const { fullPath } = unref(route);
|
|
|
- router.replace({
|
|
|
- path: "/redirect" + fullPath
|
|
|
- });
|
|
|
- setTimeout(() => {
|
|
|
- removeClass(document.querySelector(".rotate"), refreshButton);
|
|
|
- }, 600);
|
|
|
- }
|
|
|
-
|
|
|
- function deleteDynamicTag(obj: any, current: any, tag?: string) {
|
|
|
- let valueIndex: number = routerArrays.findIndex((item: any) => {
|
|
|
- return item.path === obj.path;
|
|
|
- });
|
|
|
-
|
|
|
- const spliceRoute = (
|
|
|
- start?: number,
|
|
|
- end?: number,
|
|
|
- other?: boolean
|
|
|
- ): void => {
|
|
|
- if (other) {
|
|
|
- st.routesInStorage = routerArrays = [
|
|
|
- {
|
|
|
- path: "/welcome",
|
|
|
- parentPath: "/",
|
|
|
- meta: {
|
|
|
- title: "message.hshome",
|
|
|
- icon: "el-icon-s-home",
|
|
|
- showLink: true,
|
|
|
- savedPosition: false
|
|
|
- }
|
|
|
- },
|
|
|
- obj
|
|
|
- ];
|
|
|
- } else {
|
|
|
- routerArrays.splice(start, end);
|
|
|
- st.routesInStorage = routerArrays;
|
|
|
- }
|
|
|
- router.push(obj.path);
|
|
|
- };
|
|
|
-
|
|
|
- if (tag === "other") {
|
|
|
- spliceRoute(1, 1, true);
|
|
|
- } else if (tag === "left") {
|
|
|
- spliceRoute(1, valueIndex - 1);
|
|
|
- } else if (tag === "right") {
|
|
|
- spliceRoute(valueIndex + 1, routerArrays.length);
|
|
|
- } else {
|
|
|
- // 从当前匹配到的路径中删除
|
|
|
- spliceRoute(valueIndex, 1);
|
|
|
- }
|
|
|
-
|
|
|
- if (current === obj.path) {
|
|
|
- // 如果删除当前激活tag就自动切换到最后一个tag
|
|
|
- let newRoute: any = routerArrays.slice(-1);
|
|
|
- nextTick(() => {
|
|
|
- router.push({
|
|
|
- path: newRoute[0].path
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function deleteMenu(item, tag?: string) {
|
|
|
- deleteDynamicTag(item, item.path, tag);
|
|
|
- }
|
|
|
-
|
|
|
- function onClickDrop(key, item, selectRoute) {
|
|
|
- if (item && item.disabled) return;
|
|
|
- // 当前路由信息
|
|
|
- switch (key) {
|
|
|
- case 0:
|
|
|
- // 重新加载
|
|
|
- onFresh();
|
|
|
- break;
|
|
|
- case 1:
|
|
|
- // 关闭当前标签页
|
|
|
- selectRoute
|
|
|
- ? deleteMenu({ path: selectRoute.path, meta: selectRoute.meta })
|
|
|
- : deleteMenu({ path: route.path, meta: route.meta });
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- // 关闭左侧标签页
|
|
|
- selectRoute
|
|
|
- ? deleteMenu(
|
|
|
- {
|
|
|
- path: selectRoute.path,
|
|
|
- meta: selectRoute.meta
|
|
|
- },
|
|
|
- "left"
|
|
|
- )
|
|
|
- : deleteMenu({ path: route.path, meta: route.meta }, "left");
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- // 关闭右侧标签页
|
|
|
- selectRoute
|
|
|
- ? deleteMenu(
|
|
|
- {
|
|
|
- path: selectRoute.path,
|
|
|
- meta: selectRoute.meta
|
|
|
- },
|
|
|
- "right"
|
|
|
- )
|
|
|
- : deleteMenu({ path: route.path, meta: route.meta }, "right");
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- // 关闭其他标签页
|
|
|
- selectRoute
|
|
|
- ? deleteMenu(
|
|
|
- {
|
|
|
- path: selectRoute.path,
|
|
|
- meta: selectRoute.meta
|
|
|
- },
|
|
|
- "other"
|
|
|
- )
|
|
|
- : deleteMenu({ path: route.path, meta: route.meta }, "other");
|
|
|
- break;
|
|
|
- case 5:
|
|
|
- // 关闭全部标签页
|
|
|
- routerArrays.splice(1, routerArrays.length);
|
|
|
- st.routesInStorage = routerArrays;
|
|
|
- router.push("/welcome");
|
|
|
- break;
|
|
|
- }
|
|
|
- setTimeout(() => {
|
|
|
- showMenuModel(route.fullPath);
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 触发右键中菜单的点击事件
|
|
|
- function selectTag(key, item) {
|
|
|
- onClickDrop(key, item, currentSelect.value);
|
|
|
- }
|
|
|
-
|
|
|
- function closeMenu() {
|
|
|
- visible.value = false;
|
|
|
- }
|
|
|
-
|
|
|
- function showMenus(value: Boolean) {
|
|
|
- Array.of(1, 2, 3, 4, 5).forEach(v => {
|
|
|
- tagsViews.value[v].show = value;
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function disabledMenus(value: Boolean) {
|
|
|
- Array.of(1, 2, 3, 4, 5).forEach(v => {
|
|
|
- tagsViews.value[v].disabled = value;
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是首页，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页
|
|
|
- function showMenuModel(currentPath: string, refresh = false) {
|
|
|
- let allRoute = unref(st.routesInStorage);
|
|
|
- let routeLength = unref(st.routesInStorage).length;
|
|
|
- // currentIndex为1时，左侧的菜单是首页，则不显示关闭左侧标签页
|
|
|
- let currentIndex = allRoute.findIndex(v => v.path === currentPath);
|
|
|
- // 如果currentIndex等于routeLength-1，右侧没有菜单，则不显示关闭右侧标签页
|
|
|
- showMenus(true);
|
|
|
-
|
|
|
- if (refresh) {
|
|
|
- tagsViews.value[0].show = true;
|
|
|
- }
|
|
|
-
|
|
|
- if (currentIndex === 1 && routeLength !== 2) {
|
|
|
- // 左侧的菜单是首页，右侧存在别的菜单
|
|
|
- tagsViews.value[2].show = false;
|
|
|
- Array.of(1, 3, 4, 5).forEach(v => {
|
|
|
- tagsViews.value[v].disabled = false;
|
|
|
- });
|
|
|
- tagsViews.value[2].disabled = true;
|
|
|
- } else if (currentIndex === 1 && routeLength === 2) {
|
|
|
- disabledMenus(false);
|
|
|
- // 左侧的菜单是首页，右侧不存在别的菜单
|
|
|
- Array.of(2, 3, 4).forEach(v => {
|
|
|
- tagsViews.value[v].show = false;
|
|
|
- tagsViews.value[v].disabled = true;
|
|
|
- });
|
|
|
- } else if (routeLength - 1 === currentIndex && currentIndex !== 0) {
|
|
|
- // 当前路由是所有路由中的最后一个
|
|
|
- tagsViews.value[3].show = false;
|
|
|
- Array.of(1, 2, 4, 5).forEach(v => {
|
|
|
- tagsViews.value[v].disabled = false;
|
|
|
- });
|
|
|
- tagsViews.value[3].disabled = true;
|
|
|
- } else if (currentIndex === 0) {
|
|
|
- // 当前路由为首页
|
|
|
- disabledMenus(true);
|
|
|
- } else {
|
|
|
- disabledMenus(false);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function openMenu(tag, e) {
|
|
|
- closeMenu();
|
|
|
- if (tag.path === "/welcome") {
|
|
|
- // 右键菜单为首页，只显示刷新
|
|
|
- showMenus(false);
|
|
|
- tagsViews.value[0].show = true;
|
|
|
- } else if (route.path !== tag.path) {
|
|
|
- // 右键菜单不匹配当前路由，隐藏刷新
|
|
|
- tagsViews.value[0].show = false;
|
|
|
- showMenuModel(tag.path);
|
|
|
- // eslint-disable-next-line no-dupe-else-if
|
|
|
- } else if (st.routesInStorage.length === 2 && route.path !== tag.path) {
|
|
|
- showMenus(true);
|
|
|
- // 只有两个标签时不显示关闭其他标签页
|
|
|
- tagsViews.value[4].show = false;
|
|
|
- } else if (route.path === tag.path) {
|
|
|
- // 右键当前激活的菜单
|
|
|
- showMenuModel(tag.path, true);
|
|
|
- }
|
|
|
-
|
|
|
- currentSelect.value = tag;
|
|
|
- const menuMinWidth = 105;
|
|
|
- const offsetLeft = unref(containerDom).getBoundingClientRect().left;
|
|
|
- const offsetWidth = unref(containerDom).offsetWidth;
|
|
|
- const maxLeft = offsetWidth - menuMinWidth;
|
|
|
- const left = e.clientX - offsetLeft + 5;
|
|
|
- if (left > maxLeft) {
|
|
|
- buttonLeft.value = maxLeft;
|
|
|
- } else {
|
|
|
- buttonLeft.value = left;
|
|
|
- }
|
|
|
- buttonTop.value = e.clientY + 10;
|
|
|
- setTimeout(() => {
|
|
|
- visible.value = true;
|
|
|
- }, 10);
|
|
|
- }
|
|
|
-
|
|
|
- // 触发tags标签切换
|
|
|
- function tagOnClick(item) {
|
|
|
- showMenuModel(item.path);
|
|
|
- }
|
|
|
-
|
|
|
- // 鼠标移入
|
|
|
- function onMouseenter(item, index) {
|
|
|
- if (index) activeIndex.value = index;
|
|
|
- if (unref(showModel) === "smart") {
|
|
|
- if (hasClass(instance.refs["schedule" + index], "schedule-active"))
|
|
|
- return;
|
|
|
- toggleClass(true, "schedule-in", instance.refs["schedule" + index]);
|
|
|
- toggleClass(false, "schedule-out", instance.refs["schedule" + index]);
|
|
|
- } else {
|
|
|
- if (hasClass(instance.refs["dynamic" + index], "card-active")) return;
|
|
|
- toggleClass(true, "card-in", instance.refs["dynamic" + index]);
|
|
|
- toggleClass(false, "card-out", instance.refs["dynamic" + index]);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 鼠标移出
|
|
|
- function onMouseleave(item, index) {
|
|
|
- activeIndex.value = -1;
|
|
|
- if (unref(showModel) === "smart") {
|
|
|
- if (hasClass(instance.refs["schedule" + index], "schedule-active"))
|
|
|
- return;
|
|
|
- toggleClass(false, "schedule-in", instance.refs["schedule" + index]);
|
|
|
- toggleClass(true, "schedule-out", instance.refs["schedule" + index]);
|
|
|
- } else {
|
|
|
- if (hasClass(instance.refs["dynamic" + index], "card-active")) return;
|
|
|
- toggleClass(false, "card-in", instance.refs["dynamic" + index]);
|
|
|
- toggleClass(true, "card-out", instance.refs["dynamic" + index]);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- watch(
|
|
|
- () => visible.value,
|
|
|
- val => {
|
|
|
- if (val) {
|
|
|
- document.body.addEventListener("click", closeMenu);
|
|
|
- } else {
|
|
|
- document.body.removeEventListener("click", closeMenu);
|
|
|
- }
|
|
|
- }
|
|
|
- );
|
|
|
-
|
|
|
- onBeforeMount(() => {
|
|
|
- if (!instance) return;
|
|
|
- st = instance.appContext.app.config.globalProperties.$storage;
|
|
|
- routerArrays = st.routesInStorage ?? routerArrays;
|
|
|
-
|
|
|
- // 根据当前路由初始化操作标签页的禁用状态
|
|
|
- showMenuModel(route.fullPath);
|
|
|
-
|
|
|
- // 触发隐藏标签页
|
|
|
- emitter.on("tagViewsChange", key => {
|
|
|
- if (unref(showTags) === key) return;
|
|
|
- showTags.value = key;
|
|
|
- });
|
|
|
-
|
|
|
- // 改变标签风格
|
|
|
- emitter.on("tagViewsShowModel", key => {
|
|
|
- showModel.value = key;
|
|
|
- });
|
|
|
-
|
|
|
- // 接收侧边栏切换传递过来的参数
|
|
|
- emitter.on("changLayoutRoute", ({ indexPath, parentPath }) => {
|
|
|
- dynamicRouteTag(indexPath, parentPath);
|
|
|
- setTimeout(() => {
|
|
|
- showMenuModel(indexPath);
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- return {
|
|
|
- deleteMenu,
|
|
|
- showTags,
|
|
|
- onFresh,
|
|
|
- tagsViews,
|
|
|
- onClickDrop,
|
|
|
- visible,
|
|
|
- buttonLeft,
|
|
|
- buttonTop,
|
|
|
- openMenu,
|
|
|
- closeMenu,
|
|
|
- selectTag,
|
|
|
- currentSelect,
|
|
|
- onMouseenter,
|
|
|
- onMouseleave,
|
|
|
- tagOnClick,
|
|
|
- activeIndex,
|
|
|
- showModel,
|
|
|
- showMenuModel
|
|
|
- };
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
<style lang="scss" scoped>
|
|
|
@keyframes scheduleInWidth {
|
|
|
from {
|
啝裳
