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

<!-- step กรอกข้อมูล -->
<template>
  <div>
    <q-splitter v-model="splitterModel" style="height: 450px">
      <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>
</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 { useQuasar } from 'quasar'
import { useCounterMixin } from '@/stores/mixin'

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

const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { modalConfirm, modalError, success } = mixin
const tab = ref<string>('profile')
const splitterModel = ref<number>(90)
const loader = ref<boolean>(false)
const statusEdit = ref<boolean>(false)
const acceptTermOfUse = ref<boolean>(false)

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

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

const saveForm = () => {
  //saveform
  success($q, 'บันทึกข้อมูลสำเร็จ')
  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')
  }
}
</script>

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