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"
    >
      <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"><Document :loader="loader" /> </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'
import Document from './Document.vue'

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

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