From e952d8dd6af60275a705548008997c757dc341f9 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Mon, 11 Mar 2024 15:58:36 +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:=20UI=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  | 1151 ++++++++++++++++-
 1 file changed, 1149 insertions(+), 2 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 ecfe8f03f..1c6623747 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
@@ -1,6 +1,1153 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { QForm, useQuasar } from "quasar";
+
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
+
+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",
+  isDead: false,
+  citizenId: null,
+  prefix: null,
+  optionPrefix: ["นาย", "จ่าสิบเอก"],
+  firstName: null,
+  lastName: null,
+  job: null,
+});
+const motherData = reactive({
+  isHaveInfo: "0",
+  isDead: false,
+  citizenId: null,
+  prefix: null,
+  optionPrefix: ["นาง", "นางสาว"],
+  firstName: null,
+  lastName: null,
+  job: null,
+});
+const spouseData = reactive({
+  isHave: "0",
+  isDead: false,
+  citizenId: null,
+  prefix: null,
+  optionPrefix: ["นาย", "นาง", "นางสาว"],
+  firstName: null,
+  lastName: null,
+  job: null,
+});
+
+const childrenData: any = reactive({
+  childrens: [],
+  // isHave: "0",
+  // isAlive: "0",
+  // citizenId: null,
+  // prefix: null,
+  // optionPrefix: ["นาย", "นาง", "นางสาว"],
+  // firstName: null,
+  // lastName: null,
+  // job: null,
+});
+
+const childrenOptionPrefix = ["นาย", "นาง", "นางสาว"];
+
+function closeDialog() {
+  dialog.value = false;
+}
+
+function closeHistoryDialog() {
+  historyDialog.value = false;
+}
+
+function validateForm() {
+  console.log("test");
+  onSubmit();
+}
+
+async function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      closeDialog();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+
+const addChildren = async () => {
+  childrenData.childrens.push({
+    isAlive: "0",
+    citizenId: "",
+    prefix: "",
+    id: `${childrenData.childrens.length + 1}`,
+    firstName: "",
+    lastName: "",
+    job: "",
+  });
+};
+
+function deleteChildren(items: any) {
+  const index = childrenData.childrens.findIndex((r: any) => r.id == items.id);
+
+  childrenData.childrens.splice(index, 1);
+}
+</script>
+
 <template>
