From 50a79b0bf1da4e5486fffdd543a52e0341779fbd Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 14 May 2024 19:03:34 +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=3D>=20=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B1=E0=B8=A7=20=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=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PersonalInformation/04_FamilyNew.vue      | 862 ++++++++++++++++++
 .../detail/PersonalInformation/Main.vue       |  25 +-
 2 files changed, 877 insertions(+), 10 deletions(-)
 create mode 100644 src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyNew.vue

diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyNew.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyNew.vue
new file mode 100644
index 000000000..6114da0e2
--- /dev/null
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyNew.vue
@@ -0,0 +1,862 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useProfileDataStore } from "@/modules/04_registryNew/stores/profile";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { fetchPerson, filterSelector } = store;
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = useCounterMixin();
+
+const visibleColumns = ref<String[]>([
+  "citizenId",
+  "prefix",
+  "firstName",
+  "lastName",
+  "job",
+  "isLive",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขบัตรประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้า",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "job",
+    align: "left",
+    label: "อาชีพ",
+    sortable: true,
+    field: "job",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isLive",
+    align: "left",
+    label: "สถานภาพการมีชีวิต",
+    sortable: true,
+    field: "isLive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<any[]>([]);
+
+const childData = ref<any[]>([{}]);
+const spouseData = ref<any[]>([{}]);
+const fatherData = ref({
+  isLive: 1,
+  citizenId: "1231231231231",
+  prefix: "นาย",
+  firstName: "ตรีชาไทย",
+  lastName: "หวังดี",
+  job: "จอมพล",
+});
+const momData = ref({
+  isLive: 0,
+  citizenId: "1572476458930",
+  prefix: "นาง",
+  firstName: "บุษดี",
+  lastName: "มาดี",
+  job: "พยาบาล",
+});
+
+const modal = ref<boolean>(false);
+const modalHistory = ref<boolean>(false);
+const filterHistory = ref<string>("");
+
+const titleForm = ref<string>("");
+const typeForm = ref<string>("");
+const isEdit = ref<boolean>(false);
+
+const optionRelationshipMain = ref<any>([]);
+const optionRelationship = ref<any>([]);
+
+const fromData = reactive({
+  isLive: 0,
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  job: "",
+  lastNameOld: "",
+  statusMarital: "",
+});
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    closeDialog();
+  });
+}
+
+function closeDialog() {
+  modal.value = false;
+  modalHistory.value = false;
+  fromData.isLive = 0;
+  fromData.citizenId = "";
+  fromData.prefix = "";
+  fromData.firstName = "";
+  fromData.lastName = "";
+  fromData.job = "";
+  fromData.lastNameOld = "";
+  fromData.statusMarital = "";
+}
+
+function onOpenDialogForm(
+  type: string,
+  isStatusEdit: boolean = false,
+  data: any = undefined
+) {
+  modal.value = true;
+  typeForm.value = type;
+  isEdit.value = isStatusEdit;
+
+  if (type === "father") {
+    titleForm.value = " • บิดา";
+    if (isStatusEdit) {
+      fromData.isLive = fatherData.value.isLive;
+      fromData.citizenId = fatherData.value.citizenId;
+      fromData.prefix = fatherData.value.prefix;
+      fromData.firstName = fatherData.value.firstName;
+      fromData.lastName = fatherData.value.lastName;
+      fromData.job = fatherData.value.job;
+    }
+  } else if (type === "mom") {
+    titleForm.value = " • มารดา";
+    if (isStatusEdit) {
+      fromData.isLive = momData.value.isLive;
+      fromData.citizenId = momData.value.citizenId;
+      fromData.prefix = momData.value.prefix;
+      fromData.firstName = momData.value.firstName;
+      fromData.lastName = momData.value.lastName;
+      fromData.job = momData.value.job;
+    }
+  } else if (type === "spouse") {
+    titleForm.value = " • คู่สมรส";
+  } else if (type === "child") {
+    titleForm.value = " • บุตร";
+    fromData.isLive = data.isLive;
+    fromData.citizenId = data.citizenId;
+    fromData.prefix = data.prefix;
+    fromData.firstName = data.firstName;
+    fromData.lastName = data.lastName;
+    fromData.job = data.job;
+  }
+}
+
+function onOpenDialogHistory(type: string) {
+  modalHistory.value = true;
+}
+
+function fetchData() {
+  const data = [
+    {
+      isLive: 0,
+      citizenId: "123456789101",
+      prefix: "นาง",
+      firstName: "บุษดี",
+      lastName: "มาดีหกหฟก",
+      job: "12",
+      lastNameOld: "",
+      statusMarital: "แต่งงาน",
+    },
+  ];
+  const data2 = [
+    {
+      isLive: 1,
+      citizenId: "123456789101",
+      prefix: "นาง",
+      firstName: "บุษดี",
+      lastName: "มาดีหกหฟก",
+      job: "12",
+      lastNameOld: "",
+      statusMarital: "แต่งงาน",
+    },
+  ];
+
+  const data3 = {
+    isLive: 1,
+    citizenId: "1231231231231",
+    prefix: "นาย",
+    firstName: "ตรีชาไทย",
+    lastName: "หวังดี",
+    job: "จอมพล",
+  };
+  spouseData.value = data;
+  childData.value = data2;
+}
+
+function fetchDataRelationship() {
+  showLoader();
+  http
+    .get(config.API.orgRelationship)
+    .then((res) => {
+      const list = res.data.result.map((e: any) => ({
+        id: e.id,
+        name: e.name,
+      }));
+      optionRelationshipMain.value = list;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+const filterSelectorRelation = (val: any, update: Function) => {
+  update(() => {
+    optionRelationship.value = optionRelationshipMain.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
+};
+
+onMounted(() => {
+  fetchData();
+  fetchDataRelationship();
+});
+</script>
+
+<template>
+  <div class="row q-col-gutter-sm">
+    <!-- • บิดา -->
+    <div class="col-12">
+      <q-toolbar style="padding: 0px">
+        <q-toolbar-title class="text-weight-bold text-primary text-subtitle1">
+          • บิดา
+        </q-toolbar-title>
+        <div class="row q-col-gutter-sm">
+          <q-btn
+            round
+            flat
+            color="primary"
+            icon="mdi-pencil-outline"
+            size="14px"
+            dense
+            @click="onOpenDialogForm('father', true)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
+          >
+          <q-btn
+            round
+            flat
+            dense
+            color="info"
+            icon="mdi-history"
+            size="14px"
+            @click="onOpenDialogHistory('father')"
+          >
+            <q-tooltip>ประวัติการแก้ไขข้อมูลครอบครัว</q-tooltip></q-btn
+          >
+        </div>
+      </q-toolbar>
+
+      <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+        <div class="row items-center">
+          <div class="col-2 text-grey-6 text-weight-medium">
+            <div>เลขบัตรประจำตัวประชาชน</div>
+          </div>
+          <div class="col">
+            {{ fatherData.citizenId ? fatherData.citizenId : "-" }}
+          </div>
+        </div>
+        <div class="row items-center">
+          <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
+          <div class="col-6">
+            {{
+              fatherData.prefix
+                ? fatherData.prefix +
+                  fatherData.firstName +
+                  " " +
+                  fatherData.lastName
+                : "-"
+            }}
+          </div>
+          <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
+          <div class="col">
+            {{ fatherData.job ? fatherData.job : "-" }}
+          </div>
+        </div>
+        <div class="row items-center">
+          <div class="col-2 text-grey-6 text-weight-medium">
+            สถานภาพการมีชีวิต
+          </div>
+          <div class="col-10">
+            <div v-if="fatherData.isLive">มีชีวิตอยู่</div>
+            <div v-else>ถึงแก่กรรม</div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+
+    <!-- • มารดา -->
+    <div class="col-12">
+      <q-toolbar style="padding: 0px">
+        <q-toolbar-title class="text-weight-bold text-primary text-subtitle1">
+          • มารดา
+        </q-toolbar-title>
+        <div class="row q-col-gutter-sm">
+          <q-btn
+            round
+            flat
+            color="primary"
+            icon="mdi-pencil-outline"
+            size="14px"
+            dense
+            @click="onOpenDialogForm('mom', true)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
+          >
+          <q-btn
+            round
+            flat
+            dense
+            color="info"
+            icon="mdi-history"
+            size="14px"
+            @click="onOpenDialogHistory('mom')"
+          >
+            <q-tooltip>ประวัติการแก้ไขข้อมูลครอบครัว</q-tooltip></q-btn
+          >
+        </div>
+      </q-toolbar>
+
+      <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
+        <div class="row items-center">
+          <div class="col-2 text-grey-6 text-weight-medium">
+            <div>เลขบัตรประจำตัวประชาชน</div>
+          </div>
+          <div class="col">
+            {{ momData.citizenId ? momData.citizenId : "-" }}
+          </div>
+        </div>
+        <div class="row items-center">
+          <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
+          <div class="col-6">
+            {{
+              momData.prefix
+                ? momData.prefix + momData.firstName + " " + momData.lastName
+                : "-"
+            }}
+          </div>
+          <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
+          <div class="col">
+            {{ momData.job ? momData.job : "-" }}
+          </div>
+        </div>
+        <div class="row items-center">
+          <div class="col-2 text-grey-6 text-weight-medium">
+            สถานภาพการมีชีวิต
+          </div>
+          <div class="col-10">
+            <div v-if="momData.isLive">มีชีวิตอยู่</div>
+            <div v-else>ถึงแก่กรรม</div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+
+    <!-- • คู่สมรส -->
+    <div class="col-12">
+      <q-toolbar style="padding: 0px">
+        <div class="row q-col-gutter-sm">
+          <div class="text-weight-bold text-primary text-subtitle1">
+            • คู่สมรส
+          </div>
+          <q-btn
+            round
+            flat
+            dense
+            color="primary"
+            icon="add"
+            size="14px"
+            @click="onOpenDialogForm('spouse')"
+          >
+            <q-tooltip>เพิ่มคู่สมรส</q-tooltip></q-btn
+          >
+        </div>
+        <q-space />
+        <div class="row q-col-gutter-sm">
+          <q-btn
+            round
+            flat
+            dense
+            color="info"
+            icon="mdi-history"
+            size="14px"
+            @click="onOpenDialogHistory('spouse')"
+          >
+            <q-tooltip>ประวัติการแก้ไขข้อมูลครอบครัว</q-tooltip></q-btn
+          >
+        </div>
+      </q-toolbar>
+
+      <div v-for="(item, index) in spouseData" :key="index">
+        <q-card bordered class="bg-grey-1 q-pb-md">
+          <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center">
+            <div class="text-weight-medium q-pr-md">
+              คู่สมรสที่ : {{ index + 1 }}
+            </div>
+          </div>
+          <q-separator />
+          <div class="col-12 q-pa-md q-col-gutter-md">
+            <div class="row items-center">
+              <div class="col-2 text-grey-6 text-weight-medium">
+                <div>สถานภาพการสมรส</div>
+              </div>
+              <div class="col-10">
+                {{ item.statusMarital }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2 text-grey-6 text-weight-medium">
+                <div>เลขบัตรประจำตัวประชาชน</div>
+              </div>
+              <div class="col-10">
+                {{ item.citizenId }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2 text-grey-6 text-weight-medium">
+                ชื่อ-นามสกุล
+              </div>
+              <div class="col-6">
+                {{
+                  item.prefix
+                    ? item.prefix + item.firstName + " " + item.lastName
+                    : "-"
+                }}
+              </div>
+              <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
+              <div class="col">
+                {{ item.job }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2 text-grey-6 text-weight-medium">
+                สถานภาพการมีชีวิต
+              </div>
+              <div class="col">
+                <div v-if="item.isLive">มีชีวิตอยู่</div>
+                <div v-else>ถึงแก่กรรม</div>
+              </div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
+
+    <!-- • บุตร -->
+    <div class="col-12">
+      <q-toolbar style="padding: 0px">
+        <div class="row q-col-gutter-sm">
+          <div class="text-weight-bold text-primary text-subtitle1">• บุตร</div>
+          <q-btn
+            round
+            flat
+            dense
+            color="primary"
+            icon="add"
+            size="14px"
+            @click="onOpenDialogForm('child')"
+          >
+            <q-tooltip>เพิ่มบุตร</q-tooltip></q-btn
+          >
+        </div>
+        <q-space />
+      </q-toolbar>
+
+      <div v-for="(item, index) in childData" :key="index">
+        <q-card bordered class="bg-grey-1 q-pb-md">
+          <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center">
+            <div class="text-weight-medium q-pr-md">
+              บุตรคนที่ : {{ index + 1 }}
+            </div>
+            <q-space />
+            <div class="row q-col-gutter-sm">
+              <q-btn
+                round
+                flat
+                color="primary"
+                icon="mdi-pencil-outline"
+                size="14px"
+                dense
+                @click="onOpenDialogForm('child', true, item)"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
+              >
+              <q-btn
+                round
+                flat
+                dense
+                color="info"
+                icon="mdi-history"
+                size="14px"
+                @click="onOpenDialogHistory('child')"
+              >
+                <q-tooltip>ประวัติการแก้ไขข้อมูลครอบครัว</q-tooltip></q-btn
+              >
+            </div>
+          </div>
+          <q-separator />
+          <div class="col-12 q-pa-md q-col-gutter-md">
+            <div class="row items-center">
+              <div class="col-2 text-grey-6 text-weight-medium">
+                <div>เลขบัตรประจำตัวประชาชน</div>
+              </div>
+              <div class="col-10">
+                {{ item.citizenId }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2 text-grey-6 text-weight-medium">
+                ชื่อ-นามสกุล
+              </div>
+              <div class="col-6">
+                {{
+                  item.prefix
+                    ? item.prefix + item.firstName + " " + item.lastName
+                    : "-"
+                }}
+              </div>
+              <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
+              <div class="col">
+                {{ item.job }}
+              </div>
+            </div>
+            <div class="row items-center">
+              <div class="col-2 text-grey-6 text-weight-medium">
+                สถานภาพการมีชีวิต
+              </div>
+              <div class="col">
+                <div v-if="item.isLive">มีชีวิตอยู่</div>
+                <div v-else>ถึงแก่กรรม</div>
+              </div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </div>
+
+  <q-dialog v-model="modal" class="dialog" persistent>
+    <q-card style="min-width: 80%">
+      <q-form @submit.prevent greedy @validation-success="onSubmit()">
+        <DialogHeader
+          :tittle="isEdit ? 'แก้ไขข้อมูลครอบครัว' : 'เพิ้มข้อมูลครอบครัว'"
+          :close="closeDialog"
+        />
+        <q-separator color="grey-4" />
+        <q-card-section>
+          <div class="col-12 row q-pb-sm">
+            <div
+              class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
+            >
+              {{ titleForm }}
+            </div>
+          </div>
+          <q-card bordered class="bg-grey-1 q-pa-md q-col-gutter-sm">
+            <div class="col" v-if="typeForm === 'spouse'">
+              <q-select
+                outlined
+                bg-color="white"
+                lazy-rules
+                hidden-space
+                dense
+                class="inputgreen"
+                :rules="[(val) => !!val || 'กรุณาเลือกสถานภาพการสมรส']"
+                label="สถานภาพการสมรส"
+                v-model="fromData.statusMarital"
+                use-input
+                input-debounce="0"
+                emit-value
+                map-options
+                :options="optionRelationship"
+                option-label="name"
+                option-value="name"
+                style="width: 220px"
+                @filter="(inputValue:string,
+                doneFn:Function) => filterSelectorRelation(inputValue, doneFn) "
+              />
+            </div>
+            <div class="row q-col-gutter-md">
+              <div class="col">
+                <q-input
+                  outlined
+                  hide-bottom-space
+                  bg-color="white"
+                  dense
+                  v-model="fromData.citizenId"
+                  :label="`${'เลขประจำตัวประชาชน'}`"
+                  maxlength="13"
+                  :rules="
+                    typeForm !== 'spouse'
+                      ? [
+                          (val) =>
+                            val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
+                        ]
+                      : []
+                  "
+                  class="inputgreen"
+                  mask="#############"
+                />
+              </div>
+              <div class="col">
+                <q-select
+                  outlined
+                  bg-color="white"
+                  lazy-rules
+                  hidden-space
+                  dense
+                  class="inputgreen"
+                  :rules="
+                    typeForm !== 'spouse'
+                      ? [(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']
+                      : []
+                  "
+                  label="คำนำหน้าชื่อ"
+                  v-model="fromData.prefix"
+                  use-input
+                  input-debounce="0"
+                  emit-value
+                  map-options
+                  :options="store.Ops.prefixOps"
+                  option-label="name"
+                  option-value="name"
+                  @filter="(inputValue:string,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                    ) "
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  outlined
+                  dense
+                  bg-color="white"
+                  class="inputgreen"
+                  lazy-rules
+                  v-model="fromData.firstName"
+                  :rules="
+                    typeForm !== 'spouse'
+                      ? [(val) => !!val || 'กรุณากรอกชื่อ']
+                      : []
+                  "
+                  label="ชื่อ"
+                  hidden-space
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  outlined
+                  dense
+                  class="inputgreen"
+                  bg-color="white"
+                  lazy-rules
+                  v-model="fromData.lastName"
+                  :rules="
+                    typeForm !== 'spouse'
+                      ? [(val) => !!val || 'กรุณากรอกนามสกุล']
+                      : []
+                  "
+                  label="นามสกุล"
+                />
+              </div>
+              <div class="col" v-if="typeForm === 'spouse'">
+                <q-input
+                  outlined
+                  dense
+                  class="inputgreen"
+                  bg-color="white"
+                  lazy-rules
+                  v-model="fromData.lastNameOld"
+                  label="นามสกุลเดิม"
+                />
+              </div>
+              <div class="col">
+                <q-input
+                  outlined
+                  dense
+                  class="inputgreen"
+                  bg-color="white"
+                  v-model="fromData.job"
+                  label="อาชีพ"
+                />
+              </div>
+            </div>
+            <div class="row">
+              <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
+              <div>
+                <q-radio
+                  class="q-mr-sm"
+                  v-model="fromData.isLive"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="1"
+                  label="ยังมีชีวิตอยู่"
+                  dense
+                  :color="!fromData.isLive ? 'grey' : 'primary'"
+                />
+                <q-radio
+                  v-model="fromData.isLive"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  :val="0"
+                  :color="!fromData.isLive ? 'grey' : 'red'"
+                  label="ถึงแก่กรรม"
+                  dense
+                />
+              </div>
+            </div>
+          </q-card>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            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="modalHistory" class="dialog" persistent>
+    <q-card style="min-width: 80%">
+      <DialogHeader tittle="ประวัติแก้ไขข้อมูลที่อยู่" :close="closeDialog" />
+      <q-separator color="grey-4" />
+      <q-card-section>
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            standout
+            dense
+            v-model="filterHistory"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            debounce="300"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filterHistory == ''"
+                name="search"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterHistory"
+                name="cancel"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columns"
+          :rows="rows"
+          :paging="true"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumns"
+          :filter="filterHistory"
+        >
+          >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
index 6f09713ab..0903c410d 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
@@ -9,6 +9,8 @@ import Family from "@/modules/04_registryNew/components/detail/PersonalInformati
 import Education from "@/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue";
 import SpecialSkill from "@/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue";
 
+import FamilyNew from "@/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyNew.vue";
+
 const tab = ref<string>("1");
 </script>
 <template>
@@ -30,17 +32,17 @@ const tab = ref<string>("1");
       indicator-color="transparent"
       dense
       class="text-grey q-pl-sm"
-      >
-        <q-tab name="1" label="ประวัติส่วนตัว" />
-        <q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" />
-        <q-tab name="3" label="ข้อมูลที่อยู่" />
-        <q-tab name="4" label="ข้อมูลครอบครัว" />
-        <q-tab name="5" label="ประวัติการศึกษา" />
-        <q-tab name="6" label="ความสามารถพิเศษ" />
-      </q-tabs>
+    >
+      <q-tab name="1" label="ประวัติส่วนตัว" />
+      <q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" />
+      <q-tab name="3" label="ข้อมูลที่อยู่" />
+      <q-tab name="4" label="ข้อมูลครอบครัว" />
+      <q-tab name="5" label="ประวัติการศึกษา" />
+      <q-tab name="6" label="ความสามารถพิเศษ" />
+    </q-tabs>
     <q-separator />
 
-    <q-tab-panels v-model="tab" animated >
+    <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="1">
         <Profile />
       </q-tab-panel>
@@ -51,7 +53,7 @@ const tab = ref<string>("1");
         <Address />
       </q-tab-panel>
       <q-tab-panel name="4">
-        <Family />
+        <FamilyNew />
       </q-tab-panel>
       <q-tab-panel name="5">
         <Education />
@@ -59,6 +61,9 @@ const tab = ref<string>("1");
       <q-tab-panel name="6">
         <SpecialSkill />
       </q-tab-panel>
+      <!-- <q-tab-panel name="7">
+        <FamilyNew />
+      </q-tab-panel> -->
     </q-tab-panels>
   </q-card>
 </template>