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

---
 .../components/Tree/OrganizationDialog.vue    |   1 -
 .../Tree/OrganizationDialogAddEdit.vue        |   1 -
 .../components/StructureMain.vue              |   1 -
 .../04_registry/components/TableProfile.vue   |   5 +
 src/modules/04_registry/views/Main.vue        |   3 +
 .../detail/PersonalInformation/04_Family.vue  | 283 +++++++++++-------
 6 files changed, 184 insertions(+), 110 deletions(-)

diff --git a/src/modules/02_organizational/components/Tree/OrganizationDialog.vue b/src/modules/02_organizational/components/Tree/OrganizationDialog.vue
index 903076867..df18bbf64 100644
--- a/src/modules/02_organizational/components/Tree/OrganizationDialog.vue
+++ b/src/modules/02_organizational/components/Tree/OrganizationDialog.vue
@@ -332,7 +332,6 @@ import type {
   OrganizaOption,
   GovermentOption,
 } from "../../interface/index/Main";
-// import { log } from "console";
 
 // import { organizationSet } from "../interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
diff --git a/src/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue b/src/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue
index eaf9e81f5..b2d2e8bc6 100644
--- a/src/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue
+++ b/src/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue
@@ -309,7 +309,6 @@ import type {
   OrganizaOption,
   GovermentOption,
 } from "../../interface/index/Main";
-// import { log } from "console";
 
 import type { EnumStringMember } from "@babel/types";
 // import { organizationSet } from "../interface/index/Main";
diff --git a/src/modules/02_organizationalNew/components/StructureMain.vue b/src/modules/02_organizationalNew/components/StructureMain.vue
index 73aee3590..34ca9ca57 100644
--- a/src/modules/02_organizationalNew/components/StructureMain.vue
+++ b/src/modules/02_organizationalNew/components/StructureMain.vue
@@ -9,7 +9,6 @@ import { StructChart } from "structure-chart";
 import "structure-chart/structure-chart.css";
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
-import { log } from "console";
 
 const mixin = useCounterMixin();
 const store = useOrganizational();
diff --git a/src/modules/04_registry/components/TableProfile.vue b/src/modules/04_registry/components/TableProfile.vue
index 63904c425..3b689d0b8 100644
--- a/src/modules/04_registry/components/TableProfile.vue
+++ b/src/modules/04_registry/components/TableProfile.vue
@@ -15,6 +15,7 @@
     v-model:pagination="pagination"
   >
   <template v-slot:pagination="scope">
+    ทั้งหมด {{ props.total }} รายการ
       <q-pagination
         v-model="currentPage"
         active-color="primary"
