hrms-mgt/src/modules/03_recruiting/components/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">
    <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">
    <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">
    <Contact
      :status="status"
      v-model:form="formContact"
      :prefixOptions="prefixOptions"
    />
  </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 type { DataOption } from "@/modules/03_recruiting/interface/index/Main";
import Information from "@/modules/03_recruiting/components/Information.vue";
import Address from "@/modules/03_recruiting/components/Address.vue";
import Family from "@/modules/03_recruiting/components/Family.vue";
import Occupation from "@/modules/03_recruiting/components/Occupation.vue";
import Contact from "@/modules/03_recruiting/components/Contact.vue";
import Education from "@/modules/03_recruiting/components/Education.vue";
import Career from "@/modules/03_recruiting/components/Career.vue";
import Document from "@/modules/03_recruiting/components/Document.vue";

import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";

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 $q = useQuasar();

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>({});
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;

const emit = defineEmits([
  "update:formInformation",
  "update:formAddress",
  "update:formEducation",
  "update:formOccupation",
  "update:formContact",
]);

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(() => {
  hideLoader();
  fetchPrefix();
  fetchReligion();
  fetchProvince();
  fetchEducationLevel();
});

const fetchPrefix = async () => {
  showLoader();
  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) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const fetchReligion = async () => {
  showLoader();
  await http
    .get(config.API.religion)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      religionOptions.value = option;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const fetchProvince = async () => {
  showLoader();
  await http
    .get(config.API.province)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      provinceOptions.value = option;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const fetchEducationLevel = async () => {
  showLoader();
  await http
    .get(config.API.educationLevel)
    .then((res) => {
      const data = res.data.result;
      let option: DataOption[] = [];
      data.map((r: any) => {
        option.push({ id: r.id.toString(), name: r.name.toString() });
      });
      educationLevelOptions.value = option;
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
</script>