From 33ea044678b16e9d1641400d6e7e58be9851652c Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Wed, 13 Mar 2024 15:06:47 +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=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=AD=E0=B8=9A=E0=B8=84=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  | 1309 +++++++++--------
 1 file changed, 676 insertions(+), 633 deletions(-)

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 93004daae..e941320c2 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
@@ -12,42 +12,68 @@ const formRef = ref<QForm | null>(null);
 
 const dialog = ref<boolean>(false);
 const historyDialog = ref<boolean>(false);
-const fatherPrefixRef = ref<any>(null);
-const fatherFirstNameRef = ref<any>(null);
-const fatherLastNameRef = ref<any>(null);
-const fatherData = reactive({
-  isHaveInfo: 0,
+const fatherMockData = {
+  isHaveInfo: 1,
   isDead: false,
-  citizenId: null,
-  prefix: null,
+  citizenId: "1596079203945",
+  prefix: "นาย",
   optionPrefix: ["นาย", "จ่าสิบเอก"],
-  firstName: null,
-  lastName: null,
-  job: null,
+  firstName: "เมฐาพงศ์",
+  lastName: "ดิษยบุตร",
+  job: "ตำรวจ",
+};
+const fatherData = reactive({
+  isHaveInfo: 1,
+  isDead: 0,
+  citizenId: "1-1345-67891-01-2",
+  prefix: "นาย",
+  optionPrefix: ["นาย", "จ่าสิบเอก"],
+  firstName: "ณัฐพัฐ",
+  lastName: "ดิษยบุตร",
+  job: "ตำรวจ",
 });
 const motherData = reactive({
   isHaveInfo: 0,
-  isDead: false,
-  citizenId: null,
-  prefix: null,
+  isDead: 0,
+  citizenId: "1-1345-67891-01-2",
+  prefix: "นาง",
   optionPrefix: ["นาง", "นางสาว"],
-  firstName: null,
-  lastName: null,
-  job: null,
+  firstName: "นางอริญกัญญา",
+  lastName: "ดิษยบุตร",
+  job: "พยาบาล",
 });
 const spouseData = reactive({
-  isHave: 0,
-  isDead: false,
-  citizenId: null,
-  prefix: null,
+  isHave: 1,
+  isDead: 0,
+  citizenId: "4-1325-12312-01-3",
+  prefix: "นาย",
   optionPrefix: ["นาย", "นาง", "นางสาว"],
-  firstName: null,
-  lastName: null,
-  job: null,
+  firstName: "กัญจาพล",
+  lastName: "ดิอุรุกษา",
+  job: "ค้าขาย",
 });
 
 const childrenData: any = reactive({
-  childrens: [],
+  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,
@@ -104,8 +130,7 @@ function deleteChildren(items: any) {
 
 <template>
   <div>
-    <div class="flex justify-between">
-      <div class="toptitle col text-dark">ข้อมูลครอบครัว</div>
+    <div class="flex justify-end">
       <div>
         <q-btn
           round
@@ -115,7 +140,7 @@ function deleteChildren(items: any) {
           size="14px"
           @click="dialog = true"
         >
-          <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
+          <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
         >
         <q-btn
           round
@@ -125,331 +150,227 @@ function deleteChildren(items: any) {
           size="14px"
           @click="historyDialog = true"
         >
-          <q-tooltip>ประวัติ</q-tooltip></q-btn
+          <q-tooltip>ประวัติการแก้ไข</q-tooltip></q-btn
         >
       </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>
-    </div>
-    <div class="flex q-gutter-sm">
-      <q-input
-        class="col"
-        outlined
-        hide-bottom-space
-        dense
-        :readonly="true"
-        v-model="fatherData.citizenId"
-        :label="`${'เลขประจำตัวประชาชน'}`"
-        maxlength="13"
-        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="13"
-        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
-          />
+    <div v-if="fatherData.isHaveInfo">
+      <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 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>
+      <div class="bg-grey-1 q-gutter-md q-mb-lg">
+        <div class="row items-center">
+          <div class="col-2">
+            <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]
+              }`
+            }}
+          </div>
+        </div>
+        <div class="row items-center">
+          <div class="col-2">คำนำหน้าชื่อ</div>
+          <div class="col-2">
+            {{ fatherData.prefix }}
+          </div>
+          <div class="col-1">ชื่อ</div>
+          <div class="col-2">
+            {{ fatherData.firstName }}
+          </div>
+          <div class="col-1">นามสกุล</div>
+          <div class="col-2">
+            {{ fatherData.lastName }}
+          </div>
+          <div class="col-1">อาชีพ</div>
+          <div class="col">
+            {{ fatherData.job }}
+          </div>
+        </div>
+        <div class="row items-center">
+          <div class="col-2">สถานภาพการมีชีวิต</div>
+          <div class="col">
+            <div v-if="fatherData.isDead">มีชีวิตอยู่</div>
+            <div v-else>ถึงแก่กรรม</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="motherData.isHaveInfo">
+      <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 class="bg-grey-1 q-gutter-md q-mb-lg">
+        <div class="row items-center">
+          <div class="col-2">
+            <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]
+              }`
+            }}
+          </div>
+        </div>
+        <div class="row items-center">
+          <div class="col-2">คำนำหน้าชื่อ</div>
+          <div class="col-2">
+            {{ motherData.prefix }}
+          </div>
+          <div class="col-1">ชื่อ</div>
+          <div class="col-2">
+            {{ motherData.firstName }}
+          </div>
+          <div class="col-1">นามสกุล</div>
+          <div class="col-2">
+            {{ motherData.lastName }}
+          </div>
+          <div class="col-1">อาชีพ</div>
+          <div class="col">
+            {{ motherData.job }}
+          </div>
+        </div>
+        <div class="row items-center">
+          <div class="col-2">สถานภาพการมีชีวิต</div>
+          <div class="col">
+            <div v-if="motherData.isDead">มีชีวิตอยู่</div>
+            <div v-else>ถึงแก่กรรม</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="spouseData.isHave">
+      <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 class="bg-grey-1 q-gutter-md q-mb-lg">
+        <div class="row items-center">
+          <div class="col-2">
+            <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]
+              }`
+            }}
+          </div>
+        </div>
+        <div class="row items-center">
+          <div class="col-2">คำนำหน้าชื่อ</div>
+          <div class="col-2">
+            {{ spouseData.prefix }}
+          </div>
+          <div class="col-1">ชื่อ</div>
+          <div class="col-2">
+            {{ spouseData.firstName }}
+          </div>
+          <div class="col-1">นามสกุล</div>
+          <div class="col-2">
+            {{ spouseData.lastName }}
+          </div>
+          <div class="col-1">อาชีพ</div>
+          <div class="col">
+            {{ spouseData.job }}
+          </div>
+        </div>
+        <div class="row items-center">
+          <div class="col-2">สถานภาพการมีชีวิต</div>
+          <div class="col">
+            <div v-if="spouseData.isDead">มีชีวิตอยู่</div>
+            <div v-else>ถึงแก่กรรม</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="childrenData.childrens[0] !== undefined">
+      <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, index) in childrenData.childrens" :key="index">
+        <div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
+          <div class="text-medium">บุตรคนที่ : {{ index + 1 }}</div>
+        </div>
+        <div class="bg-grey-1 q-gutter-md q-mb-lg">
+          <div class="row items-center">
+            <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>
+          </div>
+          <div class="row items-center">
+            <div class="col-2">คำนำหน้าชื่อ</div>
+            <div class="col-2">
+              {{ children.prefix }}
+            </div>
+            <div class="col-1">ชื่อ</div>
+            <div class="col-2">
+              {{ children.firstName }}
+            </div>
+            <div class="col-1">นามสกุล</div>
+            <div class="col-2">
+              {{ children.lastName }}
+            </div>
+            <div class="col-1">อาชีพ</div>
+            <div class="col">
+              {{ children.job }}
+            </div>
+          </div>
+          <div class="row items-center">
+            <div class="col-2">สถานภาพการมีชีวิต</div>
+            <div class="col">
+              <div v-if="children.isDead">มีชีวิตอยู่</div>
+              <div v-else>ถึงแก่กรรม</div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   </div>
+
   <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 70%" class="bg-grey-11">
+    <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="closeDialog" />
@@ -458,7 +379,11 @@ function deleteChildren(items: any) {
         <q-separator color="grey-4" />
         <q-card-section>
           <div class="col-12 row q-pb-sm q-pt-md">
-            <div class="q-mr-md text-weight-bold">• บิดา</div>
+            <div
+              class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
+            >
+              • บิดา
+            </div>
             <div class="flex q-gutter-sm">
               <q-radio
                 v-model="fatherData.isHaveInfo"
@@ -478,78 +403,106 @@ function deleteChildren(items: any) {
                 label="ไม่มีข้อมูล"
                 dense
               />
-              <q-separator color="grey-4" vertical />
-              <q-checkbox
-                :disable="!fatherData.isHaveInfo"
-                outline
-                v-model="fatherData.isDead"
-                label="เสียชีวิตแล้ว"
-                color="red"
-                dense
-              />
             </div>
           </div>
-          <div class="flex q-gutter-sm">
-            <q-input
-              :disable="!fatherData.isHaveInfo"
-              class="col"
-              outlined
-              hide-bottom-space
-              bg-color="white"
-              dense
-              v-model="fatherData.citizenId"
-              :label="`${'เลขประจำตัวประชาชน'}`"
-              maxlength="13"
-              mask="#############"
-            />
-            <q-select
-              :disable="!fatherData.isHaveInfo"
-              class="col"
-              outlined
-              bg-color="white"
-              lazy-rules
-              dense
-              v-model="fatherData.prefix"
-              :options="fatherData.optionPrefix"
-              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-              label="คำนำหน้าชื่อ"
-              hidden-space
-            />
-            <q-input
-              :disable="!fatherData.isHaveInfo"
-              class="col"
-              outlined
-              dense
-              bg-color="white"
-              lazy-rules
-              v-model="fatherData.firstName"
-              :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
-              label="ชื่อ"
-              hidden-space
-            />
-            <q-input
-              :disable="!fatherData.isHaveInfo"
-              class="col"
-              outlined
-              dense
-              bg-color="white"
-              lazy-rules
-              v-model="fatherData.lastName"
-              :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
-              label="นามสกุล"
-            />
-            <q-input
-              :disable="!fatherData.isHaveInfo"
-              class="col"
-              outlined
-              dense
-              bg-color="white"
-              v-model="fatherData.job"
-              label="อาชีพ"
-            />
-          </div>
+          <q-card-section class="bg-grey-1">
+            <div class="row q-col-gutter-md">
+              <div class="col">
+                <q-input
+                  :disable="!fatherData.isHaveInfo"
+                  outlined
+                  hide-bottom-space
+                  bg-color="white"
+                  dense
+                  v-model="fatherData.citizenId"
+                  :label="`${'เลขประจำตัวประชาชน'}`"
+                  maxlength="17"
+                  mask="#-####-#####-##-#"
+                />
+              </div>
+              <div class="col">
+                <q-select
+                  :disable="!fatherData.isHaveInfo"
+                  outlined
+                  bg-color="white"
+                  lazy-rules
+                  dense
+                  v-model="fatherData.prefix"
+                  :options="fatherData.optionPrefix"
+                  :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+                  label="คำนำหน้าชื่อ"
+                  hidden-space
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!fatherData.isHaveInfo"
+                  outlined
+                  dense
+                  bg-color="white"
+                  lazy-rules
+                  v-model="fatherData.firstName"
+                  :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+                  label="ชื่อ"
+                  hidden-space
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!fatherData.isHaveInfo"
+                  outlined
+                  dense
+                  bg-color="white"
+                  lazy-rules
+                  v-model="fatherData.lastName"
+                  :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+                  label="นามสกุล"
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!fatherData.isHaveInfo"
+                  outlined
+                  dense
+                  bg-color="white"
+                  v-model="fatherData.job"
+                  label="อาชีพ"
+                />
+              </div>
+            </div>
+            <div class="row q-gutter-md">
+              <div>สถานภาพการมีชีวิต</div>
+              <div class>
+                <q-radio
+                  :disable="!fatherData.isHaveInfo"
+                  class="q-mr-sm"
+                  v-model="fatherData.isDead"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="1"
+                  label="ยังมีชีวิตอยู่"
+                  dense
+                  :color="!fatherData.isHaveInfo ? 'grey' : 'primary'"
+                />
+                <q-radio
+                  :disable="!fatherData.isHaveInfo"
+                  v-model="fatherData.isDead"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="0"
+                  :color="!fatherData.isHaveInfo ? 'grey' : 'red'"
+                  label="ถึงแก่กรรม"
+                  dense
+                />
+              </div>
+            </div>
+          </q-card-section>
           <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="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
+            >
+              • มารดา
+            </div>
             <div class="flex q-gutter-sm">
               <q-radio
                 v-model="motherData.isHaveInfo"
@@ -569,76 +522,106 @@ function deleteChildren(items: any) {
                 label="ไม่มีข้อมูล"
                 dense
               />
-              <q-separator color="grey-4" vertical />
-              <q-checkbox
-                :disable="!motherData.isHaveInfo"
-                outline
-                v-model="motherData.isDead"
-                label="เสียชีวิตแล้ว"
-                color="red"
-                dense
-              />
             </div>
           </div>
-          <div class="flex q-gutter-sm">
-            <q-input
-              :disable="!motherData.isHaveInfo"
-              class="col"
-              outlined
-              hide-bottom-space
-              dense
-              bg-color="white"
-              v-model="motherData.citizenId"
-              :label="`${'เลขประจำตัวประชาชน'}`"
-              maxlength="13"
-              mask="#############"
-            />
-            <q-select
-              :disable="!motherData.isHaveInfo"
-              class="col"
-              outlined
-              dense
-              v-model="motherData.prefix"
-              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-              lazy-rules
-              bg-color="white"
-              :options="motherData.optionPrefix"
-              label="คำนำหน้าชื่อ"
-            />
-            <q-input
-              :disable="!motherData.isHaveInfo"
-              class="col"
-              outlined
-              bg-color="white"
-              :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
-              dense
-              lazy-rules
-              v-model="motherData.firstName"
-              label="ชื่อ"
-            />
-            <q-input
-              :disable="!motherData.isHaveInfo"
-              :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
-              class="col"
-              outlined
-              bg-color="white"
-              lazy-rules
-              dense
-              v-model="motherData.lastName"
-              label="นามสกุล"
-            />
-            <q-input
-              :disable="!motherData.isHaveInfo"
-              class="col"
-              outlined
-              bg-color="white"
-              dense
-              v-model="motherData.job"
-              label="อาชีพ"
-            />
-          </div>
+          <q-card-section class="bg-grey-1">
+            <div class="row q-col-gutter-md">
+              <div class="col">
+                <q-input
+                  :disable="!motherData.isHaveInfo"
+                  outlined
+                  hide-bottom-space
+                  bg-color="white"
+                  dense
+                  v-model="motherData.citizenId"
+                  :label="`${'เลขประจำตัวประชาชน'}`"
+                  maxlength="17"
+                  mask="#-####-#####-##-#"
+                />
+              </div>
+              <div class="col">
+                <q-select
+                  :disable="!motherData.isHaveInfo"
+                  outlined
+                  bg-color="white"
+                  lazy-rules
+                  dense
+                  v-model="motherData.prefix"
+                  :options="motherData.optionPrefix"
+                  :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+                  label="คำนำหน้าชื่อ"
+                  hidden-space
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!motherData.isHaveInfo"
+                  outlined
+                  dense
+                  bg-color="white"
+                  lazy-rules
+                  v-model="motherData.firstName"
+                  :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+                  label="ชื่อ"
+                  hidden-space
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!motherData.isHaveInfo"
+                  outlined
+                  dense
+                  bg-color="white"
+                  lazy-rules
+                  v-model="motherData.lastName"
+                  :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+                  label="นามสกุล"
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!motherData.isHaveInfo"
+                  outlined
+                  dense
+                  bg-color="white"
+                  v-model="motherData.job"
+                  label="อาชีพ"
+                />
+              </div>
+            </div>
+            <div class="row q-gutter-md">
+              <div>สถานภาพการมีชีวิต</div>
+              <div class="">
+                <q-radio
+                  :disable="!motherData.isHaveInfo"
+                  class="q-mr-sm"
+                  v-model="motherData.isDead"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="1"
+                  label="ยังมีชัวิตอยู่"
+                  dense
+                  :color="!motherData.isHaveInfo ? 'grey' : 'primary'"
+                />
+                <q-radio
+                  :disable="!motherData.isHaveInfo"
+                  v-model="motherData.isDead"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="0"
+                  :color="!motherData.isHaveInfo ? 'grey' : 'red'"
+                  label="ถึงแก่กรรม"
+                  dense
+                />
+              </div>
+            </div>
+          </q-card-section>
           <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="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
+            >
+              • คู่สมรส
+            </div>
             <div class="flex q-gutter-sm">
               <q-radio
                 v-model="spouseData.isHave"
@@ -658,161 +641,220 @@ function deleteChildren(items: any) {
                 label="ไม่มี"
                 dense
               />
-              <q-separator color="grey-4" vertical />
-              <q-checkbox
-                :disable="!spouseData.isHave"
-                outline
-                v-model="spouseData.isDead"
-                label="เสียชีวิตแล้ว"
-                color="red"
-                dense
-              />
             </div>
           </div>
-          <div class="flex q-gutter-sm">
-            <q-input
-              class="col"
-              :disable="!spouseData.isHave"
-              outlined
-              hide-bottom-space
-              dense
-              bg-color="white"
-              v-model="spouseData.citizenId"
-              :label="`${'เลขประจำตัวประชาชน'}`"
-              maxlength="13"
-              mask="#############"
-            />
-            <q-select
-              class="col"
-              :disable="!spouseData.isHave"
-              outlined
-              dense
-              bg-color="white"
-              v-model="spouseData.prefix"
-              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-              :options="spouseData.optionPrefix"
-              label="คำนำหน้าชื่อ"
-            />
-            <q-input
-              class="col"
-              bg-color="white"
-              :disable="!spouseData.isHave"
-              outlined
-              dense
-              :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
-              v-model="spouseData.firstName"
-              label="ชื่อ"
-            />
-            <q-input
-              class="col"
-              :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
-              :disable="!spouseData.isHave"
-              outlined
-              dense
-              bg-color="white"
-              v-model="spouseData.lastName"
-              label="นามสกุล"
-            />
-            <q-input
-              class="col"
-              :disable="!spouseData.isHave"
-              outlined
-              dense
-              bg-color="white"
-              v-model="spouseData.job"
-              label="อาชีพ"
-            />
-          </div>
-          <div class="col-12 row q-pb-sm q-pt-md">
-            <div class="text-weight-bold row items-center">• บุตร</div>
-            <q-btn flat round color="primary" icon="add" @click="addChildren">
+          <q-card-section class="bg-grey-1">
+            <div class="row q-col-gutter-md">
+              <div class="col">
+                <q-input
+                  :disable="!spouseData.isHave"
+                  outlined
+                  hide-bottom-space
+                  bg-color="white"
+                  dense
+                  v-model="spouseData.citizenId"
+                  :label="`${'เลขประจำตัวประชาชน'}`"
+                  maxlength="17"
+                  mask="#-####-#####-##-#"
+                />
+              </div>
+              <div class="col">
+                <q-select
+                  :disable="!spouseData.isHave"
+                  outlined
+                  bg-color="white"
+                  lazy-rules
+                  dense
+                  v-model="spouseData.prefix"
+                  :options="spouseData.optionPrefix"
+                  :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+                  label="คำนำหน้าชื่อ"
+                  hidden-space
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!spouseData.isHave"
+                  outlined
+                  dense
+                  bg-color="white"
+                  lazy-rules
+                  v-model="spouseData.firstName"
+                  :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+                  label="ชื่อ"
+                  hidden-space
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!spouseData.isHave"
+                  outlined
+                  dense
+                  bg-color="white"
+                  lazy-rules
+                  v-model="spouseData.lastName"
+                  :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+                  label="นามสกุล"
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  :disable="!spouseData.isHave"
+                  outlined
+                  dense
+                  bg-color="white"
+                  v-model="spouseData.job"
+                  label="อาชีพ"
+                />
+              </div>
+            </div>
+            <div class="row q-gutter-md">
+              <div>สถานภาพการมีชีวิต</div>
+              <div class="">
+                <q-radio
+                  :disable="!spouseData.isHave"
+                  class="q-mr-sm"
+                  v-model="spouseData.isDead"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="1"
+                  label="ยังมีชัวิตอยู่"
+                  dense
+                  :color="!spouseData.isHave ? 'grey' : 'primary'"
+                />
+                <q-radio
+                  :disable="!spouseData.isHave"
+                  v-model="spouseData.isDead"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="0"
+                  :color="!spouseData.isHave ? 'grey' : 'red'"
+                  label="ถึงแก่กรรม"
+                  dense
+                />
+              </div>
+            </div>
+          </q-card-section>
+          <div class="col-12 row q-pb-sm q-pt-md items-center">
+            <div
+              class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
+            >
+              • บุตร
+            </div>
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="add"
+              size="14px"
+              @click="addChildren"
+            >
               <q-tooltip> เพิ่มข้อมูล </q-tooltip>
             </q-btn>
           </div>
           <div 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"
-                label="มีชีวิต"
-                color="primary"
-                dense
-              />
-              <q-radio
-                v-model="items.isAlive"
-                checked-icon="task_alt"
-                unchecked-icon="panorama_fish_eye"
-                val="0"
-                label="เสียชีวิต"
-                color="red"
-                dense
-              />
+            <div class="col-12 row q-gutter-sm q-pb-xs q-mt-xs">
+              <div class="text-medium q-pl-md">บุตรคนที่ : {{ index + 1 }}</div>
             </div>
-            <div class="flex q-gutter-sm q-mb-md">
-              <q-btn
-                flat
-                dense
-                size="12px"
-                round
-                color="red"
-                @click="deleteChildren(items)"
-                icon="mdi-delete-outline"
-              >
-                <q-tooltip>ลบข้อมูล {{ index + 1 }}</q-tooltip>
-              </q-btn>
-              <q-input
-                class="col"
-                outlined
-                hide-bottom-space
-                dense
-                v-model="items.citizenId"
-                :label="`${'เลขประจำตัวประชาชน'}`"
-                maxlength="13"
-                bg-color="white"
-                mask="#############"
-              />
-              <q-select
-                class="col"
-                outlined
-                dense
-                lazy-rules
-                bg-color="white"
-                v-model="items.prefix"
-                :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-                :options="childrenOptionPrefix"
-                label="คำนำหน้าชื่อ"
-              />
-              <q-input
-                class="col"
-                outlined
-                dense
-                lazy-rules
-                bg-color="white"
-                v-model="items.firstName"
-                :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
-                label="ชื่อ"
-              />
-              <q-input
-                class="col"
-                outlined
-                lazy-rules
-                bg-color="white"
-                dense
-                v-model="items.lastName"
-                :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
-                label="นามสกุล"
-              />
-              <q-input
-                class="col"
-                outlined
-                bg-color="white"
-                dense
-                v-model="items.job"
-                label="อาชีพ"
-              />
+            <div class="row items-center">
+              <q-card-section class="bg-grey-1 col-11 q-pb-sm">
+                <div class="row q-col-gutter-sm">
+                  <div class="col">
+                    <q-input
+                      outlined
+                      hide-bottom-space
+                      dense
+                      v-model="items.citizenId"
+                      :label="`${'เลขประจำตัวประชาชน'}`"
+                      bg-color="white"
+                      maxlength="17"
+                      mask="#-####-#####-##-#"
+                    />
+                  </div>
+                  <div class="col">
+                    <q-select
+                      outlined
+                      dense
+                      lazy-rules
+                      bg-color="white"
+                      v-model="items.prefix"
+                      :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+                      :options="childrenOptionPrefix"
+                      label="คำนำหน้าชื่อ"
+                    />
+                  </div>
+                  <div class="col">
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      bg-color="white"
+                      v-model="items.firstName"
+                      :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+                      label="ชื่อ"
+                    />
+                  </div>
+                  <div class="col">
+                    <q-input
+                      outlined
+                      lazy-rules
+                      bg-color="white"
+                      dense
+                      v-model="items.lastName"
+                      :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+                      label="นามสกุล"
+                    />
+                  </div>
+                  <div class="col">
+                    <q-input
+                      outlined
+                      bg-color="white"
+                      dense
+                      v-model="items.job"
+                      label="อาชีพ"
+                    />
+                  </div>
+                </div>
+                <div class="row q-gutter-md">
+                  <div>สถานภาพการมีชีวิต</div>
+                  <div class="">
+                    <q-radio
+                      class="q-mr-sm"
+                      v-model="items.isDead"
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      :val="1"
+                      label="ยังมีชัวิตอยู่"
+                      dense
+                      color="primary"
+                    />
+                    <q-radio
+                      v-model="items.isDead"
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      :val="0"
+                      color="red"
+                      label="ถึงแก่กรรม"
+                      dense
+                    />
+                  </div>
+                </div>
+              </q-card-section>
+              <div class="col-1">
+                <div class="row justify-center">
+                  <q-btn
+                    flat
+                    dense
+                    size="12px"
+                    round
+                    color="red"
+                    @click="deleteChildren(items)"
+                    icon="mdi-delete"
+                  >
+                    <q-tooltip>ลบข้อมูลบุตรคนที่ {{ index + 1 }}</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
             </div>
           </div>
         </q-card-section>
@@ -834,7 +876,7 @@ function deleteChildren(items: any) {
     </q-card>
   </q-dialog>
   <q-dialog v-model="historyDialog" class="dialog" persistent>
-    <q-card style="min-width: 70%" class="bg-grey-11">
+    <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
@@ -845,6 +887,7 @@ function deleteChildren(items: any) {
 
         <q-separator color="grey-4" />
         <q-card-section>
+          ยังไม่รู้ว่าจะออกแบบยังไงครับ
           <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">
@@ -888,8 +931,8 @@ function deleteChildren(items: any) {
               :readonly="true"
               v-model="fatherData.citizenId"
               :label="`${'เลขประจำตัวประชาชน'}`"
-              maxlength="13"
-              mask="#############"
+              maxlength="17"
+              mask="#-####-#####-##-#"
             />
             <q-select
               class="col"
@@ -968,8 +1011,8 @@ function deleteChildren(items: any) {
               :readonly="true"
               v-model="motherData.citizenId"
               :label="`${'เลขประจำตัวประชาชน'}`"
-              maxlength="13"
-              mask="#############"
+              maxlength="17"
+              mask="#-####-#####-##-#"
             />
             <q-select
               class="col"