修改

jinlin

2024-02-23 1772fc5e211f9e9e0ab4cdc6c29b436aac178c2a

 web/src/views/layout/main-sidebar-sub-menu.vue

@@ -1,79 +1,84 @@
<template>
  <div>
    <template v-for="navMenu in navMenus">
      <!-- 此菜单下还有子菜单 -->
      <el-submenu v-if="navMenu.children && navMenu.showMenu==1 && navMenu.children.length>=1"
                  :key="key" :index="navMenu.id">
        <template slot="title">
          <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${navMenu.icon}`"></use></svg>
          <span> {{navMenu.name}}</span>
    <div>
        <template v-for="navMenu in navMenus">
            <!-- 此菜单下还有子菜单 -->
            <el-submenu v-if="navMenu.children && navMenu.showMenu==1 && navMenu.children.length>=1"
                        :key="key" :index="navMenu.id">
                <template slot="title">
                    <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
                        <use :xlink:href="`#${navMenu.icon}`"></use>
                    </svg>
                    <span> {{navMenu.name}}</span>
                </template>
                <!-- 递归 -->
                <subMmenu :navMenus="navMenu.children"></subMmenu>
            </el-submenu>
            <!-- 最后一级菜单 -->
            <el-menu-item v-else-if="navMenu.showMenu==1" :key="key" :index="navMenu.id"
                          @click="gotoRouteHandle(navMenu.id)">
                <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
                    <use :xlink:href="`#${navMenu.icon}`"></use>
                </svg>
                <span slot="title">{{navMenu.name}}</span>
            </el-menu-item>
        </template>
        <!-- 递归 -->
        <subMmenu :navMenus="navMenu.children"></subMmenu>
      </el-submenu>
      <!-- 最后一级菜单 -->
      <el-menu-item v-else-if="navMenu.showMenu==1"  :key="navMenu.id" :index="navMenu.id" @click="gotoRouteHandle(navMenu.id)">
        <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${navMenu.icon}`"></use></svg>
        <span slot="title">{{navMenu.name}}</span>
      </el-menu-item>
    </template>
  </div>
    </div>
</template>

<script>
  export default {
    name: 'subMmenu',
    props:{
      navMenus:{
        type: Array,
        default: () => []
      }

    },
    // created() {
    //   this.filterByKeyword()
    // },
    // props: [
    //     'navMenus'
    // ],
    computed: {
      key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
      }
    },
    methods: {
      // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
      tabRemoveHandle(tabName) {
        if (tabName === 'home') {
          return false
        }
        console.log(this.$store.state.contentTabs,'this.$store.state.contentTabs 1')
        this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
        console.log(this.$store.state.contentTabs,'this.$store.state.contentTabs 2')
        if (this.$store.state.contentTabs.length <= 0) {
          this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = 'home'
          return false
        }
      },
      gotoRouteHandle(menuId) {
        var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
        if (route) {
          console.log(route,'route')
          let tab = this.$store.state.contentTabs.filter(item => item.name === menuId)[0]
          if (tab)
          {
            if (route.path==='map-network-diagram-edit'
              ||route.path==='map-network-diagram-view'
              ||route.path==='map-flowChart-edit'){
              this.tabRemoveHandle(tab.name)
    export default {
        name: 'subMmenu',
        props: {
            navMenus: {
                type: Array,
                default: () => []
            }
          }
          console.log(route.meta.params, 'params: route.meta.params')
          this.$nextTick(() => {
            this.$router.push({name: route.name, params: route.meta.params})
          })

        },
        // created() {
        //   this.filterByKeyword()
        // },
        // props: [
        //     'navMenus'
        // ],
        computed: {
            key() {
                return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
            }
        },
        methods: {
            // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
            tabRemoveHandle(tabName) {
                if (tabName === 'home') {
                    return false
                }
                console.log(this.$store.state.contentTabs, 'this.$store.state.contentTabs 1')
                this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
                console.log(this.$store.state.contentTabs, 'this.$store.state.contentTabs 2')
                if (this.$store.state.contentTabs.length <= 0) {
                    this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = 'home'
                    return false
                }
            },
            gotoRouteHandle(menuId) {
                var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
                if (route) {
                    console.log(route, 'route')
                    let tab = this.$store.state.contentTabs.filter(item => item.name === menuId)[0]
                    if (tab) {
                        if (route.path === 'map-network-diagram-edit'
                            || route.path === 'map-network-diagram-view'
                            || route.path === 'map-flowChart-edit') {
                            this.tabRemoveHandle(tab.name)
                        }
                    }
                    console.log(route.meta.params, 'params: route.meta.params')
                    this.$nextTick(() => {
                        console.log(route.meta.params, "route.meta.params")
                        this.$router.push({name: route.name, query: route.meta.params, params: route.meta.params})
                    })
                }
            }
        }
      }
    }
  }
</script>