chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: เพิ่ม route ของ เมนู

Browse source
This commit is contained in:
Net 2024-04-02 14:22:29 +07:00
parent d34e044d1a
commit 8a16a967f8
2 changed files with 32 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/file-account-outline.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.7 KiB

47
src/components/DrawerComponent.vue
View file

@ -1,39 +1,56 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const currentRoute = ref<string>(''); const currentRoute = ref<string>('');
const labelMenu: { const labelMenu: {
label: string; label: string;
icon: string; icon: string;
route: string;
}[] = [ }[] = [
{ label: 'Dashboard', icon: 'mdi-folder-arrow-left' }, { label: 'Dashboard', icon: 'img:/file-account-outline.png', route: '' },
{ label: 'จัดการสาขา', icon: 'mdi-folder-arrow-left' }, {
{ label: 'จัดการบุคลากร', icon: 'mdi-account-settings-outline' }, label: 'จัดการสาขา',
{ label: 'จัดการลูกค้า', icon: 'mdi-account-settings-outline' }, icon: 'mdi-sitemap-outline',
{ label: 'สินค้าและบริการ', icon: 'mdi-folder-arrow-left' }, route: '/branch-management',
{ label: 'ใบเสนอราคา', icon: 'mdi-folder-arrow-left' }, },
{ label: 'รายการคำขอ', icon: 'mdi-folder-arrow-left' }, { label: 'จัดการบุคลากร', icon: 'mdi-account-settings-outline', route: '' },
{ label: 'ใบสั่งงาน', icon: 'mdi-folder-arrow-left' }, { label: 'จัดการลูกค้า', icon: 'mdi-account-settings-outline', route: '' },
{ label: 'ใบรับสินค้า', icon: 'mdi-folder-arrow-left' }, { label: 'สินค้าและบริการ', icon: 'mdi-package-variant', route: '' },
{ label: 'รายการทางบัญชี', icon: 'mdi-account-cash-outline' }, { label: 'ใบเสนอราคา', icon: 'mdi-package-variant', route: '' },
{ label: 'รายงาน', icon: 'mdi-file-chart-outline' }, { label: 'รายการคำขอ', icon: 'mdi-package-variant', route: '' },
{ label: 'ใบสั่งงาน', icon: 'mdi-package-variant', route: '' },
{ label: 'ใบรับสินค้า', icon: 'mdi-package-variant', route: '' },
{ label: 'รายการทางบัญชี', icon: 'mdi-account-cash-outline', route: '' },
{ label: 'รายงาน', icon: 'mdi-file-chart-outline', route: '' },
]; ];
const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', { const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
default: false, default: false,
}); });
function navigateTo(label: string, destination: string) {
currentRoute.value = label;
router.push(`${destination}`);
}
</script> </script>
<template> <template>
<!-- Drawer --> <!-- Drawer -->
<q-drawer v-model="leftDrawerOpen" side="left" show-if-above> <q-drawer
:breakpoint="500"
v-model="leftDrawerOpen"
side="left"
show-if-above
>
<div class="main-bar"> <div class="main-bar">
<div <div
class="column items-center justify-center q-pa-xl cursor-pointer" class="column items-center justify-center q-pa-xl cursor-pointer"
@click="$router.push('/')" @click="$router.push('/')"
id="btn-drawer-home" id="btn-drawer-home"
> >
<q-img src="/logo.png" /> <q-img src="/logo.png" style="width: 70%; height: 70%" />
</div> </div>
</div> </div>
@ -42,11 +59,11 @@ const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
v-for="v in labelMenu" v-for="v in labelMenu"
:key="v.label" :key="v.label"
clickable clickable
@click="currentRoute = v.label" @click="navigateTo(v.label, v.route)"
class="no-padding" class="no-padding"
:class="{ active: currentRoute === v.label, dark: $q.dark.isActive }" :class="{ active: currentRoute === v.label, dark: $q.dark.isActive }"
> >
<q-item-section id="btn-drawer-back " style="border: 10px"> <q-item-section id="btn-drawer-back ">
<q-item-label class="q-pl-lg"> <q-item-label class="q-pl-lg">
<div class="box-border-left" /> <div class="box-border-left" />
<q-icon :name="v.icon" size="sm" class="q-mr-xs" /> <q-icon :name="v.icon" size="sm" class="q-mr-xs" />