334 lines
11 KiB
Vue
334 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { ref} from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import { useQuasar } from "quasar";
|
|
|
|
const router = useRouter();
|
|
|
|
const $q = useQuasar();
|
|
|
|
const tab = ref('')
|
|
|
|
const currentRouteName = router.currentRoute.value.name;
|
|
const currentRoute = ref(currentRouteName);
|
|
const text = ref('');
|
|
const tabManu = [
|
|
{name: 'metadata',label:'ข้อมูลหลัก',path: 'metadata'},
|
|
{name: 'organizational',label:'โครงสร้างอัตรากำลัง',path: 'organizational'},
|
|
{name: '3',label:'ทะเบียนประวัติ',path: ''},
|
|
{name: '4',label:'ทะเบียนประวัติลูกจ้าง',path: ''},
|
|
{name: '5',label:'ออกคำสั่ง',path: ''},
|
|
{name: '6',label:'สรรหา',path: ''},
|
|
];
|
|
const tabManu2 = [
|
|
{name: '7',label:'บรรจุ แต่งตั้ง ย้าย โอน',path: ''},
|
|
{name: '8',label:'พ้นราชการ',path: ''},
|
|
{name: '9',label:'เครื่องราชฯ',path: ''},
|
|
{name: '10',label:'การลา',path: ''},
|
|
{name: '11',label:'วินัย',path: ''},
|
|
{name: '12',label:'Maintenance',path: 'maintenance'},
|
|
];
|
|
|
|
const mainmenu = [
|
|
{text: 'ข้อมูลหลัก', icon:'mdi-account-outline', path: 'metadata'},
|
|
{text: 'โครงสร้างอัตรากำลัง', icon:'mdi-account-group-outline',path: 'organizational'},
|
|
{text: 'ทะเบียนประวัติ', icon:'mdi-file-account-outline',path: 'organizational'},
|
|
{text: 'ทะเบียนประวัติลูกจ้าง', icon:'mdi-file-account-outline',path: 'organizational'},
|
|
{text: 'ออกคำสั่ง', icon:'mdi-file-certificate-outline',path: 'organizational'},
|
|
{text: 'สรรหา', icon:'mdi-magnify',path: 'organizational'},
|
|
{text: 'บรรจุ แต่งตั้ง ย้าย โอน', icon:'mdi-account-check',path: 'organizational'},
|
|
{text: 'พ้นราชการ', icon:'mdi-account-cancel-outline',path: 'organizational'},
|
|
{text: 'เครื่องราชฯ', icon:'mdi-medal-outline',path: 'organizational'},
|
|
{text: 'การลา', icon:'mdi-calendar',path: 'organizational'},
|
|
{text: 'วินัย', icon:'mdi-scale-balance',path: 'organizational'}
|
|
];
|
|
|
|
|
|
const mainmanual = [
|
|
{text: 'คู่มือการใช้งาน', icon:'mdi-account-outline', path: 'metadata'}
|
|
];
|
|
|
|
const redirectToManual = () => {
|
|
const newTab = window.open('https://bma-ehr-manual.frappet.synology.me/', '_blank');
|
|
if (newTab) {
|
|
newTab.focus();
|
|
}
|
|
};
|
|
|
|
const clickMain = (val: string) => {
|
|
router.push(val)
|
|
currentRoute.value = val
|
|
tab.value=val
|
|
};
|
|
|
|
const clickTab= (val2: string,el: any ) => {
|
|
router.push(val2)
|
|
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
|
|
};
|
|
|
|
const goHome = () => {
|
|
router.push('/')
|
|
currentRoute.value = 'home'
|
|
};
|
|
|
|
const click = () => {
|
|
router.push('/contact')
|
|
currentRoute.value = 'contact'
|
|
};
|
|
|
|
const clickmainte = () => {
|
|
router.push('/maintenance')
|
|
currentRoute.value = 'maintenance'
|
|
};
|
|
|
|
const scrollInfo = ref({})
|
|
const onScroll = (info: any) => { scrollInfo.value = info}
|
|
|
|
</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>
|
|
|
|
<div class="text-caption text-white">SUPPORT</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 color="secondary" text-color="white" label="ติดต่อเรา" @click="click()"/></div>
|
|
</div>
|
|
</q-toolbar>
|
|
</q-header>
|
|
|
|
<div class="bg-top" :style="$q.screen.gt.xs ? 'height: 240px;': 'height: 240px;'" />
|
|
<!-- 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: -250px;': '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 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-4"
|
|
v-for="(menu , index) in mainmenu"
|
|
:key="index"
|
|
>
|
|
<q-card class="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="25px" :name="`${menu.icon}`"/>
|
|
<div class="q-pt-md">{{ 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 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="25px" :name="`${menu.icon}`"/>
|
|
<div class="q-pt-md">คู่มือการใช้งาน</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">Maintenant</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="clickMain(menu.path)" ><!-- router.push({ name: `${}`}) -->
|
|
<q-icon class="col-12 items-center" size="25px" :name="`${menu.icon}`"/>
|
|
<div class="q-pt-md">Maintenance</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'">
|
|
<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{
|
|
background: #242a3d;
|
|
}
|
|
.menu {
|
|
padding-bottom: 5px;
|
|
padding-top: 5px;
|
|
}
|
|
.tabsHome .q-tab__icon{
|
|
font-size: 18px;
|
|
}
|
|
.border-100{
|
|
border-radius: 100px;
|
|
}
|
|
.bg-header{
|
|
background:rgba(39, 50, 56, 0)8 !important;
|
|
}
|
|
|
|
.bg-top{
|
|
/* background: #273238; */
|
|
background-image: url("@/assets/1.png");
|
|
background-size: cover;
|
|
}
|
|
.header-br{
|
|
border-bottom: 1px solid #fdfdfd31;
|
|
}
|
|
.menuActive {
|
|
background: #1e2234;
|
|
border-radius: 0 100px 100px 0;
|
|
margin-right: 4%;
|
|
}
|
|
.q-card {
|
|
box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
|
|
border: 1px solid #eeeded;
|
|
}
|
|
.q-menu {
|
|
box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
|
|
}
|
|
.toptitle {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
margin-bottom: 1.2%;
|
|
}
|
|
.q-field--outlined .q-field__control{
|
|
border-radius: 5px;
|
|
}
|
|
.q-field--outlined .q-field__control:before {
|
|
border-color: #C8D3DB;
|
|
}
|
|
.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{
|
|
padding: 35px; /* ปรับขนาด padding ตามที่คุณต้องการ */
|
|
|
|
}
|
|
|
|
.content-heigt{
|
|
height: 60vh !important;
|
|
overflow-y:auto;
|
|
}
|
|
|
|
.bgHeader{
|
|
background: #1e2234e5;
|
|
}
|
|
|
|
</style>
|