You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
4.0 KiB
135 lines
4.0 KiB
<template>
|
|
<div class="left-menu">
|
|
<el-submenu v-if="menu.children && menu.children.length >= 1 && menu.children[0].isShow == 1" :index="menu.id" :popper-append-to-body="false">
|
|
<template slot="title">
|
|
<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`" /></svg>
|
|
<span v-show="$store.state.sidebarFold===false">{{ menu.name }}</span>
|
|
</template>
|
|
<sub-menu v-for="item in menu.children" :key="item.id" :menu="item" />
|
|
</el-submenu>
|
|
<el-menu-item v-else ref="li" :index="menu.id" @click="openMenuHandle(menu.id)">
|
|
<!-- :href="isBrowserTabOpen(menu) ? iframeURL: 'javascript:;'"
|
|
:target="isBrowserTabOpen(menu) ? '_blank' : '_self'" -->
|
|
<a>
|
|
<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`" /></svg>
|
|
<span v-show="$store.state.sidebarFold===false">{{ menu.name }}</span>
|
|
</a>
|
|
</el-menu-item>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SubMenu from './main-sidebar-sub-menu.vue'
|
|
export default {
|
|
inject: ['refresh'],
|
|
name: 'SubMenu',
|
|
components: {
|
|
SubMenu
|
|
},
|
|
props: {
|
|
menu: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
browserTabOpenList: [
|
|
// '1353981045241810946', // 写死，另打开iframe
|
|
// '1344097112555024386'
|
|
],
|
|
iframeURL: '',
|
|
routerName: ''
|
|
}
|
|
},
|
|
watch: {
|
|
$route(val) {
|
|
// console.log(val)
|
|
this.routerName = val.name
|
|
}
|
|
},
|
|
created() {
|
|
this.routerName = this.$route.name
|
|
// this.$nextTick(() => {
|
|
// if (this.$refs.li) {
|
|
// const $li = this.$refs.li.$el
|
|
// const $a = $li.firstElementChild
|
|
// if ($a) {
|
|
// let pl = '0'; let pr = '0'
|
|
// if ($li.currentStyle) {
|
|
// pl = $li.currentStyle.paddingLeft
|
|
// pr = $li.currentStyle.paddingRight
|
|
// } else {
|
|
// pl = window.document.defaultView.getComputedStyle($li, null).paddingLeft
|
|
// pr = window.document.defaultView.getComputedStyle($li, null).paddingRight
|
|
// }
|
|
// $li.setAttribute('style', 'padding-left: 0; padding-right: 0;')
|
|
// $a.setAttribute('style', `padding-left: ${pl}; padding-right: ${pr};`)
|
|
// }
|
|
// }
|
|
// })
|
|
},
|
|
methods: {
|
|
// 判断menuId
|
|
isMenuIdFun(menuId, dynamicMenuRoutes, callback) {
|
|
dynamicMenuRoutes.forEach((item) => {
|
|
if (item.meta.menuId === menuId) {
|
|
return callback && callback(item)
|
|
} else if (item.children.length > 0) {
|
|
this.isMenuIdFun(menuId, item.children, callback)
|
|
}
|
|
})
|
|
},
|
|
// 是否通过浏览器Tab打开菜单
|
|
isBrowserTabOpen(menu) {
|
|
return this.browserTabOpenList.filter(item => item === menu.id).length >= 1
|
|
// return false
|
|
},
|
|
// 获取浏览器Tab打开菜单URL
|
|
getBrowserTabOpenURL(menuId) {
|
|
this.isMenuIdFun(menuId, window.SITE_CONFIG.dynamicMenuRoutes, (item) => {
|
|
this.iframeURL = item.meta.iframeURL
|
|
})
|
|
},
|
|
// 点击菜单获取id
|
|
openMenuHandle(menuId) {
|
|
this.$store.commit('activeIndexFun', menuId)
|
|
this.isMenuIdFun(menuId, window.SITE_CONFIG.dynamicMenuRoutes, (item) => {
|
|
// console.log(item)
|
|
setTimeout(() => {
|
|
if (this.routerName === item.name) {
|
|
this.refresh()
|
|
} else {
|
|
// console.log(item.name)
|
|
this.$router.push({
|
|
name: item.name
|
|
})
|
|
}
|
|
}, 200)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.aui-sidebar__menu {
|
|
.el-menu-item > a {
|
|
display: block;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
.left-menu {
|
|
.el-menu-item ,.el-submenu__title{
|
|
padding-left: 4px !important;
|
|
}
|
|
.el-menu--inline {
|
|
padding-left: 10px;
|
|
}
|
|
.el-submenu__icon-arrow {
|
|
top: 60%;
|
|
}
|
|
}
|
|
|
|
</style>
|