From 282815cf33634f366a5ffa68cfe77717364984c9 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Wed, 2 Oct 2024 12:57:08 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=95=E0=B8=A3=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=88=E0=B8=AA=E0=B8=AD=E0=B8=9A=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=81=E0=B8=B1=E0=B8=9A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A1=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=81?=
 =?UTF-8?q?=E0=B8=84=E0=B8=A3=E0=B8=AD=E0=B8=87=20=E0=B9=83=E0=B8=99?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94?=
 =?UTF-8?q?=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=AA=E0=B8=AD=E0=B8=9A=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A3=E0=B8=88=E0=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialogs/DialogOrgSelectOneStep.vue        |   2 +-
 .../CheckInformation/01_FormInformations.vue  | 381 ++++++++++++
 .../CheckInformation/02_FormAddress.vue       | 559 ++++++++++++++++++
 .../CheckInformation/03_FormFamily.vue        | 249 ++++++++
 .../components/PersonalDetail/DetailMain.vue  |  23 +
 .../PersonalDetail/DialogCheckInformation.vue | 291 +++++++++
 .../05_placement/interface/index/Main.ts      |   6 +-
 src/stores/structureTree.ts                   |   1 +
 8 files changed, 1508 insertions(+), 4 deletions(-)
 create mode 100644 src/modules/05_placement/components/PersonalDetail/CheckInformation/01_FormInformations.vue
 create mode 100644 src/modules/05_placement/components/PersonalDetail/CheckInformation/02_FormAddress.vue
 create mode 100644 src/modules/05_placement/components/PersonalDetail/CheckInformation/03_FormFamily.vue
 create mode 100644 src/modules/05_placement/components/PersonalDetail/DialogCheckInformation.vue

diff --git a/src/components/Dialogs/DialogOrgSelectOneStep.vue b/src/components/Dialogs/DialogOrgSelectOneStep.vue
index 0bba09b2c..cd8b8f1ec 100644
--- a/src/components/Dialogs/DialogOrgSelectOneStep.vue
+++ b/src/components/Dialogs/DialogOrgSelectOneStep.vue
@@ -169,7 +169,7 @@ const isLoad = ref<boolean>(false);
 
 /** ดึงข้อมูล active */
 async function getTreeData() {
-  nodes.value = await fetchStructureTree(route.meta.Key as string);
+  nodes.value = await fetchStructureTree(route.meta.Key as string,true);
   isLoad.value = true;
 }
 
