From 544b8c1998c344bd9f870cb3efd10e0ae0d61731 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Mon, 11 Mar 2024 14:35:03 +0700
Subject: [PATCH 1/3] =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3(=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/GovernmentInformation/01_Info.vue  | 768 +++++++++++++++++-
 .../interface/index/government.ts             |  28 +
 2 files changed, 794 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/04_registryNew/interface/index/government.ts

diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
index 94f83fdf0..a5e544100 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
@@ -1,6 +1,770 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type {
+  MyObjectRef,
+  RequestItemsHistoryObject,
+} from "@/modules/04_registryNew/interface/index/government";
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+import type { QTableProps } from "quasar";
+import { useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** ฟังชั่นกลาง */
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dateToISO,
+  dialogConfirm,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
+
+/** ตัวแปรข้อมูลหลัก */
+const formMain = reactive<any>({
+  ocId: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร", //สังกัด
+  positionId: "ผู้อำนวยการ", //ตำแหน่ง
+  positionLine: "อำนวยการ", //สายงาน
+  positionLevel: "ต้น", //ระดับ
+  numberId: "กทข.1", //เลขที่ตำแหน่ง
+  positionExecutive: "ผู้อำนวยการกอง", //ตำแหน่งทางการบริหาร
+  positionExecutiveSide: "", //ด้านตำแหน่งทางการบริหาร
+  positionType: "ทั่วไป", //ประเภท
+  positionPathSide: "", //ด้าน/สาขา
+
+  containDate: "2024-01-22T02:43:00", //วันที่สั่งบรรจุ
+  workDate: "2024-01-22T02:43:00", //วันที่เริ่มปฏิบัติราชการ
+  reasonSameDate: "เนื่องจากเป็นวันหยุด",
+  retireDate: "2024-01-22T02:43:00", //วันเกษียณอายุ
+  ageAll: "0 ปี 2 เดือน 10 วัน", //อายุราชการ
+  absent: 0, //ขาดราชการ
+  age: 0, //อายุราชการเกื้อกูล
+});
+
+/** dialog */
+const modalEdit = ref<boolean>(false);
+const modalHistory = ref<boolean>(false);
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
+
+const filterKeyword = ref<string>('');
+
+const containDate = ref<Date | null>(null);
+const workDate = ref<Date | null>(null);
+const reasonSameDate = ref<string | null>(null);
+const containDateRef = ref<object | null>(null);
+const workDateRef = ref<object | null>(null);
+const reasonSameDateRef = ref<object | null>(null);
+
+const objectRef: MyObjectRef = {
+  containDate: containDateRef,
+  workDate: workDateRef,
+  reasonSameDate: reasonSameDateRef,
+};
+
+const visibleColumnsHistory = ref<String[]>([
+  "oc",
+  "position",
+  "positionPathSide",
+  "posNo",
+  "positionLine",
+  "positionType",
+  "positionLevel",
+  "positionExecutive",
+  "positionExecutiveSide",
+  "dateAppoint",
+  "dateStart",
+  "retireDate",
+  "govAge",
+  "govAgeAbsent",
+  "govAgePlus",
+  "reasonSameDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionPathSide",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionPathSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateAppoint",
+    align: "left",
+    label: "วันที่บรรจุ",
+    sortable: true,
+    field: "dateAppoint",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มปฎิบัติราชการ",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "retireDate",
+    align: "left",
+    label: "วันเกษียณอายุ",
+    sortable: true,
+    field: "retireDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAge",
+    align: "left",
+    label: "อายุราชการ",
+    sortable: true,
+    field: "govAge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAgeAbsent",
+    align: "left",
+    label: "ขาดราชการ",
+    sortable: true,
+    field: "govAgeAbsent",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAgePlus",
+    align: "left",
+    label: "อายุราชการเกื้อกูล",
+    sortable: true,
+    field: "govAgePlus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reasonSameDate",
+    align: "left",
+    label: "เหตุผลกรณีไม่ตรงวัน",
+    sortable: true,
+    field: "reasonSameDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+/** เปิด dialog */
+function openDialogEdit() {
+  modalEdit.value = true;
+}
+
+function openDialogHistory() {
+  modalHistory.value = true;
+}
+/** ปิด dialog */
+function closeDialog() {
+  modalEdit.value = false;
+  containDate.value = null;
+  workDate.value = null;
+  reasonSameDate.value = null;
+}
+
+/** validate check*/
+function validateForm() {
+  const hasError = [];
+  for (const key in objectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
+      const property = objectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  }
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    // showLoader()
+    // http
+    // .put(config.API.???)
+    // .then((res)=>{
+    //   closeDialog()
+    //   getData()
+    // }).catch((e)=>{
+    //   messageError($q,e)
+    // }).finally(()=>{
+    //   hideLoader()
+    // })
+
+    closeDialog();
+  });
+}
+
+/** ดึงข้อมูลประวัติ */
+function getDataHistory() {
+  // showLoader();
+  // http
+  //   .get(config.API.profileGovHisId(route.params.id.toString()))
+  //   .then((res) => {
+  //     let data = res.data.result;
+  //     rowsHistory.value = [];
+  //     data.map((e: RequestItemsHistoryObject) => {
+  //       rowsHistory.value.push({
+  //         oc: e.oc,
+  //         position: e.position,
+  //         positionPathSide: e.positionPathSide,
+  //         posNo: e.posNo,
+  //         positionLine: e.positionLine,
+  //         positionType: e.positionType,
+  //         positionLevel: e.positionLevel,
+  //         positionExecutive: e.positionExecutive,
+  //         positionExecutiveSide: e.positionExecutiveSide,
+  //         dateAppoint: new Date(e.dateAppoint),
+  //         dateStart: new Date(e.dateStart),
+  //         retireDate: e.retireDate,
+  //         govAge: e.govAge,
+  //         govAgeAbsent: e.govAgeAbsent,
+  //         govAgePlus: e.govAgePlus,
+  //         reasonSameDate: e.reasonSameDate,
+  //         createdFullName: e.createdFullName,
+  //         createdAt: new Date(e.createdAt),
+  //       });
+  //     });
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+watch(() => modalHistory.value, (isOpen) => {
+  if(isOpen === true) {
+    getDataHistory()
+  }
+});
+
+</script>
 <template>
-  <div>ข้อมูลราชการ</div>
+  <div class="row">
+    <div class="text-weight-bold text-subtitle1">ประวัติราชการ</div>
+    <q-space />
+    <div class="q-gutter-x-sm">
+      <q-btn
+        color="teal-5"
+        icon="mdi-pencil-outline"
+        flat
+        round
+        @click="openDialogEdit()"
+        ><q-tooltip>แก้ไข</q-tooltip></q-btn
+      >
+      <q-btn
+        color="edit"
+        icon="mdi-history"
+        flat
+        round
+        @click="openDialogHistory()"
+        ><q-tooltip>ประวิติข้อมูลราชการ</q-tooltip></q-btn
+      >
+    </div>
+  </div>
+
+  <q-card bordered class="bg-grey-2 q-pa-md">
+    <div class="row q-col-gutter-md">
+      <div class="col-12 col-sm-12 col-md-6">
+        <div class="column">
+          <span class="text-grey-7">สังกัด</span>
+          <span>{{ formMain.ocId !== "" ? formMain.ocId : "-" }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">ตำแหน่ง</span>
+          <span>{{
+            formMain.positionId !== "" ? formMain.positionId : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">สายงาน</span>
+          <span>{{
+            formMain.positionLine !== "" ? formMain.positionLine : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">ระดับ</span>
+          <span>{{
+            formMain.positionLevel !== "" ? formMain.positionLevel : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">เลขที่ตำแหน่ง</span>
+          <span>{{ formMain.numberId !== "" ? formMain.numberId : "-" }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">ตำแหน่งทางการบริหาร</span>
+          <span>{{
+            formMain.positionExecutive !== "" ? formMain.positionExecutive : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">ด้านตำแหน่งทางการบริหาร</span>
+          <span>{{
+            formMain.positionExecutiveSide !== ""
+              ? formMain.positionExecutiveSide
+              : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">ประเภท</span>
+          <span>{{
+            formMain.positionType !== "" ? formMain.positionType : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">ด้าน/สาขา</span>
+          <span>{{
+            formMain.positionPathSide !== "" ? formMain.positionPathSide : "-"
+          }}</span>
+        </div>
+      </div>
+    </div>
+    <q-separator inset color="grey-5" class="q-my-md" />
+    <div class="row q-col-gutter-md">
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">วันที่สั่งบรรจุ</span>
+          <span>{{
+            formMain.containDate ? date2Thai(formMain.containDate) : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">วันที่เริ่มปฏิบัติราชการ</span>
+          <span>{{
+            formMain.workDate !== "" ? date2Thai(formMain.workDate) : "-"
+          }}</span>
+        </div>
+      </div>
+      <div
+        v-if="dateToISO(formMain.containDate as Date) !== dateToISO(formMain.workDate as Date)"
+        class="col-12 col-sm-12 col-md-6"
+      >
+        <div class="column">
+          <span class="text-grey-7">เหตุผลที่วันที่ไม่ตรงกัน</span>
+          <span>{{
+            formMain.reasonSameDate !== "" ? formMain.reasonSameDate : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">วันเกษียณอายุ</span>
+          <span>{{
+            formMain.retireDate !== "" ? date2Thai(formMain.retireDate) : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">อายุราชการ</span>
+          <span>{{ formMain.ageAll !== "" ? formMain.ageAll : "-" }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">ขาดราชการ</span>
+          <span>{{ formMain.absent ? formMain.absent : 0 }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">อายุราชการเกื้อกูล</span>
+          <span>{{ formMain.age ? formMain.age : 0 }}</span>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <!-- dialog edit -->
+  <q-dialog v-model="modalEdit" persistent>
+    <q-card style="min-width: 600px">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <DialogHeader tittle="แก้ไขข้อมูล" :close="closeDialog" />
+        </q-card-section>
+
+        <q-separator />
+        <q-card-section class="q-pa-md">
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <datepicker
+                v-model="containDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    ref="containDateRef"
+                    class="full-width inputgreen cursor-pointer"
+                    hide-bottom-space
+                    dense
+                    outlined
+                    :model-value="
+                  containDate !== null
+                    ? date2Thai(containDate as Date)
+                    : null
+                "
+                    :rules="[
+                      (val) => !!val || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ',
+                    ]"
+                    label="วัน/เดือน/ปี ที่บรรจุ"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="'color: var(--q-primary)'"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6">
+              <datepicker
+                v-model="workDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    ref="workDateRef"
+                    class="full-width inputgreen cursor-pointer"
+                    hide-bottom-space
+                    dense
+                    outlined
+                    :model-value="
+                  workDate !== null
+                    ? date2Thai(workDate as Date)
+                    : null
+                "
+                    :rules="[(val) => !!val || 'กรุณาเลือกเริ่มปฎิบัติราชการ']"
+                    label="วัน/เดือน/ปี เริ่มปฎิบัติราชการ"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="'color: var(--q-primary)'"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div
+              class="col-12"
+              v-if="containDate && workDate ? dateToISO(containDate as Date) !== dateToISO(workDate as Date):false"
+            >
+              <q-input
+                ref="reasonSameDateRef"
+                class="full-width inputgreen cursor-pointer"
+                label="เหตุผลกรณีไม่ตรงกัน"
+                type="textarea"
+                outlined
+                dense
+                :rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
+                v-model="reasonSameDate"
+              />
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <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>
+      </form>
+    </q-card>
+  </q-dialog>
+
+  <!-- dialog History -->
+  <q-dialog v-model="modalHistory" persistent>
+    <q-card style="min-width: 80%">
+      <q-card-section class="flex justify-between" style="padding: 0">
+        <DialogHeader
+          tittle="ประวัติแก้ไขข้อมูลราชการ"
+          :close="() => (modalHistory = !modalHistory)"
+        />
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-section class="q-pa-sm">
+        <div class="row q-pb-sm q-gutter-x-sm">
+          <q-space />
+          <q-input
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            class="col-2"
+            debounce="300"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" @click.stop.prevent="filterKeyword = ''" class="cursor-pointer" />
+              <q-icon v-if="filterKeyword" name="cancel" @click.stop.prevent="filterKeyword = ''" class="cursor-pointer" />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumnsHistory"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columnsHistory"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          :columns="columnsHistory"
+          :rows="rowsHistory"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          :filter="filterKeyword"
+          :visible-columns="visibleColumnsHistory"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                style="color: #000000; font-weight: 500"
+              >
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width></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.name" :props="props">
+                <div
+                  v-if="
+                    col.name == 'dateStart' ||
+                    col.name == 'dateAppoint' ||
+                    col.name == 'createdAt'
+                  "
+                  class="table_ellipsis"
+                >
+                  {{ date2Thai(col.value) }}
+                </div>
+                <div v-else>
+                  {{ 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/interface/index/government.ts b/src/modules/04_registryNew/interface/index/government.ts
new file mode 100644
index 000000000..df450a86c
--- /dev/null
+++ b/src/modules/04_registryNew/interface/index/government.ts
@@ -0,0 +1,28 @@
+interface MyObjectRef {
+    containDate: object | null;
+    workDate: object | null;
+    reasonSameDate: object | null;
+    [key: string]: any;
+}
+
+interface RequestItemsHistoryObject {
+    oc: string | null;
+    position: string | null;
+    positionPathSide: string | null;
+    posNo: string | null;
+    positionLine: string | null;
+    positionType: string | null;
+    positionLevel: string | null;
+    positionExecutive: string | null;
+    positionExecutiveSide: string | null;
+    dateAppoint: Date;
+    dateStart: Date;
+    retireDate: string | null;
+    govAge: string | null;
+    govAgeAbsent: string | null;
+    govAgePlus: string | null;
+    reasonSameDate: string | null;
+    createdFullName: string | null;
+    createdAt: Date;
+  }
+export type { MyObjectRef,RequestItemsHistoryObject };

From e35edfeed74920ef9bb6f66bdb0a89ceaa4384e2 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 11 Mar 2024 14:58:20 +0700
Subject: [PATCH 2/3] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=94?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD=E0=B8=99=E0=B8=82=E0=B9=89=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3=20=20=3D>=20?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20body=20filter=20?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=88=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=94?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SalaryLists/DialogAddPerson.vue           |  4 ++
 .../13_salary/interface/index/SalaryList.ts   |  2 +
 .../13_salary/store/SalaryListsStore.ts       |  4 +-
 src/modules/13_salary/views/salaryLists.vue   | 38 +++++++++++--------
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue b/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
index 9e161c03c..6aaeefa4d 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
@@ -97,6 +97,8 @@ const formFilter = reactive<DataFilterPerson>({
   pageSize: 10,
   keyword: "",
   rootId: "",
+  year: 0,
+  period: "",
 });
 const maxPage = ref<number>(1);
 
@@ -111,6 +113,8 @@ function closeModal() {
 function fetchListPerson() {
   showLoader();
   formFilter.rootId = store.rootId;
+  formFilter.period = store.roundMainCode;
+  formFilter.year = store.roundYear;
   http
     .post(config.API.salaryListPerson, formFilter)
     .then((res) => {
diff --git a/src/modules/13_salary/interface/index/SalaryList.ts b/src/modules/13_salary/interface/index/SalaryList.ts
index a490b5dff..0d62b7224 100644
--- a/src/modules/13_salary/interface/index/SalaryList.ts
+++ b/src/modules/13_salary/interface/index/SalaryList.ts
@@ -10,6 +10,8 @@ interface DataFilterPerson {
   pageSize: number;
   keyword: string;
   rootId: string;
+  year: number;
+  period: string;
 }
 
 export type { DataFilter, DataFilterPerson };
diff --git a/src/modules/13_salary/store/SalaryListsStore.ts b/src/modules/13_salary/store/SalaryListsStore.ts
index 2b43dc022..ff11a843e 100644
--- a/src/modules/13_salary/store/SalaryListsStore.ts
+++ b/src/modules/13_salary/store/SalaryListsStore.ts
@@ -21,6 +21,7 @@ export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
   const groupId = ref<string>("");
   const rootId = ref<string>("");
   const roundMainCode = ref<string>("");
+  const roundYear = ref<number>(0);
   const roundCode = ref<string>("");
   const isClosedRound = ref<boolean>(false); // การปิดรอบ
   /** List Menu*/
@@ -152,6 +153,7 @@ export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
     groupOp,
     roundMainCode,
     remaining,
-    isClosedRound
+    isClosedRound,
+    roundYear,
   };
 });
diff --git a/src/modules/13_salary/views/salaryLists.vue b/src/modules/13_salary/views/salaryLists.vue
index aa126ca50..e2122f53a 100644
--- a/src/modules/13_salary/views/salaryLists.vue
+++ b/src/modules/13_salary/views/salaryLists.vue
@@ -4,7 +4,7 @@ import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
 import ProcessStep from "@/modules/13_salary/components/SalaryLists/ProcessStep.vue";
-import PageDashBoard from '@/modules/13_salary/components/SalaryLists/Dashboard.vue'
+import PageDashBoard from "@/modules/13_salary/components/SalaryLists/Dashboard.vue";
 /** importType*/
 import type {
   DataOption,
@@ -63,6 +63,7 @@ function getRound() {
         revisionId: x.revisionId,
         shortCode: x.period,
         isClose: x.isClose,
+        year: x.year,
         name:
           (x.period === "OCT"
             ? "รอบตุลาคม "
@@ -78,6 +79,7 @@ function getRound() {
         : "");
 
       store.roundMainCode = roundFilter.value.shortCode;
+      store.roundYear = roundFilter.value.year;
       store.isClosedRound = roundFilter.value.isClose;
 
       await getSnap(roundFilter.value.shortCode);
@@ -239,6 +241,7 @@ function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
 async function onChangeRound() {
   // เก็บสถานะการปิดรอบในตัวแปร isClosedRound เพื่อใช้ในการเช็ค
   store.isClosedRound = roundFilter.value.isClose;
+  console.log(roundFilter.value);
 
   await getSnap(roundFilter.value.shortCode);
   await getAgency(roundFilter.value.revisionId);
@@ -251,6 +254,7 @@ async function onChangeRound() {
     // );
     store.tabType = "PENDING";
     store.roundMainCode = roundFilter.value.shortCode;
+    store.roundYear = roundFilter.value.year;
   } else {
     isLoad.value = false;
   }
@@ -271,7 +275,11 @@ async function onChangeSnap() {
 async function onChangeAgency() {
   store.rootId = agencyFilter.value;
 
-  if (agencyFilter.value !== 'ALL' && roundFilter.value.id && snapFilter.value) {
+  if (
+    agencyFilter.value !== "ALL" &&
+    roundFilter.value.id &&
+    snapFilter.value
+  ) {
     await fetchSalalyPeriod(
       agencyFilter.value,
       roundFilter.value.id,
@@ -394,20 +402,18 @@ onMounted(async () => {
     <q-separator /> -->
   <q-card flat bordered>
     <div v-if="agencyFilter !== 'ALL'">
-
-
-    <TabGroup v-if="isLoad" :periodLatest="periodLatest" />
-    <q-card v-else class="q-pa-sm">
-      <div class="q-pa-sm">
-        <q-banner inline-actions rounded class="bg-grey-1 text-center">
-          ไม่มีข้อมูล
-        </q-banner>
-      </div>
-    </q-card>
-  </div>
-  <div v-else>
-    <PageDashBoard/>
-  </div>
+      <TabGroup v-if="isLoad" :periodLatest="periodLatest" />
+      <q-card v-else class="q-pa-sm">
+        <div class="q-pa-sm">
+          <q-banner inline-actions rounded class="bg-grey-1 text-center">
+            ไม่มีข้อมูล
+          </q-banner>
+        </div>
+      </q-card>
+    </div>
+    <div v-else>
+      <PageDashBoard />
+    </div>
   </q-card>
 
   <q-card

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 3/3] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4:=20UI=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=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>