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

เพิ่ม Ui ตำแหน่งตอนสร้างรอบสมัคร

Browse source
This commit is contained in:
Kittapath 2023-04-05 00:59:05 +07:00
parent b42d797c78
commit 3dcdba77a6
14 changed files with 420 additions and 273 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/api/exam/api.candidate.ts
View file

@ -3,17 +3,29 @@ const candidate = `${env.API_URI}/candidate/`
const periodExam = `${env.API_URI}/period-exam/`
export default {
candidateInformation: (examId: string) => `${candidate}information/${examId}`,
candidateAddress: (examId: string) => `${candidate}address/${examId}`,
candidateFamily: (examId: string) => `${candidate}family/${examId}`,
candidateOccupation: (examId: string) => `${candidate}occupation/${examId}`,
candidateEducation: (examId: string) => `${candidate}education/${examId}`,
candidateCareer: (examId: string) => `${candidate}career/${examId}`,
candidateCheckCreate: (examId: string) => `${candidate}check/${examId}`,
candidateRegister: (examId: string) => `${candidate}register/${examId}`,
candidatePayment: (examId: string) => `${candidate}payment/${examId}`,
candidateStatus: (examId: string) => `${candidate}status/${examId}`,
candidateInformation: (examId: string, positionId: string) =>
`${candidate}information/${examId}/${positionId}`,
candidateAddress: (examId: string, positionId: string) =>
`${candidate}address/${examId}/${positionId}`,
candidateFamily: (examId: string, positionId: string) =>
`${candidate}family/${examId}/${positionId}`,
candidateOccupation: (examId: string, positionId: string) =>
`${candidate}occupation/${examId}/${positionId}`,
candidateEducation: (examId: string, positionId: string) =>
`${candidate}education/${examId}/${positionId}`,
candidateCareer: (examId: string, positionId: string) =>
`${candidate}career/${examId}/${positionId}`,
candidateCheckCreate: (examId: string, positionId: string) =>
`${candidate}check/${examId}/${positionId}`,
candidateRegister: (examId: string, positionId: string) =>
`${candidate}register/${examId}/${positionId}`,
candidatePayment: (examId: string, positionId: string) =>
`${candidate}payment-image/${examId}/${positionId}`,
candidateProfile: (examId: string, positionId: string) =>
`${candidate}profile-image/${examId}/${positionId}`,
candidateStatus: (examId: string, positionId: string) =>
`${candidate}status/${examId}/${positionId}`,
periodExamId: (examId: string) => `${periodExam}${examId}`,
candidateId: (examId: string) => `${candidate}${examId}`,
candidateId: (examId: string, positionId: string) => `${candidate}${examId}/${positionId}`,
candidate
}

130
src/modules/01_exam/components/ExamFinished.vue
View file

