<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>
|
