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

# Conflicts: src/views/MainLayout.vue && แก้กด tab ข้างล่าง

Browse source
This commit is contained in:
Tanyalak 2023-12-15 15:47:16 +07:00
commit 0fe82ed983
3 changed files with 163 additions and 234 deletions
Download patch file Download diff file Expand all files Collapse all files

215
src/modules/00_contact/views/1.vue
View file

@ -1,215 +0,0 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useQuasar } from "quasar";
const router = useRouter();
const $q = useQuasar();
const tab = ref('')
const currentRouteName = ref('');
const text = ref('');
const menuList = [
{text:'ข้อมูลหลัก',path: 'metadata'},
{text:'โครงสร้างอัตรากำลัง',path: 'organizational'},
];
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 clickMain = (val: string) => {
router.push(val)
currentRouteName.value = val
tab.value=val
};
const goHome = () => {
router.push('/')
currentRouteName.value = ''
};
const click = () => {
router.push('/contact')
currentRouteName.value = 'contact'
};
</script>
<!-- โครงเว็บ -->
<template>
<q-layout view="hHh LpR fFr">
<!-- header -->
<q-header flat class="text-dark col-12 bg-header bg-transparent" height-hint="7">
<q-toolbar class="q-my-xs 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>
<q-btn class="text-weight-medium" flat color="white" label="หน้าแรก" @click="goHome"/>
<q-btn color="secondary" text-color="white" label="ติดต่อเรา" @click="click()"/>
</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="currentRouteName == ''">
<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="20px" :name="`${menu.icon}`"/>
<div class="q-pt-md">{{ menu.text }} </div>
</q-card>
</div>
</div>
</div>
</div>
<div class="col-9 row q-col-gutter-md" style=" margin-top: 80px;" v-else>
<div class="col-12 content-heigt">
<div class="col-12 row ">
<q-card class="col-12">
<router-view :key="$route.fullPath" />
</q-card>
</div>
<div class="col-12 row " v-if="currentRouteName != 'contact'">
<q-tabs no-caps active-color="primary" indicator-color="transparent" class="text-grey-8" v-model="tab">
<q-tab name="metadata" label="ข้อมูลหลัก" @click="router.push({ path: '/metadata' })"/>
<q-tab name="organizational" label="โครงสร้างอัตรากำลัง" @click="router.push({ path: '/organizational' })" />
<q-tab name="articles" label="Articles" />
</q-tabs>
</div>
</div>
</div>
</div>
</q-page>
</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: 55vh !important;
overflow-y:auto;
}
</style>

114
src/modules/00_contact/views/Main.vue
View file

@ -2,18 +2,128 @@
</script>
<template>
<div class="col-12 row justify-center text-h6 text-dark q-pt-md">ติดต่อเรา</div>
<div class="col-12 q-pt-md "></div>
<div class="col-12"><q-separator color="grey-4" /></div>
<q-card class="row col-12 q-mt-md">
<div class="col-12 q-px-md q-py-sm text-subtitle1 text-dark bg-grey-4 text-weight-medium">
<div class="col-12 q-px-md q-py-sm text-subtitle2 text-blue bg-light-blue-1 text-weight-medium">
ระบบหลัก
</div>
<div class="col-12 row q-pa-md">
<div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
<q-icon class="iconcontat" name="mdi-account-tie"/>
<div class="txt text-weight-regular">ผู้ดูแล
<br>
<div class="txt1 text-weight-regular">
นางสาวกัณฐิมา กาฬสินธุ์
</div>
</div>
</div>
<div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
<q-icon class="iconcontat" name="mdi-briefcase"/>
<div class="txt text-weight-regular">หน่วยงาน
<br>
<div class="txt1 text-weight-regular ">
สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร
</div>
</div>
</div>
<div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
<q-icon class="iconcontat" name="mdi-phone"/>
<div class="txt text-weight-regular">เบอร์โทร
<br>
<div class="txt1 text-weight-regular">
012111111111
</div>
</div>
</div>
<div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
<q-icon class="iconcontat" name="mdi-email"/>
<div class="txt text-weight-regular">อีเมล
<br>
<div class="txt1 text-weight-regular ">
g@gmail.com
</div>
</div>
</div>
</div>
</q-card>
<q-card class="row col-12 q-mt-md">
<div class="col-12 q-px-md q-py-sm text-subtitle2 text-blue bg-blue-1 text-weight-medium">
โครงสร้างอัตรากำลัง
</div>
<div class="col-12 row q-pa-md">
<div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
<q-icon class="iconcontat" name="mdi-account-tie"/>
<div class="txt text-weight-regular">ผู้ดูแล
<br>
<div class="txt1 text-weight-regular">
นางสาวรัชภรณ์ ภักดี
</div>
</div>
</div>
<div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
<q-icon class="iconcontat" name="mdi-briefcase"/>
<div class="txt text-weight-regular">หน่วยงาน
<br>
<div class="txt1 text-weight-regular ">
สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร
</div>
</div>
</div>
<div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
<q-icon class="iconcontat" name="mdi-phone"/>
<div class="txt text-weight-regular">เบอร์โทร
<br>
<div class="txt1 text-weight-regular">
01111222333
</div>
</div>
</div>
<div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
<q-icon class="iconcontat" name="mdi-email"/>
<div class="txt text-weight-regular">อีเมล
<br>
<div class="txt1 text-weight-regular ">
t@gmail.com
</div>
</div>
</div>
</div>
</q-card>
</template>
<style>
.iconcontat {
color: #74747468;
font-size: 25px;
margin-right: 1%;
}
</style>
.icon_cer {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.txt{
color: #747474df;
font-size :12px;
}
.txt1{
color: black;
font-size :14px;
}
</style>

68
src/views/MainLayout.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ref} from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
const router = useRouter();
@ -12,9 +12,20 @@ const tab = ref('')
const currentRouteName = router.currentRoute.value.name;
const currentRoute = ref(currentRouteName);
const text = ref('');
const menuList = [
{text:'ข้อมูลหลัก',path: 'metadata'},
{text:'โครงสร้างอัตรากำลัง',path: 'organizational'},
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: ''},
];
const mainmenu = [
@ -37,6 +48,11 @@ const clickMain = (val: string) => {
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'
@ -119,25 +135,42 @@ const onScroll = (info: any) => { scrollInfo.value = info}
</div>
</div>
<div class="col-9 row" style=" margin-top: 80px;" v-else>
<div class="col-8 row" style=" margin-top: 80px;" v-else>
<q-layout>
<q-page-container class="col-12">
<q-page-container class="col-12 ">
<q-page>
<div class="col-12 row ">
<div class="col-12" >
<div class="col-12 q-mt-lg" >
<router-view :key="$route.fullPath" />
</div>
<div class="col-12 row justify-center q-mt-lg" 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>
<div class="col-12 row" v-if="currentRouteName != 'contact'">
<q-page-scroller :scroll-offset="300" :offset="[18, 18]" >
<q-tabs content-class="red" no-caps active-color="primary" indicator-color="transparent" class="text-grey-8" v-model="tab">
<q-tab name="metadata" label="ข้อมูลหลัก" @click="router.push({ path: '/metadata' })"/>
<q-tab name="organizational" label="โครงสร้างอัตรากำลัง" @click="router.push({ path: '/organizational' })" />
<q-tab name="articles" label="Articles" />
</q-tabs>
</q-page-scroller>
</div>
</q-page>
</q-page-container>
</q-layout>
@ -224,4 +257,5 @@ const onScroll = (info: any) => { scrollInfo.value = info}
.bgHeader{
background: #1e2234e5;
}
</style>