hrms-bangkok/web-faq
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fixing sub path

Browse source
This commit is contained in:
Warunee Tamkoo 2024-12-08 12:50:18 +07:00
parent 0679ceb9bf
commit f810ef6cec
3 changed files with 490 additions and 343 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/router/index.ts
View file

@ -1,10 +1,12 @@
import { createRouter, createWebHistory } from 'vue-router'
import { createRouter, createWebHistory } from "vue-router";
const MainLayout = () => import("@/views/MainLayout.vue");
const Metadata = () => import("@/modules/01_metadata/views/Main.vue");
const Organizational = () => import("@/modules/02_organizational/views/Main.vue");
const Organizational = () =>
import("@/modules/02_organizational/views/Main.vue");
const Registration = () => import("@/modules/03_registration/views/Main.vue");
const Registemployee = () => import("@/modules/04_registry-employee/views/Main.vue");
const Registemployee = () =>
import("@/modules/04_registry-employee/views/Main.vue");
const Order = () => import("@/modules/05_order/views/Main.vue");
const Recruitmain = () => import("@/modules/06_recruitmain/views/Main.vue");
const Placement = () => import("@/modules/07_placement/views/Main.vue");
@ -16,26 +18,18 @@ const Leaveadmin = () => import("@/modules/11_leaveadmin/views/Main.vue");
const Estimate = () => import("@/modules/12_estimate/views/Main.vue");
const Discipline = () => import("@/modules/13_discipline/views/Main.vue");
const Contact = () => import("@/modules/00_contact/views/Main.vue");
const Maintenance = () => import("@/modules/001_Maintenance/views/Main.vue");
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
history: createWebHistory(`/faq/`),
routes: [
{
path: '/',
name: 'home',
path: "/",
name: "home",
component: MainLayout,
children:[
children: [
{
path: "/metadata",
name: "metadata",
@ -74,66 +68,59 @@ const router = createRouter({
{
path: "/order",
name: "Order",
component: Order
component: Order,
},
{
path: "/recruitmain",
name: "Recruitmain",
component: Recruitmain
component: Recruitmain,
},
{
path: "/placement",
name: "Placement",
component: Placement
component: Placement,
},
{
path: "/retirement",
name: "Retirement",
component: Retirement
component: Retirement,
},
{
path: "/insignia",
name: "Insignia",
component: Insignia
component: Insignia,
},
{
path: "/leaveuser",
name: "leaveuser",
component: Leaveuser
component: Leaveuser,
},
{
path: "/leaveadmin",
name: "leaveadmin",
component: Leaveadmin
component: Leaveadmin,
},
{
path: "/estimate",
name: "estimate",
component: Estimate
component: Estimate,
},
{
path: "/discipline",
name: "discipline",
component: Discipline
component: Discipline,
},
]
],
},
]
})
],
});
export default router;

741
src/views/MainLayout.vue
View file

