155 lines
3.8 KiB
Vue
155 lines
3.8 KiB
Vue
<template>
|
|
<v-navigation-drawer temporary class="blue lighten-2" v-model="xdrawer" dark fixed app>
|
|
<v-list>
|
|
|
|
<!-- LEVEL 0 -->
|
|
<template
|
|
v-for="(lev_0, i) in level_0"
|
|
>
|
|
<v-list-tile class="tile"
|
|
:key="lev_0.id + 10000"
|
|
v-if="!level_1['p_'+lev_0.id] && lev_0.is_parent=='N'"
|
|
@click="goTo(lev_0.url)">
|
|
<v-list-tile-action>
|
|
<v-icon>{{ lev_0.icon }}</v-icon>
|
|
</v-list-tile-action>
|
|
<v-list-tile-title>{{ lev_0.name }}</v-list-tile-title>
|
|
</v-list-tile>
|
|
|
|
<v-list-group
|
|
:key="lev_0.id"
|
|
:prepend-icon="lev_0.icon"
|
|
:value="lev_0.state"
|
|
v-if="level_1['p_'+lev_0.id]"
|
|
>
|
|
<template v-slot:activator>
|
|
<v-list-tile class="tile">
|
|
<v-list-tile-title>{{ lev_0.name }}</v-list-tile-title>
|
|
</v-list-tile>
|
|
</template>
|
|
|
|
<!-- LEVEL 1 -->
|
|
<template
|
|
v-for="(lev_1, j) in level_1['p_'+lev_0.id]"
|
|
>
|
|
<v-list-tile class="tile"
|
|
:key="lev_1.id + 10000"
|
|
v-if="!level_2['p_'+lev_1.id] && lev_1.is_parent=='N'"
|
|
sub-group
|
|
no-action
|
|
@click="goTo(lev_1.url)"
|
|
>
|
|
<v-list-tile-action>
|
|
<!-- <v-icon>home</v-icon> -->
|
|
</v-list-tile-action>
|
|
<v-list-tile-title>{{ lev_1.name }}</v-list-tile-title>
|
|
</v-list-tile>
|
|
|
|
<v-list-group
|
|
:key="lev_1.id"
|
|
:value="lev_1.state"
|
|
v-show="level_2['p_'+lev_1.id]"
|
|
sub-group
|
|
no-action
|
|
>
|
|
<template v-slot:activator>
|
|
<v-list-tile>
|
|
<v-list-tile-title>{{ lev_1.name }}</v-list-tile-title>
|
|
</v-list-tile>
|
|
</template>
|
|
|
|
<!-- LEVEL 2 -->
|
|
<template
|
|
v-for="(lev_2, k) in level_2['p_'+lev_1.id]"
|
|
>
|
|
<v-list-tile class="tile"
|
|
:key="lev_2.id"
|
|
@click="goTo(lev_2.url)">
|
|
<!-- <v-list-tile-action>
|
|
<v-icon>home</v-icon>
|
|
</v-list-tile-action> -->
|
|
<v-list-tile-title>{{ lev_2.name }}</v-list-tile-title>
|
|
</v-list-tile>
|
|
|
|
</template>
|
|
</v-list-group>
|
|
|
|
</template>
|
|
|
|
</v-list-group>
|
|
|
|
</template>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tile {
|
|
margin: 5px;
|
|
border-radius: 4px;
|
|
}
|
|
.tile:hover {
|
|
background-color: #1E88E5;
|
|
}
|
|
.tile:active {
|
|
background: #bec5b7;
|
|
}
|
|
.v-list__group__header__prepend-icon .v-icon {
|
|
color: white;
|
|
}
|
|
.v-list__tile__title:hover {
|
|
color: #BBDEFB;
|
|
}
|
|
|
|
.v-navigation-drawer {
|
|
z-index: 1003;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<style>
|
|
.v-overlay--active {
|
|
z-index: 1002;
|
|
}
|
|
</style>
|
|
<script>
|
|
module.exports = {
|
|
props: {
|
|
drawer: Boolean
|
|
},
|
|
|
|
computed : {
|
|
xdrawer: {
|
|
get() {
|
|
return this.drawer
|
|
},
|
|
set(v) {
|
|
this.$emit("togleDrawer")
|
|
}
|
|
},
|
|
level_0 () {
|
|
return this.$store.state.system.menu_level_0
|
|
},
|
|
|
|
level_1 () {
|
|
return this.$store.state.system.menu_level_1
|
|
},
|
|
|
|
level_2 () {
|
|
return this.$store.state.system.menu_level_2
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
this.$store.dispatch('system/get_menu')
|
|
},
|
|
|
|
methods : {
|
|
goTo (url) {
|
|
window.location = BASE_URL + '/one-ui/' + url
|
|
}
|
|
}
|
|
}
|
|
</script>
|