@ -1,67 +1,77 @@
<template>
<div class="q-pa-md row items-center justify-center">
<div class="col-xs-12 col-sm-8 col-md-6">
<q-card flat class="q-pa-md q-mb-sm" :class="getClass(status)">
<div v-if="status != 'done'" class="text-orange-6 text-bold">
<q-icon name="mdi-timer-sand" size="22px" color="orange-5" class="q-mr-sm" />เจ้าหน้าที่กำลังตรวจสถานที่สอบ
</div>
<div v-else class="text-green-6 text-bold">
<q-icon name="mdi-checkbox-marked-circle-outline" size="22px" color="green" class="q-mr-sm" />สมัครสอบสำเร็จ
</div>
</q-card>
<div class="q-pa-md row items-center justify-center">
<div class="col-xs-12 col-sm-8 col-md-6">
<q-card flat class="q-pa-md q-mb-sm" :class="getClass(status)">
<div v-if="status != 'done' && status != 'checkPoint'" class="text-orange-6 text-bold">
<q-icon
name="mdi-timer-sand"
size="22px"
color="orange-5"
class="q-mr-sm"
/>เจ้าหน้าที่กำลังตรวจสถานที่สอบ
</div>
<div v-else class="text-green-6 text-bold">
<q-icon
name="mdi-checkbox-marked-circle-outline"
size="22px"
color="green"
class="q-mr-sm"
/>สมัครสอบสำเร็จ
</div>
</q-card>
<q-card bordered flat class="col-12 row">
<div class="text-bold col-12 row q-px-md q-py-sm items-center bg-grey-2">
บัตรประจำตัวผู้สอบ
<q-space />
<q-btn dense size="12px" flat color="primary" @click="download" icon="mdi-download">
<q-tooltip>พิมพ์บัตรประจำตัวผู้สอบ</q-tooltip>
</q-btn>
<q-card bordered flat class="col-12 row">
<div class="text-bold col-12 row q-px-md q-py-sm items-center bg-grey-2">
บัตรประจำตัวผู้สอบ
<q-space />
<q-btn dense size="12px" flat color="primary" @click="download" icon="mdi-download">
<q-tooltip>พิมพ์บัตรประจำตัวผู้สอบ</q-tooltip>
</q-btn>
</div>
<div class="col-8 q-pa-md">
<div class="q-pt-xs row">
<div class="">ชื่อ :</div>
<div class="text-black text-bold q-pl-sm">{{ fullName }}</div>
</div>
<div class="col-8 q-pa-md">
<div class="q-pt-xs row">
<div class="">ชื่อ :</div>
<div class="text-black text-bold q-pl-sm">{{ fullName }}</div>
</div>
<div class="q-pt-xs row">
<div class="">เลขประจำตัวสอบ :</div>
<div class="text-black text-bold q-pl-sm">{{ examNumber }}</div>
</div>
<div class="q-pt-xs row">
<div class="">เลขประจำตัวประชาชน :</div>
<div class="text-black q-pl-sm">{{ citizenId }}</div>
</div>
<div class="q-pt-xs row">
<div class="">เวลาสอบ :</div>
<div class="text-black q-pl-sm">{{ examTime }}</div>
</div>
<div class="q-pt-xs row">
<div class="">สถานที่สอบ :</div>
<div class="text-black q-pl-sm">{{ examLocation }}</div>
</div>
<div class="q-pt-xs row">
<div class="">ชั้นที่ :</div>
<div class="text-black q-pl-sm">{{ floor }}</div>
</div>
<div class="q-pt-xs row">
<div class="">ห้องสอบ :</div>
<div class="text-black q-pl-sm">{{ examRoom }}</div>
</div>
<div class="q-pt-xs row">
<div class="">เลขที่นั่ง :</div>
<div class="text-black q-pl-sm">{{ seatNumber }}</div>
</div>
<div class="q-pt-xs row">
<div class="">เลขประจำตัวสอบ :</div>
<div class="text-black text-bold q-pl-sm">{{ examNumber }}</div>
</div>
<div class="q-pt-xs row">
<div class="">เลขประจำตัวประชาชน :</div>
<div class="text-black q-pl-sm">{{ citizenId }}</div>
</div>
<div class="q-pt-xs row">
<div class="">เวลาสอบ :</div>
<div class="text-black q-pl-sm">{{ examTime }}</div>
</div>
<div class="q-pt-xs row">
<div class="">สถานที่สอบ :</div>
<div class="text-black q-pl-sm">{{ examLocation }}</div>
</div>
<div class="q-pt-xs row">
<div class="">ชั้นที่ :</div>
<div class="text-black q-pl-sm">{{ floor }}</div>
</div>
<div class="q-pt-xs row">
<div class="">ห้องสอบ :</div>
<div class="text-black q-pl-sm">{{ examRoom }}</div>
</div>
<div class="q-pt-xs row">
<div class="">เลขที่นั่ง :</div>
<div class="text-black q-pl-sm">{{ seatNumber }}</div>
</div>
</div>
<q-card-section class="col-4 flex flex-center">
<q-img
class="rounded-borders"
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&w=1000&q=80"
:ratio="1"
style="max-width: 300px; max-height: 300px"
/>
</q-card-section>
</q-card>
<q-card-section class="col-4 flex flex-center">
<q-img
class="rounded-borders"
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&w=1000&q=80"
:ratio="1"
style="max-width: 300px; max-height: 300px"
/>
</q-card-section>
</q-card>
</div>
<!-- <q-btn color="positive" @click="testChangeStatus">จัดที่นั่ง</q-btn> -->
</div>
@ -92,7 +102,7 @@ const seatNumber = ref<string>('75')
const download = () => {}
const getClass = (val: string) => {
return val == 'done' ? 'bg-green-1' : 'bg-yellow-2'
return val == 'done' || val == 'checkPoint' ? 'bg-green-1' : 'bg-yellow-2'
}
</script>

5
src/modules/01_exam/components/ExamForm.vue
View file

