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