hrms-mgt/src/modules/05_placement/components/PersonalDetail/DialogCheckInformation.vue

<script setup lang="ts">
import { watch, reactive, type PropType, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useLinkageStore } from "@/stores/linkage";
import {
  AddressDataDefualt,
  FamilyDataDefualt,
} from "@/modules/05_placement/interface/index/Main";

import type { Information } from "@/modules/05_placement/components/PersonalDetail/profileType";
import type {
  Address as AddressType,
  Family,
  AddressData,
  AddressOps,
  Address,
  optionData,
} from "@/modules/05_placement/interface/index/Main";

import Header from "@/components/DialogHeader.vue";
import FormInformationsPage from "@/modules/05_placement/components/PersonalDetail/CheckInformation/01_FormInformations.vue";
import FormAddressPage from "@/modules/05_placement/components/PersonalDetail/CheckInformation/02_FormAddress.vue";
import FormFamilyPage from "@/modules/05_placement/components/PersonalDetail/CheckInformation/03_FormFamily.vue";

const modal = defineModel<boolean>("modal", { required: true });
const idCard = defineModel<string>("idCard", { required: true });
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;
const store = useLinkageStore();

const props = defineProps({
  Ops: {
    type: Object as PropType<any>,
  },
  OpsFilter: {
    type: Object as PropType<any>,
  },
  AddressData: {
    type: Object as PropType<AddressType>,
    default: AddressDataDefualt,
  },
  familyData: {
    type: Object as PropType<Family>,
    default: FamilyDataDefualt,
  },
});

const addressData = ref<AddressType>(props.AddressData);
const familyData = ref<Family>(props.familyData); //ข้อมูลครอบครัว
/** ตัวแปร ข้อมูลส่วนตัว */
const formInformations = reactive<Information>({
  idCard: "", // เลข ปชช.
  prefix: "", // คำนำหน้า
  prefixId: "", // id คำนำหน้า
  fullName: "", // ชื่อเต็ม
  firstname: "", //ชื่อ
  lastname: "", //นามสกุล
  nationality: "", //สัญชาติ
  race: "", //เชื้อชาติ
  dateOfBirth: null, //วันเกิด
  age: "", //อายุ
  telephone: "", //เบอร์มือถือ
  gender: "", //เพศ
  genderId: "", //id เพศ
  relationship: "", //สถานภาพ
  relationshipId: "", //id สถานภาพ
  bloodGroup: "", //กร๊ปเลือด
  bloodGroupId: "", //id กรุ๊ปเลือด
  religion: "", //ศาสนา
  religionId: "", //id ศาสนา
});

//ที่อยู่ปัจบัน
const currentAddress = reactive<AddressData>({
  subDistrictId: "",
  zipCode: "",
  districtId: "",
  provinceId: "",
});

const registAddress = reactive<AddressData>({
  subDistrictId: "",
  zipCode: "",
  districtId: "",
  provinceId: "",
});

/** ตัวแปร ข้อมูลครอบครัว */
const formFamily = reactive<Family>({
  couple: "",
  marryPrefix: "",
  marryPrefixId: "",
  marryFirstName: "",
  marryLastName: "",
  marryOccupation: "",
  fatherPrefix: "",
  fatherPrefixId: "",
  fatherFirstName: "",
  fatherLastName: "",
  fatherOccupation: "",
  motherPrefix: "",
  motherPrefixId: "",
  motherFirstName: "",
  motherLastName: "",
  motherOccupation: "",
});

//ตัวเลือกข้อมูลที่อยู่
const OpsAddress = ref<AddressOps>({
  provinceOps: [],
  districtOps: [],
  districtCOps: [],
  subdistrictOps: [],
  subdistrictCOps: [],
});
//ข้อมูลที่อยู่
const OpsFilterAddress = ref<AddressOps>({
  provinceOps: [],
  districtOps: [],
  districtCOps: [],
  subdistrictOps: [],
  subdistrictCOps: [],
});

function closeDialog() {
  modal.value = false;

  formInformations.idCard = "";
  formInformations.prefix = "";
  formInformations.prefixId = "";
  formInformations.fullName = "";
  formInformations.firstname = "";
  formInformations.lastname = "";
  formInformations.nationality = "";
  formInformations.race = "";
  formInformations.dateOfBirth = null;
  formInformations.age = "";
  formInformations.telephone = "";
  formInformations.gender = "";
  formInformations.genderId = "";
  formInformations.relationship = "";
  formInformations.relationshipId = "";
  formInformations.bloodGroup = "";
  formInformations.bloodGroupId = "";
  formInformations.religion = "";
  formInformations.religionId = "";
}

