<template>
|
<sidenav :orientation="orientation" :class="curClasses">
|
|
<!-- Brand demo (see src/demo.css) -->
|
<div class="app-brand demo" v-if="orientation !== 'horizontal'">
|
<span class="app-brand-logo demo">
|
<img src="../assets/img/logo.png" width="100%" alt="">
|
</span>
|
<router-link to="/" class="app-brand-text demo sidenav-text font-weight-normal ml-2">{{$store.state.projectTitle}}</router-link>
|
<!-- 左边的三个横行 -->
|
<a href="javascript:void(0)" class="layout-sidenav-toggle sidenav-link text-large ml-auto" @click="toggleSidenav()">
|
<i class="ion ion-md-menu align-middle pl10"></i>
|
</a>
|
</div>
|
<div class="sidenav-divider mt-0" v-if="orientation !== 'horizontal'"></div>
|
|
<!-- Links -->
|
<div class="sidenav-inner" :class="{ 'py-1': orientation !== 'horizontal' }" >
|
<!-- <sidenav-router-link icon="fas fa-home" to="/" :exact="true">首页</sidenav-router-link> -->
|
<!-- 菜单 start menuListData -->
|
<!-- <sidenav-divider class="mb-1"/> -->
|
<sidenav-header
|
class="small font-weight-semibold"
|
>
|
{{$store.state.projectTitle}}
|
</sidenav-header>
|
<sidenav-router-link
|
v-for=" menu in menuListData "
|
v-if="(!menu.child||!isChildMenu(menu.child) )&&menu.type !== 2"
|
:key="menu.id"
|
:icon="menu.icon"
|
:to="menu.url"
|
exact
|
:active="isMenuActive(menu.url)"
|
>
|
{{menu.name}}
|
</sidenav-router-link>
|
<sidenav-menu
|
v-for=" menu in menuListData"
|
v-if="menu.child&&isChildMenu(menu.child)&&menu.type !==2"
|
:key="menu.id"
|
:icon="menu.icon"
|
:open="isMenuOpen(menu.url)"
|
>
|
<template slot="link-text">{{menu.name}}</template>
|
<sidenav-router-link
|
v-for="iteam in menu.child"
|
:key="iteam.id"
|
v-if="(!iteam.child||!isChildMenu(iteam.child)&& iteam.type !== 2 )"
|
:to="iteam.url"
|
:exact="true"
|
>
|
{{iteam.name}}
|
</sidenav-router-link>
|
<sidenav-menu
|
v-for=" iteam in menu.child "
|
v-if="iteam.child&&isChildMenu(iteam.child)&& iteam.type !== 2"
|
:key="iteam.id"
|
:icon="iteam.icon"
|
:open="isMenuOpen(iteam.url)"
|
>
|
<template slot="link-text">{{iteam.name}}</template>
|
<sidenav-router-link
|
v-for="it in iteam.child"
|
:key="it.id"
|
v-if="it.type !== 2"
|
:to="it.url"
|
:exact="true"
|
>
|
{{it.name}}
|
</sidenav-router-link>
|
</sidenav-menu>
|
</sidenav-menu>
|
<!-- 菜单 end-->
|
</div>
|
<!-- <div class="sidenav-inner" :class="{ 'py-1': orientation !== 'horizontal' }" >
|
<sidenav-router-link icon="fas fa-home" to="/" :exact="true">首页</sidenav-router-link>
|
<sidenav-divider class="mb-1"/>
|
<sidenav-header class="small font-weight-semibold">{{$store.state.projectTitle}}</sidenav-header>
|
<sidenav-router-link v-for=" menu in menuListData " v-if="(!menu.child||!isChildMenu(menu.child) )&&menu.type !== 2" :key="menu.id" :icon="menu.icon" :to="menu.url" :exact="true">{{menu.name}}</sidenav-router-link>
|
<sidenav-menu v-for=" menu in menuListData " v-if="menu.child&&isChildMenu(menu.child)&&menu.type !==2" :key="menu.id" :icon="menu.icon" :active="isMenuActive(menu.url)" :open="isMenuOpen(menu.url)">
|
<template slot="link-text">{{menu.name}}</template>
|
<sidenav-router-link v-for="iteam in menu.child" :key="iteam.id" v-if="iteam.type !== 2" :to="iteam.url" :exact="true">{{iteam.name}}</sidenav-router-link>
|
</sidenav-menu>
|
</div> -->
|
</sidenav>
|
</template>
|
|
<script>
|
import router from '@/router'
|
import { getMenuListData } from '@/server/login.js'
|
import {
|
Sidenav,
|
SidenavLink,
|
SidenavRouterLink,
|
SidenavMenu,
|
SidenavHeader,
|
SidenavBlock,
|
SidenavDivider
|
} from '@/vendor/libs/sidenav'
|
import { findButtonAuthoritys, findInArr } from '../components/common/util.js'
|
export default {
|
name: 'app-layout-sidenav',
|
components: {
|
Sidenav,
|
SidenavLink,
|
SidenavRouterLink,
|
SidenavMenu,
|
SidenavHeader,
|
SidenavBlock,
|
SidenavDivider
|
},
|
|
props: {
|
orientation: {
|
type: String,
|
default: 'vertical'
|
}
|
},
|
data() {
|
return {
|
menuListData: []
|
}
|
},
|
computed: {
|
curClasses() {
|
let bg = this.layoutSidenavBg
|
|
if (
|
this.orientation === 'horizontal' &&
|
(bg.indexOf(' sidenav-dark') !== -1 ||
|
bg.indexOf(' sidenav-light') !== -1)
|
) {
|
bg = bg
|
.replace(' sidenav-dark', '')
|
.replace(' sidenav-light', '')
|
.replace('-darker', '')
|
.replace('-dark', '')
|
}
|
|
return (
|
`bg-${bg} ` +
|
(this.orientation !== 'horizontal'
|
? 'layout-sidenav'
|
: 'layout-sidenav-horizontal container-p-x flex-grow-0')
|
)
|
}
|
},
|
|
methods: {
|
isMenuActive(url) {
|
return this.$route.matched.length > 1 && this.$route.matched[1].path === url
|
},
|
isMenuOpen(url) {
|
return (
|
this.$route.path.indexOf(url) === 0 && this.orientation !== 'horizontal'
|
)
|
},
|
toggleSidenav() {
|
this.layoutHelpers.toggleCollapsed()
|
},
|
isChildMenu(arr) {
|
for (let iteam of arr) {
|
if (iteam.type === 1) {
|
return true
|
}
|
}
|
return false
|
},
|
/* 获取菜单数据 */
|
async getMenuList() {
|
let results = await getMenuListData({
|
module: this.$store.state.menuName
|
})
|
if (results && results.success) {
|
// if (results && results.length && (this.$route.query.is_login || this.$route.path === '/')) {
|
if (
|
results.data &&
|
results.data.length &&
|
(this.$route.query.is_login || this.$route.path === '/') &&
|
results.data[0].url
|
) {
|
this.$router.replace(results.data[0].url)
|
}
|
/* 菜单数据赋值 permission权限 */
|
this.menuListData = results.data
|
/* 存储权限 */
|
let buttonAuthoritys = []
|
findButtonAuthoritys(results.data, authority => {
|
if (findInArr(authority, buttonAuthoritys) === -1) {
|
buttonAuthoritys.push(authority)
|
}
|
})
|
sessionStorage.setItem('buttonAuthoritys', ',' + buttonAuthoritys + ',')
|
sessionStorage.setItem('menuInfo', JSON.stringify(results.data))
|
} else {
|
this.$toast({
|
type: 'error',
|
message: '菜单获取失败'
|
})
|
}
|
}
|
},
|
created() {
|
// 初始化数据
|
let token =
|
JSON.parse(sessionStorage.getItem('loginedInfo')) &&
|
JSON.parse(sessionStorage.getItem('loginedInfo')).access_token
|
if (token && token !== '') {
|
this.getMenuList()
|
} else {
|
router.push({
|
path: '/login'
|
})
|
}
|
},
|
watch: {
|
$route() {
|
if (this.$route.path === '/') {
|
let menuInfo = sessionStorage.getItem('menuInfo')
|
menuInfo = JSON.parse(menuInfo)
|
menuInfo && this.$router.replace(menuInfo[0].url)
|
}
|
}
|
}
|
}
|
</script>
|
