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

<!-- tab ข้อมูลส่วนบุคคล -->
<template>
  <Information
    :prefixOptions="prefixOptions"
    :relationshipOptions="relationshipOptions"
    :provinceOptions="provinceOptions"
    v-model:statusEdit="statusEdit"
    :notiNoEdit="notiNoEdit"
    :status="status"
  />
  <Address
    :provinceOptions="provinceOptions"
    v-model:statusEdit="statusEdit"
    :notiNoEdit="notiNoEdit"
    :status="status"
  />
  <Family
    :prefixOptions="prefixOptions"
    v-model:statusEdit="statusEdit"
    :notiNoEdit="notiNoEdit"
    :status="status"
  />
  <Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :status="status" />
  <Education
    :loader="loader"
    v-model:statusEdit="statusEdit"
    :notiNoEdit="notiNoEdit"
    :status="status"
  />
  <Career
    :loader="loader"
    v-model:statusEdit="statusEdit"
    :notiNoEdit="notiNoEdit"
    :status="status"
  />
  <Document
    :loader="loader"
    v-model:statusEdit="statusEdit"
    :notiNoEdit="notiNoEdit"
    :status="status"
  />
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useQuasar } from 'quasar'
import { useCounterMixin } from '@/stores/mixin'
import http from '@/plugins/http'
import config from '@/app.config'
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 Document from '@/modules/01_exam/components/Form/Document.vue'

const props = defineProps({
  loader: {
    //หน้า main มีการอัพเดทค่าให้ refresh data
    type: Boolean,
    required: true
  },
  statusEdit: {
    type: Boolean,
    required: true
  },
  status: {
    type: String,
    required: true
  }
})

const $q = useQuasar()
const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
const { modalError } = mixin
const loader = ref<boolean>(true)
const statusEdit = ref<boolean>(false)
const prefixOptions = ref<DataOption[]>([])
const relationshipOptions = ref<DataOption[]>([])
const provinceOptions = ref<DataOption[]>([])

const emit = defineEmits(['update:loader', 'update:statusEdit'])

watch(statusEdit, (count: boolean, prevCount: boolean) => {
  emit('update:statusEdit', count)
})

onMounted(() => {
  fetchPrefix()
  fetchRelationship()
  fetchProvince()
})

const fetchPrefix = async () => {
  loader.value = true
  await http
    .get(config.API.prefix)
    .then((res) => {
      const data = res.data.result
      let option: DataOption[] = []
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.name.toString() })
      })
      prefixOptions.value = option
    })
    .catch((e) => {})
    .finally(() => {
      loader.value = false
    })
}

const fetchRelationship = async () => {
  loader.value = true
  await http
    .get(config.API.relationship)
    .then((res) => {
      const data = res.data.result
      let option: DataOption[] = []
      //   console.log(data);
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.name.toString() })
      })
      relationshipOptions.value = option
    })
    .catch((e) => {})
    .finally(() => {
      loader.value = false
    })
}

const fetchProvince = async () => {
  loader.value = true
  await http
    .get(config.API.province)
    .then((res) => {
      const data = res.data.result
      let option: DataOption[] = []
      //   console.log(data);
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.name.toString() })
      })
      provinceOptions.value = option
    })
    .catch((e) => {})
    .finally(() => {
      loader.value = false
    })
}

const notiNoEdit = () => {
  modalError($q, 'ไม่สามารถไม่สามารถแก้ไขข้อมูลได้', 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
}
</script>