@ -74,6 +74,7 @@ const statusEdit = ref<boolean>(false)
const acceptTermOfUse = ref<boolean>(false)
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const formInformation = ref<any>({})
const formAddress = ref<any>({})
const formFamily = ref<any>({})
@ -102,7 +103,7 @@ const saveForm = async () => {
//saveform
loader.value = true
await http
.get(config.API.candidateRegister(examId.value))
.get(config.API.candidateRegister(examId.value, positionId.value))
.then(() => {
success($q, 'สมัครสอบสำเร็จสำเร็จ')
})
@ -135,7 +136,7 @@ const saveData = async () => {
type.value = defaultOccupation.value.other
loader.value = true
await http
.post(config.API.candidateId(examId.value), {
.post(config.API.candidateId(examId.value, positionId.value), {
prefixId: defaultInformation.value.prefixId,
lastName: defaultInformation.value.lastname,
citizenProvinceId: defaultInformation.value.provinceId,

304
src/modules/01_exam/components/ExamPayment.vue
View file

@ -1,138 +1,159 @@
<template>
<div class="col-12">
<div class="row q-px-sm">
<div class="text-bold text-subtitle1 q-pb-md">เลือกวีธีการชำระเงิน</div>
<div class="row col-12 q-gutter-y-md q-mb-lg">
<q-list bordered class="col-12 rounded-borders">
<q-item tag="label" v-ripple class="q-pa-md">
<q-item-section avatar>
<q-icon name="mdi-cellphone-settings" color="positive" size="30px" />
</q-item-section>
<q-item-section>
<q-item-label class="text-weight-medium text-subtitle1">โอนเงินผ่านมือถือ</q-item-label>
<q-item-label caption class="gt-xs">อนุมัติหลังแจ้งการโอนภายใน 24 ชั่วโมง</q-item-label>
</q-item-section>
<q-item-section avatar class="gt-xs">
<q-avatar size="32px">
<q-img src="@/assets/krungthai.png" class="col-12"/>
</q-avatar>
</q-item-section>
<q-item-section side>
<q-radio v-model="pay" val="teal" color="blue" />
</q-item-section>
</q-item>
<q-separator v-show="pay == 'teal'" />
<q-slide-transition :duration="100" class="">
<div v-show="pay == 'teal'" class="q-pa-md bg-grey-1">
<div class="row q-col-gutter-sm">
<div class=" col-xs-12 col-sm-7">
<q-card bordered class="items-start q-pa-md row q-mb-sm" style="height: 300px">
<div class="row col-12">
<div class="col-12 row no-wrap items-center">
<q-avatar size="50px">
<q-img src="@/assets/krungthai.png"/>
</q-avatar>
<div class="column q-pl-md">
<strong>ธนาคารกรุงไทย</strong>
สำนักงานทรัพยากรบุคคล
<div>387-3-94793-0</div>
</div>
</div>
<div class="col-12">
<q-separator class="q-my-md"/>
<div class="q-pb-sm">
<span class="text-weight-medium">ชื่อบัญชี :</span>
<span class="text-blue q-pl-sm">สำนักงานทรัพยากรบุคคล</span>
</div>
<div class="q-pb-sm">
<span class="text-weight-medium">ธนาคารกรุงไทย :</span>
<span class="text-blue q-pl-sm"> 387-3-94793-0</span>
</div>
<div class="q-pb-sm">
<span class="text-weight-medium">รหัสใบสั่งซื้อ :</span>
<span class="text-blue q-pl-sm">12837495985900</span>
</div>
<div>
<span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
<span class="text-blue q-pl-sm text-bold">200.00</span>
</div>
</div>
<div class="col-12 text-grey-6 q-mt-xl">
** ถ้าต้องการเเก้ไขหลักฐานการโอนเงิน กรุณาอัปโหลดซ้ำ
<div class="text-bold text-subtitle1 q-pb-md">เลือกวีธีการชำระเงิน</div>
<div class="row col-12 q-gutter-y-md q-mb-lg">
<q-list bordered class="col-12 rounded-borders">
<q-item tag="label" v-ripple class="q-pa-md">
<q-item-section avatar>
<q-icon name="mdi-cellphone-settings" color="positive" size="30px" />
</q-item-section>
<q-item-section>
<q-item-label class="text-weight-medium text-subtitle1"
>โอนเงินผ่านมือถือ</q-item-label
>
<q-item-label caption class="gt-xs"
>อนุมัติหลังแจ้งการโอนภายใน 24 ชั่วโมง</q-item-label
>
</q-item-section>
<q-item-section avatar class="gt-xs">
<q-avatar size="32px">
<q-img src="@/assets/krungthai.png" class="col-12" />
</q-avatar>
</q-item-section>
<q-item-section side>
<q-radio v-model="pay" val="teal" color="blue" />
</q-item-section>
</q-item>
<q-separator v-show="pay == 'teal'" />
<q-slide-transition :duration="100" class="">
<div v-show="pay == 'teal'" class="q-pa-md bg-grey-1">
<div class="row q-col-gutter-sm">
<div class="col-xs-12 col-sm-7">
<q-card bordered class="items-start q-pa-md row q-mb-sm" style="height: 300px">
<div class="row col-12">
<div class="col-12 row no-wrap items-center">
<q-avatar size="50px">
<q-img src="@/assets/krungthai.png" />
</q-avatar>
<div class="column q-pl-md">
<strong>ธนาคารกรุงไทย</strong>
สำนักงานทรัพยากรบุคคล
<div>387-3-94793-0</div>
</div>
</div>
</q-card>
</div>
<div class=" col-xs-12 col-sm-5">
<label for="file-upload" class="col-12 row"><!-- :src="img" -->
<q-img src="@/assets/ex_slip.jpeg" fit="contain" style="min-height: 300px; max-height: 300px;" class="col-12 bg-white">
<div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
</q-img>
</label>
<input id="file-upload" type="file" />
</div>
<div class="col-12">
<q-separator class="q-my-md" />
<div class="q-pb-sm">
<span class="text-weight-medium">ชื่อบัญชี :</span>
<span class="text-blue q-pl-sm">สำนักงานทรัพยากรบุคคล</span>
</div>
<div class="q-pb-sm">
<span class="text-weight-medium">ธนาคารกรุงไทย :</span>
<span class="text-blue q-pl-sm"> 387-3-94793-0</span>
</div>
<div class="q-pb-sm">
<span class="text-weight-medium">รหัสใบสั่งซื้อ :</span>
<span class="text-blue q-pl-sm">12837495985900</span>
</div>
<div>
<span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
<span class="text-blue q-pl-sm text-bold">200.00</span>
</div>
</div>
<div class="col-12 text-grey-6 q-mt-xl">
** ถ้าต้องการเเก้ไขหลักฐานการโอนเงิน กรุณาอัปโหลดซ้ำ
</div>
</div>
</q-card>
</div>
<div class="col-xs-12 col-sm-5">
<label for="file-upload" class="col-12 row"
><!-- :src="img" -->
<q-img
src="@/assets/ex_slip.jpeg"
fit="contain"
style="min-height: 300px; max-height: 300px"
class="col-12 bg-white"
>
<div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
</q-img>
</label>
<input id="file-upload" type="file" />
</div>
</div>
</q-slide-transition>
</q-list>
</div>
</q-slide-transition>
</q-list>
<q-list bordered class="col-12 rounded-borders">
<q-item tag="label" v-ripple class="q-pa-md">
<q-item-section avatar>
<q-icon name="mdi-cash" color="positive" size="30px" />
</q-item-section>
<q-item-section>
<q-item-label class="text-weight-medium text-subtitle1">โอนเงินผ่านทางเครื่อง ATM / เคาน์เตอร์ธนาคาร</q-item-label>
<q-item-label caption class="gt-xs">อนุมัติทันทีหลังชำระ</q-item-label>
</q-item-section>
<q-item-section avatar class="gt-xs">
<q-avatar size="32px">
<q-img src="@/assets/krungthai.png" class="col-12"/>
</q-avatar>
</q-item-section>
<q-item-section side>
<q-radio v-model="pay" val="orange" color="blue" />
</q-item-section>
</q-item>
<q-separator v-show="pay == 'orange'" />
<q-slide-transition :duration="100">
<div v-show="pay == 'orange'" class="q-pa-md bg-grey-1">
<q-card bordered class="q-pa-md">
<div class="q-pb-sm">
<span class="text-weight-medium">รหัสใบสั่งซื้อ :</span>
<span class="text-blue q-pl-sm">12837495985900</span>
</div>
<div>
<span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
<span class="text-blue q-pl-sm text-bold">200.00</span>
</div>
<q-btn
color="blue"
icon="print"
class="q-px-md q-mt-md"
outline
dense
label="พิมพ์ใบแจ้งการชำระเงิน"
/>
</q-card>
<div class="q-pt-md q-pb-xs text-bold">ธนาคารกรุงไทย</div>
<div class="q-pb-md">สอดบัตร ATM กดรหัสและเลือกรายการ</div>
<ul class="q-gutter-y-sm">
<li>ขั้นที่ 1 บริการอื่นๆ</li>
<li>ขั้นที่ 2 ชำระค่าบริการ</li>
<li>ขั้นที่ 3 ระบุรหัสบริษัท</li>
<li>ขั้นที่ 4 เลือกบัญชีผู้ชำระเงิน คือ บัญชีของตัวท่านว่าเป็นบัญชีออมทรัพย์ หรือ กระแสรายวัน</li>
<li>ขั้นที่ 5 ใส่รหัสบริษัทฯ คือ <span class="text-blue text-bold">2111</span> และ ใส่ Ref No.1 ขั้นด้วยเครื่องหมายจุด ( . ) แล้วตามด้วย Ref No.2 (ดูใน "ใบแจ้งการชำระเงิน")</li>
<li>ยกตัวอย่างเช่น ถ้า Ref No.1 คือ 012345 และ Ref No.2 คือ 308833ต้องใส่ เป็น 012345.308833</li>
<li>ขั้นที่ 6 ใส่จำนวนเงินที่ชำระรวมหน่วยสตางค์</li>
<li>ขั้นที่ 7 ตรวจสอบรายการ</li>
</ul>
</div>
</q-slide-transition>
</q-list>
</div>
<!-- <q-card flat class="q-pa-md text-left row q-mb-md" :class="getClass(status)">
<q-list bordered class="col-12 rounded-borders">
<q-item tag="label" v-ripple class="q-pa-md">
<q-item-section avatar>
<q-icon name="mdi-cash" color="positive" size="30px" />
</q-item-section>
<q-item-section>
<q-item-label class="text-weight-medium text-subtitle1"
>โอนเงินผ่านทางเครื่อง ATM / เคาน์เตอร์ธนาคาร</q-item-label
>
<q-item-label caption class="gt-xs">อนุมัติทันทีหลังชำระ</q-item-label>
</q-item-section>
<q-item-section avatar class="gt-xs">
<q-avatar size="32px">
<q-img src="@/assets/krungthai.png" class="col-12" />
</q-avatar>
</q-item-section>
<q-item-section side>
<q-radio v-model="pay" val="orange" color="blue" />
</q-item-section>
</q-item>
<q-separator v-show="pay == 'orange'" />
<q-slide-transition :duration="100">
<div v-show="pay == 'orange'" class="q-pa-md bg-grey-1">
<q-card bordered class="q-pa-md">
<div class="q-pb-sm">
<span class="text-weight-medium">รหัสใบสั่งซื้อ :</span>
<span class="text-blue q-pl-sm">12837495985900</span>
</div>
<div>
<span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
<span class="text-blue q-pl-sm text-bold">200.00</span>
</div>
<q-btn
color="blue"
icon="print"
class="q-px-md q-mt-md"
outline
dense
label="พิมพ์ใบแจ้งการชำระเงิน"
/>
</q-card>
<div class="q-pt-md q-pb-xs text-bold">ธนาคารกรุงไทย</div>
<div class="q-pb-md">สอดบัตร ATM กดรหัสและเลือกรายการ</div>
<ul class="q-gutter-y-sm">
<li>ขั้นที่ 1 บริการอื่นๆ</li>
<li>ขั้นที่ 2 ชำระค่าบริการ</li>
<li>ขั้นที่ 3 ระบุรหัสบริษัท</li>
<li>
ขั้นที่ 4 เลือกบัญชีผู้ชำระเงิน คือ บัญชีของตัวท่านว่าเป็นบัญชีออมทรัพย์ หรือ
กระแสรายวัน
</li>
<li>
ขั้นที่ 5 ใส่รหัสบริษัทฯ คือ <span class="text-blue text-bold">2111</span> และ ใส่
Ref No.1 ขั้นด้วยเครื่องหมายจุด ( . ) แล้วตามด้วย Ref No.2 (ดูใน
"ใบแจ้งการชำระเงิน")
</li>
<li>
ยกตัวอย่างเช่น ถ้า Ref No.1 คือ 012345 และ Ref No.2 คือ 308833ต้องใส่ เป็น
012345.308833
</li>
<li>ขั้นที่ 6 ใส่จำนวนเงินที่ชำระรวมหน่วยสตางค์</li>
<li>ขั้นที่ 7 ตรวจสอบรายการ</li>
</ul>
</div>
</q-slide-transition>
</q-list>
</div>
<!-- <q-card flat class="q-pa-md text-left row q-mb-md" :class="getClass(status)">
<div class="text-bold col-12" :class="getFontColor(status)">
{{ message(status) }}
</div>
@ -141,7 +162,7 @@
</div>
</q-card> -->
<!-- <q-file
<!-- <q-file
borderless
v-model="fileData"
stack-label
@ -152,9 +173,9 @@
<div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
</q-img>
</q-file> -->
</div>
</div>
<!-- <div class="q-pa-md text-center col-12" v-if="status == 'payment' || status == 'rejectPayment'">
</div>
<!-- <div class="q-pa-md text-center col-12" v-if="status == 'payment' || status == 'rejectPayment'">
<q-btn
color="primary"
@ -165,13 +186,13 @@
<div class="text-black text-center q-pb-lg q-pt-sm col-12 text-deep-orange">
<q-icon name="mdi-alert" size="18px" color="deep-orange" class="q-mr-sm" />ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัปโหลดซ้ำ
</div> -->
<div class="row col-12 justify-center">
<q-btn
:color="pay === null ? 'grey': 'primary'"
:disable="pay === null"
style="width: 200px;"
label="แจ้งการชำระเงิน"
/>
<div class="row col-12 justify-center">
<q-btn
:color="pay === null ? 'grey' : 'primary'"
:disable="pay === null"
style="width: 200px"
label="แจ้งการชำระเงิน"
/>
</div>
</template>
@ -204,6 +225,7 @@ const loader = ref<boolean>(false)
const pay = ref(null)
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const uploadImg = (file: any) => {
fileData.value = null
@ -216,7 +238,7 @@ const uploadImg = (file: any) => {
const clickPayment = async () => {
loader.value = true
await http
.get(config.API.candidatePayment(examId.value))
.get(config.API.candidatePayment(examId.value, positionId.value))
.then(() => {
success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
})
@ -235,6 +257,8 @@ const getClass = (val: string) => {
return 'bg-red-2'
case 'checkSeat':
return 'bg-light-green-3'
case 'checkPoint':
return 'bg-light-green-3'
case 'done':
return 'bg-light-green-3'
default:
@ -251,6 +275,8 @@ const message = (val: string) => {
return 'หลักฐานการชำระเงินผิดพลาด'
case 'checkSeat':
return 'ตรวจสอบเเล้ว'
case 'checkPoint':
return 'ตรวจสอบเเล้ว'
case 'done':
return 'ตรวจสอบเเล้ว'
default:
@ -267,6 +293,8 @@ const getFontColor = (val: string) => {
return 'text-red-12'
case 'checkSeat':
return 'text-green'
case 'checkPoint':
return 'text-green'
case 'done':
return 'text-green'
default:

11
src/modules/01_exam/components/Form/Address.vue
View file

@ -97,8 +97,12 @@
/>
</div>
<div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm row">
<div class="text-bold" v-if="$q.screen.gt.xs">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</div>
<div class="text-bold col-12 q-pt-sm" v-else>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</div>
<div class="text-bold" v-if="$q.screen.gt.xs">
ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
</div>
<div class="text-bold col-12 q-pt-sm" v-else>
ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
</div>
<q-radio
v-model="defaultAddress.same"
checked-icon="task_alt"
@ -233,6 +237,7 @@ const props = defineProps({
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const edit = ref<boolean>(true)
const myform = ref<any>({})
const loader = ref<boolean>(false)
@ -266,7 +271,7 @@ onMounted(async () => {
const fetchData = async () => {
// loader.value = true;
await http
.get(config.API.candidateAddress(examId.value))
.get(config.API.candidateAddress(examId.value, positionId.value))
.then((res) => {
const data = res.data.result
defaultAddress.value.address = data.registAddress

5
src/modules/01_exam/components/Form/Career.vue
View file

@ -224,6 +224,7 @@ const editRow = ref<boolean>(false) //เช็คมีการแก้ไข
const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const rows = ref<RequestItemsObject[]>([])
const filter = ref<string>('') //search data table
@ -292,7 +293,7 @@ onMounted(async () => {
const fetchData = async () => {
loader.value = true
await http
.get(config.API.candidateCareer(examId.value))
.get(config.API.candidateCareer(examId.value, positionId.value))
.then((res) => {
const data = res.data.result
rows.value = []
@ -429,7 +430,7 @@ const clickSave = async () => {
const saveData = async () => {
loader.value = true
await http
.post(config.API.candidateCareer(examId.value), {
.post(config.API.candidateCareer(examId.value, positionId.value), {
name: location.value,
position: position.value,
salary: salary.value,

5
src/modules/01_exam/components/Form/Education.vue
View file

@ -229,6 +229,7 @@ const checkValidate = ref<boolean>(false) //validate data ผ่านหรื
const rows = ref<RequestItemsObject[]>([])
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const filter = ref<string>('') //search data table
const visibleColumns = ref<String[]>([])
@ -297,7 +298,7 @@ onMounted(async () => {
const fetchData = async () => {
loader.value = true
await http
.get(config.API.candidateEducation(examId.value))
.get(config.API.candidateEducation(examId.value, positionId.value))
.then((res) => {
const data = res.data.result
rows.value = []
@ -455,7 +456,7 @@ const clickSave = async () => {
const saveData = async () => {
loader.value = true
await http
.post(config.API.candidateEducation(examId.value), {
.post(config.API.candidateEducation(examId.value, positionId.value), {
educationLevelId: educationLevelId.value,
major: major.value,
scores: scores.value,

3
src/modules/01_exam/components/Form/Family.vue
View file

@ -282,6 +282,7 @@ const edit = ref<boolean>(true)
const myform = ref<any>({})
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const loader = ref<boolean>(false)
const emit = defineEmits(['update:form'])
@ -301,7 +302,7 @@ onMounted(async () => {
const fetchData = async () => {
loader.value = true
await http
.get(config.API.candidateFamily(examId.value))
.get(config.API.candidateFamily(examId.value, positionId.value))
.then((res) => {
const data = res.data.result
defaultFamily.value.prefixIdC = data.marryPrefixId

3
src/modules/01_exam/components/Form/Information.vue
View file

@ -381,6 +381,7 @@ const { date2Thai, calAge } = mixin
const districtOptions = ref<DataOption[]>([])
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const edit = ref<boolean>(true)
const myform = ref<any>({})
const disabledPic = ref<boolean>(false)
@ -406,7 +407,7 @@ onMounted(async () => {
const fetchData = async () => {
loader.value = true
await http
.get(config.API.candidateInformation(examId.value))
.get(config.API.candidateInformation(examId.value, positionId.value))
.then((res) => {
const data = res.data.result
defaultInformation.value.prefixId = data.prefixId

3
src/modules/01_exam/components/Form/Occupation.vue
View file

@ -268,6 +268,7 @@ const myform = ref<any>({})
const loader = ref<boolean>(false)
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const emit = defineEmits(['update:form'])
@ -286,7 +287,7 @@ onMounted(async () => {
const fetchData = async () => {
loader.value = true
await http
.get(config.API.candidateOccupation(examId.value))
.get(config.API.candidateOccupation(examId.value, positionId.value))
.then((res) => {
const data = res.data.result
defaultOccupation.value.status = data.occupationType

2
src/modules/01_exam/router.ts
View file

@ -12,7 +12,7 @@ export default [
// }
// },
{
path: '/exam/:id',
path: '/exam/:id/:positionId',
name: 'examDetail',
component: Detail,
meta: {

46
src/modules/01_exam/views/ExamDetail.vue
View file

@ -49,7 +49,7 @@
</q-step>
</q-stepper>
<q-dialog :model-value="modalConsend" persistent>
<q-card :style="$q.screen.gt.xs ? 'min-width: 55vw':'min-width: 80vw'">
<q-card :style="$q.screen.gt.xs ? 'min-width: 55vw' : 'min-width: 80vw'">
<Conference :ok="consendOk" :close="consenClose" />
</q-card>
</q-dialog>
@ -57,6 +57,9 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useCounterMixin } from '@/stores/mixin'
import { useQuasar } from 'quasar'
import { useExamDataStore } from '@/modules/01_exam/store'
import http from '@/plugins/http'
import config from '@/app.config'
@ -64,38 +67,50 @@ import ExamForm from '@/modules/01_exam/components/ExamForm.vue'
import ExamPayment from '@/modules/01_exam/components/ExamPayment.vue'
import ExamFinished from '@/modules/01_exam/components/ExamFinished.vue'
import Conference from '@/modules/01_exam/components/Conference.vue'
import { useRoute } from 'vue-router'
const $q = useQuasar()
const store = useExamDataStore()
const mixin = useCounterMixin()
const { modalError } = mixin
const step = ref<number>(1)
const stepRaw = ref<number>(1)
const tittle = ref<string>('')
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
const loader = ref<boolean>(false)
const status = ref<string>('register')
const modalConsend = ref<boolean>(false)
onMounted(async () => {
stepRaw.value = 3
step.value = 3
/* await fetchPeriodExam()
await candidateCheck() */
// stepRaw.value = 3
// step.value = 3
await fetchPeriodExam()
await candidateCheck()
})
const candidateCheck = async () => {
loader.value = true
await http
.get(config.API.candidateCheckCreate(examId.value))
.get(config.API.candidateCheckCreate(examId.value, positionId.value))
.then(async (res) => {
const data = res.data.result
store.consend = data
if (store.consend == true) {
await fetchStep()
store.consend = data.consend
const poition = data.positionExam
if (poition == true) {
modalError(
$q,
'คุณได้สมัครสอบตำแหน่งอื่นในรอบนี้แล้ว',
'คุณได้สมัครสอบตำแหน่งอื่นในรอบนี้แล้ว'
)
} else {
modalConsend.value = true
stepRaw.value = 2
step.value = 2
if (store.consend == true) {
await fetchStep()
} else {
modalConsend.value = true
stepRaw.value = 2
step.value = 2
}
}
})
.catch(() => {})
@ -107,7 +122,7 @@ const candidateCheck = async () => {
const fetchStep = async () => {
loader.value = true
await http
.get(config.API.candidateStatus(examId.value))
.get(config.API.candidateStatus(examId.value, positionId.value))
.then((res) => {
const data = res.data.result
status.value = data
@ -132,6 +147,9 @@ const fetchStep = async () => {
} else if (data == 'checkSeat') {
stepRaw.value = 4
step.value = 4
} else if (data == 'checkPoint') {
stepRaw.value = 4
step.value = 4
} else if (data == 'done') {
stepRaw.value = 4
step.value = 4

28
src/stores/mixin.ts
View file

@ -364,6 +364,31 @@ export const useCounterMixin = defineStore('mixin', () => {
}
}
const statusCandidate = (val: string) => {
switch (val) {
case 'register':
return 'ยังไม่สมัครสอบ'
case 'checkRegister':
return 'รอเจ้าหน้าที่ตรวจสอบข้อมูล'
case 'payment':
return 'ชำระค่าสมัครสอบ'
case 'rejectRegister':
return 'คุณสมบัติสมัครสอบไม่ผ่าน'
case 'checkPayment':
return 'รอเจ้าหน้าที่ตรวจสอบหลักฐานชำระเงิน'
case 'rejectPayment':
return 'หลักฐานชำระเงินไม่ถูกต้อง'
case 'checkSeat':
return 'รอเจ้าหน้าที่จัดที่นั่งสอบ'
case 'checkPoint':
return 'รอเจ้าหน้าที่สรุปคะแนนสอบ'
case 'done':
return 'สอบคัดเลือกสำเร็จ'
default:
return '-'
}
}
/**
* แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
* @param val ช่วงวันที่
@ -414,6 +439,7 @@ export const useCounterMixin = defineStore('mixin', () => {
monthThaiRange,
modalDelete,
modalConfirm,
modalError
modalError,
statusCandidate
}
})

114
src/views/MainLayout.vue
View file

@ -1,19 +1,31 @@
<script setup lang="ts">
import { useQuasar } from 'quasar'
import { ref } from 'vue'
import { onMounted, ref } from 'vue'
// import keycloak from '@/plugins/keycloak'
import { useRoute } from 'vue-router'
import { menuList, options, notiList } from '../interface/main/index'
import keycloak from '@/plugins/keycloak'
import { useCounterMixin } from '@/stores/mixin'
import http from '@/plugins/http'
import config from '@/app.config'
const route = useRoute()
const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { statusCandidate } = mixin
const miniState = ref<boolean>(false)
const active = ref<number>(0)
const drawerL = ref<boolean>(false)
const fullname = ref<string>('')
const notiTrigger = ref<boolean>(false)
const loader = ref<boolean>(false)
const status = ref<string>('register')
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())
onMounted(async () => {
await fetchStatus()
})
const toggleBtnLeft = () => {
if (window.innerWidth < 1024) {
@ -51,6 +63,20 @@ const doLogout = () => {
})
}
const fetchStatus = async () => {
loader.value = true
await http
.get(config.API.candidateStatus(examId.value, positionId.value))
.then((res) => {
const data = res.data.result
status.value = data
})
.catch(() => {})
.finally(() => {
loader.value = false
})
}
/**
* ดิงชื่อผู้ใช้งานจาก keycloak
*/
@ -67,30 +93,45 @@ const doLogout = () => {
<q-layout view="lHh LpR lff" class="bgColor text-dark">
<!-- header -->
<q-header flat class="bg-white text-white row justify-center header" height-hint="7">
<q-toolbar style="padding:0% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
<q-toolbar-title shrink class="row items-center no-wrap">
<q-btn flat class="bg-white" dense round>
<q-avatar size="35px">
<img src="../assets/logo.png" />
</q-avatar>
</q-btn>
<div class="row q-ml-md text-dark" v-if="$q.screen.gt.xs">
<div class="col-12 textline1">
ระบบทรัพยากรบุคคล
</div>
<div class="text-caption textline2">
กรุงเทพมหานคร
</div>
</div>
</q-toolbar-title>
<q-space/>
<q-btn v-if="$q.screen.gt.xs" class="bg-amber-1 text-amber-9" icon="mdi-logout-variant" size="12px" label="ออกจากระบบ" flat v-close-popup @click="doLogout" />
<q-btn v-else class="bg-amber-1 text-amber-9" icon="mdi-logout-variant" flat v-close-popup @click="doLogout" />
</q-toolbar>
</q-header>
<q-toolbar style="padding: 0% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
<q-toolbar-title shrink class="row items-center no-wrap">
<q-btn flat class="bg-white" dense round>
<q-avatar size="35px">
<img src="../assets/logo.png" />
</q-avatar>
</q-btn>
<div class="row q-ml-md text-dark" v-if="$q.screen.gt.xs">
<div class="col-12 textline1">ระบบทรัพยากรบุคคล</div>
<div class="text-caption textline2">กรุงเทพมหานคร</div>
</div>
</q-toolbar-title>
<q-space />
<q-badge outline color="blue" class="q-mr-md text-bold">
{{ statusCandidate(status) }}
</q-badge>
<q-btn
v-if="$q.screen.gt.xs"
class="bg-amber-1 text-amber-9"
icon="mdi-logout-variant"
size="12px"
label="ออกจากระบบ"
flat
v-close-popup
@click="doLogout"
/>
<q-btn
v-else
class="bg-amber-1 text-amber-9"
icon="mdi-logout-variant"
flat
v-close-popup
@click="doLogout"
/>
</q-toolbar>
</q-header>
<!-- end header -->
<q-page-container class="row justify-center">
<q-page style="padding:1.5% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
<q-page style="padding: 1.5% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
<router-view :key="$route.fullPath" />
</q-page>
</q-page-container>
@ -99,10 +140,10 @@ const doLogout = () => {
<style>
.bgColor {
/* background-image: url("../assets/bg.png");
/* background-image: url("../assets/bg.png");
background-size: cover;
background-size: 100%; */
background: #F6F9FA;
background: #f6f9fa;
}
.tabNative {
@ -118,14 +159,14 @@ const doLogout = () => {
}
.q-card {
box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) ;
box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261);
}
.q-card--bordered {
border: 1px solid #92b4c847;
box-shadow: none !important;
}
.q-stepper{
box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) ;
.q-stepper {
box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261);
}
.q-menu {
box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
@ -140,7 +181,8 @@ const doLogout = () => {
border-radius: 5px;
}
.q-field--outlined .q-field__control:before,.q-field .q-field__control:before{
.q-field--outlined .q-field__control:before,
.q-field .q-field__control:before {
border-color: #c8d3db;
}
.q-field--outlined .q-icon {
@ -167,17 +209,17 @@ const doLogout = () => {
background-color: #a8bbbf;
}
.header{
.header {
border-bottom: 1px solid #92b4c847;
height: 50px;
}
.textline1{
font-size: 0.90rem;
line-height:1.2rem !important;
.textline1 {
font-size: 0.9rem;
line-height: 1.2rem !important;
font-weight: 500;
}
.textline2{
line-height:1rem !important;
.textline2 {
line-height: 1rem !important;
font-weight: 400;
color: #96a9ad;
}