-  <div>4</div>
+  <div>
+    <div class="flex justify-between text-center">
+      <div class="text-h6 text-center">ข้อมูลครอบครัว</div>
+      <div>
+        <q-btn
+          round
+          flat
+          color="primary"
+          icon="mdi-pencil-outline"
+          size="14px"
+          @click="dialog = true"
+        >
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
+        >
+        <q-btn
+          round
+          flat
+          color="blue"
+          icon="mdi-history"
+          size="14px"
+          @click="historyDialog = true"
+        >
+          <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>
+        <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>
+    </div>
+  </div>
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="min-width: 70%" class="bg-grey-11">
+      <q-form @submit.prevent greedy @validation-success="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header tittle="ข้อมูลครอบครัว" :close="closeDialog" />
+        </q-card-section>
+
+        <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">
+              <q-radio
+                v-model="fatherData.isHaveInfo"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="1"
+                label="มีข้อมูล"
+                dense
+                color="primary"
+              />
+              <q-radio
+                v-model="fatherData.isHaveInfo"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="0"
+                color="red"
+                label="ไม่มีข้อมูล"
+                dense
+              />
+              <q-separator color="grey-4" vertical />
+              <q-checkbox
+                :disable="fatherData.isHaveInfo === '0' ? true : false"
+                outline
+                v-model="fatherData.isDead"
+                label="เสียชีวิตแล้ว"
+                color="red"
+                dense
+              />
+            </div>
+          </div>
+          <div class="flex q-gutter-sm">
+            <q-input
+              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              hide-bottom-space
+              dense
+              v-model="fatherData.citizenId"
+              :label="`${'เลขประจำตัวประชาชน'}`"
+              maxlength="13"
+              mask="#############"
+            />
+            <q-select
+              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              lazy-rules
+              dense
+              v-model="fatherData.prefix"
+              :options="fatherData.optionPrefix"
+              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+              label="คำนำหน้าชื่อ"
+            />
+            <q-input
+              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              dense
+              lazy-rules
+              v-model="fatherData.firstName"
+              :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+              label="ชื่อ"
+            />
+            <q-input
+              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              dense
+              lazy-rules
+              v-model="fatherData.lastName"
+              :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+              label="นามสกุล"
+            />
+            <q-input
+              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              dense
+              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"
+                label="มีข้อมูล"
+                dense
+                color="primary"
+              />
+              <q-radio
+                v-model="motherData.isHaveInfo"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="0"
+                color="red"
+                label="ไม่มีข้อมูล"
+                dense
+              />
+              <q-separator color="grey-4" vertical />
+              <q-checkbox
+                :disable="motherData.isHaveInfo === '0' ? true : false"
+                outline
+                v-model="motherData.isDead"
+                label="เสียชีวิตแล้ว"
+                color="red"
+                dense
+              />
+            </div>
+          </div>
+          <div class="flex q-gutter-sm">
+            <q-input
+              :disable="motherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              hide-bottom-space
+              dense
+              v-model="motherData.citizenId"
+              :label="`${'เลขประจำตัวประชาชน'}`"
+              maxlength="13"
+              mask="#############"
+            />
+            <q-select
+              :disable="motherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              dense
+              v-model="motherData.prefix"
+              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+              lazy-rules
+              :options="motherData.optionPrefix"
+              label="คำนำหน้าชื่อ"
+            />
+            <q-input
+              :disable="motherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+              dense
+              lazy-rules
+              v-model="motherData.firstName"
+              label="ชื่อ"
+            />
+            <q-input
+              :disable="motherData.isHaveInfo === '0' ? true : false"
+              :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+              class="col"
+              outlined
+              lazy-rules
+              dense
+              v-model="motherData.lastName"
+              label="นามสกุล"
+            />
+            <q-input
+              :disable="motherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              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
+                color="primary"
+              />
+              <q-radio
+                v-model="spouseData.isHave"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="0"
+                color="red"
+                label="ไม่มี"
+                dense
+              />
+              <q-separator color="grey-4" vertical />
+              <q-checkbox
+                :disable="spouseData.isHave === '0' ? true : false"
+                outline
+                v-model="spouseData.isDead"
+                label="เสียชีวิตแล้ว"
+                color="red"
+                dense
+              />
+            </div>
+          </div>
+          <div class="flex q-gutter-sm">
+            <q-input
+              class="col"
+              :disable="spouseData.isHave === '0' ? true : false"
+              outlined
+              hide-bottom-space
+              dense
+              v-model="spouseData.citizenId"
+              :label="`${'เลขประจำตัวประชาชน'}`"
+              maxlength="13"
+              mask="#############"
+            />
+            <q-select
+              class="col"
+              :disable="spouseData.isHave === '0' ? true : false"
+              outlined
+              dense
+              v-model="spouseData.prefix"
+              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+              :options="spouseData.optionPrefix"
+              label="คำนำหน้าชื่อ"
+            />
+            <q-input
+              class="col"
+              :disable="spouseData.isHave === '0' ? true : false"
+              outlined
+              dense
+              :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+              v-model="spouseData.firstName"
+              label="ชื่อ"
+            />
+            <q-input
+              class="col"
+              :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+              :disable="spouseData.isHave === '0' ? true : false"
+              outlined
+              dense
+              v-model="spouseData.lastName"
+              label="นามสกุล"
+            />
+            <q-input
+              class="col"
+              :disable="spouseData.isHave === '0' ? true : false"
+              outlined
+              dense
+              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-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>
+            <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"
+                mask="#############"
+              />
+              <q-select
+                class="col"
+                outlined
+                dense
+                lazy-rules
+                v-model="items.prefix"
+                :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+                :options="childrenOptionPrefix"
+                label="คำนำหน้าชื่อ"
+              />
+              <q-input
+                class="col"
+                outlined
+                dense
+                lazy-rules
+                v-model="items.firstName"
+                :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+                label="ชื่อ"
+              />
+              <q-input
+                class="col"
+                outlined
+                lazy-rules
+                dense
+                v-model="items.lastName"
+                :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+                label="นามสกุล"
+              />
+              <q-input
+                class="col"
+                outlined
+                dense
+                v-model="items.job"
+                label="อาชีพ"
+              />
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <q-dialog v-model="historyDialog" class="dialog" persistent>
+    <q-card style="min-width: 70%" class="bg-grey-11">
+      <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>
+          <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>
+              <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>
+          </div>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>