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

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

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

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

          ไฟล์
          <q-tab-panel name="document">
            <Document :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
          </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 class="text-center q-pt-sm">
      <q-checkbox
        v-model="acceptTermOfUse"
        :disable="(status !== 'register' && status !== 'rejectRegister') || statusEdit"
        label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
      />
      <!-- v-if="tab == 'document'" -->
    </div>

    <div class="row justify-center q-pa-md">
      <!-- <q-btn
        color="primary"
        class="q-ml-md"
        label="กลับ"
        @click="clickPreview(tab)"
        v-if="
          (status === 'register' || status === 'rejectRegister') &&
          (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="
          (status === 'register' || status === 'rejectRegister') &&
          (tab == 'profile' || tab == 'education' || tab == 'career')
        "
        icon-right="mdi-chevron-right"
        :disable="statusEdit"
      /> -->
      <q-btn
        color="blue"
        class="q-ml-md"
        label="บันทึกข้อมูล"
        outline
        icon="mdi-content-save"
        @click="okModalConfirm"
        v-if="status === 'register' || status === 'rejectRegister'"
        :disable="!acceptTermOfUse || statusEdit"
      />
      <q-btn
        color="primary"
        class="q-ml-md"
        icon="mdi-check"
        label="สมัครสอบ"
        @click="okModalConfirm"
        v-if="status === 'register' || status === 'rejectRegister'"
        :disable="!acceptTermOfUse || statusEdit"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useQuasar } from 'quasar'
import { useCounterMixin } from '@/stores/mixin'
import http from '@/plugins/http'
import config from '@/app.config'
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 { useRoute } from 'vue-router'

const props = defineProps({
  fetchStep: {
    type: Function,
    default: () => console.log('not function')
  },
  status: {
    type: String,
    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)
const route = useRoute()
const examId = ref<string>(route.params.id.toString())

onMounted(async () => {
  if (props.status !== 'register') {
    acceptTermOfUse.value = true
  }
})

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

const saveForm = async () => {
  //saveform
  loader.value = true
  await http
    .get(config.API.candidateRegister(examId.value))
    .then(() => {
      success($q, 'สมัครสอบสำเร็จสำเร็จ')
    })
    .catch(() => {})
    .finally(async () => {
      await props.fetchStep()
      loader.value = false
    })
}

// const clickPreview = (val: string) => {
//   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>