From 10e29c199927a5e3267000f466e089ac904e785b Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Tue, 26 Mar 2024 10:29:04 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4:=20=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=84=E0=B8=A3=E0=B8=AD=E0=B8=9A=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B1=E0=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/PersonalInformation/04_Family.vue  | 868 ++++++++----------
 .../PersonalInformation/04_FamilyHistory.vue  | 237 +++++
 2 files changed, 637 insertions(+), 468 deletions(-)
 create mode 100644 src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyHistory.vue

diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
index 88719ae50..5996edee9 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
@@ -1,31 +1,40 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import dialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { QForm, useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+import DialogHistory from "@/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyHistory.vue";
 
 const mixin = useCounterMixin();
 const $q = useQuasar();
-const { dialogConfirm } = mixin;
-
-const formRef = ref<QForm | null>(null);
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = mixin;
 
+const route = useRoute();
+const id = ref<string>(route.params.id.toString());
 const dialog = ref<boolean>(false);
 const historyDialog = ref<boolean>(false);
-const fatherMockData = {
-  isHaveInfo: 1,
-  isDead: false,
-  citizenId: "1596079203945",
-  prefix: "นาย",
-  optionPrefix: ["นาย", "จ่าสิบเอก"],
-  firstName: "เมฐาพงศ์",
-  lastName: "ดิษยบุตร",
-  job: "ตำรวจ",
-};
+const fatherIsHaveInfo = ref<boolean>(false);
+const motherIsHaveInfo = ref<boolean>(false);
+const spouseIsHave = ref<boolean>(false);
+const fatherIsLive = ref<boolean>(false);
+const motherIsLive = ref<boolean>(false);
+const spouseIsLive = ref<boolean>(false);
+const index = ref<number>(1);
 const fatherData = reactive({
   isHaveInfo: 1,
-  isDead: 0,
-  citizenId: "1-1345-67891-01-2",
+  isLive: 0,
+  citizenId: "123123213",
   prefix: "นาย",
   optionPrefix: ["นาย", "จ่าสิบเอก"],
   firstName: "ณัฐพัฐ",
@@ -34,8 +43,8 @@ const fatherData = reactive({
 });
 const motherData = reactive({
   isHaveInfo: 1,
-  isDead: 0,
-  citizenId: "1-1345-67891-01-2",
+  isLive: 0,
+  citizenId: "222222222",
   prefix: "นาง",
   optionPrefix: ["นาง", "นางสาว"],
   firstName: "นางอริญกัญญา",
@@ -44,8 +53,8 @@ const motherData = reactive({
 });
 const spouseData = reactive({
   isHave: 1,
-  isDead: 0,
-  citizenId: "4-1325-12312-01-3",
+  isLive: 0,
+  citizenId: "44444444",
   prefix: "นาย",
   optionPrefix: ["นาย", "นาง", "นางสาว"],
   firstName: "กัญจาพล",
@@ -53,37 +62,136 @@ const spouseData = reactive({
   job: "ค้าขาย",
 });
 
+const rows = ref<any>([]);
+const historyRows = ref<any>([]);
+
 const childrenData: any = reactive({
-  childrens: [
-    {
-      isDead: 0,
-      citizenId: "4-1325-55512-01-3",
-      prefix: "เด็กชาย",
-      optionPrefix: ["นาย", "นาง", "นางสาว"],
-      firstName: "เด็กชาย",
-      lastName: "ดิอุรุกษา",
-      job: "ค้าขาย",
-    },
-    {
-      isDead: 0,
-      citizenId: "7-2222-14545-01-3",
-      prefix: "เด็กหญิง",
-      optionPrefix: ["นาย", "นาง", "นางสาว"],
-      firstName: "เด็กหญิง",
-      lastName: "ดิอุรุกษา",
-      job: "ค้าขาย",
-    },
-  ],
-  // isHave: "0",
-  // isAlive: "0",
-  // citizenId: null,
-  // prefix: null,
-  // optionPrefix: ["นาย", "นาง", "นางสาว"],
-  // firstName: null,
-  // lastName: null,
-  // job: null,
+  childrens: [],
 });
 
+function editForm(rows: any) {
+  if (rows !== null) {
+    fatherData.isLive = rows.fatherLive ? 1 : 0;
+    fatherData.citizenId = rows.fatherCitizenId;
+    fatherData.prefix = rows.fatherPrefix;
+    fatherData.firstName = rows.fatherFirstName;
+    fatherData.lastName = rows.fatherLastName;
+    fatherData.job = rows.fatherCareer;
+    motherData.isLive = rows.motherLive ? 1 : 0;
+    motherData.citizenId = rows.motherCitizenId;
+    motherData.prefix = rows.motherPrefix;
+    motherData.firstName = rows.motherFirstName;
+    motherData.lastName = rows.motherLastName;
+    motherData.job = rows.motherCareer;
+    spouseData.isLive = rows.coupleLive ? 1 : 0;
+    spouseData.citizenId = rows.coupleCitizenId;
+    spouseData.prefix = rows.couplePrefix;
+    spouseData.firstName = rows.coupleFirstName;
+    spouseData.lastName = rows.coupleLastName;
+    spouseData.job = rows.coupleCareer;
+    spouseData.isHave = rows.couple ? 1 : 0;
+    childrenData.childrens = rows.children.map((e: any) => ({
+      ...e,
+      childrenLive: e.childrenLive ? 1 : 0,
+    }));
+  }
+}
+
+async function fetchData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewFamilyByProfileId(id))
+    .then(async (res) => {
+      rows.value = res.data.result;
+      if (rows.value !== null) {
+        editForm(rows.value);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchHistoryData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewFamilyHisByFamilyId(id))
+    .then(async (res) => {
+      console.log(res.data.result);
+      historyRows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      index.value = 1;
+      historyDialog.value = true;
+      hideLoader();
+    });
+}
+
+async function addData() {
+  fatherIsHaveInfo.value = fatherData.isHaveInfo === 1 ? true : false;
+  motherIsHaveInfo.value = motherData.isHaveInfo === 1 ? true : false;
+  spouseIsHave.value = spouseData.isHave === 1 ? true : false;
+  fatherIsLive.value = fatherData.isLive === 1 ? true : false;
+  motherIsLive.value = motherData.isLive === 1 ? true : false;
+  spouseIsLive.value = spouseData.isLive === 1 ? true : false;
+  const children = childrenData.childrens.map((e: any) => ({
+    childrenLive: !!e.childrenLive,
+    childrenCareer: e.childrenCareer,
+    childrenCitizenId: e.childrenCitizenId,
+    childrenFirstName: e.childrenFirstName,
+    childrenLastName: e.childrenLastName,
+    childrenPrefix: e.childrenPrefix,
+    id: e.id,
+  }));
+  const url =
+    rows.value === null
+      ? config.API.profileNewFamily
+      : config.API.profileNewFamilyByProfileId(id.value);
+  const method = rows.value === null ? "post" : "patch";
+
+  await http[method](url, {
+    profileId: rows.value === null ? id.value : undefined,
+    motherLive: motherIsHaveInfo.value ? motherIsLive.value : null,
+    motherCitizenId: motherIsHaveInfo.value ? motherData.citizenId : null,
+    motherPrefix: motherIsHaveInfo.value ? motherData.prefix : null,
+    motherFirstName: motherIsHaveInfo.value ? motherData.firstName : null,
+    motherLastName: motherIsHaveInfo.value ? motherData.lastName : null,
+    motherCareer: motherIsHaveInfo.value ? motherData.job : null,
+    fatherLive: fatherIsHaveInfo.value ? fatherIsLive.value : null,
+    fatherCitizenId: fatherIsHaveInfo.value ? fatherData.citizenId : null,
+    fatherPrefix: fatherIsHaveInfo.value ? fatherData.prefix : null,
+    fatherFirstName: fatherIsHaveInfo.value ? fatherData.firstName : null,
+    fatherLastName: fatherIsHaveInfo.value ? fatherData.lastName : null,
+    fatherCareer: fatherIsHaveInfo.value ? fatherData.job : null,
+    coupleLive: spouseIsHave.value ? spouseIsLive.value : null,
+    coupleCitizenId: spouseIsHave.value ? spouseData.citizenId : null,
+    couplePrefix: spouseIsHave.value ? spouseData.prefix : null,
+    coupleFirstName: spouseIsHave.value ? spouseData.firstName : null,
+    coupleLastName: spouseIsHave.value ? spouseData.lastName : null,
+    coupleLastNameOld: spouseIsHave.value ? spouseData.lastName : null,
+    coupleCareer: spouseIsHave.value ? spouseData.job : null,
+    couple: spouseIsHave.value,
+    children: children,
+  })
+
+    .then(() => {
+      fetchData(id.value);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 const childrenOptionPrefix = ["นาย", "นาง", "นางสาว"];
 
 function closeDialog() {
@@ -94,14 +202,11 @@ function closeHistoryDialog() {
   historyDialog.value = false;
 }
 
-function validateForm() {
-  onSubmit();
-}
-
 async function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
+      addData();
       closeDialog();
     },
     "ยืนยันการบันทึกข้อมูล",
@@ -111,13 +216,13 @@ async function onSubmit() {
 
 const addChildren = async () => {
   childrenData.childrens.push({
-    isAlive: "0",
-    citizenId: "",
-    prefix: "",
-    id: `${childrenData.childrens.length + 1}`,
-    firstName: "",
-    lastName: "",
-    job: "",
+    childrenLive: 0,
+    childrenCitizenId: "",
+    childrenPrefix: "",
+    childrenFirstName: "",
+    childrenLastName: "",
+    childrenCareer: "",
+    id: "",
   });
 };
 
@@ -126,6 +231,10 @@ function deleteChildren(items: any) {
 
   childrenData.childrens.splice(index, 1);
 }
+
+onMounted(async () => {
+  await fetchData(id.value);
+});
 </script>
 
 <template>
@@ -138,7 +247,12 @@ function deleteChildren(items: any) {
           color="primary"
           icon="mdi-pencil-outline"
           size="14px"
-          @click="dialog = true"
+          @click="
+            () => {
+              editForm(rows);
+              dialog = true;
+            }
+          "
         >
           <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
         >
@@ -148,7 +262,11 @@ function deleteChildren(items: any) {
           color="blue"
           icon="mdi-history"
           size="14px"
-          @click="historyDialog = true"
+          @click="
+            () => {
+              fetchHistoryData(id);
+            }
+          "
         >
           <q-tooltip>ประวัติการแก้ไข</q-tooltip></q-btn
         >
@@ -166,17 +284,7 @@ function deleteChildren(items: any) {
             <div>เลขบัตรประจำตัวประชาชน</div>
           </div>
           <div class="col">
-            {{
-              `${fatherData.citizenId[0]}-${fatherData.citizenId.slice(
-                2,
-                6
-              )}-${fatherData.citizenId.slice(
-                7,
-                12
-              )}-${fatherData.citizenId.slice(13, 15)}-${
-                fatherData.citizenId[16]
-              }`
-            }}
+            {{ fatherData.citizenId }}
           </div>
         </div>
         <div class="row items-center">
@@ -199,8 +307,8 @@ function deleteChildren(items: any) {
         </div>
         <div class="row items-center">
           <div class="col-2">สถานภาพการมีชีวิต</div>
-          <div class="col">
-            <div v-if="fatherData.isDead">มีชีวิตอยู่</div>
+          <div class="col-10">
+            <div v-if="fatherData.isLive">มีชีวิตอยู่</div>
             <div v-else>ถึงแก่กรรม</div>
           </div>
         </div>
@@ -218,17 +326,7 @@ function deleteChildren(items: any) {
             <div>เลขบัตรประจำตัวประชาชน</div>
           </div>
           <div class="col">
-            {{
-              `${motherData.citizenId[0]}-${motherData.citizenId.slice(
-                2,
-                6
-              )}-${motherData.citizenId.slice(
-                7,
-                12
-              )}-${motherData.citizenId.slice(13, 15)}-${
-                motherData.citizenId[16]
-              }`
-            }}
+            {{ motherData.citizenId }}
           </div>
         </div>
         <div class="row items-center">
@@ -252,7 +350,7 @@ function deleteChildren(items: any) {
         <div class="row items-center">
           <div class="col-2">สถานภาพการมีชีวิต</div>
           <div class="col">
-            <div v-if="motherData.isDead">มีชีวิตอยู่</div>
+            <div v-if="motherData.isLive">มีชีวิตอยู่</div>
             <div v-else>ถึงแก่กรรม</div>
           </div>
         </div>
@@ -270,17 +368,7 @@ function deleteChildren(items: any) {
             <div>เลขบัตรประจำตัวประชาชน</div>
           </div>
           <div class="col">
-            {{
-              `${spouseData.citizenId[0]}-${spouseData.citizenId.slice(
-                2,
-                6
-              )}-${spouseData.citizenId.slice(
-                7,
-                12
-              )}-${spouseData.citizenId.slice(13, 15)}-${
-                spouseData.citizenId[16]
-              }`
-            }}
+            {{ spouseData.citizenId }}
           </div>
         </div>
         <div class="row items-center">
@@ -304,7 +392,7 @@ function deleteChildren(items: any) {
         <div class="row items-center">
           <div class="col-2">สถานภาพการมีชีวิต</div>
           <div class="col">
-            <div v-if="spouseData.isDead">มีชีวิตอยู่</div>
+            <div v-if="spouseData.isLive">มีชีวิตอยู่</div>
             <div v-else>ถึงแก่กรรม</div>
           </div>
         </div>
@@ -325,42 +413,32 @@ function deleteChildren(items: any) {
             <div class="col-2">
               <div>เลขบัตรประจำตัวประชาชน</div>
             </div>
-            <div class="col">
-              {{
-                `${children.citizenId[0]}-${children.citizenId.slice(
-                  2,
-                  6
-                )}-${children.citizenId.slice(
-                  7,
-                  12
-                )}-${children.citizenId.slice(13, 15)}-${
-                  children.citizenId[16]
-                }`
-              }}
+            <div class="col-10">
+              {{ children.childrenCitizenId }}
             </div>
           </div>
           <div class="row items-center">
             <div class="col-2">คำนำหน้าชื่อ</div>
             <div class="col-2">
-              {{ children.prefix }}
+              {{ children.childrenPrefix }}
             </div>
             <div class="col-1">ชื่อ</div>
             <div class="col-2">
-              {{ children.firstName }}
+              {{ children.childrenFirstName }}
             </div>
             <div class="col-1">นามสกุล</div>
             <div class="col-2">
-              {{ children.lastName }}
+              {{ children.childrenLastName }}
             </div>
             <div class="col-1">อาชีพ</div>
             <div class="col">
-              {{ children.job }}
+              {{ children.childrenCareer }}
             </div>
           </div>
           <div class="row items-center">
             <div class="col-2">สถานภาพการมีชีวิต</div>
             <div class="col">
-              <div v-if="children.isDead">มีชีวิตอยู่</div>
+              <div v-if="children.childrenLive">มีชีวิตอยู่</div>
               <div v-else>ถึงแก่กรรม</div>
             </div>
           </div>
@@ -371,7 +449,7 @@ function deleteChildren(items: any) {
 
   <q-dialog v-model="dialog" class="dialog" persistent>
     <q-card style="min-width: 70%" class="bg-white">
-      <q-form @submit.prevent greedy @validation-success="validateForm">
+      <q-form @submit.prevent greedy @validation-success="onSubmit()">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header tittle="ข้อมูลครอบครัว" :close="closeDialog" />
         </q-card-section>
@@ -416,8 +494,8 @@ function deleteChildren(items: any) {
                   dense
                   v-model="fatherData.citizenId"
                   :label="`${'เลขประจำตัวประชาชน'}`"
-                  maxlength="17"
-                  mask="#-####-#####-##-#"
+                  maxlength="13"
+                  mask="#############"
                 />
               </div>
               <div class="col">
@@ -476,7 +554,7 @@ function deleteChildren(items: any) {
                 <q-radio
                   :disable="!fatherData.isHaveInfo"
                   class="q-mr-sm"
-                  v-model="fatherData.isDead"
+                  v-model="fatherData.isLive"
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="1"
@@ -486,7 +564,7 @@ function deleteChildren(items: any) {
                 />
                 <q-radio
                   :disable="!fatherData.isHaveInfo"
-                  v-model="fatherData.isDead"
+                  v-model="fatherData.isLive"
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="0"
@@ -535,8 +613,8 @@ function deleteChildren(items: any) {
                   dense
                   v-model="motherData.citizenId"
                   :label="`${'เลขประจำตัวประชาชน'}`"
-                  maxlength="17"
-                  mask="#-####-#####-##-#"
+                  maxlength="13"
+                  mask="#############"
                 />
               </div>
               <div class="col">
@@ -573,7 +651,7 @@ function deleteChildren(items: any) {
                   dense
                   bg-color="white"
                   lazy-rules
-                  v-model="fatherData.lastName"
+                  v-model="motherData.lastName"
                   :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
                   label="นามสกุล"
                 />
@@ -595,7 +673,7 @@ function deleteChildren(items: any) {
                 <q-radio
                   :disable="!motherData.isHaveInfo"
                   class="q-mr-sm"
-                  v-model="motherData.isDead"
+                  v-model="motherData.isLive"
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="1"
@@ -605,7 +683,7 @@ function deleteChildren(items: any) {
                 />
                 <q-radio
                   :disable="!motherData.isHaveInfo"
-                  v-model="motherData.isDead"
+                  v-model="motherData.isLive"
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="0"
@@ -654,8 +732,8 @@ function deleteChildren(items: any) {
                   dense
                   v-model="spouseData.citizenId"
                   :label="`${'เลขประจำตัวประชาชน'}`"
-                  maxlength="17"
-                  mask="#-####-#####-##-#"
+                  maxlength="13"
+                  mask="#############"
                 />
               </div>
               <div class="col">
@@ -714,7 +792,7 @@ function deleteChildren(items: any) {
                 <q-radio
                   :disable="!spouseData.isHave"
                   class="q-mr-sm"
-                  v-model="spouseData.isDead"
+                  v-model="spouseData.isLive"
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="1"
@@ -724,7 +802,7 @@ function deleteChildren(items: any) {
                 />
                 <q-radio
                   :disable="!spouseData.isHave"
-                  v-model="spouseData.isDead"
+                  v-model="spouseData.isLive"
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="0"
@@ -764,11 +842,11 @@ function deleteChildren(items: any) {
                       outlined
                       hide-bottom-space
                       dense
-                      v-model="items.citizenId"
+                      v-model="items.childrenCitizenId"
                       :label="`${'เลขประจำตัวประชาชน'}`"
                       bg-color="white"
-                      maxlength="17"
-                      mask="#-####-#####-##-#"
+                      maxlength="13"
+                      mask="#############"
                     />
                   </div>
                   <div class="col">
@@ -777,7 +855,7 @@ function deleteChildren(items: any) {
                       dense
                       lazy-rules
                       bg-color="white"
-                      v-model="items.prefix"
+                      v-model="items.childrenPrefix"
                       :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
                       :options="childrenOptionPrefix"
                       label="คำนำหน้าชื่อ"
@@ -789,7 +867,7 @@ function deleteChildren(items: any) {
                       dense
                       lazy-rules
                       bg-color="white"
-                      v-model="items.firstName"
+                      v-model="items.childrenFirstName"
                       :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
                       label="ชื่อ"
                     />
@@ -800,7 +878,7 @@ function deleteChildren(items: any) {
                       lazy-rules
                       bg-color="white"
                       dense
-                      v-model="items.lastName"
+                      v-model="items.childrenLastName"
                       :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
                       label="นามสกุล"
                     />
@@ -810,7 +888,7 @@ function deleteChildren(items: any) {
                       outlined
                       bg-color="white"
                       dense
-                      v-model="items.job"
+                      v-model="items.childrenCareer"
                       label="อาชีพ"
                     />
                   </div>
@@ -819,23 +897,21 @@ function deleteChildren(items: any) {
                   <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
                   <div>
                     <q-radio
-                      :disable="!spouseData.isHave"
                       class="q-mr-sm"
-                      v-model="spouseData.isDead"
+                      v-model="items.childrenLive"
                       checked-icon="task_alt"
                       unchecked-icon="panorama_fish_eye"
                       :val="1"
                       label="ยังมีชีวิตอยู่"
                       dense
-                      :color="!spouseData.isHave ? 'grey' : 'primary'"
+                      color="primary"
                     />
                     <q-radio
-                      :disable="!spouseData.isHave"
-                      v-model="spouseData.isDead"
+                      v-model="items.childrenLive"
                       checked-icon="task_alt"
                       unchecked-icon="panorama_fish_eye"
                       :val="0"
-                      :color="!motherData.isHaveInfo ? 'grey' : 'red'"
+                      color="red"
                       label="ถึงแก่กรรม"
                       dense
                     />
@@ -870,6 +946,7 @@ function deleteChildren(items: any) {
             label="บันทึก"
             color="public"
             class="q-px-md"
+            @click=""
           >
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
@@ -879,339 +956,194 @@ function deleteChildren(items: any) {
   </q-dialog>
   <q-dialog v-model="historyDialog" class="dialog" persistent>
     <q-card style="min-width: 70%" class="bg-white">
-      <q-form @submit.prevent greedy @validation-success="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            tittle="ประวัติแก้ไขข้อมูลครอบครัว"
-            :close="closeHistoryDialog"
-          />
-        </q-card-section>
-
-        <q-separator color="grey-4" />
-        <q-card-section>
-          ยังไม่รู้ว่าจะออกแบบยังไงครับ
+      <q-card-section class="flex justify-between" style="padding: 0">
+        <dialog-header
+          tittle="ประวัติแก้ไขข้อมูลครอบครัว"
+          :close="closeHistoryDialog"
+        />
+      </q-card-section>
+      <q-separator color="grey-4" />
+      <div class="q-pa-md scroll" style="max-height: 70vh">
+        <div>
+          <div class="col-12 row q-pb-sm">
+            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
+              • บิดา
+            </div>
+          </div>
+          <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+            <div class="row items-center">
+              <div class="col-2">
+                <div>เลขบัตรประจำตัวประชาชน</div>
+              </div>
+              <div class="col">
+                {{ historyRows[index - 1].fatherCitizenId }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">คำนำหน้าชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index - 1].fatherPrefix }}
+              </div>
+              <div class="col-1">ชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index - 1].fatherFirstName }}
+              </div>
+              <div class="col-1">นามสกุล</div>
+              <div class="col-2">
+                {{ historyRows[index - 1].fatherLastName }}
+              </div>
+              <div class="col-1">อาชีพ</div>
+              <div class="col">
+                {{ historyRows[index - 1].fatherCareer }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">สถานภาพการมีชีวิต</div>
+              <div class="col-10">
+                <div v-if="historyRows[index - 1].fatherLive">มีชีวิตอยู่</div>
+                <div v-else>ถึงแก่กรรม</div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+        <div>
           <div class="col-12 row q-pb-sm q-pt-md">
-            <div class="q-mr-md text-weight-bold">• บิดา</div>
-            <div class="flex q-gutter-sm">
-              <q-radio
-                v-model="fatherData.isHaveInfo"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="1"
-                label="มีข้อมูล"
-                dense
-                :disable="true"
-                color="primary"
-              />
-              <q-radio
-                v-model="fatherData.isHaveInfo"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="0"
-                color="red"
-                label="ไม่มีข้อมูล"
-                :disable="true"
-                dense
-              />
-              <q-separator color="grey-4" vertical />
-              <q-checkbox
-                :disable="true"
-                outline
-                v-model="fatherData.isDead"
-                label="เสียชีวิตแล้ว"
-                color="red"
-                dense
-              />
+            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
+              • มารดา
             </div>
           </div>
-          <div class="flex q-gutter-sm">
-            <q-input
-              class="col"
-              outlined
-              hide-bottom-space
-              dense
-              :readonly="true"
-              v-model="fatherData.citizenId"
-              :label="`${'เลขประจำตัวประชาชน'}`"
-              maxlength="17"
-              mask="#-####-#####-##-#"
-            />
-            <q-select
-              class="col"
-              outlined
-              dense
-              :readonly="true"
-              v-model="fatherData.prefix"
-              :options="fatherData.optionPrefix"
-              label="คำนำหน้าชื่อ"
-            />
-            <q-input
-              class="col"
-              outlined
-              dense
-              :readonly="true"
-              v-model="fatherData.firstName"
-              label="ชื่อ"
-            />
-            <q-input
-              class="col"
-              outlined
-              dense
-              :readonly="true"
-              v-model="fatherData.lastName"
-              label="นามสกุล"
-            />
-            <q-input
-              class="col"
-              outlined
-              dense
-              :readonly="true"
-              v-model="fatherData.job"
-              label="อาชีพ"
-            />
-          </div>
-          <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
-            <div class="q-mr-md text-weight-bold">• มารดา</div>
-            <div class="flex q-gutter-sm">
-              <q-radio
-                v-model="motherData.isHaveInfo"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="1"
-                :disable="true"
-                label="มีข้อมูล"
-                dense
-                color="primary"
-              />
-              <q-radio
-                v-model="motherData.isHaveInfo"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="0"
-                :disable="true"
-                color="red"
-                label="ไม่มีข้อมูล"
-                dense
-              />
-              <q-separator color="grey-4" vertical />
-              <q-checkbox
-                :disable="true"
-                outline
-                v-model="motherData.isDead"
-                label="เสียชีวิตแล้ว"
-                color="red"
-                dense
-              />
-            </div>
-          </div>
-          <div class="flex q-gutter-sm">
-            <q-input
-              class="col"
-              outlined
-              hide-bottom-space
-              dense
-              :readonly="true"
-              v-model="motherData.citizenId"
-              :label="`${'เลขประจำตัวประชาชน'}`"
-              maxlength="17"
-              mask="#-####-#####-##-#"
-            />
-            <q-select
-              class="col"
-              outlined
-              dense
-              :readonly="true"
-              v-model="motherData.prefix"
-              :options="motherData.optionPrefix"
-              label="คำนำหน้าชื่อ"
-            />
-            <q-input
-              class="col"
-              outlined
-              dense
-              :readonly="true"
-              v-model="motherData.firstName"
-              label="ชื่อ"
-            />
-            <q-input
-              class="col"
-              outlined
-              dense
-              :readonly="true"
-              v-model="motherData.lastName"
-              label="นามสกุล"
-            />
-            <q-input
-              class="col"
-              outlined
-              :readonly="true"
-              dense
-              v-model="motherData.job"
-              label="อาชีพ"
-            />
-          </div>
-          <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
-            <div class="q-mr-md text-weight-bold">• คู่สมรส</div>
-            <div class="flex q-gutter-sm">
-              <q-radio
-                v-model="spouseData.isHave"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="1"
-                label="มี"
-                dense
-                :disable="true"
-                color="primary"
-              />
-              <q-radio
-                v-model="spouseData.isHave"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="0"
-                color="red"
-                label="ไม่มี"
-                dense
-                :disable="true"
-              />
-              <q-separator color="grey-4" vertical />
-              <q-checkbox
-                :disable="true"
-                outline
-                v-model="spouseData.isDead"
-                label="เสียชีวิตแล้ว"
-                color="red"
-                dense
-              />
-            </div>
-          </div>
-          <div class="flex q-gutter-sm">
-            <q-input
-              class="col"
-              :readonly="true"
-              outlined
-              hide-bottom-space
-              dense
-              v-model="spouseData.citizenId"
-              :label="`${'เลขประจำตัวประชาชน'}`"
-              maxlength="13"
-              mask="#############"
-            />
-            <q-select
-              class="col"
-              :readonly="true"
-              outlined
-              dense
-              v-model="spouseData.prefix"
-              :options="spouseData.optionPrefix"
-              label="คำนำหน้าชื่อ"
-            />
-            <q-input
-              class="col"
-              :readonly="true"
-              outlined
-              dense
-              v-model="spouseData.firstName"
-              label="ชื่อ"
-            />
-            <q-input
-              class="col"
-              :readonly="true"
-              outlined
-              dense
-              v-model="spouseData.lastName"
-              label="นามสกุล"
-            />
-            <q-input
-              class="col"
-              :readonly="true"
-              outlined
-              dense
-              v-model="spouseData.job"
-              label="อาชีพ"
-            />
-          </div>
-          <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
-            <div class="col-xs-2 col-sm-1 text-weight-bold q-mb-sm">• บุตร</div>
-            <div
-              class="col-12 items-center q-col-gutter-xs"
-              v-for="(items, index) in childrenData.childrens"
-              :key="index"
-            >
-              <div class="col-12 row q-gutter-sm q-pb-xs">
-                <q-avatar class="bg-grey-2" size="28px">{{
-                  index + 1
-                }}</q-avatar>
-                <q-radio
-                  v-model="items.isAlive"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  val="1"
-                  :disable="true"
-                  label="มีชีวิต"
-                  color="primary"
-                  dense
-                />
-                <q-radio
-                  v-model="items.isAlive"
-                  checked-icon="task_alt"
-                  unchecked-icon="panorama_fish_eye"
-                  val="0"
-                  :disable="true"
-                  label="เสียชีวิต"
-                  color="red"
-                  dense
-                />
+          <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+            <div class="row items-center">
+              <div class="col-2">
+                <div>เลขบัตรประจำตัวประชาชน</div>
               </div>
-              <div class="flex q-gutter-sm q-mb-md">
-                <q-input
-                  class="col"
-                  outlined
-                  hide-bottom-space
-                  dense
-                  :readonly="true"
-                  v-model="items.citizenId"
-                  :label="`${'เลขประจำตัวประชาชน'}`"
-                  maxlength="13"
-                  mask="#############"
-                />
-                <q-select
-                  class="col"
-                  outlined
-                  dense
-                  :readonly="true"
-                  v-model="items.prefix"
-                  :options="childrenOptionPrefix"
-                  label="คำนำหน้าชื่อ"
-                />
-                <q-input
-                  class="col"
-                  outlined
-                  dense
-                  :readonly="true"
-                  v-model="items.firstName"
-                  label="ชื่อ"
-                />
-                <q-input
-                  class="col"
-                  outlined
-                  dense
-                  :readonly="true"
-                  v-model="items.lastName"
-                  label="นามสกุล"
-                />
-                <q-input
-                  class="col"
-                  outlined
-                  dense
-                  :readonly="true"
-                  v-model="items.job"
-                  label="อาชีพ"
-                />
+              <div class="col">
+                {{ historyRows[index - 1].motherCitizenId }}
               </div>
             </div>
+            <div class="row items-center">
+              <div class="col-2">คำนำหน้าชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index - 1].motherPrefix }}
+              </div>
+              <div class="col-1">ชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index - 1].motherFirstName }}
+              </div>
+              <div class="col-1">นามสกุล</div>
+              <div class="col-2">
+                {{ historyRows[index - 1].motherLastName }}
+              </div>
+              <div class="col-1">อาชีพ</div>
+              <div class="col">
+                {{ historyRows[index - 1].motherCareer }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">สถานภาพการมีชีวิต</div>
+              <div class="col">
+                <div v-if="historyRows[index - 1].motherLive">มีชีวิตอยู่</div>
+                <div v-else>ถึงแก่กรรม</div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+        <div>
+          <div class="col-12 row q-pb-sm q-pt-md">
+            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
+              • คู่สมรส
+            </div>
           </div>
-        </q-card-section>
-      </q-form>
+          <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+            <div class="row items-center">
+              <div class="col-2">
+                <div>เลขบัตรประจำตัวประชาชน</div>
+              </div>
+              <div class="col">
+                {{ historyRows[index - 1].coupleCitizenId }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">คำนำหน้าชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index - 1].couplePrefix }}
+              </div>
+              <div class="col-1">ชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index - 1].coupleFirstName }}
+              </div>
+              <div class="col-1">นามสกุล</div>
+              <div class="col-2">
+                {{ historyRows[index - 1].coupleLastName }}
+              </div>
+              <div class="col-1">อาชีพ</div>
+              <div class="col">
+                {{ historyRows[index - 1].coupleCareer }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">สถานภาพการมีชีวิต</div>
+              <div class="col">
+                <div v-if="historyRows[index - 1].coupleLive">มีชีวิตอยู่</div>
+                <div v-else>ถึงแก่กรรม</div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+        <div>
+          <div
+            v-if="historyRows[index - 1].children[0] !== undefined"
+            class="col-12 row q-pb-sm q-pt-md"
+          >
+            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
+              • บุตร
+            </div>
+          </div>
+          <div v-for="children in historyRows[index - 1].children" :key="index">
+            <div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
+              <div class="text-medium">บุตรคนที่ : {{ index }}</div>
+            </div>
+            <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+              <div class="row items-center">
+                <div class="col-2">
+                  <div>เลขบัตรประจำตัวประชาชน</div>
+                </div>
+                <div class="col-10">
+                  {{ children.childrenCitizenId }}
+                </div>
+              </div>
+              <div class="row items-center">
+                <div class="col-2">คำนำหน้าชื่อ</div>
+                <div class="col-2">
+                  {{ children.childrenPrefix }}
+                </div>
+                <div class="col-1">ชื่อ</div>
+                <div class="col-2">
+                  {{ children.childrenFirstName }}
+                </div>
+                <div class="col-1">นามสกุล</div>
+                <div class="col-2">
+                  {{ children.childrenLastName }}
+                </div>
+                <div class="col-1">อาชีพ</div>
+                <div class="col">
+                  {{ children.childrenCareer }}
+                </div>
+              </div>
+              <div class="row items-center">
+                <div class="col-2">สถานภาพการมีชีวิต</div>
+                <div class="col">
+                  <div v-if="children.childrenLive">มีชีวิตอยู่</div>
+                  <div v-else>ถึงแก่กรรม</div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </div>
+      </div>
+      <div class="q-pa-sm flex flex-center">
+        <q-pagination v-model="index" :max="historyRows.length" input />
+      </div>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyHistory.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyHistory.vue
new file mode 100644
index 000000000..c4bcb93ac
--- /dev/null
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyHistory.vue
@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from "vue";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { QForm, useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = mixin;
+
+const historyRows = ref<any>([]);
+
+const historyDialog = defineModel<boolean>("historyDialog", { required: true });
+const id = defineModel<string>("id", { required: true });
+const index = ref<number>(10);
+function closeHistoryDialog() {
+  historyDialog.value = false;
+}
+
+async function fetchHistoryData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewFamilyHisByFamilyId(id))
+    .then(async (res) => {
+      console.log(res.data.result);
+      historyRows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+</script>
+
+<template>
+  <q-dialog v-model="historyDialog" class="dialog" persistent>
+    <q-card style="min-width: 70%" class="bg-white">
+      <q-card-section class="flex justify-between" style="padding: 0">
+        <dialog-header
+          tittle="ประวัติแก้ไขข้อมูลครอบครัว"
+          :close="closeHistoryDialog"
+        />
+      </q-card-section>
+      <q-separator color="grey-4" />
+      <div class="q-pa-md">
+        <div>
+          <div class="col-12 row q-pb-sm">
+            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
+              • บิดา
+            </div>
+          </div>
+          <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+            <div class="row items-center">
+              <div class="col-2">
+                <div>เลขบัตรประจำตัวประชาชน</div>
+              </div>
+              <div class="col">
+                {{ historyRows[index].fatherCitizenId }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">คำนำหน้าชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index].fatherPrefix }}
+              </div>
+              <div class="col-1">ชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index].fatherFirstName }}
+              </div>
+              <div class="col-1">นามสกุล</div>
+              <div class="col-2">
+                {{ historyRows[index].fatherLastName }}
+              </div>
+              <div class="col-1">อาชีพ</div>
+              <div class="col">
+                {{ historyRows[index].fatherCareer }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">สถานภาพการมีชีวิต</div>
+              <div class="col-10">
+                <div v-if="historyRows[index].fatherLive">มีชีวิตอยู่</div>
+                <div v-else>ถึงแก่กรรม</div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+        <div>
+          <div class="col-12 row q-pb-sm q-pt-md">
+            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
+              • มารดา
+            </div>
+          </div>
+          <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+            <div class="row items-center">
+              <div class="col-2">
+                <div>เลขบัตรประจำตัวประชาชน</div>
+              </div>
+              <div class="col">
+                {{ historyRows[index].motherCitizenId }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">คำนำหน้าชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index].motherPrefix }}
+              </div>
+              <div class="col-1">ชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index].motherFirstName }}
+              </div>
+              <div class="col-1">นามสกุล</div>
+              <div class="col-2">
+                {{ historyRows[index].motherLastName }}
+              </div>
+              <div class="col-1">อาชีพ</div>
+              <div class="col">
+                {{ historyRows[index].motherCareer }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">สถานภาพการมีชีวิต</div>
+              <div class="col">
+                <div v-if="historyRows[index].motherLive">มีชีวิตอยู่</div>
+                <div v-else>ถึงแก่กรรม</div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+        <div>
+          <div class="col-12 row q-pb-sm q-pt-md">
+            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
+              • คู่สมรส
+            </div>
+          </div>
+          <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+            <div class="row items-center">
+              <div class="col-2">
+                <div>เลขบัตรประจำตัวประชาชน</div>
+              </div>
+              <div class="col">
+                {{ historyRows[index].coupleCitizenId }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">คำนำหน้าชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index].couplePrefix }}
+              </div>
+              <div class="col-1">ชื่อ</div>
+              <div class="col-2">
+                {{ historyRows[index].firstName }}
+              </div>
+              <div class="col-1">นามสกุล</div>
+              <div class="col-2">
+                {{ historyRows[index].coupleLastName }}
+              </div>
+              <div class="col-1">อาชีพ</div>
+              <div class="col">
+                {{ historyRows[index].coupleCareer }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2">สถานภาพการมีชีวิต</div>
+              <div class="col">
+                <div v-if="historyRows[index].coupleLive">มีชีวิตอยู่</div>
+                <div v-else>ถึงแก่กรรม</div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+        <!-- <div>
+          <div class="col-12 row q-pb-sm q-pt-md">
+            <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
+              • บุตร
+            </div>
+          </div>
+          <div
+            v-for="(children, indexIn) in historyRows[index].children"
+            :key="index"
+          >
+            <div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
+              <div class="text-medium">บุตรคนที่ : {{ indexIn + 1 }}</div>
+            </div>
+            <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+              <div class="row items-center">
+                <div class="col-2">
+                  <div>เลขบัตรประจำตัวประชาชน</div>
+                </div>
+                <div class="col-10">
+                  {{ children.childrenCitizenId }}
+                </div>
+              </div>
+              <div class="row items-center">
+                <div class="col-2">คำนำหน้าชื่อ</div>
+                <div class="col-2">
+                  {{ children.childrenPrefix }}
+                </div>
+                <div class="col-1">ชื่อ</div>
+                <div class="col-2">
+                  {{ children.childrenFirstName }}
+                </div>
+                <div class="col-1">นามสกุล</div>
+                <div class="col-2">
+                  {{ children.childrenLastName }}
+                </div>
+                <div class="col-1">อาชีพ</div>
+                <div class="col">
+                  {{ children.childrenCareer }}
+                </div>
+              </div>
+              <div class="row items-center">
+                <div class="col-2">สถานภาพการมีชีวิต</div>
+                <div class="col">
+                  <div v-if="children.childrenLive">มีชีวิตอยู่</div>
+                  <div v-else>ถึงแก่กรรม</div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </div> -->
+      </div>
+    </q-card>
+  </q-dialog>
+</template>