@ -1,352 +1,510 @@
<script setup lang="ts">
import { ref} from "vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
const router = useRouter();
const $q = useQuasar();
const tab = ref('')
const tab = ref("");
const currentRouteName = router.currentRoute.value.name;
const currentRoute = ref(currentRouteName);
const text = ref('');
const text = ref("");
const tabManu = [
{name: 'metadata',label:'ข้อมูลหลัก',path: 'metadata'},
{name: 'organizational',label:'โครงสร้างอัตรากำลัง',path: 'organizational'},
{name: '3',label:'ทะเบียนประวัติ',path: 'registration'},
{name: '4',label:'ทะเบียนประวัติลูกจ้าง',path: 'registemployee'},
{name: '5',label:'ออกคำสั่ง',path: 'order'},
{name: '6',label:'สรรหา',path: 'recruitmain'},
{ name: "metadata", label: "ข้อมูลหลัก", path: "metadata" },
{
name: "organizational",
label: "โครงสร้างอัตรากำลัง",
path: "organizational",
},
{ name: "3", label: "ทะเบียนประวัติ", path: "registration" },
{ name: "4", label: "ทะเบียนประวัติลูกจ้าง", path: "registemployee" },
{ name: "5", label: "ออกคำสั่ง", path: "order" },
{ name: "6", label: "สรรหา", path: "recruitmain" },
];
const tabManu2 = [
{name: '7',label:'บรรจุ แต่งตั้ง ย้าย โอน',path: 'placement'},
{name: '8',label:'พ้นราชการ',path: 'retirement'},
{name: '9',label:'เครื่องราชอิสริยาภรณ์',path: 'insignia'},
{name: '10',label:'การลา',path: ''},
{name: '11',label:'วินัย',path: ''},
{ name: "7", label: "บรรจุ แต่งตั้ง ย้าย โอน", path: "placement" },
{ name: "8", label: "พ้นราชการ", path: "retirement" },
{ name: "9", label: "เครื่องราชอิสริยาภรณ์", path: "insignia" },
{ name: "10", label: "การลา", path: "" },
{ name: "11", label: "วินัย", path: "" },
];
const mainmenu = [
{text: 'ข้อมูลหลัก',img: new URL('../assets/icon/1_metadata.png', import.meta.url).href , icon:'mdi-account-outline', path: 'metadata'},
{text: 'โครงสร้างอัตรากำลัง',img: new URL('../assets/icon/2_organizational.png', import.meta.url).href, icon:'mdi-account-group-outline',path: 'organizational'},
{text: 'ทะเบียนประวัติ',img: new URL('../assets/icon/3_registry.png', import.meta.url).href, icon:'mdi-file-account-outline',path: 'registration'},
{text: 'ทะเบียนประวัติลูกจ้าง',img: new URL('../assets/icon/4_registry-employee.png', import.meta.url).href, icon:'mdi-file-account-outline',path: 'registemployee'},
{text: 'ออกคำสั่ง',img: new URL('../assets/icon/5_order.png', import.meta.url).href, icon:'mdi-file-certificate-outline',path: 'order'},
{text: 'สรรหา',img: new URL('../assets/icon/6_recruitmain.png', import.meta.url).href, icon:'mdi-magnify',path: 'recruitmain'},
{text: 'บรรจุ แต่งตั้ง ย้าย โอน',img: new URL('../assets/icon/7_placement.png', import.meta.url).href, icon:'mdi-account-check',path: 'placement'},
{text: 'พ้นราชการ',img: new URL('../assets/icon/8_retirement.png', import.meta.url).href, icon:'แ',path: 'retirement'},
{text: 'เครื่องราชอิสริยาภรณ์',img: new URL('../assets/icon/9_insignia.png', import.meta.url).href, icon:'mdi-medal-outline',path: 'insignia'},
{
text: "ข้อมูลหลัก",
img: new URL("../assets/icon/1_metadata.png", import.meta.url).href,
icon: "mdi-account-outline",
path: "metadata",
},
{
text: "โครงสร้างอัตรากำลัง",
img: new URL("../assets/icon/2_organizational.png", import.meta.url).href,
icon: "mdi-account-group-outline",
path: "organizational",
},
{
text: "ทะเบียนประวัติ",
img: new URL("../assets/icon/3_registry.png", import.meta.url).href,
icon: "mdi-file-account-outline",
path: "registration",
},
{
text: "ทะเบียนประวัติลูกจ้าง",
img: new URL("../assets/icon/4_registry-employee.png", import.meta.url)
.href,
icon: "mdi-file-account-outline",
path: "registemployee",
},
{
text: "ออกคำสั่ง",
img: new URL("../assets/icon/5_order.png", import.meta.url).href,
icon: "mdi-file-certificate-outline",
path: "order",
},
{
text: "สรรหา",
img: new URL("../assets/icon/6_recruitmain.png", import.meta.url).href,
icon: "mdi-magnify",
path: "recruitmain",
},
{
text: "บรรจุ แต่งตั้ง ย้าย โอน",
img: new URL("../assets/icon/7_placement.png", import.meta.url).href,
icon: "mdi-account-check",
path: "placement",
},
{
text: "พ้นราชการ",
img: new URL("../assets/icon/8_retirement.png", import.meta.url).href,
icon: "แ",
path: "retirement",
},
{
text: "เครื่องราชอิสริยาภรณ์",
img: new URL("../assets/icon/9_insignia.png", import.meta.url).href,
icon: "mdi-medal-outline",
path: "insignia",
},
];
const mainmenu1 = [
{text: 'การลา (User)',img: new URL('../assets/.png', import.meta.url).href, icon:'mdi-calendar',path: 'leaveuser'},
{text: 'ระบบการลา (admin)',img: new URL('../assets/.png', import.meta.url).href, icon:'mdi-scale-balance',path: 'leaveadmin'},
{text: 'ระบบประเมินบุคคล',img: new URL('../assets/.png', import.meta.url).href, icon:'mdi-scale-balance',path: 'estimate'},
{text: 'ระบบดำเนินการทางวินัย',img: new URL('../assets/.png', import.meta.url).href, icon:'mdi-scale-balance',path: 'discipline'}
{
text: "การลา (User)",
img: new URL("../assets/.png", import.meta.url).href,
icon: "mdi-calendar",
path: "leaveuser",
},
{
text: "ระบบการลา (admin)",
img: new URL("../assets/.png", import.meta.url).href,
icon: "mdi-scale-balance",
path: "leaveadmin",
},
{
text: "ระบบประเมินบุคคล",
img: new URL("../assets/.png", import.meta.url).href,
icon: "mdi-scale-balance",
path: "estimate",
},
{
text: "ระบบดำเนินการทางวินัย",
img: new URL("../assets/.png", import.meta.url).href,
icon: "mdi-scale-balance",
path: "discipline",
},
];
const mainmanual = [
/*{text: 'คู่มือการใช้งาน', icon:'mdi-account-outline', path: 'metadata'},*/
{text: 'คู่มือการใช้งาน',img: new URL('../assets/icon/00_manual.png', import.meta.url).href, icon:'mdi-book-open-page-variant'},
/*{text: 'คู่มือการใช้งาน', icon:'mdi-account-outline', path: 'metadata'},*/
{
text: "คู่มือการใช้งาน",
img: new URL("../assets/icon/00_manual.png", import.meta.url).href,
icon: "mdi-book-open-page-variant",
},
];
const mainmaintenance = [
/*{text: 'คู่มือการใช้งาน', icon:'mdi-account-outline', path: 'metadata'},*/
{text: 'ดูแลรักษาระบบ',img: new URL('../assets/icon/01_maintenance.png', import.meta.url).href, icon:'mdi-laptop',path: 'maintenance'}
/*{text: 'คู่มือการใช้งาน', icon:'mdi-account-outline', path: 'metadata'},*/
{
text: "ดูแลรักษาระบบ",
img: new URL("../assets/icon/01_maintenance.png", import.meta.url).href,
icon: "mdi-laptop",
path: "maintenance",
},
];
const redirectToManual = () => {
const newTab = window.open('https://bma-ehr-manual.frappet.synology.me/', '_blank');
const newTab = window.open(
`${window.location.protocol}//${window.location.hostname}/manual`,
"_blank"
);
if (newTab) {
newTab.focus();
}
};
const clickMain = (val: string) => {
router.push(val)
currentRoute.value = val
tab.value=val
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
router.push(val);
currentRoute.value = val;
tab.value = val;
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
};
const clickTab= (val2: string) => {
router.push(val2)
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
currentRoute.value = val2
const clickTab = (val2: string) => {
router.push(val2);
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
currentRoute.value = val2;
};
const goHome = () => {
router.push('/')
currentRoute.value = 'home'
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
router.push("/");
currentRoute.value = "home";
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
};
const click = () => {
router.push('/contact')
currentRoute.value = 'contact'
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
router.push("/contact");
currentRoute.value = "contact";
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
};
const clickmainte = () => {
router.push('/maintenance')
currentRoute.value = 'maintenance'
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
router.push("/maintenance");
currentRoute.value = "maintenance";
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
};
const scrollInfo = ref({})
const onScroll = (info: any) => { scrollInfo.value = info}
window.onpopstate = function() {
currentRoute.value = 'home'
}; history.pushState({}, '');
const scrollInfo = ref({});
const onScroll = (info: any) => {
scrollInfo.value = info;
};
window.onpopstate = function () {
currentRoute.value = "home";
};
history.pushState({}, "");
</script>
<!-- โครงเว็บ -->
<template>
<q-layout view="hHh LpR fFr" @scroll="onScroll" >
<!-- header -->
<q-header flat :class="scrollInfo.position >= 10 ? 'text-dark col-12 bgHeader': 'text-dark col-12 bg-transparent'" height-hint="7">
<q-toolbar class="items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
<div class="row items-center no-wrap cursor-pointer" @click="goHome" v-if="$q.screen.gt.xs">
<q-img src="@/assets/logo.png" spinner-color="white" style="height: 35px; max-width: 35px"/>
<q-separator vertical inset class="q-ml-md" />
<div class="row q-ml-md items-center q-pt-xs">
<div
style="color: #ffffff; letter-spacing: 1px; line-height:10px;"
class="text-body2 text-weight-bolder col-12"
>
ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
</div>
<q-layout view="hHh LpR fFr" @scroll="onScroll">
<!-- header -->
<q-header
flat
:class="
scrollInfo.position >= 10
? 'text-dark col-12 bgHeader'
: 'text-dark col-12 bg-transparent'
"
height-hint="7"
>
<q-toolbar
class="items-center"
:style="$q.screen.gt.xs ? 'padding: 1% 2%;' : 'padding: 1% 4%;'"
>
<div
class="row items-center no-wrap cursor-pointer"
@click="goHome"
v-if="$q.screen.gt.xs"
>
<q-img
src="@/assets/logo.png"
spinner-color="white"
style="height: 35px; max-width: 35px"
/>
<q-separator vertical inset class="q-ml-md" />
<div class="row q-ml-md items-center q-pt-xs">
<div
style="color: #ffffff; letter-spacing: 1px; line-height: 10px"
class="text-body2 text-weight-bolder col-12"
>
ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
</div>
<div class="text-caption text-white">SUPPORT</div>
<div class="text-caption text-white">SUPPORT</div>
</div>
</div>
</div>
</div>
<div v-else class="row items-center">
<img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
</div>
<q-space></q-space>
<div class="row q-col-gutter-x-sm">
<div><q-btn class="text-weight-medium" flat color="white" label="หน้าแรก" @click="goHome"/></div>
<div><q-btn class="text-weight-medium" flat color="white" label="ติดต่อเรา" @click="click()"/></div>
</div>
</q-toolbar>
</q-header>
<div v-else class="row items-center">
<img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
</div>
<q-space></q-space>
<div class="row q-col-gutter-x-sm">
<div>
<q-btn
class="text-weight-medium"
flat
color="white"
label="หน้าแรก"
@click="goHome"
/>
</div>
<div>
<q-btn
class="text-weight-medium"
flat
color="white"
label="ติดต่อเรา"
@click="click()"
/>
</div>
</div>
</q-toolbar>
</q-header>
<div class="bg-top" :style="$q.screen.gt.xs ? 'height: 65px;': 'height: 65px;'" />
<!-- end header -->
<div
class="bg-top"
:style="$q.screen.gt.xs ? 'height: 65px;' : 'height: 65px;'"
/>
<!-- end header -->
<q-page-container class="bg-grey-2 q-pb-md">
<q-page :style="$q.screen.gt.xs ? 'padding: 1.8% 2%; margin-top: -150px;': 'padding: 5% 4%; margin-top: -250px;'">
<div class="col-12 row justify-center">
<div class="col-xs-10 col-md-8 text-h6 text-white">
<!-- <div class="q-pb-md">เราจะช่วยคุณได้อย่างไร</div>
<q-page-container class="bg-grey-2 q-pb-md">
<q-page
:style="
$q.screen.gt.xs
? 'padding: 1.8% 2%; margin-top: -150px;'
: 'padding: 5% 4%; margin-top: -250px;'
"
>
<div class="col-12 row justify-center">
<div class="col-xs-10 col-md-8 text-h6 text-white">
<!-- <div class="q-pb-md">เราจะช่วยคุณได้อย่างไร</div>
<q-input outlined bg-color="white" label="ค้นหา" v-model="text" dense>
<template v-slot:prepend>
<q-icon name="search" />
</template>
</q-input> -->
</div>
</div>
<div
class="col-xs-10 col-md-8 row q-col-gutter-md"
style="margin-top: 100px"
v-if="currentRoute == 'home'"
>
<div class="col-12 row justify-center text-h6 text-dark">
คู่มือการใช้งาน
</div>
<div class="col-12"><q-separator color="grey-4" /></div>
<div class="col-12">
<div class="col-12 row q-col-gutter-lg">
<div
class="col-xs-12 col-sm-12"
v-for="(menu, index) in mainmanual"
:key="index"
>
<q-card
class="q-pa-md row justify-center text-dark cursor-pointer cardmenu"
@click="redirectToManual"
><!-- router.push({ name: `${}`}) -->
<!--<q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
<q-avatar rounded size="60px">
<q-img :src="menu.img" />
</q-avatar>
<div class="col-12 q-pt-md text-center">
{{ menu.text }}
</div>
</q-card>
</div>
</div>
</div>
</div>
<div
class="col-xs-10 col-md-8 row q-col-gutter-md"
style="margin-top: 80px"
v-if="currentRoute == 'home'"
>
<div class="col-12 row justify-center text-h6 text-dark">
ระบบทรัพยากรบุคคล
</div>
<div class="col-12"><q-separator color="grey-4" /></div>
<div class="col-12">
<div class="col-12 row q-col-gutter-lg">
<div
class="icon_1 col-xs-12 col-sm-4"
v-for="(menu, index) in mainmenu"
:key="index"
>
<q-card
class="connn q-pa-md row justify-center text-dark cursor-pointer cardmenu"
@click="clickMain(menu.path)"
><!-- router.push({ name: `${}`}) -->
<!-- <q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
<q-avatar rounded size="60px">
<q-img :src="menu.img" />
</q-avatar>
<div class="col-12 q-pt-md text-center">
{{ menu.text }}
</div>
</q-card>
</div>
</div>
</div>
</div>
<div
class="col-xs-10 col-md-8 row q-col-gutter-md"
style="margin-top: 80px"
v-if="currentRoute == 'home'"
>
<div class="col-12 row justify-center text-h6 text-dark">
ดูแลรักษาระบบ
</div>
<div class="col-12"><q-separator color="grey-4" /></div>
<div class="col-12">
<div class="col-12 row q-col-gutter-lg">
<div
class="col-xs-12 col-sm-12"
v-for="(menu, index) in mainmaintenance"
:key="index"
>
<q-card
class="q-pa-md row justify-center text-dark cursor-pointer cardmenu"
@click="clickmainte(menu.path)"
><!-- router.push({ name: `${}`}) -->
<!--<q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
<q-avatar rounded size="60px">
<q-img :src="menu.img" />
</q-avatar>
<div class="col-12 q-pt-md text-center">
{{ menu.text }}
</div>
</q-card>
</div>
</div>
</div>
</div>
<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 100px;" v-if="currentRoute == 'home'">
<div class="col-12 row justify-center text-h6 text-dark">คู่มือการใช้งาน</div>
<div class="col-12"><q-separator color="grey-4" /></div>
<div class="col-12">
<div class="col-12 row q-col-gutter-lg">
<div
class="col-xs-10 col-md-8 row q-col-gutter-md"
style="margin-top: 80px"
v-if="currentRoute == 'home'"
>
<div class="col-12 row justify-center text-h6 text-grey-5">
อยู่ในระหว่างพัฒนาระบบ
</div>
<div class="col-12"><q-separator color="grey-4" /></div>
<div class="col-12">
<div class="col-12 row q-col-gutter-lg">
<div
class="icon_1 col-xs-12 col-sm-4"
v-for="(menu, index) in mainmenu1"
:key="index"
>
<q-card
class="connn q-pa-md row justify-center text-grey-5 cursor-pointer cardmenu"
@click="clickMain(menu.path)"
><!-- router.push({ name: `${}`}) -->
<!-- <q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
<q-avatar rounded size="60px">
<q-img :src="menu.img" />
</q-avatar>
<div class="col-12 q-pt-md text-center">
{{ menu.text }}
</div>
</q-card>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12"
v-for="(menu , index) in mainmanual"
:key="index"
>
<q-card class="q-pa-md row justify-center text-dark cursor-pointer cardmenu" @click="redirectToManual" ><!-- router.push({ name: `${}`}) -->
<!--<q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
<q-avatar rounded size="60px">
<q-img :src="menu.img" />
</q-avatar>
<div class="col-12 q-pt-md text-center">{{ menu.text }} </div>
</q-card>
</div>
</div>
</div>
</div>
<div class="col-8 row" style="margin-top: 80px" v-else>
<q-layout>
<q-page-container class="col-12">
<q-page>
<div class="col-12 row">
<div class="col-12 q-mt-lg">
<router-view :key="$route.fullPath" />
</div>
<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRoute == 'home'">
<div class="col-12 row justify-center text-h6 text-dark">ระบบทรัพยากรบุคคล</div>
<div class="col-12"><q-separator color="grey-4" /></div>
<div class="col-12">
<div class="col-12 row q-col-gutter-lg">
<div class="icon_1 col-xs-12 col-sm-4"
v-for="(menu , index) in mainmenu"
:key="index"
>
<q-card class="connn q-pa-md row justify-center text-dark cursor-pointer cardmenu" @click="clickMain(menu.path)" ><!-- router.push({ name: `${}`}) -->
<!-- <q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
<q-avatar rounded size="60px">
<q-img :src="menu.img" />
</q-avatar>
<div class="col-12 q-pt-md text-center">{{ menu.text }} </div>
</q-card>
</div>
</div>
</div>
</div>
<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRoute == 'home'">
<div class="col-12 row justify-center text-h6 text-dark">ดูแลรักษาระบบ</div>
<div class="col-12"><q-separator color="grey-4" /></div>
<div class="col-12">
<div class="col-12 row q-col-gutter-lg">
<div class="col-xs-12 col-sm-12"
v-for="(menu , index) in mainmaintenance"
:key="index"
>
<q-card class="q-pa-md row justify-center text-dark cursor-pointer cardmenu" @click="clickmainte(menu.path)" ><!-- router.push({ name: `${}`}) -->
<!--<q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
<q-avatar rounded size="60px">
<q-img :src="menu.img" />
</q-avatar>
<div class="col-12 q-pt-md text-center">{{ menu.text }} </div>
</q-card>
</div>
</div>
</div>
</div>
<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRoute == 'home'">
<div class="col-12 row justify-center text-h6 text-grey-5">อยู่ในระหว่างพัฒนาระบบ</div>
<div class="col-12"><q-separator color="grey-4" /></div>
<div class="col-12">
<div class="col-12 row q-col-gutter-lg">
<div class="icon_1 col-xs-12 col-sm-4"
v-for="(menu , index) in mainmenu1"
:key="index"
>
<q-card class="connn q-pa-md row justify-center text-grey-5 cursor-pointer cardmenu" @click="clickMain(menu.path)" ><!-- router.push({ name: `${}`}) -->
<!-- <q-icon class="col-12 items-center" size="40px" :name="`${menu.icon}`"/> -->
<q-avatar rounded size="60px">
<q-img :src="menu.img" />
</q-avatar>
<div class="col-12 q-pt-md text-center">{{ menu.text }} </div>
</q-card>
</div>
</div>
</div>
</div>
<div class="col-8 row" style=" margin-top: 80px;" v-else>
<q-layout>
<q-page-container class="col-12 ">
<q-page>
<div class="col-12 row ">
<div class="col-12 q-mt-lg" >
<router-view :key="$route.fullPath" />
</div>
<div class="col-12 row justify-center q-mt-lg" style="margin-top: 50px;"
v-if="currentRoute != 'contact' && currentRoute != 'maintenance'">
<q-tabs
v-model="tab"
class="text-grey-8" dense
align="center"
no-caps
active-color="primary"
indicator-color="transparent"
>
<q-tab
v-for="(tab,index) in tabManu"
:key="index"
:name="tab.name"
:label="tab.label"
@click="clickTab(tab.path)" />
</q-tabs>
<q-tabs class="text-grey-8" dense align="center" no-caps active-color="primary" indicator-color="transparent" v-model="tab">
<q-tab
v-for="(tab,index) in tabManu2"
:key="index"
:name="tab.name"
:label="tab.label"
@click="clickTab(tab.path)" />
</q-tabs>
</div>
</div>
</q-page>
</q-page-container>
</q-layout>
</div>
</div>
</q-page>
<!-- place QPageScroller at end of page -->
<q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 50]">
<q-btn fab icon="keyboard_arrow_up" color="blue" />
</q-page-scroller>
</q-page-container>
</q-layout>
<div
class="col-12 row justify-center q-mt-lg"
style="margin-top: 50px"
v-if="
currentRoute != 'contact' &&
currentRoute != 'maintenance'
"
>
<q-tabs
v-model="tab"
class="text-grey-8"
dense
align="center"
no-caps
active-color="primary"
indicator-color="transparent"
>
<q-tab
v-for="(tab, index) in tabManu"
:key="index"
:name="tab.name"
:label="tab.label"
@click="clickTab(tab.path)"
/>
</q-tabs>
<q-tabs
class="text-grey-8"
dense
align="center"
no-caps
active-color="primary"
indicator-color="transparent"
v-model="tab"
>
<q-tab
v-for="(tab, index) in tabManu2"
:key="index"
:name="tab.name"
:label="tab.label"
@click="clickTab(tab.path)"
/>
</q-tabs>
</div>
</div>
</q-page>
</q-page-container>
</q-layout>
</div>
</div>
</q-page>
<!-- place QPageScroller at end of page -->
<q-page-scroller
position="bottom-right"
:scroll-offset="150"
:offset="[18, 50]"
>
<q-btn fab icon="keyboard_arrow_up" color="blue" />
</q-page-scroller>
</q-page-container>
</q-layout>
</template>
<style>
.bg-drawer{
.bg-drawer {
background: #242a3d;
}
.menu {
padding-bottom: 5px;
padding-top: 5px;
}
.tabsHome .q-tab__icon{
font-size: 18px;
.tabsHome .q-tab__icon {
font-size: 18px;
}
.border-100{
border-radius: 100px;
.border-100 {
border-radius: 100px;
}
.bg-header{
background:rgba(39, 50, 56, 0)8 !important;
.bg-header {
background: rgba(39, 50, 56, 0) 8 !important;
}
.bg-top{
/* background: #273238; */
background-image: url("@/assets/1.png");
background-size: cover;
.bg-top {
/* background: #273238; */
background-image: url("@/assets/1.png");
background-size: cover;
}
.header-br{
border-bottom: 1px solid #fdfdfd31;
.header-br {
border-bottom: 1px solid #fdfdfd31;
}
.menuActive {
background: #1e2234;
@ -355,7 +513,7 @@ window.onpopstate = function() {
}
.q-card {
box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
border: 1px solid #eeeded;
border: 1px solid #eeeded;
}
.q-menu {
box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
@ -365,41 +523,38 @@ window.onpopstate = function() {
font-weight: bold;
margin-bottom: 1.2%;
}
.q-field--outlined .q-field__control{
border-radius: 5px;
.q-field--outlined .q-field__control {
border-radius: 5px;
}
.q-field--outlined .q-field__control:before {
border-color: #C8D3DB;
border-color: #c8d3db;
}
.q-field--outlined .q-icon{
color: #7474747f;
.q-field--outlined .q-icon {
color: #7474747f;
}
.cardmenu:hover{
border-color: #02A998;
color: #02A998 !important;
box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
.cardmenu:hover {
border-color: #02a998;
color: #02a998 !important;
box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
}
.cardmenu{
padding: 35px; /* ปรับขนาด padding ตามที่คุณต้องการ */
box-shadow: 3px 3px 10px 1px rgba(4, 4, 4, 0.075) !important;
background-color: #F0F2F5;
;
.cardmenu {
padding: 35px; /* ปรับขนาด padding ตามที่คุณต้องการ */
box-shadow: 3px 3px 10px 1px rgba(4, 4, 4, 0.075) !important;
background-color: #f0f2f5;
}
.content-heigt{
height: 60vh !important;
overflow-y:auto;
.content-heigt {
height: 60vh !important;
overflow-y: auto;
}
.bgHeader{
background: #1e2234e5;
.bgHeader {
background: #1e2234e5;
}
.icon_1{
color: #02A998;
.icon_1 {
color: #02a998;
}
</style>

37
vite.config.ts
View file

@ -1,20 +1,25 @@
import { fileURLToPath, URL } from 'node:url'
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import { quasar, transformAssetUrls } from "@quasar/vite-plugin";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue({
template: { transformAssetUrls }
}), quasar({
sassVariables: 'src/style/quasar-variables.sass'
}), vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
base: "",
plugins: [
vue({
template: { transformAssetUrls },
}),
quasar({
sassVariables: "src/style/quasar-variables.sass",
}),
vueJsx(),
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});