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 MainLayout = () => import("@/views/MainLayout.vue");
const Metadata = () => import("@/modules/01_metadata/views/Main.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 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 Order = () => import("@/modules/05_order/views/Main.vue");
const Recruitmain = () => import("@/modules/06_recruitmain/views/Main.vue"); const Recruitmain = () => import("@/modules/06_recruitmain/views/Main.vue");
const Placement = () => import("@/modules/07_placement/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 Estimate = () => import("@/modules/12_estimate/views/Main.vue");
const Discipline = () => import("@/modules/13_discipline/views/Main.vue"); const Discipline = () => import("@/modules/13_discipline/views/Main.vue");
const Contact = () => import("@/modules/00_contact/views/Main.vue"); const Contact = () => import("@/modules/00_contact/views/Main.vue");
const Maintenance = () => import("@/modules/001_Maintenance/views/Main.vue"); const Maintenance = () => import("@/modules/001_Maintenance/views/Main.vue");
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(`/faq/`),
routes: [ routes: [
{ {
path: '/', path: "/",
name: 'home', name: "home",
component: MainLayout, component: MainLayout,
children:[ children: [
{ {
path: "/metadata", path: "/metadata",
name: "metadata", name: "metadata",
@ -74,66 +68,59 @@ const router = createRouter({
{ {
path: "/order", path: "/order",
name: "Order", name: "Order",
component: Order component: Order,
}, },
{ {
path: "/recruitmain", path: "/recruitmain",
name: "Recruitmain", name: "Recruitmain",
component: Recruitmain component: Recruitmain,
}, },
{ {
path: "/placement", path: "/placement",
name: "Placement", name: "Placement",
component: Placement component: Placement,
}, },
{ {
path: "/retirement", path: "/retirement",
name: "Retirement", name: "Retirement",
component: Retirement component: Retirement,
}, },
{ {
path: "/insignia", path: "/insignia",
name: "Insignia", name: "Insignia",
component: Insignia component: Insignia,
}, },
{ {
path: "/leaveuser", path: "/leaveuser",
name: "leaveuser", name: "leaveuser",
component: Leaveuser component: Leaveuser,
}, },
{ {
path: "/leaveadmin", path: "/leaveadmin",
name: "leaveadmin", name: "leaveadmin",
component: Leaveadmin component: Leaveadmin,
}, },
{ {
path: "/estimate", path: "/estimate",
name: "estimate", name: "estimate",
component: Estimate component: Estimate,
}, },
{ {
path: "/discipline", path: "/discipline",
name: "discipline", name: "discipline",
component: Discipline component: Discipline,
}, },
],
]
}, },
] ],
}) });
export default router; export default router;

741
src/views/MainLayout.vue
View file

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