458 lines
23 KiB
Vue
458 lines
23 KiB
Vue
<!-- step กรอกข้อมูล -->
|
|
<template>
|
|
<div>
|
|
<q-form greedy @submit.prevent @validation-success="onSubmitForm">
|
|
<Profile
|
|
:status="status"
|
|
:isStatusRegister="isStatusRegister"
|
|
v-model:formInformation="formInformation"
|
|
v-model:formAddress="formAddress"
|
|
v-model:formOccupation="formOccupation"
|
|
v-model:formEducation="formEducation"
|
|
v-model:formContact="formContact"
|
|
:positionLevel="positionLevel"
|
|
/>
|
|
<!-- v-model:formFamily="formFamily" -->
|
|
<div v-html="editorConfirm"></div>
|
|
<div class="text-center q-pt-sm">
|
|
<q-checkbox
|
|
v-model="acceptTermOfUse"
|
|
:disable="!isStatusRegister || statusEdit"
|
|
label="ข้าพเจ้าขอให้คำรับรองและแสดงความยินยอมตามเงื่อนไขทุกประการ"
|
|
/>
|
|
</div>
|
|
<!-- <div>
|
|
1. ข้าพเจ้าขอให้คำรับรองว่า
|
|
ข้อความดังกล่าวข้างต้นนี้เป็นจริงทุกประการและข้าพเจ้ามีคุณสมบัติทั่วไปและ ไม่มีลักษณะต้องห้าม
|
|
ตามมาตรา 43 แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานครและบุคลากร-กรุงเทพมหานคร พ.ศ. 2554
|
|
และมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัคร
|
|
</div>
|
|
<div>
|
|
2. กรณีข้าพเจ้ามีลักษณะต้องห้าม ตามมาตรา 43 แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานคร
|
|
และบุคลากรกรุงเทพมหานคร พ.ศ. 2554 และประสงค์จะยื่นคำขอยกเว้นเข้ารับราชการฯ ต่อหัวหน้าสำนักงาน
|
|
ก.ก. ตามระเบียบ ก.ก.
|
|
ว่าด้วยการยกเว้นให้ผู้มีลักษณะต้องห้ามเข้ารับราชการเป็นข้าราชการกรุงเทพมหานคร พ.ศ. 2556 ตามมติ
|
|
ก.ก. ครั้งที่ 7/2556 เมื่อวันที่ 15 สิงหาคม 2556 ข้าพเจ้าจะยื่นภายในวันปิดรับสมัคร ทั้งนี้
|
|
หากยื่นภายหลังกำหนด สำนักงาน ก.ก. จะไม่รับคำขอดังกล่าว
|
|
</div>
|
|
<div>
|
|
3.
|
|
ข้าพเจ้าจะยื่นหลักฐานและเอกสารที่แสดงว่าเป็นผู้มีคุณสมบัติทั่วไปและมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัครภายในระยะเวลาที่กำหนดตามประกาศฯ
|
|
</div>
|
|
<div>
|
|
4. หากมีการตรวจสอบหลักฐานและเอกสารและหรือคุณวุฒิการศึกษาของข้าพเจ้าในภายหลัง
|
|
ปรากฏว่าข้าพเจ้ามีคุณสมบัติไม่ตรงหรือมีลักษณะต้องห้ามตามประกาศรับสมัครหรือไม่ได้รับการยกเว้นให้ถือว่าข้าพเจ้า
|
|
เป็นผู้ขาดคุณสมบัติในการสมัครครั้งนี้มาตั้งแต่ต้น
|
|
และไม่มีสิทธิได้รับการบรรจุและแต่งตั้งให้ดำรงตำแหน่ง และข้าพเจ้าจะไม่ใช้สิทธิเรียกร้องใด ๆ
|
|
ทั้งสิ้น
|
|
และหากข้าพเจ้าจงใจกรอกข้อความอันเป็นเท็จอาจมีความผิดทางอาญาฐานแจ้งความเท็จต่อเจ้าพนักงานตามประมวลกฎหมายอาญา
|
|
มาตรา 137
|
|
</div> -->
|
|
|
|
<div class="row justify-center q-pa-md">
|
|
<!-- @click="clickSave" -->
|
|
<q-btn
|
|
color="blue"
|
|
class="q-ml-md"
|
|
label="บันทึกข้อมูล"
|
|
outline
|
|
icon="mdi-content-save"
|
|
type="submit"
|
|
v-if="isStatusRegister"
|
|
:disable="!acceptTermOfUse || statusEdit"
|
|
@click="saveType = 'save'"
|
|
/>
|
|
<!-- @click="status === 'checkRegister' && !stepPayment ? (secondDialog = true) : dialogOpen()" -->
|
|
<q-btn
|
|
color="primary"
|
|
class="q-ml-md"
|
|
icon="mdi-check"
|
|
label="ส่งใบสมัคร"
|
|
type="submit"
|
|
v-if="isStatusRegister"
|
|
:disable="!acceptTermOfUse || statusEdit"
|
|
@click="saveType = 'confirm'"
|
|
/>
|
|
</div>
|
|
</q-form>
|
|
</div>
|
|
|
|
<q-dialog v-model="dialog" persistent>
|
|
<q-card>
|
|
<q-card-section class="row items-center q-pa-sm">
|
|
<div class="text-bold">กรุณาตรวจสอบข้อมูลก่อนส่งใบสมัคร</div>
|
|
<q-space />
|
|
<q-btn
|
|
icon="close"
|
|
unelevated
|
|
round
|
|
dense
|
|
v-close-popup
|
|
style="color: #ff8080; background-color: #ffdede"
|
|
/>
|
|
</q-card-section>
|
|
|
|
<q-card-section class="q-pt-none">
|
|
<div class="col-12 q-pa-md">
|
|
<div class="q-pt-xs row">
|
|
<div class="">ชื่อ :</div>
|
|
<div class="text-black text-bold q-pl-sm">
|
|
{{ defaultInformation.prefix }}{{ defaultInformation.firstname }}
|
|
{{ defaultInformation.lastname }}
|
|
</div>
|
|
</div>
|
|
<div class="q-pt-xs row">
|
|
<div class="">เลขประจำตัวประชาชน :</div>
|
|
<div class="text-black text-bold q-pl-sm">{{ defaultInformation.cardid }}</div>
|
|
</div>
|
|
<div class="q-pt-xs row">
|
|
<div class="">ตำแหน่งที่สมัคร :</div>
|
|
<div class="text-black text-bold q-pl-sm">{{ position }}{{ positionLevel }}</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-card-actions align="center">
|
|
<div class="col-12 row" align="center">
|
|
<div class="col-6" align="center">
|
|
<q-btn class="" label="แก้ไข" color="red-5" outline @click="dialogClose" />
|
|
</div>
|
|
<div class="col-6" align="center">
|
|
<q-btn class="" label="ยืนยัน" color="primary" @click="okModalConfirm" />
|
|
</div>
|
|
</div>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<q-dialog v-model="secondDialog" persistent transition-show="scale" transition-hide="scale">
|
|
<q-card style="width: 400px">
|
|
<q-card-section>
|
|
<!-- <div class="text-h6">เตือน</div> -->
|
|
</q-card-section>
|
|
|
|
<q-card-section>
|
|
<div class="text-body1 text-center text-red-8">
|
|
!!! โปรดตรวจสอบข้อมูลให้ถูกต้อง !!! <br />
|
|
ก่อนส่งใบสมัคร
|
|
<br />
|
|
เมื่อส่งใบสมัครแล้วจะแก้ไขไม่ได้ / สมัครใหม่ไม่ได้
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
|
|
<q-card-actions align="right" class="bg-white text-teal">
|
|
<div class="col-12 row" align="center">
|
|
<div class="col-6" align="center">
|
|
<q-btn class="" label="แก้ไข" color="red-5" outline @click="secondDialog = false" />
|
|
</div>
|
|
<div class="col-6" align="center">
|
|
<q-btn class="" label="ส่งใบสมัคร" color="primary" @click="onSubmit" />
|
|
</div>
|
|
</div>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { useQuasar } from 'quasar'
|
|
import { useCounterMixin } from '@/stores/mixin'
|
|
import { useDataStore } from '@/stores/data'
|
|
import http from '@/plugins/http'
|
|
import config from '@/app.config'
|
|
import { useRoute } from 'vue-router'
|
|
import {
|
|
defaultInformation,
|
|
defaultOccupation,
|
|
defaultAddress,
|
|
defaultEducation,
|
|
defaultContact,
|
|
defaultCareer
|
|
} from '@/modules/01_exam/interface/index/Main'
|
|
import Profile from '@/modules/01_exam/components/Form/Profile.vue'
|
|
|
|
const props = defineProps({
|
|
fetchStep: {
|
|
type: Function,
|
|
default: () => console.log('not function')
|
|
},
|
|
status: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
editorConfirm: {
|
|
type: String,
|
|
default: () =>
|
|
`<div style="color: rgb(53, 71, 60); font-size: 14px;">1. ข้าพเจ้าขอให้คำรับรองว่า ข้อความดังกล่าวข้างต้นนี้เป็นจริงทุกประการและข้าพเจ้ามีคุณสมบัติทั่วไปและ ไม่มีลักษณะต้องห้าม ตามมาตรา 43 แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานครและบุคลากร-กรุงเทพมหานคร พ.ศ. 2554 และมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัคร</div><div style="color: rgb(53, 71, 60); font-size: 14px;">2. กรณีข้าพเจ้ามีลักษณะต้องห้าม ตามมาตรา 43 ข. แห่งพระราชบัญญัติระเบียบข้าราชการกรุงเทพมหานคร และบุคลากรกรุงเทพมหานคร พ.ศ. 2554 และประสงค์จะยื่นคำขอยกเว้นเข้ารับราชการฯ ต่อหัวหน้าสำนักงาน ก.ก. ตามระเบียบ ก.ก. ว่าด้วยการยกเว้นให้ผู้มีลักษณะต้องห้ามเข้ารับราชการเป็นข้าราชการกรุงเทพมหานคร พ.ศ. 2556 ตามมติ ก.ก. ครั้งที่ 7/2556 เมื่อวันที่ 15 สิงหาคม 2556 ข้าพเจ้าจะยื่นภายในวันปิดรับสมัคร ทั้งนี้ หากยื่นภายหลังกำหนด สำนักงาน ก.ก. จะไม่รับคำขอดังกล่าว</div><div style="color: rgb(53, 71, 60); font-size: 14px;">3. ข้าพเจ้าจะยื่นหลักฐานและเอกสารที่แสดงว่าเป็นผู้มีคุณสมบัติทั่วไปและมีคุณสมบัติเฉพาะสำหรับตำแหน่งที่สมัครตรงตามประกาศรับสมัครภายในระยะเวลาที่กำหนดตามประกาศฯ</div><div style="color: rgb(53, 71, 60); font-size: 14px;">4. หากมีการตรวจสอบหลักฐานและเอกสารและหรือคุณวุฒิการศึกษาของข้าพเจ้าในภายหลัง ปรากฏว่าข้าพเจ้ามีคุณสมบัติไม่ตรงหรือมีลักษณะต้องห้ามตามประกาศรับสมัครหรือไม่ได้รับการยกเว้นให้ถือว่าข้าพเจ้า เป็นผู้ขาดคุณสมบัติในการสมัครครั้งนี้มาตั้งแต่ต้น และไม่มีสิทธิได้รับการบรรจุและแต่งตั้งให้ดำรงตำแหน่ง และข้าพเจ้าจะไม่ใช้สิทธิเรียกร้องใด ๆ ทั้งสิ้น และหากข้าพเจ้าจงใจกรอกข้อความอันเป็นเท็จอาจมีความผิดทางอาญาฐานแจ้งความเท็จต่อเจ้าพนักงานตามประมวลกฎหมายอาญา มาตรา 137</div>`
|
|
},
|
|
position: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
positionLevel: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
isStatusRegister: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
stepPayment: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const $q = useQuasar()
|
|
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
|
|
const { modalConfirm, modalError, success, dateToISO, messageError, notifyError } = mixin
|
|
const dataStore = useDataStore()
|
|
const { loaderPage } = dataStore
|
|
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 formEducation = ref<any>({})
|
|
const formOccupation = ref<any>({})
|
|
const formContact = ref<any>({})
|
|
const saveAuto = ref<boolean>(false)
|
|
const dialog = ref<boolean>(false)
|
|
const secondDialog = ref<boolean>(false)
|
|
|
|
onMounted(async () => {
|
|
await fetchStatus()
|
|
})
|
|
|
|
const saveType = ref<string>('')
|
|
|
|
function onSubmitForm() {
|
|
if (defaultInformation.value.profileImg == null || defaultInformation.value.profileImg == '') {
|
|
notifyError($q, 'กรุณาอัพโหลดรูปถ่าย')
|
|
return
|
|
}
|
|
if (!defaultCareer.value) {
|
|
notifyError($q, 'กรุณากรอกข้อมูลประวัติการทำงาน')
|
|
return
|
|
}
|
|
if (saveType.value === 'save') {
|
|
clickSave()
|
|
} else if (saveType.value === 'confirm') {
|
|
if (props.status === 'checkRegister' && !props.stepPayment) {
|
|
secondDialog.value = true
|
|
} else {
|
|
dialogOpen()
|
|
}
|
|
}
|
|
}
|
|
|
|
const dialogClose = () => {
|
|
dialog.value = false
|
|
}
|
|
|
|
const dialogOpen = () => {
|
|
dialog.value = true
|
|
}
|
|
|
|
const okModalConfirm = () => {
|
|
if (statusEdit.value == true) {
|
|
modalError($q, 'ไม่สามารถสมัครสอบได้', 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
|
|
} else {
|
|
saveAuto.value = true
|
|
saveData()
|
|
}
|
|
}
|
|
|
|
const fetchStatus = async () => {
|
|
loaderPage(true)
|
|
await http
|
|
.get(config.API.candidateCard(examId.value, positionId.value))
|
|
.then(() => {
|
|
acceptTermOfUse.value = true
|
|
})
|
|
.catch(() => {
|
|
acceptTermOfUse.value = false
|
|
})
|
|
.finally(() => {
|
|
loaderPage(false)
|
|
})
|
|
}
|
|
|
|
const saveForm = async () => {
|
|
loaderPage(true)
|
|
await http
|
|
.get(config.API.candidateRegister(examId.value, positionId.value))
|
|
.then(() => {})
|
|
.catch((e) => {
|
|
messageError($q, e)
|
|
})
|
|
.finally(async () => {
|
|
await props.fetchStep()
|
|
})
|
|
}
|
|
|
|
const clickSave = async () => {
|
|
saveAuto.value = false
|
|
await saveData()
|
|
}
|
|
|
|
const saveData = async () => {
|
|
if (saveAuto.value == true) {
|
|
loaderPage(true)
|
|
await http
|
|
.post(config.API.candidateId(examId.value, positionId.value), {
|
|
// prefixId: defaultInformation.value.prefixId,
|
|
prefixName: defaultInformation.value.prefix,
|
|
lastName: defaultInformation.value.lastname,
|
|
dateOfBirth:
|
|
defaultInformation.value.birthDate == null
|
|
? null
|
|
: dateToISO(defaultInformation.value.birthDate),
|
|
citizenId: defaultInformation.value.cardid,
|
|
firstName: defaultInformation.value.firstname,
|
|
// religionId: defaultInformation.value.religionId,
|
|
religionName: defaultInformation.value.religionName,
|
|
nationality: defaultInformation.value.nationality,
|
|
email: defaultInformation.value.email,
|
|
mobilePhone: defaultInformation.value.phone,
|
|
telephone: defaultInformation.value.tel,
|
|
knowledge: defaultInformation.value.knowledge,
|
|
occupationOrg: defaultOccupation.value.org,
|
|
occupationPile: defaultOccupation.value.pile,
|
|
occupationGroup: defaultOccupation.value.group,
|
|
occupationSalary: defaultOccupation.value.salary,
|
|
occupationPosition: defaultOccupation.value.position,
|
|
occupationPositionType: defaultOccupation.value.positionType,
|
|
occupationTelephone: defaultOccupation.value.tel,
|
|
registAddress: defaultAddress.value.address,
|
|
currentAddress: defaultAddress.value.addressC,
|
|
registProvinceId: defaultAddress.value.provinceId,
|
|
currentProvinceId: defaultAddress.value.provinceIdC,
|
|
registDistrictId: defaultAddress.value.districtId,
|
|
currentDistrictId: defaultAddress.value.districtIdC,
|
|
registSubDistrictId: defaultAddress.value.subdistrictId,
|
|
currentSubDistrictId: defaultAddress.value.subdistrictIdC,
|
|
registZipCode: defaultAddress.value.code,
|
|
currentZipCode: defaultAddress.value.codeC,
|
|
registSame:
|
|
defaultAddress.value.same == '1' ? true : defaultAddress.value.same == '0' ? false : null,
|
|
educationLevelExamId: defaultEducation.value.educationLevelExamId,
|
|
educationName: defaultEducation.value.educationName,
|
|
educationMajor: defaultEducation.value.educationMajor,
|
|
educationLocation: defaultEducation.value.educationLocation,
|
|
educationType: defaultEducation.value.educationType,
|
|
educationEndDate:
|
|
defaultEducation.value.educationEndDate == null
|
|
? null
|
|
: dateToISO(defaultEducation.value.educationEndDate),
|
|
educationScores: defaultEducation.value.educationScores,
|
|
educationLevelHighId: defaultEducation.value.educationLevelHighId,
|
|
|
|
// contactprefixId: defaultContact.value.contactprefixId,
|
|
contactprefixName: defaultContact.value.contactprefixName,
|
|
contactfirstname: defaultContact.value.contactfirstname,
|
|
contactlastname: defaultContact.value.contactlastname,
|
|
contactrelations: defaultContact.value.contactrelations,
|
|
contacttel: defaultContact.value.contacttel
|
|
})
|
|
.then(async () => {
|
|
if (!props.stepPayment) {
|
|
secondDialog.value = true
|
|
}
|
|
success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
|
|
await saveForm()
|
|
await props.fetchStep()
|
|
dialog.value = false
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e)
|
|
loaderPage(false)
|
|
})
|
|
} else {
|
|
loaderPage(true)
|
|
await http
|
|
.post(config.API.candidateId(examId.value, positionId.value), {
|
|
// prefixId: defaultInformation.value.prefixId,
|
|
prefixName: defaultInformation.value.prefix,
|
|
lastName: defaultInformation.value.lastname,
|
|
dateOfBirth:
|
|
defaultInformation.value.birthDate == null
|
|
? null
|
|
: dateToISO(defaultInformation.value.birthDate),
|
|
citizenId: defaultInformation.value.cardid,
|
|
firstName: defaultInformation.value.firstname,
|
|
// religionId: defaultInformation.value.religionId,
|
|
religionName: defaultInformation.value.religionName,
|
|
nationality: defaultInformation.value.nationality,
|
|
email: defaultInformation.value.email,
|
|
mobilePhone: defaultInformation.value.phone,
|
|
telephone: defaultInformation.value.tel,
|
|
knowledge: defaultInformation.value.knowledge,
|
|
occupationOrg: defaultOccupation.value.org,
|
|
occupationPile: defaultOccupation.value.pile,
|
|
occupationGroup: defaultOccupation.value.group,
|
|
occupationSalary: defaultOccupation.value.salary,
|
|
occupationPosition: defaultOccupation.value.position,
|
|
occupationPositionType: defaultOccupation.value.positionType,
|
|
occupationTelephone: defaultOccupation.value.tel,
|
|
registAddress: defaultAddress.value.address,
|
|
currentAddress: defaultAddress.value.addressC,
|
|
registProvinceId: defaultAddress.value.provinceId,
|
|
currentProvinceId: defaultAddress.value.provinceIdC,
|
|
registDistrictId: defaultAddress.value.districtId,
|
|
currentDistrictId: defaultAddress.value.districtIdC,
|
|
registSubDistrictId: defaultAddress.value.subdistrictId,
|
|
currentSubDistrictId: defaultAddress.value.subdistrictIdC,
|
|
registZipCode: defaultAddress.value.code,
|
|
currentZipCode: defaultAddress.value.codeC,
|
|
registSame:
|
|
defaultAddress.value.same == '1' ? true : defaultAddress.value.same == '0' ? false : null,
|
|
educationLevelExamId: defaultEducation.value.educationLevelExamId,
|
|
educationName: defaultEducation.value.educationName,
|
|
educationMajor: defaultEducation.value.educationMajor,
|
|
educationLocation: defaultEducation.value.educationLocation,
|
|
educationType: defaultEducation.value.educationType,
|
|
educationEndDate:
|
|
defaultEducation.value.educationEndDate == null
|
|
? null
|
|
: dateToISO(defaultEducation.value.educationEndDate),
|
|
educationScores: defaultEducation.value.educationScores,
|
|
educationLevelHighId: defaultEducation.value.educationLevelHighId,
|
|
|
|
// contactprefixId: defaultContact.value.contactprefixId,
|
|
contactprefixName: defaultContact.value.contactprefixName,
|
|
contactfirstname: defaultContact.value.contactfirstname,
|
|
contactlastname: defaultContact.value.contactlastname,
|
|
contactrelations: defaultContact.value.contactrelations,
|
|
contacttel: defaultContact.value.contacttel
|
|
})
|
|
.then(async () => {
|
|
success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
|
|
await props.fetchStep()
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e)
|
|
loaderPage(false)
|
|
})
|
|
}
|
|
}
|
|
|
|
async function onSubmit() {
|
|
try {
|
|
saveAuto.value = false
|
|
await saveData()
|
|
await http.post(config.API.registerConfirm(examId.value, positionId.value))
|
|
await props.fetchStep()
|
|
// do something
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|