hrms-recruit/src/modules/01_exam/components/Form/Profile.vue

<!-- tab ข้อมูลส่วนบุคคล -->
<template>
  <div class="q-px-sm">
    <Information
      :prefixOptions="prefixOptions"
      :religionOptions="religionOptions"
      :provinceOptions="provinceOptions"
      :status="status"
      v-model:form="formInformation"
    />
  </div>

  <!-- <q-separator class="q-my-lg bg-gray" size="5px" />
  <div class="q-px-sm">
    <Family :prefixOptions="prefixOptions" :status="status" v-model:form="formFamily" />
  </div> -->

  <q-separator class="q-my-lg bg-gray" size="5px" />
  <div class="q-px-sm">
    <Education
      :status="status"
      v-model:form="formEducation"
      :educationLevelOptions="educationLevelOptions"
    />
  </div>

  <q-separator class="q-my-lg bg-gray" size="5px" />
  <div class="q-px-sm">
    <Occupation :status="status" v-model:form="formOccupation" />
  </div>

  <q-separator class="q-my-lg bg-gray" size="5px" />
  <div class="q-px-sm">
    <Career :status="status" />
  </div>

  <q-separator class="q-my-lg bg-gray" size="5px" />
  <div class="q-px-sm">
    <Address :provinceOptions="provinceOptions" :status="status" v-model:form="formAddress" />
  </div>

  <q-separator class="q-my-lg bg-gray" size="5px" />
  <div class="q-px-sm">
    <Contact :status="status" :prefixOptions="prefixOptions" v-model:form="formContact" />
  </div>

  <q-separator class="q-my-lg bg-gray" size="5px" />
  <!-- <div class="q-px-sm">
    <Document :status="status" />
  </div> -->
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import http from '@/plugins/http'
import config from '@/app.config'
import { useCounterMixin } from '@/stores/mixin'
import { useDataStore } from '@/stores/data'
import { useQuasar } from 'quasar'
import type { DataOption } from '@/modules/01_exam/interface/index/Main'
import Information from '@/modules/01_exam/components/Form/Information.vue'
import Address from '@/modules/01_exam/components/Form/Address.vue'
import Family from '@/modules/01_exam/components/Form/Family.vue'
import Occupation from '@/modules/01_exam/components/Form/Occupation.vue'
import Education from '@/modules/01_exam/components/Form/Education.vue'
import Career from '@/modules/01_exam/components/Form/Career.vue'
import Contact from '@/modules/01_exam/components/Form/Contact.vue'
import Document from '@/modules/01_exam/components/Form/Document.vue'

const props = defineProps({
  status: {
    type: String,
    required: true
  },
  formInformation: {
    type: Object,
    required: true
  },
  formAddress: {
    type: Object,
    required: true
  },
  formEducation: {
    type: Object,
    required: true
  },
  formOccupation: {
    type: Object,
    required: true
  },
  formContact: {
    type: Object,
    required: true
  }
})
const emit = defineEmits([
  'update:formInformation',
  'update:formAddress',
  'update:formEducation',
  'update:formOccupation',
  'update:formContact'
])

const $q = useQuasar()
const dataStore = useDataStore()
const { loaderPage } = dataStore
const mixin = useCounterMixin()
const { messageError } = mixin
const prefixOptions = ref<DataOption[]>([])
const religionOptions = ref<DataOption[]>([])
const provinceOptions = ref<DataOption[]>([])
const educationLevelOptions = ref<DataOption[]>([])
const formInformation = ref<any>({})
const formAddress = ref<any>({})
const formEducation = ref<any>({})
const formOccupation = ref<any>({})
const formContact = ref<any>({})

watch(formInformation, async (count: Object, prevCount: Object) => {
  emit('update:formInformation', count)
})

watch(formAddress, async (count: Object, prevCount: Object) => {
  emit('update:formAddress', count)
})

watch(formEducation, async (count: Object, prevCount: Object) => {
  emit('update:formEducation', count)
})

watch(formOccupation, async (count: Object, prevCount: Object) => {
  emit('update:formOccupation', count)
})

watch(formContact, async (count: Object, prevCount: Object) => {
  emit('update:formContact', count)
})

onMounted(async () => {
  await fetchPerson()
})

const fetchPerson = async () => {
  loaderPage(true)
  await http
    .get(config.API.person)
    .then((res) => {
      const data = res.data.result
      let optionPrefix: DataOption[] = []
      data.prefixs.map((r: any) => {
        optionPrefix.push({ id: r.id.toString(), name: r.name.toString() })
      })
      prefixOptions.value = optionPrefix

      let optionReligion: DataOption[] = []
      data.religions.map((r: any) => {
        optionReligion.push({ id: r.id.toString(), name: r.name.toString() })
      })
      religionOptions.value = optionReligion

      let optionProvince: DataOption[] = []
      data.provinces.map((r: any) => {
        optionProvince.push({ id: r.id.toString(), name: r.name.toString() })
      })
      provinceOptions.value = optionProvince

      let optionEducationLevel: DataOption[] = []
      data.educationLevels.map((r: any) => {
        optionEducationLevel.push({ id: r.id.toString(), name: r.name.toString() })
      })
      educationLevelOptions.value = optionEducationLevel
    })
    .catch((e) => {
      messageError($q, e)
    })
    .finally(() => {
      loaderPage(false)
    })
}
</script>