6

jinlin

2023-11-30 499dfffcf6e41f558e80f57e16860e6fb2bdcb31

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<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>
        </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>
</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)
            }
          }
          console.log(route.meta.params, 'params: route.meta.params')
          this.$nextTick(() => {
            this.$router.push({name: route.name, params: route.meta.params})
          })
        }
      }
    }
  }
</script>