@@ -531,6 +532,10 @@ const props = defineProps({
     type: Number,
     require: true,
   },
+  total: {
+    type: Number,
+    require: true,
+  },
 });
 
 const emit = defineEmits([
diff --git a/src/modules/04_registry/views/Main.vue b/src/modules/04_registry/views/Main.vue
index 84eb30de2..3cebf6316 100644
--- a/src/modules/04_registry/views/Main.vue
+++ b/src/modules/04_registry/views/Main.vue
@@ -85,6 +85,7 @@
             :onTab="changeTab"
             :rowsPerPage="rowsPerPage"
             :page="page"
+            :total="total"
             :maxPage="maxPage"
             @update:pagination="updatePagingProp"
             :rows-per-page-options="[50, 100, 200, 500]"
@@ -176,6 +177,7 @@ const { changeTreeRegister, selectedRegister, expandedRegister } = dataStore;
 const maxPage = ref<number>(1);
 const rowsPerPage = ref<number>(50);
 const page = ref<number>(1);
+const total = ref<number>(0)
 
 const mixin = useCounterMixin();
 const { date2Thai, messageError, typeRetire, showLoader, hideLoader } = mixin;
@@ -1375,6 +1377,7 @@ const doSearch = async () => {
     .then((res) => {
       let data = res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.totalRows / rowsPerPage.value);
+      total.value = res.data.result.totalRows
       rows.value = [];
       data.map((e: ResponseObject) => {
         rows.value.push({
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 5f8e42370..e4e0f1249 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
@@ -42,6 +42,17 @@ const fatherData = reactive({
   lastName: "",
   job: "",
 });
+
+const fatherDataEdit = reactive({
+  isHaveInfo: 1,
+  isLive: 0,
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  job: "",
+});
+
 const motherData = reactive({
   isHaveInfo: 1,
   isLive: 0,
@@ -51,6 +62,17 @@ const motherData = reactive({
   lastName: "",
   job: "",
 });
+
+const motherDataEdit = reactive({
+  isHaveInfo: 1,
+  isLive: 0,
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  job: "",
+});
+
 const spouseData = reactive({
   isHave: 1,
   isLive: 0,
@@ -61,35 +83,51 @@ const spouseData = reactive({
   job: "",
 });
 
+const spouseDataEdit = reactive({
+  isHave: 1,
+  isLive: 0,
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  job: "",
+});
+
 const rows = ref<any>([]);
 const historyRows = ref<any>([]);
 const prefixFilter = ref([]);
 const childrenData: any = reactive({
   childrens: [],
 });
+const childrenDataEdit: any = reactive({
+  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) => ({
+
+    fatherDataEdit.isHaveInfo = rows.fatherFirstName !== null ? 1 : 0;
+    fatherDataEdit.isLive = rows.fatherLive ? 1 : 0;
+    fatherDataEdit.citizenId = rows.fatherCitizenId;
+    fatherDataEdit.prefix = rows.fatherPrefix;
+    fatherDataEdit.firstName = rows.fatherFirstName;
+    fatherDataEdit.lastName = rows.fatherLastName;
+    fatherDataEdit.job = rows.fatherCareer;
+    motherDataEdit.isHaveInfo = rows.motherLive ? 1 : 0;
+    motherDataEdit.isLive = rows.firstName !== null ? 1 : 0;
+    motherDataEdit.citizenId = rows.motherCitizenId;
+    motherDataEdit.prefix = rows.motherPrefix;
+    motherDataEdit.firstName = rows.motherFirstName;
+    motherDataEdit.lastName = rows.motherLastName;
+    motherDataEdit.job = rows.motherCareer;
+    spouseDataEdit.isLive = rows.coupleFirstName !== null ? 1 : 0;
+    spouseDataEdit.citizenId = rows.coupleCitizenId;
+    spouseDataEdit.prefix = rows.couplePrefix;
+    spouseDataEdit.firstName = rows.coupleFirstName;
+    spouseDataEdit.lastName = rows.coupleLastName;
+    spouseDataEdit.job = rows.coupleCareer;
+    spouseDataEdit.isHave = rows.couple ? 1 : 0;
+    childrenDataEdit.childrens = rows.children.map((e: any) => ({
       ...e,
       childrenLive: e.childrenLive ? 1 : 0,
     }));
@@ -101,9 +139,32 @@ async function fetchData(id: string) {
   await http
     .get(config.API.profileNewFamilyByProfileId(id))
     .then(async (res) => {
+      const data = res.data.result;
       rows.value = res.data.result;
       if (rows.value !== null) {
-        editForm(rows.value);
+        fatherData.isLive = data.fatherLive ? 1 : 0;
+        fatherData.citizenId = data.fatherCitizenId;
+        fatherData.prefix = data.fatherPrefix;
+        fatherData.firstName = data.fatherFirstName;
+        fatherData.lastName = data.fatherLastName;
+        fatherData.job = data.fatherCareer;
+        motherData.isLive = data.motherLive ? 1 : 0;
+        motherData.citizenId = data.motherCitizenId;
+        motherData.prefix = data.motherPrefix;
+        motherData.firstName = data.motherFirstName;
+        motherData.lastName = data.motherLastName;
+        motherData.job = data.motherCareer;
+        spouseData.isLive = data.coupleLive ? 1 : 0;
+        spouseData.citizenId = data.coupleCitizenId;
+        spouseData.prefix = data.couplePrefix;
+        spouseData.firstName = data.coupleFirstName;
+        spouseData.lastName = data.coupleLastName;
+        spouseData.job = data.coupleCareer;
+        spouseData.isHave = data.couple ? 1 : 0;
+        childrenData.childrens = data.children.map((e: any) => ({
+          ...e,
+          childrenLive: e.childrenLive ? 1 : 0,
+        }));
       }
     })
     .catch((err) => {
@@ -132,13 +193,13 @@ async function fetchHistoryData(id: string) {
 }
 
 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) => ({
+  fatherIsHaveInfo.value = fatherDataEdit.isHaveInfo === 1 ? true : false;
+  motherIsHaveInfo.value = motherDataEdit.isHaveInfo === 1 ? true : false;
+  spouseIsHave.value = spouseDataEdit.isHave === 1 ? true : false;
+  fatherIsLive.value = fatherDataEdit.isLive === 1 ? true : false;
+  motherIsLive.value = motherDataEdit.isLive === 1 ? true : false;
+  spouseIsLive.value = spouseDataEdit.isLive === 1 ? true : false;
+  const children = childrenDataEdit.childrens.map((e: any) => ({
     childrenLive: !!e.childrenLive,
     childrenCareer: e.childrenCareer,
     childrenCitizenId: e.childrenCitizenId,
@@ -156,24 +217,24 @@ async function addData() {
   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,
+    motherCitizenId: motherIsHaveInfo.value ? motherDataEdit.citizenId : null,
+    motherPrefix: motherIsHaveInfo.value ? motherDataEdit.prefix : null,
+    motherFirstName: motherIsHaveInfo.value ? motherDataEdit.firstName : null,
+    motherLastName: motherIsHaveInfo.value ? motherDataEdit.lastName : null,
+    motherCareer: motherIsHaveInfo.value ? motherDataEdit.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,
+    fatherCitizenId: fatherIsHaveInfo.value ? fatherDataEdit.citizenId : null,
+    fatherPrefix: fatherIsHaveInfo.value ? fatherDataEdit.prefix : null,
+    fatherFirstName: fatherIsHaveInfo.value ? fatherDataEdit.firstName : null,
+    fatherLastName: fatherIsHaveInfo.value ? fatherDataEdit.lastName : null,
+    fatherCareer: fatherIsHaveInfo.value ? fatherDataEdit.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,
+    coupleCitizenId: spouseIsHave.value ? spouseDataEdit.citizenId : null,
+    couplePrefix: spouseIsHave.value ? spouseDataEdit.prefix : null,
+    coupleFirstName: spouseIsHave.value ? spouseDataEdit.firstName : null,
+    coupleLastName: spouseIsHave.value ? spouseDataEdit.lastName : null,
+    coupleLastNameOld: spouseIsHave.value ? spouseDataEdit.lastName : null,
+    coupleCareer: spouseIsHave.value ? spouseDataEdit.job : null,
     couple: spouseIsHave.value,
     children: children,
   })
@@ -213,7 +274,7 @@ async function onSubmit() {
 }
 
 const addChildren = async () => {
-  childrenData.childrens.push({
+  childrenDataEdit.childrens.push({
     childrenLive: 0,
     childrenCitizenId: "",
     childrenPrefix: "",
@@ -225,9 +286,9 @@ const addChildren = async () => {
 };
 
 function deleteChildren(items: any) {
-  const index = childrenData.childrens.findIndex((r: any) => r.id == items.id);
+  const index = childrenDataEdit.childrens.findIndex((r: any) => r.id == items.id);
 
-  childrenData.childrens.splice(index, 1);
+  childrenDataEdit.childrens.splice(index, 1);
 }
 
 onMounted(async () => {
@@ -279,7 +340,7 @@ onMounted(async () => {
         >
       </div>
     </div>
-    <div v-if="fatherData.isHaveInfo">
+    <div v-if="fatherData.firstName !== null">
       <div class="col-12 row q-pb-sm">
         <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
           • บิดา
@@ -321,7 +382,7 @@ onMounted(async () => {
         </div>
       </q-card>
     </div>
-    <div v-if="motherData.isHaveInfo">
+    <div v-if="motherData.firstName !== null">
       <div class="col-12 row q-pb-sm q-pt-md">
         <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
           • มารดา
@@ -363,7 +424,7 @@ onMounted(async () => {
         </div>
       </q-card>
     </div>
-    <div v-if="spouseData.isHave">
+    <div v-if="spouseData.firstName !== null">
       <div class="col-12 row q-pb-sm q-pt-md">
         <div class="q-mr-md text-weight-bold text-primary text-subtitle1">
           • คู่สมรส
@@ -479,7 +540,7 @@ onMounted(async () => {
               </div>
               <div class="flex q-gutter-sm">
                 <q-radio
-                  v-model="fatherData.isHaveInfo"
+                  v-model="fatherDataEdit.isHaveInfo"
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="1"
@@ -488,7 +549,7 @@ onMounted(async () => {
                   color="primary"
                 />
                 <q-radio
-                  v-model="fatherData.isHaveInfo"
+                  v-model="fatherDataEdit.isHaveInfo"
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="0"
@@ -498,16 +559,20 @@ onMounted(async () => {
                 />
               </div>
             </div>
-            <q-card bordered class="bg-grey-1 q-pa-md">
+            <q-card
+              v-if="fatherDataEdit.isHaveInfo"
+              bordered
+              class="bg-grey-1 q-pa-md"
+            >
               <div class="row q-col-gutter-md">
                 <div class="col">
                   <q-input
-                    :disable="!fatherData.isHaveInfo"
+                    :disable="!fatherDataEdit.isHaveInfo"
                     outlined
                     hide-bottom-space
                     bg-color="white"
                     dense
-                    v-model="fatherData.citizenId"
+                    v-model="fatherDataEdit.citizenId"
                     :label="`${'เลขประจำตัวประชาชน'}`"
                     maxlength="13"
                     :rules="[
@@ -519,7 +584,7 @@ onMounted(async () => {
                 </div>
                 <div class="col">
                   <q-select
-                    :disable="!fatherData.isHaveInfo"
+                    :disable="!fatherDataEdit.isHaveInfo"
                     outlined
                     bg-color="white"
                     lazy-rules
@@ -528,7 +593,7 @@ onMounted(async () => {
                     class="inputgreen"
                     :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
                     label="คำนำหน้าชื่อ"
-                    v-model="fatherData.prefix"
+                    v-model="fatherDataEdit.prefix"
                     use-input
                     input-debounce="0"
                     emit-value
@@ -543,13 +608,13 @@ onMounted(async () => {
                 </div>
                 <div class="col">
                   <q-input
-                    :disable="!fatherData.isHaveInfo"
+                    :disable="!fatherDataEdit.isHaveInfo"
                     outlined
                     dense
                     bg-color="white"
                     class="inputgreen"
                     lazy-rules
-                    v-model="fatherData.firstName"
+                    v-model="fatherDataEdit.firstName"
                     :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
                     label="ชื่อ"
                     hidden-space
@@ -557,25 +622,25 @@ onMounted(async () => {
                 </div>
                 <div class="col">
                   <q-input
-                    :disable="!fatherData.isHaveInfo"
+                    :disable="!fatherDataEdit.isHaveInfo"
                     outlined
                     dense
                     class="inputgreen"
                     bg-color="white"
                     lazy-rules
-                    v-model="fatherData.lastName"
+                    v-model="fatherDataEdit.lastName"
                     :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
                     label="นามสกุล"
                   />
                 </div>
                 <div class="col">
                   <q-input
-                    :disable="!fatherData.isHaveInfo"
+                    :disable="!fatherDataEdit.isHaveInfo"
                     outlined
                     dense
                     class="inputgreen"
                     bg-color="white"
-                    v-model="fatherData.job"
+                    v-model="fatherDataEdit.job"
                     label="อาชีพ"
                   />
                 </div>
@@ -584,23 +649,23 @@ onMounted(async () => {
                 <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
                 <div>
                   <q-radio
-                    :disable="!fatherData.isHaveInfo"
+                    :disable="!fatherDataEdit.isHaveInfo"
                     class="q-mr-sm"
-                    v-model="fatherData.isLive"
+                    v-model="fatherDataEdit.isLive"
                     checked-icon="task_alt"
                     unchecked-icon="panorama_fish_eye"
                     :val="1"
                     label="ยังมีชีวิตอยู่"
                     dense
-                    :color="!fatherData.isHaveInfo ? 'grey' : 'primary'"
+                    :color="!fatherDataEdit.isHaveInfo ? 'grey' : 'primary'"
                   />
                   <q-radio
-                    :disable="!fatherData.isHaveInfo"
-                    v-model="fatherData.isLive"
+                    :disable="!fatherDataEdit.isHaveInfo"
+                    v-model="fatherDataEdit.isLive"
                     checked-icon="task_alt"
                     unchecked-icon="panorama_fish_eye"
                     :val="0"
-                    :color="!fatherData.isHaveInfo ? 'grey' : 'red'"
+                    :color="!fatherDataEdit.isHaveInfo ? 'grey' : 'red'"
                     label="ถึงแก่กรรม"
                     dense
                   />
@@ -615,7 +680,7 @@ onMounted(async () => {
               </div>
               <div class="flex q-gutter-sm">
                 <q-radio
-                  v-model="motherData.isHaveInfo"
+                  v-model="motherDataEdit.isHaveInfo"
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="1"
@@ -624,7 +689,7 @@ onMounted(async () => {
                   color="primary"
                 />
                 <q-radio
-                  v-model="motherData.isHaveInfo"
+                  v-model="motherDataEdit.isHaveInfo"
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="0"
@@ -634,16 +699,20 @@ onMounted(async () => {
                 />
               </div>
             </div>
-            <q-card bordered class="bg-grey-1 q-pa-md">
+            <q-card
+              v-if="motherDataEdit.isHaveInfo"
+              bordered
+              class="bg-grey-1 q-pa-md"
+            >
               <div class="row q-col-gutter-md">
                 <div class="col">
                   <q-input
-                    :disable="!motherData.isHaveInfo"
+                    :disable="!motherDataEdit.isHaveInfo"
                     outlined
                     hide-bottom-space
                     bg-color="white"
                     dense
-                    v-model="motherData.citizenId"
+                    v-model="motherDataEdit.citizenId"
                     :label="`${'เลขประจำตัวประชาชน'}`"
                     maxlength="13"
                     :rules="[
@@ -655,12 +724,12 @@ onMounted(async () => {
                 </div>
                 <div class="col">
                   <q-select
-                    :disable="!motherData.isHaveInfo"
+                    :disable="!motherDataEdit.isHaveInfo"
                     outlined
                     bg-color="white"
                     lazy-rules
                     dense
-                    v-model="motherData.prefix"
+                    v-model="motherDataEdit.prefix"
                     :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
                     label="คำนำหน้าชื่อ"
                     hidden-space
@@ -679,13 +748,13 @@ onMounted(async () => {
                 </div>
                 <div class="col">
                   <q-input
-                    :disable="!motherData.isHaveInfo"
+                    :disable="!motherDataEdit.isHaveInfo"
                     outlined
                     dense
                     class="inputgreen"
                     bg-color="white"
                     lazy-rules
-                    v-model="motherData.firstName"
+                    v-model="motherDataEdit.firstName"
                     :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
                     label="ชื่อ"
                     hidden-space
@@ -693,25 +762,25 @@ onMounted(async () => {
                 </div>
                 <div class="col">
                   <q-input
-                    :disable="!motherData.isHaveInfo"
+                    :disable="!motherDataEdit.isHaveInfo"
                     outlined
                     class="inputgreen"
                     dense
                     bg-color="white"
                     lazy-rules
-                    v-model="motherData.lastName"
+                    v-model="motherDataEdit.lastName"
                     :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
                     label="นามสกุล"
                   />
                 </div>
                 <div class="col">
                   <q-input
-                    :disable="!motherData.isHaveInfo"
+                    :disable="!motherDataEdit.isHaveInfo"
                     outlined
                     class="inputgreen"
                     dense
                     bg-color="white"
-                    v-model="motherData.job"
+                    v-model="motherDataEdit.job"
                     label="อาชีพ"
                   />
                 </div>
@@ -720,23 +789,23 @@ onMounted(async () => {
                 <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
                 <div>
                   <q-radio
-                    :disable="!motherData.isHaveInfo"
+                    :disable="!motherDataEdit.isHaveInfo"
                     class="q-mr-sm"
-                    v-model="motherData.isLive"
+                    v-model="motherDataEdit.isLive"
                     checked-icon="task_alt"
                     unchecked-icon="panorama_fish_eye"
                     :val="1"
                     label="ยังมีชีวิตอยู่"
                     dense
-                    :color="!motherData.isHaveInfo ? 'grey' : 'primary'"
+                    :color="!motherDataEdit.isHaveInfo ? 'grey' : 'primary'"
                   />
                   <q-radio
-                    :disable="!motherData.isHaveInfo"
-                    v-model="motherData.isLive"
+                    :disable="!motherDataEdit.isHaveInfo"
+                    v-model="motherDataEdit.isLive"
                     checked-icon="task_alt"
                     unchecked-icon="panorama_fish_eye"
                     :val="0"
-                    :color="!motherData.isHaveInfo ? 'grey' : 'red'"
+                    :color="!motherDataEdit.isHaveInfo ? 'grey' : 'red'"
                     label="ถึงแก่กรรม"
                     dense
                   />
@@ -751,7 +820,7 @@ onMounted(async () => {
               </div>
               <div class="flex q-gutter-sm">
                 <q-radio
-                  v-model="spouseData.isHave"
+                  v-model="spouseDataEdit.isHave"
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="1"
@@ -760,7 +829,7 @@ onMounted(async () => {
                   color="primary"
                 />
                 <q-radio
-                  v-model="spouseData.isHave"
+                  v-model="spouseDataEdit.isHave"
                   checked-icon="task_alt"
                   unchecked-icon="panorama_fish_eye"
                   :val="0"
@@ -770,17 +839,17 @@ onMounted(async () => {
                 />
               </div>
             </div>
-            <q-card v-if="spouseData.isHave" bordered class="bg-grey-1 q-pa-md">
+            <q-card v-if="spouseDataEdit.isHave" bordered class="bg-grey-1 q-pa-md">
               <div class="row q-col-gutter-md">
                 <div class="col">
                   <q-input
-                    :disable="!spouseData.isHave"
+                    :disable="!spouseDataEdit.isHave"
                     outlined
                     hide-bottom-space
                     bg-color="white"
                     dense
                     class="inputgreen"
-                    v-model="spouseData.citizenId"
+                    v-model="spouseDataEdit.citizenId"
                     :label="`${'เลขประจำตัวประชาชน'}`"
                     maxlength="13"
                     :rules="[
@@ -791,13 +860,13 @@ onMounted(async () => {
                 </div>
                 <div class="col">
                   <q-select
-                    :disable="!spouseData.isHave"
+                    :disable="!spouseDataEdit.isHave"
                     outlined
                     class="inputgreen"
                     bg-color="white"
                     lazy-rules
                     dense
-                    v-model="spouseData.prefix"
+                    v-model="spouseDataEdit.prefix"
                     :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
                     label="คำนำหน้าชื่อ"
                     hidden-space
@@ -815,13 +884,13 @@ onMounted(async () => {
                 </div>
                 <div class="col">
                   <q-input
-                    :disable="!spouseData.isHave"
+                    :disable="!spouseDataEdit.isHave"
                     outlined
                     class="inputgreen"
                     dense
                     bg-color="white"
                     lazy-rules
-                    v-model="spouseData.firstName"
+                    v-model="spouseDataEdit.firstName"
                     :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
                     label="ชื่อ"
                     hidden-space
@@ -829,25 +898,25 @@ onMounted(async () => {
                 </div>
                 <div class="col">
                   <q-input
-                    :disable="!spouseData.isHave"
+                    :disable="!spouseDataEdit.isHave"
                     outlined
                     dense
                     class="inputgreen"
                     bg-color="white"
                     lazy-rules
-                    v-model="spouseData.lastName"
+                    v-model="spouseDataEdit.lastName"
                     :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
                     label="นามสกุล"
                   />
                 </div>
                 <div class="col">
                   <q-input
-                    :disable="!spouseData.isHave"
+                    :disable="!spouseDataEdit.isHave"
                     outlined
                     dense
                     class="inputgreen"
                     bg-color="white"
-                    v-model="spouseData.job"
+                    v-model="spouseDataEdit.job"
                     label="อาชีพ"
                   />
                 </div>
@@ -856,19 +925,19 @@ onMounted(async () => {
                 <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
                 <div>
                   <q-radio
-                    :disable="!spouseData.isHave"
+                    :disable="!spouseDataEdit.isHave"
                     class="q-mr-sm"
-                    v-model="spouseData.isLive"
+                    v-model="spouseDataEdit.isLive"
                     checked-icon="task_alt"
                     unchecked-icon="panorama_fish_eye"
                     :val="1"
                     label="ยังมีชีวิตอยู่"
                     dense
-                    :color="!spouseData.isHave ? 'grey' : 'primary'"
+                    :color="!spouseDataEdit.isHave ? 'grey' : 'primary'"
                   />
                   <q-radio
-                    :disable="!spouseData.isHave"
-                    v-model="spouseData.isLive"
+                    :disable="!spouseDataEdit.isHave"
+                    v-model="spouseDataEdit.isLive"
                     checked-icon="task_alt"
                     unchecked-icon="panorama_fish_eye"
                     :val="0"
@@ -896,7 +965,7 @@ onMounted(async () => {
                 <q-tooltip> เพิ่มข้อมูล </q-tooltip>
               </q-btn>
             </div>
-            <div v-for="(items, index) in childrenData.childrens" :key="index">
+            <div v-for="(items, index) in childrenDataEdit.childrens" :key="index">
               <div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
                 <div class="text-medium q-pl-md">
                   บุตรคนที่ : {{ index + 1 }}