105 lines
3.4 KiB
Vue
105 lines
3.4 KiB
Vue
|
<template>
|
||
|
|
<aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
|
||
|
|
<div class="site-sidebar__inner">
|
||
|
|
<el-menu
|
||
|
|
:default-active="menuActiveName || 'home'"
|
||
|
|
:collapse="sidebarFold"
|
||
|
|
:collapseTransition="false"
|
||
|
|
class="site-sidebar__menu">
|
||
|
|
<el-menu-item index="home" @click="$router.push({ name: 'home' })">
|
||
|
|
<icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
|
||
|
|
<span slot="title">首页</span>
|
||
|
|
</el-menu-item>
|
||
|
|
<el-menu-item index="bigScreen" @click="getUrl">
|
||
|
|
<icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
|
||
|
|
<span slot="title">大屏</span>
|
||
|
|
</el-menu-item>
|
||
|
|
<sub-menu
|
||
|
|
v-for="menu in menuList"
|
||
|
|
:key="menu.menuId"
|
||
|
|
:menu="menu"
|
||
|
|
:dynamicMenuRoutes="dynamicMenuRoutes">
|
||
|
|
</sub-menu>
|
||
|
|
</el-menu>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import SubMenu from './main-sidebar-sub-menu'
|
||
|
|
import { isURL } from '@/utils/validate'
|
||
|
|
export default {
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
dynamicMenuRoutes: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
SubMenu
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
sidebarLayoutSkin: {
|
||
|
|
get () { return this.$store.state.common.sidebarLayoutSkin }
|
||
|
|
},
|
||
|
|
sidebarFold: {
|
||
|
|
get () { return this.$store.state.common.sidebarFold }
|
||
|
|
},
|
||
|
|
menuList: {
|
||
|
|
get () { return this.$store.state.common.menuList },
|
||
|
|
set (val) { this.$store.commit('common/updateMenuList', val) }
|
||
|
|
},
|
||
|
|
menuActiveName: {
|
||
|
|
get () { return this.$store.state.common.menuActiveName },
|
||
|
|
set (val) { this.$store.commit('common/updateMenuActiveName', val) }
|
||
|
|
},
|
||
|
|
mainTabs: {
|
||
|
|
get () { return this.$store.state.common.mainTabs },
|
||
|
|
set (val) { this.$store.commit('common/updateMainTabs', val) }
|
||
|
|
},
|
||
|
|
mainTabsActiveName: {
|
||
|
|
get () { return this.$store.state.common.mainTabsActiveName },
|
||
|
|
set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
$route: 'routeHandle'
|
||
|
|
},
|
||
|
|
created () {
|
||
|
|
this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
|
||
|
|
this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
|
||
|
|
this.routeHandle(this.$route)
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getUrl () {
|
||
|
|
let routeData = this.$router.resolve({ path: '/bigScreen' })
|
||
|
|
window.open(routeData.href, '_blank')
|
||
|
|
},
|
||
|
|
// 路由操作
|
||
|
|
routeHandle (route) {
|
||
|
|
if (route.meta.isTab) {
|
||
|
|
// tab选中, 不存在先添加
|
||
|
|
var tab = this.mainTabs.filter(item => item.name === route.name)[0]
|
||
|
|
if (!tab) {
|
||
|
|
if (route.meta.isDynamic) {
|
||
|
|
route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
|
||
|
|
if (!route) {
|
||
|
|
return console.error('未能找到可用标签页!')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
tab = {
|
||
|
|
menuId: route.meta.menuId || route.name,
|
||
|
|
name: route.name,
|
||
|
|
title: route.meta.title,
|
||
|
|
type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
|
||
|
|
iframeUrl: route.meta.iframeUrl || ''
|
||
|
|
}
|
||
|
|
this.mainTabs = this.mainTabs.concat(tab)
|
||
|
|
}
|
||
|
|
this.menuActiveName = tab.menuId + ''
|
||
|
|
this.mainTabsActiveName = tab.name
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|