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

<!-- step กรอกข้อมูล -->
<template>
  <div>
    <q-splitter v-model="splitterModel" style="height: 500px">
      <template v-slot:before>
        <q-tab-panels
          v-model="tab"
          animated
          swipeable
          vertical
          transition-prev="jump-up"
          transition-next="jump-up"
        >
          <!-- ข้อมูลส่วนบุคคล -->
          <q-tab-panel name="profile">
            <Profile :loader="loader" v-model:statusEdit="statusEdit" :step="step" />
          </q-tab-panel>

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

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

          <!-- ไฟล์ -->
          <q-tab-panel name="document">
            <Document :loader="loader" v-model:statusEdit="statusEdit" :step="step" />
          </q-tab-panel>
        </q-tab-panels>
      </template>
      <template v-slot:after>
        <q-tabs v-model="tab" vertical class="text-teal">
          <q-tab name="profile" label="ข้อมูลส่วนบุคคล" :disable="statusEdit" />
          <q-tab name="education" label="ประวัติการศีกษา" :disable="statusEdit" />
          <q-tab name="career" label="ประวัติการทำงาน/ฝึกงาน" :disable="statusEdit" />
          <q-tab name="document" label="อัปโหลดเอกสาร" :disable="statusEdit" />
        </q-tabs>
      </template>
    </q-splitter>

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

    <div class="row justify-center q-pa-md">
      <q-btn
        color="primary"
        class="q-ml-md"
        label="กลับ"
        @click="clickPreview(tab)"
        v-if="step === 2 && (tab == 'education' || tab == 'career' || tab == 'document')"
        icon="mdi-chevron-left"
        :disable="statusEdit"
      />
      <q-btn
        color="primary"
        class="q-ml-md"
        label="ต่อไป"
        @click="clickNext(tab)"
        v-if="step === 2 && (tab == 'profile' || tab == 'education' || tab == 'career')"
        icon-right="mdi-chevron-right"
        :disable="statusEdit"
      />
      <q-btn
        color="primary"
        class="q-ml-md"
        label="สมัครสอบ"
        @click="okModalConfirm"
        v-if="step === 2 && tab == 'document'"
        :disable="!acceptTermOfUse || statusEdit"
      />
    </div>
  </div>
  <NotifyConfirm
    :modal="modalConfirm"
    :tittle="modalConfirmTittle"
    :detail="modalConfirmDetail"
    :ok="applyCandidate"
    :cancel="cancelModalConfirm"
  />
  <NotifyError
    :modal="modalNoEdit"
    :Tittle="modalNoEditTittle"
    :Detail="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 splitterModel = ref<number>(90)
const tabRaw = ref<string>('profile')
const loader = ref<boolean>(false)
const statusEdit = ref<boolean>(false)
const acceptTermOfUse = ref<boolean>(false)
const modalConfirm = ref<boolean>(false)
const modalConfirmTittle = ref<string>('ยืนยันการสมัครสอบ?')
const modalConfirmDetail = 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 okModalConfirm = () => {
  if (statusEdit.value == true) {
    modalNoEditTittle.value = 'ไม่สามารถสมัครสอบได้?'
    modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
    modalNoEdit.value = true
  } else {
    modalConfirm.value = true
  }
}

const cancelModalConfirm = () => {
  modalConfirm.value = false
}

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

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

const clickPreview = (val: string) => {
  console.log(val)
  switch (val) {
    case 'profile':
      return (tab.value = 'profile')
    case 'education':
      return (tab.value = 'profile')
    case 'career':
      return (tab.value = 'education')
    case 'document':
      return (tab.value = 'career')
    default:
      return (tab.value = 'profile')
  }
}

const clickNext = (val: string) => {
  switch (val) {
    case 'profile':
      return (tab.value = 'education')
    case 'education':
      return (tab.value = 'career')
    case 'career':
      return (tab.value = 'document')
    case 'document':
      return (tab.value = 'profile')
    default:
      return (tab.value = 'profile')
  }
}

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

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