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

<template>
  <div>
    <q-tabs
      v-model="tab"
      dense
      class=""
      active-color="primary"
      indicator-color="primary"
      align="justify"
    >
      <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 /></q-tab-panel>

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

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

      <!-- ไฟล์ -->
      <!-- <q-tab-panel name="document">
        <div class="row justify-center">
          <div class="q-mt-md" style="width: 100%; min-width: 300px; max-width: 900px">
            <q-select
              :disable="!allowEdit"
              filled
              v-model="filePictureUpload"
              :options="filePictureCurrent"
              option-label="fileName"
              option-value="id"
              emit-value
              map-options
              label="รูปถ่าย (File.png)"
            >
              <template v-slot:append>
                <q-icon
                  v-if="filePictureUpload !== null"
                  name="close"
                  @click.stop.prevent="filePictureUpload = null"
                  class="cursor-pointer"
                />
              </template>
            </q-select>
          </div>
          <div class="q-mt-md" style="width: 100%; min-width: 300px; max-width: 900px">
            <q-select
              :disable="!allowEdit"
              filled
              v-model="fileAddressUpload"
              :options="fileAddressCurrent"
              option-label="fileName"
              option-value="id"
              emit-value
              map-options
              label="สำเนาทะเบียนบ้าน"
            >
              <template v-slot:append>
                <q-icon
                  v-if="fileAddressUpload !== null"
                  name="close"
                  @click.stop.prevent="fileAddressUpload = null"
                  class="cursor-pointer"
                />
              </template>
            </q-select>
          </div>
          <div class="q-mt-md" style="width: 100%; min-width: 300px; max-width: 900px">
            <q-select
              :disable="!allowEdit"
              filled
              v-model="fileCitizenIdUpload"
              :options="fileCitizenIdCurrent"
              option-label="fileName"
              option-value="id"
              emit-value
              map-options
              label="สำเนาบัตรประจำตัวประชาชน"
            >
              <template v-slot:append>
                <q-icon
                  v-if="fileCitizenIdUpload !== null"
                  name="close"
                  @click.stop.prevent="fileCitizenIdUpload = null"
                  class="cursor-pointer"
                />
              </template>
            </q-select>
          </div>
          <div class="q-mt-md" style="width: 100%; min-width: 300px; max-width: 900px">
            <q-select
              :disable="!allowEdit"
              filled
              v-model="fileProfessionalLicenseUpload"
              :options="fileProfessionalLicenseCurrent"
              option-label="fileName"
              option-value="id"
              emit-value
              map-options
              label="ใบอนุญาตประกอบวิชาชีพ"
            >
              <template v-slot:append>
                <q-icon
                  v-if="fileProfessionalLicenseUpload !== null"
                  name="close"
                  @click.stop.prevent="fileProfessionalLicenseUpload = null"
                  class="cursor-pointer"
                />
              </template>
            </q-select>
          </div>
          <div class="q-mt-md" style="width: 100%; min-width: 300px; max-width: 900px">
            <q-select
              :disable="!allowEdit"
              filled
              v-model="fileOtherUpload"
              multiple
              :options="fileOtherCurrent"
              option-label="fileName"
              option-value="id"
              emit-value
              map-options
              label="เอกสารอื่น ๆ"
            >
              <template v-slot:append>
                <q-icon
                  v-if="fileOtherUpload.length !== 0"
                  name="close"
                  @click.stop.prevent="fileOtherUpload = []"
                  class="cursor-pointer"
                />
              </template>
            </q-select>
          </div>
        </div>
      </q-tab-panel> -->
    </q-tab-panels>

    <!-- <div>
      <q-checkbox
        v-if="allowEditProp"
        v-model="acceptTermOfUse"
        :disable="!allowEdit"
        :label="formLabel.acceptTermOfUse"
      />
    </div>

    <div class="row justify-center q-pa-md">
      <q-btn color="warning" label="บันทึก" @click="saveForm" :disable="applyState === 3" />
      <q-btn
        color="primary"
        class="q-ml-md"
        label="สมัครสอบ"
        @click="applyCandidate"
        :disable="!acceptTermOfUse || applyState === 3"
      />
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Profile from './Profile.vue'
import Education from './Education.vue'
import Career from './Career.vue'

const tab = ref<string>('profile')
const loader = ref<boolean>(false)
</script>

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