三级菜单自动配置组件

RuoYi

2020-11-28 a69cc94f354bcc0b787b0de4fe83b7d0c8e3b742

 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"

@@ -9,6 +9,7 @@
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"

        tag="span"

        class="tags-view-item"

        :style="activeStyle(tag)"

        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"

        @contextmenu.prevent.native="openMenu(tag,$event)"

      >

@@ -28,6 +29,7 @@
<script>

import ScrollPane from './ScrollPane'

import path from 'path'

import Global from "@/layout/components/global.js";



export default {

  components: { ScrollPane },

@@ -46,6 +48,9 @@
    },

    routes() {

      return this.$store.state.permission.routes

    },

    theme() {

      return this.$store.state.settings.theme;

    }

  },

  watch: {

@@ -68,6 +73,13 @@
  methods: {

    isActive(route) {

      return route.path === this.$route.path

    },

    activeStyle(tag) {

      if (!this.isActive(tag)) return {};

      return {

        "background-color": this.theme,

        "border-color": this.theme

      };

    },

    isAffix(tag) {

      return tag.meta && tag.meta.affix

@@ -133,6 +145,7 @@
          })

        })

      })

      Global.$emit("removeCache", "refreshSelectedTag", this.selectedTag);

    },

    closeSelectedTag(view) {

      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {

@@ -140,25 +153,28 @@
          this.toLastView(visitedViews, view)

        }

      })

      Global.$emit("removeCache", "closeSelectedTag", view);

    },

    closeOthersTags() {

      this.$router.push(this.selectedTag)

      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {

        this.moveToCurrentTag()

      })

      Global.$emit("removeCache", "closeOthersTags", this.selectedTag);

    },

    closeAllTags(view) {

      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {

        if (this.affixTags.some(tag => tag.path === view.path)) {

        if (this.affixTags.some(tag => tag.path === this.$route.path)) {

          return

        }

        this.toLastView(visitedViews, view)

      })

      Global.$emit("removeCache", "closeAllTags");

    },

    toLastView(visitedViews, view) {

      const latestView = visitedViews.slice(-1)[0]

      if (latestView) {

        this.$router.push(latestView)

        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.

@@ -189,6 +205,9 @@
    },

    closeMenu() {

      this.visible = false

    },

    handleScroll() {

      this.closeMenu()

    }

  }

}