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

<!-- step กรอกข้อมูล -->
<template>
  <div>
    <q-tabs
      v-model="tab"
      dense
      class=""
      active-color="primary"
      indicator-color="primary"
      align="justify"
      @update:model-value="changeTab"
    >
      <q-tab name="profile" label="ข้อมูลส่วนบุคคล" />
      <q-tab name="education" label="ประวัติการศีกษา" />
      <q-tab name="career" label="ประวัติการทำงาน/ฝึกงาน" />
      <q-tab name="document" label="เอกสาร" />
    </q-tabs>
    <q-tab-panels v-model="tab" animated class="bg-white">
      <!-- ข้อมูลส่วนบุคคล -->
      <q-tab-panel name="profile">
        <Profile :loader="loader" v-model:statusEdit="statusEditProfile" :step="step" />
      </q-tab-panel>

      <!-- ประวัติการศีกษา -->
      <q-tab-panel name="education"><Education :loader="loader" :step="step" /></q-tab-panel>

      <!-- ประวัติการทำงาน/ฝึกงาน -->
      <q-tab-panel name="career"><Career :loader="loader" :step="step" /></q-tab-panel>

      <!-- ไฟล์ -->
      <q-tab-panel name="document">
        <Document :loader="loader" v-model:statusEdit="statusEditDocument" :step="step" />
      </q-tab-panel>
    </q-tab-panels>

    <div>
      <q-checkbox
        v-model="acceptTermOfUse"
        :disable="step !== 2"
        label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
      />
    </div>

    <div class="row justify-center q-pa-md">
      <q-btn
        color="primary"
        class="q-ml-md"
        label="สมัครสอบ"
        @click="okModalComfirm"
        v-if="step === 2"
        :disable="!acceptTermOfUse"
      />
    </div>
  </div>
  <NotifyConfirm
    :modal="modalComfirm"
    :modalTittle="modalComfirmTittle"
    :modalDetail="modalComfirmDetail"
    :ok="applyCandidate"
    :cancel="cancelModalComfirm"
  />
  <NotifyError
    :modalError="modalNoEdit"
    :modalErrorTittle="modalNoEditTittle"
    :modalErrorDetail="modalNoEditDetail"
    :close="closeModalError"
  />
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import Profile from '@/modules/01_exam/components/Form/Profile.vue'
import Education from '@/modules/01_exam/components/Form/Education.vue'
import Career from '@/modules/01_exam/components/Form/Career.vue'
import Document from '@/modules/01_exam/components/Form/Document.vue'
import NotifyError from '@/components/NotifyError.vue'
import NotifyConfirm from '@/components/NotifyConfirm.vue'

const props = defineProps({
  fetchStep: {
    type: Function,
    default: () => console.log('not function')
  },
  step: {
    type: Number,
    required: true
  }
})

const tab = ref<string>('profile')
const tabRaw = ref<string>('profile')
const loader = ref<boolean>(false)
const statusEditProfile = ref<boolean>(false)
const statusEditDocument = ref<boolean>(false)
const acceptTermOfUse = ref<boolean>(false)
const modalComfirm = ref<boolean>(false)
const modalComfirmTittle = ref<string>('ยืนยันการสมัครสอบ?')
const modalComfirmDetail = ref<string>('เมื่อยืนยันการสมัครสอบแล้วจะไม่สามารถแก้ไขข้อมูลได้')
const modalNoEdit = ref<boolean>(false)
const modalNoEditTittle = ref<string>('ไม่สามารถเปลี่ยนแท็ปได้?')
const modalNoEditDetail = ref<string>('มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')

onMounted(async () => {
  if (props.step > 2) {
    acceptTermOfUse.value = true
  }
})

const okModalComfirm = () => {
  if (statusEditProfile.value == true || statusEditDocument.value == true) {
    modalNoEditTittle.value = 'ไม่สามารถสมัครสอบได้?'
    modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
    modalNoEdit.value = true
  } else {
    modalComfirm.value = true
  }
}

const cancelModalComfirm = () => {
  modalComfirm.value = false
}

const closeModalError = () => {
  modalNoEdit.value = false
}

const applyCandidate = () => {
  props.fetchStep()
}

const changeTab = () => {
  if (statusEditProfile.value == true || statusEditDocument.value == true) {
    modalNoEditTittle.value = 'ไม่สามารถเปลี่ยนแท็ปได้?'
    modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
    tab.value = tabRaw.value
    modalNoEdit.value = true
  } else {
    tabRaw.value = tab.value
  }
}
</script>

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