145 lines
3.6 KiB
Vue
145 lines
3.6 KiB
Vue
<template>
|
|
<v-navigation-drawer temporary style="background-color:#F2E5D3" v-model="xdrawer" 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: #829672;
|
|
color:white;
|
|
}
|
|
.tile:active {
|
|
background: #829672;
|
|
color:white;
|
|
}
|
|
.v-list__group__header__prepend-icon .v-icon {
|
|
color: rgb(117, 61, 28);
|
|
}
|
|
.v-list__tile__title:hover {
|
|
color: white;
|
|
}
|
|
|
|
.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>
|