<template>
|
<div class="menu-wrapper">
|
<template v-for="item in routes" v-if="!item.hidden">
|
<!--<router-link v-if="hasNoChildren(item)" :to="{ path: item.path, params: { pid: item }}":key="item.path"-->
|
<a v-if="hasNoChildren(item)":key="item.path" @click="onSideItemClick({ path:item.path })">
|
<el-menu-item v-if="hasNoChildren(item)" :index="item.path" :class="{'submenu-title-noDropdown':!isNest}">
|
<!--<svg-icon :icon-class="item.meta.icon"></svg-icon>-->
|
<img-icon :icon-url="getIconUrl(item.meta.icon)"></img-icon>
|
<span slot="title">{{item.meta.title}}</span>
|
</el-menu-item>
|
</a>
|
<!--<router-link v-else-if="hasOneChildren(item)" :to="{ path: item.path+'/'+item.children[0].path, params: { pid: item }}":key="item.path"-->
|
<a v-else-if="hasOneChildren(item)" :key="item.path" @click="onSideItemClick({ path:item.path+'/'+item.children[0].path })">
|
<el-menu-item v-if="hasOneChildren(item)" :index="item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
|
<!--<svg-icon :icon-class="item.children[0].meta.icon"></svg-icon>-->
|
<img-icon :icon-url="getIconUrl(item.children[0].meta.icon)"></img-icon>
|
<span slot="title">{{item.children[0].meta.title}}</span>
|
</el-menu-item>
|
</a>
|
|
<el-submenu v-else :index="item.path" :key="item.path">
|
<template slot="title">
|
<!--<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>-->
|
<img-icon v-if="item.meta&&item.meta.icon" :icon-url="getIconUrl(item.meta.icon)"></img-icon>
|
<span v-if="item.meta&&item.meta.title" slot="title">{{item.meta.title}}</span>
|
</template>
|
|
<template v-for="child in item.children" v-if="!child.hidden">
|
<sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
|
<!--<router-link v-else :to="{ path:item.path+'/'+child.path,params:{pid:child.path}}" :key="child.path"-->
|
<a v-else :key="child.path" @click="onSideItemClick({ path:item.path+'/'+child.path })">
|
<el-menu-item :index="item.path+'/'+child.path">
|
<!--<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>-->
|
<img-icon v-if="child.meta&&child.meta.icon" :icon-url="getIconUrl(child.meta.icon)"></img-icon>
|
<span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>
|
</el-menu-item>
|
</a>
|
</template>
|
</el-submenu>
|
</template>
|
</div>
|
</template>
|
|
<script>
|
import ImgIcon from '@/components/ImgIcon/index'
|
import { cfgUtil } from 'cfgUtil'
|
export default {
|
name: 'SidebarItem',
|
components: { ImgIcon },
|
props: {
|
routes: {
|
type: Array
|
},
|
isNest: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
imgPreFix: (process.env.NODE_ENV === 'development' ? '' : '/mdc') + '/static/data/img/side/'
|
}
|
},
|
methods: {
|
hasNoChildren(item) {
|
return !item.children || item.children.length === 0
|
},
|
hasOneChildren(item) {
|
return item.children.length === 1
|
},
|
getIconUrl(key) {
|
const relUrl = cfgUtil.sideNavIconMap[key] || cfgUtil.sideNavIconMap.def
|
return relUrl ? this.imgPreFix + relUrl : ''
|
},
|
onSideItemClick(path) {
|
// console.log(path)
|
this.$router.push(path)
|
}
|
}
|
}
|
</script>
|
