<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="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>
|
</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(() => {
|
console.log(route.meta.params, "route.meta.params")
|
this.$router.push({name: route.name, query: route.meta.params, params: route.meta.params})
|
})
|
}
|
}
|
}
|
}
|
</script>
|
