From 43d76e599091dc6b79b51f89c79514b50e33ea35 Mon Sep 17 00:00:00 2001 From: fuzui <73400@163.com> Date: 星期四, 16 十二月 2021 02:18:48 +0800 Subject: [PATCH] fix: cron组件中周回显bug --- ruoyi-ui/src/layout/components/TagsView/index.vue | 196 ++++++++++++++++++++++++++---------------------- 1 files changed, 107 insertions(+), 89 deletions(-) diff --git a/ruoyi-ui/src/layout/components/TagsView/index.vue b/ruoyi-ui/src/layout/components/TagsView/index.vue index 5a92516..2381d2e 100644 --- a/ruoyi-ui/src/layout/components/TagsView/index.vue +++ b/ruoyi-ui/src/layout/components/TagsView/index.vue @@ -1,6 +1,6 @@ <template> <div id="tags-view-container" class="tags-view-container"> - <scroll-pane ref="scrollPane" class="tags-view-wrapper"> + <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll"> <router-link v-for="tag in visitedViews" ref="tag" @@ -14,25 +14,23 @@ @contextmenu.prevent.native="openMenu(tag,$event)" > {{ tag.title }} - <span - v-if="!isAffix(tag)" - class="el-icon-close" - @click.prevent.stop="closeSelectedTag(tag)" - /> + <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" /> </router-link> </scroll-pane> <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu"> - <li @click="refreshSelectedTag(selectedTag)">鍒锋柊椤甸潰</li> - <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">鍏抽棴褰撳墠</li> - <li @click="closeOthersTags">鍏抽棴鍏朵粬</li> - <li @click="closeAllTags(selectedTag)">鍏抽棴鎵�鏈�</li> + <li @click="refreshSelectedTag(selectedTag)"><i class="el-icon-refresh-right"></i> 鍒锋柊椤甸潰</li> + <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><i class="el-icon-close"></i> 鍏抽棴褰撳墠</li> + <li @click="closeOthersTags"><i class="el-icon-circle-close"></i> 鍏抽棴鍏朵粬</li> + <li v-if="!isFirstView()" @click="closeLeftTags"><i class="el-icon-back"></i> 鍏抽棴宸︿晶</li> + <li v-if="!isLastView()" @click="closeRightTags"><i class="el-icon-right"></i> 鍏抽棴鍙充晶</li> + <li @click="closeAllTags(selectedTag)"><i class="el-icon-circle-close"></i> 鍏ㄩ儴鍏抽棴</li> </ul> </div> </template> <script> -import ScrollPane from "./ScrollPane"; -import path from "path"; +import ScrollPane from './ScrollPane' +import path from 'path' export default { components: { ScrollPane }, @@ -43,14 +41,14 @@ left: 0, selectedTag: {}, affixTags: [] - }; + } }, computed: { visitedViews() { - return this.$store.state.tagsView.visitedViews; + return this.$store.state.tagsView.visitedViews }, routes() { - return this.$store.state.permission.routes; + return this.$store.state.permission.routes }, theme() { return this.$store.state.settings.theme; @@ -58,24 +56,24 @@ }, watch: { $route() { - this.addTags(); - this.moveToCurrentTag(); + this.addTags() + this.moveToCurrentTag() }, visible(value) { if (value) { - document.body.addEventListener("click", this.closeMenu); + document.body.addEventListener('click', this.closeMenu) } else { - document.body.removeEventListener("click", this.closeMenu); + document.body.removeEventListener('click', this.closeMenu) } } }, mounted() { - this.initTags(); - this.addTags(); + this.initTags() + this.addTags() }, methods: { isActive(route) { - return route.path === this.$route.path; + return route.path === this.$route.path }, activeStyle(tag) { if (!this.isActive(tag)) return {}; @@ -85,132 +83,152 @@ }; }, isAffix(tag) { - return tag.meta && tag.meta.affix; + return tag.meta && tag.meta.affix }, - filterAffixTags(routes, basePath = "/") { - let tags = []; + isFirstView() { + try { + return this.selectedTag.fullPath === this.visitedViews[1].fullPath || this.selectedTag.fullPath === '/index' + } catch (err) { + return false + } + }, + isLastView() { + try { + return this.selectedTag.fullPath === this.visitedViews[this.visitedViews.length - 1].fullPath + } catch (err) { + return false + } + }, + filterAffixTags(routes, basePath = '/') { + let tags = [] routes.forEach(route => { if (route.meta && route.meta.affix) { - const tagPath = path.resolve(basePath, route.path); + const tagPath = path.resolve(basePath, route.path) tags.push({ fullPath: tagPath, path: tagPath, name: route.name, meta: { ...route.meta } - }); + }) } if (route.children) { - const tempTags = this.filterAffixTags(route.children, route.path); + const tempTags = this.filterAffixTags(route.children, route.path) if (tempTags.length >= 1) { - tags = [...tags, ...tempTags]; + tags = [...tags, ...tempTags] } } - }); - return tags; + }) + return tags }, initTags() { - const affixTags = (this.affixTags = this.filterAffixTags(this.routes)); + const affixTags = this.affixTags = this.filterAffixTags(this.routes) for (const tag of affixTags) { // Must have tag name if (tag.name) { - this.$store.dispatch("tagsView/addVisitedView", tag); + this.$store.dispatch('tagsView/addVisitedView', tag) } } }, addTags() { - const { name } = this.$route; + const { name } = this.$route if (name) { - this.$store.dispatch("tagsView/addView", this.$route); + this.$store.dispatch('tagsView/addView', this.$route) } - return false; + return false }, moveToCurrentTag() { - const tags = this.$refs.tag; + const tags = this.$refs.tag this.$nextTick(() => { for (const tag of tags) { if (tag.to.path === this.$route.path) { - this.$refs.scrollPane.moveToTarget(tag); + this.$refs.scrollPane.moveToTarget(tag) // when query is different then update if (tag.to.fullPath !== this.$route.fullPath) { - this.$store.dispatch("tagsView/updateVisitedView", this.$route); + this.$store.dispatch('tagsView/updateVisitedView', this.$route) } - break; + break } } - }); + }) }, refreshSelectedTag(view) { - this.$store.dispatch("tagsView/delCachedView", view).then(() => { - const { fullPath } = view; - this.$nextTick(() => { - this.$router.replace({ - path: "/redirect" + fullPath - }); - }); - }); + this.$tab.refreshPage(view); }, closeSelectedTag(view) { - this.$store - .dispatch("tagsView/delView", view) - .then(({ visitedViews }) => { - if (this.isActive(view)) { - this.toLastView(visitedViews, view); - } - }); + this.$tab.closePage(view).then(({ visitedViews }) => { + if (this.isActive(view)) { + this.toLastView(visitedViews, view) + } + }) + }, + closeRightTags() { + this.$tab.closeRightPage(this.selectedTag).then(visitedViews => { + if (!visitedViews.find(i => i.fullPath === this.$route.fullPath)) { + this.toLastView(visitedViews) + } + }) + }, + closeLeftTags() { + this.$tab.closeLeftPage(this.selectedTag).then(visitedViews => { + if (!visitedViews.find(i => i.fullPath === this.$route.fullPath)) { + this.toLastView(visitedViews) + } + }) }, closeOthersTags() { - this.$router.push(this.selectedTag); - this.$store - .dispatch("tagsView/delOthersViews", this.selectedTag) - .then(() => { - this.moveToCurrentTag(); - }); + this.$router.push(this.selectedTag).catch(()=>{}); + this.$tab.closeOtherPage(this.selectedTag).then(() => { + this.moveToCurrentTag() + }) }, closeAllTags(view) { - this.$store.dispatch("tagsView/delAllViews").then(({ visitedViews }) => { - if (this.affixTags.some(tag => tag.path === view.path)) { - return; + this.$tab.closeAllPage().then(({ visitedViews }) => { + if (this.affixTags.some(tag => tag.path === this.$route.path)) { + return } - this.toLastView(visitedViews, view); - }); + this.toLastView(visitedViews, view) + }) }, toLastView(visitedViews, view) { - const latestView = visitedViews.slice(-1)[0]; + const latestView = visitedViews.slice(-1)[0] if (latestView) { - this.$router.push(latestView.fullPath); + this.$router.push(latestView.fullPath) } else { // now the default is to redirect to the home page if there is no tags-view, // you can adjust it according to your needs. - if (view.name === "Dashboard") { + if (view.name === 'Dashboard') { // to reload home page - this.$router.replace({ path: "/redirect" + view.fullPath }); + this.$router.replace({ path: '/redirect' + view.fullPath }) } else { - this.$router.push("/"); + this.$router.push('/') } } }, openMenu(tag, e) { - const menuMinWidth = 105; - const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left - const offsetWidth = this.$el.offsetWidth; // container width - const maxLeft = offsetWidth - menuMinWidth; // left boundary - const left = e.clientX - offsetLeft + 15; // 15: margin right + const menuMinWidth = 105 + const offsetLeft = this.$el.getBoundingClientRect().left // container margin left + const offsetWidth = this.$el.offsetWidth // container width + const maxLeft = offsetWidth - menuMinWidth // left boundary + const left = e.clientX - offsetLeft + 15 // 15: margin right if (left > maxLeft) { - this.left = maxLeft; + this.left = maxLeft } else { - this.left = left; + this.left = left } - this.top = e.clientY; - this.visible = true; - this.selectedTag = tag; + this.top = e.clientY + this.visible = true + this.selectedTag = tag }, closeMenu() { - this.visible = false; + this.visible = false + }, + handleScroll() { + this.closeMenu() } } -}; +} </script> <style lang="scss" scoped> @@ -219,7 +237,7 @@ width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -245,7 +263,7 @@ color: #fff; border-color: #42b983; &::before { - content: ""; + content: ''; background: #fff; display: inline-block; width: 8px; @@ -268,7 +286,7 @@ font-size: 12px; font-weight: 400; color: #333; - box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3); + box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); li { margin: 0; padding: 7px 16px; @@ -291,10 +309,10 @@ vertical-align: 2px; border-radius: 50%; text-align: center; - transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: all .3s cubic-bezier(.645, .045, .355, 1); transform-origin: 100% 50%; &:before { - transform: scale(0.6); + transform: scale(.6); display: inline-block; vertical-align: -3px; } -- Gitblit v1.9.3