hrms-recruit/src/modules/01_exam/components/ExamForm.vue

<!-- step กรอกข้อมูล -->
<template>
  <div>
    <Profile
      :status="status"
      v-model:formInformation="formInformation"
      v-model:formAddress="formAddress"
      v-model:formOccupation="formOccupation"
      v-model:formEducation="formEducation"
    />
    <!-- v-model:formFamily="formFamily" -->
    <div class="text-center q-pt-sm">
      <q-checkbox
        v-model="acceptTermOfUse"
        :disable="(status !== 'register' && status !== 'rejectRegister') || statusEdit"
        label="ข้าพเจ้าขอให้คำรับรองและแสดงความยินยอมตามเงื่อนไขทุกประการ"
      />
    </div>
    <div v-html="editorConfirm"></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">
      <q-btn
        color="blue"
        class="q-ml-md"
        label="บันทึกข้อมูล"
        outline
        icon="mdi-content-save"
        @click="clickSave"
        v-if="status === 'register' || status === 'rejectRegister'"
        :disable="!acceptTermOfUse || statusEdit"
      />
      <q-btn
        color="primary"
        class="q-ml-md"
        icon="mdi-check"
        label="ส่งใบสมัคร"
        @click="dialogOpen"
        v-if="status === 'register' || status === 'rejectRegister'"
        :disable="!acceptTermOfUse || statusEdit"
      />
    </div>
  </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.firstname }}{{ 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 == null ? null : '/' + 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>
</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
} 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
  }
})

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 saveAuto = ref<boolean>(false)
const dialog = ref<boolean>(false)

onMounted(async () => {
  await fetchStatus()
})

const dialogClose = () => {
  dialog.value = false
}

const dialogOpen = () => {
  dialog.value = true
}

const okModalConfirm = () => {
  if (statusEdit.value == true) {
    modalError($q, 'ไม่สามารถสมัครสอบได้', 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
  } else {
    saveAuto.value = true
    modalConfirm(
      $q,
      'ยืนยันการสมัครสอบ?',
      'เมื่อยืนยันการสมัครสอบแล้วจะไม่สามารถแก้ไขข้อมูลได้',
      saveData
    )
  }
}

const fetchStatus = async () => {
  loaderPage(true)
  await http
    .get(config.API.candidateCard(examId.value, positionId.value))
    .then((res) => {
      acceptTermOfUse.value = true
    })
    .catch((e) => {
      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 () => {
  await formInformation.value.validate().then(async (suc: boolean) => {
    if (suc) {
      await formAddress.value.validate().then(async (suc: boolean) => {
        if (suc) {
          await formEducation.value.validate().then(async (suc: boolean) => {
            if (suc) {
              await formOccupation.value.validate().then(async (suc: boolean) => {
                if (suc) {
                  loaderPage(true)
                  await http
                    .post(config.API.candidateId(examId.value, positionId.value), {
                      prefixId: defaultInformation.value.prefixId,
                      prefixName: defaultInformation.value.prefixId,
                      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,
                      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
                    })
                    .then(async () => {
                      success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
                      if (saveAuto.value) await saveForm()
                    })
                    .catch((e) => {
                      messageError($q, e)
                    })
                    .finally(async () => {
                      await props.fetchStep()
                    })
                } else {
                  notifyError($q, 'กรุณากรอกข้อมูลให้ครบถ้วน')
                }
              })
            } else {
              notifyError($q, 'กรุณากรอกข้อมูลให้ครบถ้วน')
            }
          })
        } else {
          notifyError($q, 'กรุณากรอกข้อมูลให้ครบถ้วน')
        }
      })
    } else {
      notifyError($q, 'กรุณากรอกข้อมูลให้ครบถ้วน')
    }
  })
}
</script>

<style lang="scss" scoped></style>