function onSubmit() {
  const body = {
    citizenId: formInformations.idCard,
    prefix: formInformations.prefixId,
    firstName: formInformations.firstname,
    lastName: formInformations.lastname,
    gender: formInformations.genderId,
    nationality: formInformations.nationality,
    race: formInformations.race,
    religion: formInformations.religionId,
    birthDate: formInformations.dateOfBirth,
    bloodGroup: formInformations.bloodGroupId,
    relationship: formInformations.relationshipId,
    telephoneNumber: formInformations.telephone,

    registrationSame: addressData.value.registSame == "1",
    registrationAddress: addressData.value.registAddress,
    registrationSubDistrictId: registAddress.subDistrictId,
    registrationDistrictId: registAddress.districtId,
    registrationProvinceId: registAddress.provinceId,
    registrationZipCode: registAddress.zipCode,
    currentAddress:
      addressData.value.registSame == "1"
        ? addressData.value.registAddress
        : addressData.value.currentAddress,
    currentSubDistrictId:
      addressData.value.registSame == "1"
        ? registAddress.subDistrictId
        : currentAddress.subDistrictId,
    currentDistrictId:
      addressData.value.registSame == "1"
        ? registAddress.districtId
        : currentAddress.districtId,
    currentProvinceId:
      addressData.value.registSame == "1"
        ? registAddress.provinceId
        : currentAddress.provinceId,
    currentZipCode:
      addressData.value.registSame == "1"
        ? registAddress.zipCode
        : currentAddress.zipCode,

    couple: familyData.value.couple == "1",
    couplePrefix: familyData.value.marryPrefixId,
    coupleFirstName: familyData.value.marryFirstName,
    coupleLastName: familyData.value.marryLastName,
    coupleLastNameOld: "",
    coupleCareer: familyData.value.marryOccupation,
    fatherPrefix: familyData.value.fatherPrefixId,
    fatherFirstName: familyData.value.fatherFirstName,
    fatherLastName: familyData.value.fatherLastName,
    fatherCareer: familyData.value.fatherOccupation,
    motherPrefix: familyData.value.motherPrefixId,
    motherFirstName: familyData.value.motherFirstName,
    motherLastName: familyData.value.motherLastName,
    motherCareer: familyData.value.motherOccupation,
  };

  console.log(body);
}

const data = ref<any>(null);
/** ดึงข้อมูลรายละเอียด */
async function amiRequest() {
  // data.value = await store.amiRequest($q, 5000, idCard.value, "001");
  data.value = {
    titleCode: 3,
    titleDesc: "นาย",
    titleName: "นาย",
    titleSex: 1,
    firstName: "สุพลชัย",
    middleName: "",
    lastName: "พูลสวัสดิ์",
    genderCode: 1,
    genderDesc: "ชาย",
    dateOfBirth: 25211228,
    nationalityCode: 99,
    nationalityDesc: "ไทย",
    ownerStatusDesc: "เจ้าบ้าน",
    statusOfPersonCode: 0,
    statusOfPersonDesc: "บุคคลนี้มีภูมิลำเนาอยู่ในบ้านนี้",
    dateOfMoveIn: 25580728,
    age: 45,
    fatherPersonalID: 3102100621479,
    fatherName: "บุญเชิด",
    fatherNationalityCode: 99,
    fatherNationalityDesc: "ไทย",
    motherPersonalID: 3102100621487,
    motherName: "พยอม",
    motherNationalityCode: 99,
    motherNationalityDesc: "ไทย",
    fullnameAndRank: "นายสุพลชัย พูลสวัสดิ์",
    englishTitleDesc: "MR.",
    englishFirstName: "SUPHONCHAI",
    englishMiddleName: "",
    englishLastName: "PHOONSAWAT",
  };
}

/** เช็คค่า modal เมื่อเป็น true ใช้งาน ฟังชั่น */
watch(
  () => modal.value,
  async () => {
    await amiRequest();
  }
);
</script>
<template>
  <q-dialog v-model="modal" persistent>
    <q-card class="col-12" style="width: 80vw">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <Header tittle="ตรวจสอบข้อมูลกับกรมการปกครอง" :close="closeDialog" />

        <q-separator />

        <q-card-section class="scroll" style="max-height: 80vh">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
              <FormInformationsPage
                v-model:form-informations="formInformations"
                :Ops="props.Ops"
                :OpsFilter="props.OpsFilter"
              />
            </div>
            <div class="col-12">
              <q-separator />
            </div>
            <div class="col-12">
              <FormAddressPage
                v-model:regist-address="registAddress"
                v-model:ops-address="OpsAddress"
                v-model:ops-filter-address="OpsFilterAddress"
                v-model:current-address="currentAddress"
                v-model:address-data="addressData"
              />
            </div>
            <div class="col-12">
              <q-separator />
            </div>
            <div class="col-12">
              <FormFamilyPage
                :Ops="props.Ops"
                :Ops-filter="props.OpsFilter"
                v-model:family-data="familyData"
              />
            </div>
          </div>
        </q-card-section>
        <q-separator />

        <q-card-actions align="right">
          <q-btn label="อัพเดต" color="secondary" type="submit"
            ><q-tooltip>อัพเดต</q-tooltip></q-btn
          >
          <q-btn label="ยกเลิก" color="orange" @click="modal = false"
            ><q-tooltip>ยกเลิก</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>