andy/westone-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add quick menu, header table

Browse Source
This commit is contained in:
adibwp
2024-08-29 09:31:49 +07:00
parent b5babbfeac
commit 087bb1dc47
9 changed files with 624 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
globalcomponent/one-menu.vue
View File

@@ -7,7 +7,7 @@
</v-list-item>
<!-- LEVEL 0 -->
<template v-for="(lev_0, i) in level_0" :key="lev_0.id" >
<v-list-item v-if="!level_1['p_' + lev_0.id] && lev_0.is_parent === 'N'" @click="goto(lev_0.url)" color="primary" rounded="lg" class="my-2">
<v-list-item v-if="!level_1['p_' + lev_0.id] && lev_0.is_parent === 'N'" @click="goto(lev_0)" color="primary" rounded="lg" class="my-2">
<v-list-item-title >{{ lev_0.name }}</v-list-item-title>
</v-list-item>
<v-list-group v-else :value="lev_0.name" >
@@ -18,7 +18,7 @@
</template>
<!-- LEVEL 1 -->
<template v-for="(lev_1, j) in level_1['p_' + lev_0.id]" :key="lev_1.id">
<v-list-item v-if="!level_2['p_' + lev_1.id] && lev_1.is_parent === 'N'" @click="goto(lev_1.url)" color="primary" rounded="lg" class="{'primary--text': activeItem === lev_2.id}">
<v-list-item v-if="!level_2['p_' + lev_1.id] && lev_1.is_parent === 'N'" @click="goto(lev_1)" color="primary" rounded="lg" class="{'primary--text': activeItem === lev_2.id}">
<v-list-item-title><v-icon>mdi-circle-small</v-icon>{{ lev_1.name }}</v-list-item-title>
</v-list-item>
<v-list-group v-else :value="lev_1.state" v-show="level_2['p_' + lev_1.id]" sub-group no-action >
@@ -29,7 +29,7 @@
</template>
<!-- LEVEL 2 -->
<template v-for="(lev_2, k) in level_2['p_' + lev_1.id]" :key="lev_2.id">
<v-list-item class="" @click="goto(lev_2.url)" color="primary" rounded="lg">
<v-list-item class="" @click="goto(lev_2)" color="primary" rounded="lg">
<v-list-item-title><v-icon>mdi-circle-small</v-icon>{{ lev_2.name }}</v-list-item-title>
</v-list-item>
</template>
@@ -73,10 +73,19 @@ export default {
this.$store.commit("system/update_drawer", val);
},
},
active_menu: {
get() {
return this.$store.state.system.active_menu;
},
set(menu) {
this.$store.commit("system/update_active_menu", menu);
}
}
},
methods: {
goto(url) {
console.log("menuju ke- ", url)
goto(item) {
console.log("menuju ke- ", item.url);
this.active_menu = item;
}
},
};

50
globalcomponent/quick-menu.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<div class="rounded-xl bg-primary-lighten mx-2 my-2">
<v-container fluid style="overflow-x: auto; white-space: nowrap">
<v-btn
class="mr-2"
size="small"
:variant="active_menu.id === qmenu.id ? 'elevated' : 'outlined'"
rounded="xl"
color="primary-darken"
v-for="qmenu in qmenus"
@click="redirect(qmenu)"
>
{{ qmenu.name }}
</v-btn>
</v-container>
</div>
</template>
<script type="module">
export default {
name: "QuickAccessComponent",
mounted() {
this.$store.dispatch('system/loadQuickMenu');
},
data() {
return {
pressed: false,
}
},
computed: {
qmenus() {
return this.$store.state.system.quick_menu;
},
active_menu: {
get() {
return this.$store.state.system.active_menu;
},
set(menu) {
this.$store.commit("system/update_active_menu", menu);
}
}
},
methods: {
redirect(item) {
this.active_menu = item;
console.log("redirect url ", item.url);
}
},
}
</script>