diff --git a/src/modules/05_placement/components/PersonalDetail/CheckInformation/01_FormInformations.vue b/src/modules/05_placement/components/PersonalDetail/CheckInformation/01_FormInformations.vue
new file mode 100644
index 000000000..497c9ec58
--- /dev/null
+++ b/src/modules/05_placement/components/PersonalDetail/CheckInformation/01_FormInformations.vue
@@ -0,0 +1,381 @@
+<script setup lang="ts">
+import { ref, watch, reactive, type PropType } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useProfileDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type {
+  DataOption,
+  Information,
+} from "@/modules/05_placement/components/PersonalDetail/profileType";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const profileStore = useProfileDataStore();
+const { changeRetireText, changeBirth } = profileStore;
+const { showLoader, hideLoader, messageError, dateToISO, date2Thai } = mixin;
+
+const informaData = defineModel<Information>("formInformations", {
+  required: true,
+});
+const props = defineProps({
+  Ops: {
+    type: Object as PropType<any>,
+  },
+  OpsFilter: {
+    type: Object as PropType<any>,
+  },
+});
+
+const age = ref<boolean>(true); //อายุ
+
+/**
+ * ฟังก์เลือกวันเดือนปีเกิด
+ * @param modelData วันเดือนปีเกิด
+ */
+async function handleDate(modelData: Date) {
+  informaData.value.dateOfBirth = modelData;
+  await calRetire(modelData);
+}
+
+/**
+ * ฟังก์ชันคำนวนวันเกษียณอายุราชการ
+ * @param birth  วันเดือนปีเกิด
+ */
+async function calRetire(birth: Date) {
+  const body = {
+    birthDate: dateToISO(birth),
+  };
+  showLoader();
+  await http
+    .post(config.API.profileCalRetire, body)
+    .then((res: any) => {
+      const data = res.data.result;
+      informaData.value.age = data.age;
+      changeRetireText(data.retireDate);
+      age.value = true;
+    })
+    .catch((e: any) => {
+      age.value = false;
+      messageError($q, e);
+      const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
+      changeRetireText(date2Thai(retire));
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
+ * @param val คำค้นหา
+ * @param update ฟังก์ชัน
+ * @param refData ประเภทของตัวเลือก
+ */
+function filterSelector(val: string, update: Function, refData: string) {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        props.Ops.prefixOps = props.OpsFilter.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        props.Ops.genderOps = props.OpsFilter.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        props.Ops.bloodOps = props.OpsFilter.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        props.Ops.statusOps = props.OpsFilter.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        props.Ops.religionOps = props.OpsFilter.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClassOps":
+      update(() => {
+        props.Ops.employeeClassOps = props.OpsFilter.employeeClassOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeTypeOps":
+      update(() => {
+        props.Ops.employeeTypeOps = props.OpsFilter.employeeTypeOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+}
+</script>
+<template>
+  <div class="row q-col-gutter-sm">
+    <div class="col-12 text-tooltip text-weight-medium">ข้อมูลส่วนตัว</div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        dense
+        lazy-rules
+        outlined
+        v-model="informaData.idCard"
+        maxlength="13"
+        :rules="[
+              (val:string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+              (val:string) =>
+                val.length >= 13 ||
+                `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
+            ]"
+        label="เลขประจำตัวประชาชน"
+        mask="#############"
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-select
+        hide-bottom-space
+        class="inputgreen"
+        :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+        outlined
+        dense
+        lazy-rules
+        v-model="informaData.prefixId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="Ops.prefixOps"
+        option-value="id"
+        :label="`${'คำนำหน้า'}`"
+        use-input
+        input-debounce="0"
+        @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        outlined
+        dense
+        lazy-rules
+        v-model="informaData.firstname"
+        :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+        :label="`${'ชื่อ'}`"
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        outlined
+        dense
+        lazy-rules
+        v-model="informaData.lastname"
+        :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+        :label="`${'นามสกุล'}`"
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <datepicker
+        v-model="informaData.dateOfBirth"
+        :locale="'th'"
+        autoApply
+        :enableTimePicker="false"
+        week-start="0"
+        :max-date="new Date()"
+        @update:model-value="handleDate"
+      >
+        <template #year="{ year }">
+          {{ year + 543 }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ parseInt(value + 543) }}
+        </template>
+        <template #trigger>
+          <q-input
+            class="inputgreen"
+            hide-bottom-space
+            outlined
+            dense
+            :model-value="
+              informaData.dateOfBirth ? date2Thai(informaData.dateOfBirth) : ''
+            "
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+            :label="`${'วัน/เดือน/ปี เกิด'}`"
+          >
+            <template v-slot:prepend>
+              <q-icon
+                name="event"
+                class="cursor-pointer"
+                style="color: var(--q-primary)"
+              >
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        dense
+        lazy-rules
+        readonly
+        borderless
+        style="padding: 0 12px"
+        :model-value="informaData.age"
+        :label="`${'อายุ'}`"
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-select
+        hide-bottom-space
+        class="inputgreen"
+        :rules="[(val:string) => !!val || `${'กรุณาเลือก เพศ'}`]"
+        outlined
+        dense
+        lazy-rules
+        v-model="informaData.genderId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="Ops.genderOps"
+        option-value="id"
+        :label="`${'เพศ'}`"
+        use-input
+        input-debounce="0"
+        @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
+                      ) "
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-select
+        hide-bottom-space
+        class="inputgreen"
+        :rules="[(val:string) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
+        outlined
+        dense
+        lazy-rules
+        v-model="informaData.relationshipId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="Ops.statusOps"
+        option-value="id"
+        :label="`${'สถานภาพ'}`"
+        use-input
+        input-debounce="0"
+        @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
+                      ) "
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-select
+        hide-bottom-space
+        class="inputgreen"
+        outlined
+        dense
+        lazy-rules
+        v-model="informaData.bloodGroupId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="Ops.bloodOps"
+        option-value="id"
+        :label="`${'หมู่เลือด'}`"
+        use-input
+        input-debounce="0"
+        @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
+                      ) "
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        outlined
+        dense
+        lazy-rules
+        v-model="informaData.nationality"
+        :rules="[(val:string) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
+        :label="`${'สัญชาติ'}`"
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        outlined
+        dense
+        lazy-rules
+        v-model="informaData.race"
+        :rules="[(val:string) => !!val || `${'กรุณากรอก เชื้อชาติ'}`]"
+        :label="`${'เชื้อชาติ'}`"
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-select
+        hide-bottom-space
+        class="inputgreen"
+        :rules="[(val:string) => !!val || `${'กรุณาเลือก ศาสนา'}`]"
+        outlined
+        dense
+        lazy-rules
+        v-model="informaData.religionId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="Ops.religionOps"
+        option-value="id"
+        :label="`${'ศาสนา'}`"
+        use-input
+        input-debounce="0"
+        @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
+                      ) "
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-input
+        hide-bottom-space
+        outlined
+        dense
+        lazy-rules
+        type="tel"
+        class="inputgreen"
+        v-model="informaData.telephone"
+        :label="`${'เบอร์โทร'}`"
+        mask="##########"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/modules/05_placement/components/PersonalDetail/CheckInformation/02_FormAddress.vue b/src/modules/05_placement/components/PersonalDetail/CheckInformation/02_FormAddress.vue
new file mode 100644
index 000000000..77e5e8248
--- /dev/null
+++ b/src/modules/05_placement/components/PersonalDetail/CheckInformation/02_FormAddress.vue
@@ -0,0 +1,559 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type {
+  Address as AddressType,
+  AddressData,
+  AddressOps,
+  Address,
+  optionData,
+} from "@/modules/05_placement/interface/index/Main";
+import type { zipCodeOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+
+const props = defineProps({
+  selectProvince: Function,
+});
+const registAddress = defineModel<AddressData>("registAddress", {
+  required: true,
+});
+const Ops = defineModel<AddressOps>("opsAddress", { required: true });
+const OpsFilter = defineModel<AddressOps>("opsFilterAddress", {
+  required: true,
+});
+const addressData = defineModel<Address>("addressData", { required: true });
+const currentAddress = defineModel<AddressData>("currentAddress", {
+  required: true,
+});
+
+/**
+ * ฟังก์ชันดึงข้อมูลอำเภอ
+ * @param id จังหวัด
+ * @param position  ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
+ */
+async function fetchDistrict(id: string | null, position: string) {
+  if (id != null && id != "") {
+    await http
+      .get(config.API.orgProvince + `/${id}`)
+      .then(async (res) => {
+        const data = res.data.result.districts;
+        let option: optionData[] = [];
+        data.map((r: any) => {
+          option.push({ id: r.id, name: r.name });
+        });
+        if (position == "1") {
+          Ops.value.districtOps = option;
+          OpsFilter.value.districtOps = option;
+
+          // ที่อยู่ เช็คอำเภอว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
+          const checkRegistDistrictId = option.find(
+            (e: any) => e.id === addressData.value.registDistrictId
+          );
+
+          if (checkRegistDistrictId) {
+            registAddress.value.districtId = addressData.value.registDistrictId;
+          }
+        } else {
+          Ops.value.districtCOps = option;
+          OpsFilter.value.districtCOps = option;
+
+          // ที่อยู่ปัจจุบัน เช็คอำเภอว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
+          const checkCurrentDistrictId = await option.find(
+            (e: any) => e.id === addressData.value.currentDistrictId
+          );
+          if (checkCurrentDistrictId) {
+            currentAddress.value.districtId =
+              addressData.value.currentDistrictId;
+          }
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {});
+  }
+}
+
+/**
+ * ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
+ * @param val คำค้นหา
+ * @param update ฟังก์ชัน
+ * @param refData ประเภทของตัวเลือก
+ */
+function filterSelector(val: string, update: Function, refData: string) {
+  switch (refData) {
+    case "provinceOps":
+      update(() => {
+        Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
+          (v: optionData) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "districtOps":
+      update(() => {
+        Ops.value.districtOps = OpsFilter.value.districtOps.filter(
+          (v: optionData) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "districtCOps":
+      update(() => {
+        Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
+          (v: optionData) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "subdistrictOps":
+      update(() => {
+        Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
+          (v: optionData) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "subdistrictCOps":
+      update(() => {
+        Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
+          (v: optionData) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+}
+
+/**
+ * ฟังก์ชันดึงข้อมูลจังหวัด
+ */
+async function fetchProvince() {
+  showLoader();
+  await http
+    .get(config.API.orgProvince)
+    .then(async (res) => {
+      const data = res.data.result;
+      let option: optionData[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id, name: r.name });
+      });
+      Ops.value.provinceOps = option;
+      OpsFilter.value.provinceOps = option;
+
+      const checkRegistProvinceId = await option.find(
+        (e: any) => e.id === addressData.value.registProvinceId
+      );
+
+      // ที่อยู่ถ้า id จังหวัดว่างไม่ดึงค่าอำเภอ ตำบล และรหัสไปรษณีย์
+      if (
+        addressData.value.registProvinceId == "" ||
+        addressData.value.registProvinceId ==
+          "00000000-0000-0000-0000-000000000000" ||
+        !checkRegistProvinceId
+      ) {
+        registAddress.value.subDistrictId = "";
+        registAddress.value.zipCode = "";
+        registAddress.value.districtId = "";
+      } else {
+        registAddress.value.provinceId = await addressData.value
+          .registProvinceId;
+        registAddress.value.zipCode = await addressData.value.registZipCode;
+
+        await fetchDistrict(addressData.value.registProvinceId, "1");
+        if (
+          addressData.value.registDistrictId != null &&
+          addressData.value.registDistrictId !=
+            "00000000-0000-0000-0000-000000000000"
+        ) {
+          await fetchSubDistrict(addressData.value.registDistrictId, "1");
+        }
+      }
+
+      const checkCurrentProvinceId = await option.find(
+        (e: any) => e.id === addressData.value.currentProvinceId
+      );
+
+      // ที่อยู่ปัจจุบันถ้า id จังหวัดว่างไม่ดึงค่าอำเภอ ตำบล และรหัสไปรษณีย์
+      if (
+        addressData.value.currentProvinceId == "" ||
+        addressData.value.currentProvinceId ==
+          "00000000-0000-0000-0000-000000000000" ||
+        !checkCurrentProvinceId
+      ) {
+        currentAddress.value.subDistrictId = "";
+        currentAddress.value.zipCode = "";
+        currentAddress.value.districtId = "";
+      } else {
+        currentAddress.value.provinceId = addressData.value.currentProvinceId;
+        currentAddress.value.zipCode = addressData.value.currentZipCode;
+
+        await fetchDistrict(addressData.value.currentProvinceId, "2");
+        if (
+          addressData.value.currentDistrictId != null &&
+          addressData.value.currentDistrictId !=
+            "00000000-0000-0000-0000-000000000000"
+        ) {
+          await fetchSubDistrict(addressData.value.currentDistrictId, "2");
+        }
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+/**
+ * ฟังก์ชันดึงข้อมูลตำบล
+ * @param id อำเภอ
+ * @param position  ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
+ */
+async function fetchSubDistrict(id: string | null, position: string) {
+  if (id != null && id != "") {
+    await http
+      .get(config.API.orgDistrict + `/${id}`)
+      .then(async (res) => {
+        const data = res.data.result.subDistricts;
+        let option: zipCodeOption[] = [];
+        data.map((r: any) => {
+          option.push({
+            id: r.id,
+            name: r.name,
+            zipCode: r.zipCode,
+          });
+        });
+        if (position == "1") {
+          Ops.value.subdistrictOps = option;
+          OpsFilter.value.subdistrictOps = option;
+
+          // ที่อยู่ เช็คตำบลว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
+          const checkRegistSubDistrictId = await option.find(
+            (e: any) => e.id === addressData.value.registSubDistrictId
+          );
+          if (checkRegistSubDistrictId) {
+            registAddress.value.subDistrictId =
+              addressData.value.registSubDistrictId;
+          }
+        } else {
+          Ops.value.subdistrictCOps = option;
+          OpsFilter.value.subdistrictCOps = option;
+
+          // ที่อยู่ปัจจุบัน เช็คตำบลว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
+          const checkCurrentSubDistrictId = await option.find(
+            (e: any) => e.id === addressData.value.currentSubDistrictId
+          );
+          if (checkCurrentSubDistrictId) {
+            currentAddress.value.subDistrictId =
+              addressData.value.currentSubDistrictId;
+          }
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+/**
+ * ฟังก์ชันเลือกข้อมูลจังหวัด
+ * @param e id จังหวัด
+ * @param name ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
+ */
+async function selectProvince(e: string | null, name: string) {
+  if (e != null) {
+    if (name == "1") {
+      registAddress.value.subDistrictId = "";
+      registAddress.value.zipCode = "";
+      registAddress.value.districtId = "";
+    } else {
+      currentAddress.value.subDistrictId = "";
+      currentAddress.value.zipCode = "";
+      currentAddress.value.districtId = "";
+    }
+    await fetchDistrict(e, name);
+  }
+}
+
+/**
+ * ฟังก์ชันเลือกข้อมูลตำบล
+ * @param e id ตำบล
+ * @param name ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
+ */
+async function selectSubDistrict(e: string | null, name: string) {
+  if (e != null) {
+    if (name == "1") {
+      const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
+      const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
+      registAddress.value.zipCode = namecode;
+    } else {
+      const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
+      const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
+      currentAddress.value.zipCode = namecode;
+    }
+  }
+}
+
+/**
+ * ฟังก์ชันลือกข้อมูลอำเภอ
+ * @param e id อำเภอ
+ * @param name ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
+ */
+async function selectDistrict(e: string | null, name: string) {
+  if (e != null) {
+    if (name == "1") {
+      registAddress.value.subDistrictId = "";
+      registAddress.value.zipCode = "";
+    } else {
+      currentAddress.value.subDistrictId = "";
+      currentAddress.value.zipCode = "";
+    }
+    await fetchSubDistrict(e, name);
+  }
+}
+
+onMounted(() => {
+  fetchProvince();
+});
+</script>
+<template>
+  <div class="row q-col-gutter-sm">
+    <div class="col-12 text-tooltip text-weight-medium">ข้อมูลที่อยู่</div>
+    <div class="col-xs-12">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        outlined
+        dense
+        lazy-rules
+        type="textarea"
+        autogrow
+        v-model="addressData.registAddress"
+        :rules="[(val: string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
+        :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-select
+        hide-bottom-space
+        class="inputgreen"
+        :rules="[(val: string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+        outlined
+        dense
+        lazy-rules
+        v-model="registAddress.provinceId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="Ops.provinceOps"
+        option-value="id"
+        :label="`${'จังหวัด'}`"
+        @update:model-value="(value: string) => selectProvince(value, '1')"
+        use-input
+        input-debounce="0"
+        @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'provinceOps'
+              )"
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-select
+        hide-bottom-space
+        class="inputgreen"
+        :rules="[(val: string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+        outlined
+        dense
+        lazy-rules
+        v-model="registAddress.districtId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="Ops.districtOps"
+        option-value="id"
+        :label="`${'เขต / อำเภอ'}`"
+        @update:model-value="(value: string) => selectDistrict(value, '1')"
+        use-input
+        input-debounce="0"
+        @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'districtOps'
+              )"
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-select
+        hide-bottom-space
+        class="inputgreen"
+        :rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
+        outlined
+        dense
+        lazy-rules
+        v-model="registAddress.subDistrictId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="Ops.subdistrictOps"
+        option-value="id"
+        :label="`${'แขวง / ตำบล '}`"
+        @update:model-value="(value: string) => selectSubDistrict(value, '1')"
+        use-input
+        input-debounce="0"
+        @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'subdistrictOps'
+              )"
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        dense
+        lazy-rules
+        readonly
+        borderless
+        v-model="registAddress.zipCode"
+        style="padding: 0 12px"
+        :label="`${'รหัสไปรษณีย์'}`"
+      />
+    </div>
+    <div class="col-12 q-pt-lg"><q-separator /></div>
+    <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
+      <label class="text-bold"
+        >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
+      >
+      <q-radio
+        v-model="addressData.registSame"
+        checked-icon="task_alt"
+        unchecked-icon="panorama_fish_eye"
+        val="1"
+        label="ใช่"
+        dense
+      />
+      <q-radio
+        v-model="addressData.registSame"
+        checked-icon="task_alt"
+        unchecked-icon="panorama_fish_eye"
+        val="0"
+        label="ไม่"
+        dense
+      />
+    </div>
+
+    <div class="col-xs-12" v-if="addressData.registSame == '0'">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        outlined
+        dense
+        lazy-rules
+        type="textarea"
+        autogrow
+        v-model="addressData.currentAddress"
+        :rules="[(val: string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
+        :label="`${'ที่อยู่ปัจจุบัน'}`"
+      />
+    </div>
+    <div
+      class="col-xs-6 col-sm-3 col-md-3"
+      v-if="addressData.registSame == '0'"
+    >
+      <q-select
+        hide-bottom-space
+        class="inputgreen"
+        :rules="[(val: string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+        outlined
+        dense
+        lazy-rules
+        v-model="currentAddress.provinceId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="Ops.provinceOps"
+        option-value="id"
+        :label="`${'จังหวัด'}`"
+        @update:model-value="(value: string) => selectProvince(value, '2')"
+        use-input
+        input-debounce="0"
+        @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'provinceOps'
+              )"
+      />
+    </div>
+    <div
+      class="col-xs-6 col-sm-3 col-md-3"
+      v-if="addressData.registSame == '0'"
+    >
+      <q-select
+        hide-bottom-space
+        class="inputgreen"
+        :rules="[(val: string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+        outlined
+        dense
+        lazy-rules
+        v-model="currentAddress.districtId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="Ops.districtCOps"
+        option-value="id"
+        :label="`${'เขต / อำเภอ'}`"
+        @update:model-value="(value: string) => selectDistrict(value, '2')"
+        use-input
+        input-debounce="0"
+        @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'districtCOps'
+              )"
+      />
+    </div>
+    <div
+      class="col-xs-6 col-sm-3 col-md-3"
+      v-if="addressData.registSame == '0'"
+    >
+      <q-select
+        hide-bottom-space
+        class="inputgreen"
+        :rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
+        outlined
+        dense
+        lazy-rules
+        v-model="currentAddress.subDistrictId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="Ops.subdistrictCOps"
+        option-value="id"
+        :label="`${'แขวง / ตำบล '}`"
+        @update:model-value="(value: string) => selectSubDistrict(value, '2')"
+        use-input
+        input-debounce="0"
+        @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'subdistrictCOps'
+              )"
+      />
+    </div>
+    <div
+      class="col-xs-6 col-sm-3 col-md-3"
+      v-if="addressData.registSame == '0'"
+    >
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        dense
+        lazy-rules
+        readonly
+        borderless
+        v-model="currentAddress.zipCode"
+        style="padding: 0 12px"
+        :label="`${'รหัสไปรษณีย์'}`"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/modules/05_placement/components/PersonalDetail/CheckInformation/03_FormFamily.vue b/src/modules/05_placement/components/PersonalDetail/CheckInformation/03_FormFamily.vue
new file mode 100644
index 000000000..802e06fd5
--- /dev/null
+++ b/src/modules/05_placement/components/PersonalDetail/CheckInformation/03_FormFamily.vue
@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { watch, reactive, type PropType, ref } from "vue";
+
+import type { DataOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
+import type { Family } from "@/modules/05_placement/interface/index/Main";
+
+const familyData = defineModel<Family>("familyData", { required: true });
+const props = defineProps({
+  Ops: {
+    type: Object as PropType<any>,
+  },
+  OpsFilter: {
+    type: Object as PropType<any>,
+  },
+});
+
+/**
+ * ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
+ * @param val คำค้นหา
+ * @param update ฟังก์ชัน
+ * @param refData ประเภทของตัวเลือก
+ */
+function filterSelector(val: string, update: Function, refData: string) {
+  update(() => {
+    props.Ops[`${refData}`] = props.OpsFilter[`${refData}`].filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+/**
+ * ฟังก์ชันเลือกคู่สมรส
+ * @param e มี, ไม่มีคู่สมรส
+ */
+function selectRadio(e: boolean) {
+  if (e) {
+    familyData.value.marryPrefixId = "";
+    familyData.value.marryFirstName = "";
+    familyData.value.marryLastName = "";
+    familyData.value.marryOccupation = "";
+  }
+}
+</script>
+<template>
+  <div class="row q-col-gutter-sm">
+    <div class="col-12 text-tooltip text-weight-medium">ข้อมูลครอบครัว</div>
+    <div class="col-xs-12 text-weight-bold">• บิดา</div>
+    <div class="col-xs-12 col-sm-3 col-md-3">
+      <selector
+        hide-bottom-space
+        class="inputgreen"
+        :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+        outlined
+        dense
+        lazy-rules
+        v-model="familyData.fatherPrefixId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="Ops.prefixOps"
+        option-value="id"
+        :label="`${'คำนำหน้า'}`"
+        use-input
+        input-debounce="0"
+        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+      />
+    </div>
+
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        outlined
+        dense
+        lazy-rules
+        v-model="familyData.fatherFirstName"
+        :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+        :label="`${'ชื่อ'}`"
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        outlined
+        dense
+        lazy-rules
+        v-model="familyData.fatherLastName"
+        :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+        :label="`${'นามสกุล'}`"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-3 col-md-3">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        outlined
+        dense
+        lazy-rules
+        v-model="familyData.fatherOccupation"
+        :label="`${'อาชีพ'}`"
+      />
+    </div>
+
+    <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+    <div class="col-xs-12 text-weight-bold">• มารดา</div>
+    <div class="col-xs-12 col-sm-3 col-md-3">
+      <selector
+        hide-bottom-space
+        class="inputgreen"
+        :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+        outlined
+        dense
+        lazy-rules
+        v-model="familyData.motherPrefixId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="Ops.prefixOps"
+        option-value="id"
+        :label="`${'คำนำหน้า'}`"
+        use-input
+        input-debounce="0"
+        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+      />
+    </div>
+
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        outlined
+        dense
+        lazy-rules
+        v-model="familyData.motherFirstName"
+        :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+        :label="`${'ชื่อ'}`"
+      />
+    </div>
+    <div class="col-xs-6 col-sm-3 col-md-3">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        outlined
+        dense
+        lazy-rules
+        v-model="familyData.motherLastName"
+        :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+        :label="`${'นามสกุล'}`"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-3 col-md-3">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        outlined
+        dense
+        lazy-rules
+        v-model="familyData.motherOccupation"
+        :label="`${'อาชีพ'}`"
+      />
+    </div>
+    <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+    <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
+      <label class="text-weight-bold">• คู่สมรส</label>
+      <q-radio
+        v-model="familyData.couple"
+        checked-icon="task_alt"
+        unchecked-icon="panorama_fish_eye"
+        val="1"
+        label="มี"
+        dense
+        @update:model-value="selectRadio"
+      />
+      <q-radio
+        v-model="familyData.couple"
+        checked-icon="task_alt"
+        unchecked-icon="panorama_fish_eye"
+        val="0"
+        label="ไม่มี"
+        dense
+        @update:model-value="selectRadio"
+      />
+    </div>
+
+    <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.couple == '1'">
+      <selector
+        hide-bottom-space
+        class="inputgreen"
+        :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+        outlined
+        dense
+        lazy-rules
+        v-model="familyData.marryPrefixId"
+        emit-value
+        map-options
+        option-label="name"
+        :options="Ops.prefixOps"
+        option-value="id"
+        :label="`${'คำนำหน้า'}`"
+        use-input
+        input-debounce="0"
+        @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+      />
+    </div>
+
+    <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.couple == '1'">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        outlined
+        dense
+        lazy-rules
+        v-model="familyData.marryFirstName"
+        :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+        :label="`${'ชื่อ'}`"
+      />
+    </div>
+    <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.couple == '1'">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        outlined
+        dense
+        lazy-rules
+        v-model="familyData.marryLastName"
+        :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+        :label="`${'นามสกุล'}`"
+      />
+    </div>
+    <div class="col-xs-12 col-sm-3 col-md-3" v-if="familyData.couple == '1'">
+      <q-input
+        class="inputgreen"
+        hide-bottom-space
+        outlined
+        dense
+        lazy-rules
+        v-model="familyData.marryOccupation"
+        :label="`${'อาชีพ'}`"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/modules/05_placement/components/PersonalDetail/DetailMain.vue b/src/modules/05_placement/components/PersonalDetail/DetailMain.vue
index 8d46fe73d..6ddf8b341 100644
--- a/src/modules/05_placement/components/PersonalDetail/DetailMain.vue
+++ b/src/modules/05_placement/components/PersonalDetail/DetailMain.vue
@@ -35,6 +35,7 @@ import EducationVue from "@/modules/05_placement/components/PersonalDetail/Infor
 import ExamResult from "@/modules/05_placement/components/PersonalDetail/Information/ExamResult.vue";
 import Qualification from "@/modules/05_placement/components/PersonalDetail/Information/Qualification.vue";
 import Document from "@/modules/05_placement/components/PersonalDetail/Information/Document.vue";
+import DialogCheckInformation from "@/modules/05_placement/components/PersonalDetail/DialogCheckInformation.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -45,6 +46,7 @@ const storePersonal = usePersonalDataStore();
 const { showLoader, hideLoader, messageError } = mixin;
 const { changeTab } = store;
 
+const modalCheck = ref<boolean>(false);
 const examId = ref<string>(
   route.params.personalId ? route.params.personalId.toString() : ""
 );
@@ -485,6 +487,11 @@ function guidCheck(id: string) {
   return id;
 }
 
+/** เปืด popup ตรวจสอบข้อมูลกับกรมการปกครอง */
+function checkInformation() {
+  modalCheck.value = true;
+}
+
 /**
  * ทำงานเมื่อมีการเรียกใช้ Components
  */
@@ -510,6 +517,14 @@ onMounted(async () => {
     </div>
   </div>
   <div class="q-pb-lg">
+    <div class="row q-mb-sm justify-end">
+      <q-btn
+        color="public"
+        label="ตรวจสอบข้อมูลกับกรมการปกครอง"
+        @click="checkInformation"
+      >
+      </q-btn>
+    </div>
     <q-card class="row q-pb-lg" v-if="storePersonal.loading">
       <div id="information" name="1" class="col-12 q-pa-sm">
         <Informationvue
@@ -585,6 +600,14 @@ onMounted(async () => {
       </div>
     </q-card>
   </div>
+
+  <DialogCheckInformation
+    v-model:modal="modalCheck"
+    :address-data="AddressData"
+    :family-data="FamilyData"
+    :Ops="Ops"
+    :Ops-filter="OpsFilter"
+  />
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/05_placement/components/PersonalDetail/DialogCheckInformation.vue b/src/modules/05_placement/components/PersonalDetail/DialogCheckInformation.vue
new file mode 100644
index 000000000..ba76b2f34
--- /dev/null
+++ b/src/modules/05_placement/components/PersonalDetail/DialogCheckInformation.vue
@@ -0,0 +1,291 @@
+<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 {
+  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 $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+
+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);
+}
+
+/** ดึงข้อมูลรายละเอียด */
+async function amiRequest() {
+  // await http
+  //   .get(config.API.path)
+  //   .then(async(res) => {
+  //     const data = await res.data.result;
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {});
+}
+
+/** เช็คค่า 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>
+          <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>
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index 33f5e628d..74cb94cb5 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -147,10 +147,10 @@ interface Address {
 }
 
 interface AddressData {
-  subDistrictId: any;
+  subDistrictId: string;
   zipCode: string;
-  districtId: any;
-  provinceId: any;
+  districtId: string;
+  provinceId: string;
 }
 
 interface Certificate {
diff --git a/src/stores/structureTree.ts b/src/stores/structureTree.ts
index 1de8bf225..a4f8f6a0b 100644
--- a/src/stores/structureTree.ts
+++ b/src/stores/structureTree.ts
@@ -74,6 +74,7 @@ export const useStructureTree = defineStore("structureTree", () => {
       messageError($q, err);
     } finally {
       isLoad && hideLoader();
+      console.log(123)
     }
   }