ปรับหน้าขอแก้ไขข้อมูลทะเบียนประวัติ

src/modules/04_registryPerson/components/Dialog/04_Father.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive,watch } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -28,6 +28,7 @@ const {
 
 const modal = defineModel<boolean>("modal", { required: true }); // ตัวแปร popup
 const profileId = defineModel<string>("profileId", { required: true }); //id บุคคล
+const idCard = defineModel<string>("idCard", { required: true }); //เลขบัตร ปชช
 
 const props = defineProps({
   fetchData: Function,
@@ -101,6 +102,15 @@ async function upDateStatus() {
       hideLoader();
     });
 }
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      storeLinkCenter.fetchPerson();
+      fatherData.citizenId = idCard.value;
+    }
+  }
+);
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
@@ -117,6 +127,7 @@ async function upDateStatus() {
                   <q-input
                     outlined
                     hide-bottom-space
+                    readonly
                     bg-color="white"
                     dense
                     v-model="fatherData.citizenId"

src/modules/04_registryPerson/components/Dialog/05_Mother.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -32,6 +32,7 @@ const props = defineProps({
 
 const modal = defineModel<boolean>("modal", { required: true }); // ตัวแปร popup
 const profileId = defineModel<string>("profileId", { required: true }); //id บุคคล
+const idCard = defineModel<string>("idCard", { required: true }); //เลขบัตร ปชช
 
 const motherData = reactive<FormPerson>({
   isLive: 1,
@@ -100,6 +101,15 @@ async function upDateStatus() {
       hideLoader();
     });
 }
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      storeLinkCenter.fetchPerson();
+      motherData.citizenId = idCard.value;
+    }
+  }
+);
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
@@ -118,6 +128,7 @@ async function upDateStatus() {
                     hide-bottom-space
                     bg-color="white"
                     dense
+                    readonly
                     v-model="motherData.citizenId"
                     :label="`${'เลขประจำตัวประชาชน'}`"
                     maxlength="13"

src/modules/04_registryPerson/components/Dialog/06_Couple.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -27,6 +27,7 @@ const {
 
 const modal = defineModel<boolean>("modal", { required: true }); // ตัวแปร popup
 const profileId = defineModel<string>("profileId", { required: true }); //id บุคคล
+const idCard = defineModel<string>("idCard", { required: true }); //เลขบัตร ปชช
 
 const props = defineProps({
   fetchData: Function,
@@ -120,6 +121,16 @@ function filterSelectorRelation(val: any, update: Function) {
       );
   });
 }
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      storeLinkCenter.fetchPerson();
+      storeLinkCenter.fetchDataRelationship();
+      coupleData.citizenId = idCard.value;
+    }
+  }
+);
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
@@ -160,6 +171,7 @@ function filterSelectorRelation(val: any, update: Function) {
                 outlined
                 bg-color="white"
                 dense
+                readonly
                 v-model="coupleData.citizenId"
                 :label="`${'เลขประจำตัวประชาชน'}`"
                 maxlength="13"

src/modules/04_registryPerson/components/Dialog/07_Child.vue

@@ -1,276 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive } from "vue";
-import { useQuasar } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
-import { useDataLinkCenter } from "@/modules/04_registryPerson/stores/LinkCenter";
-import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
-
-import type { FormChildren } from "@/modules/04_registryPerson/interface/index/family";
-
-import Header from "@/components/DialogHeader.vue"; //ส่วนหัว popup
-
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const storeLinkCenter = useDataLinkCenter();
-const storeProfile = useProfileDataStore();
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  dialogConfirm,
-  modalError,
-  success,
-} = mixin;
-
-const props = defineProps({
-  fetchData: Function,
-  requestId: String,
-});
-
-const modal = defineModel<boolean>("modal", { required: true }); // ตัวแปร popup
-const profileId = defineModel<string>("profileId", { required: true }); //id บุคคล
-
-const childData = ref<FormChildren[]>([]);
-
-/** ปิด popup */
-async function closeDialog() {
-  modal.value = false;
-  childData.value = [];
-}
-
-/** อัพเดตข้อมูลครอบครัว */
-async function onSubmit() {
-  if (childData.value.length !== 0) {
-    for (const child of childData.value) {
-      saveChildren(child);
-    }
-  }
-}
-
-async function saveChildren(child: FormChildren) {
-  const body = {
-    profileId: profileId.value,
-    childrenCitizenId: child.childrenCitizenId,
-    childrenPrefix: child.childrenPrefix,
-    childrenFirstName: child.childrenFirstName,
-    childrenLastName: child.childrenLastName,
-    childrenCareer: child.childrenCareer,
-    childrenLive: child.childrenLive === 1 ? true : false,
-  };
-
-  return http
-    .post(config.API.profileFamily("", "children"), body)
-    .then((res) => {})
-    .catch((e) => {
-      messageError($q, e);
-      hideLoader();
-    })
-    .finally(() => {});
-}
-
-/**
- * เพิ่มลบ row
- * @param type 1 = เพิ่ม / 0 = ลบ
- * @param index ระบุว่าเป็น object ตัวไหน
- */
-function onChild(type: number, index?: number) {
-  if (type === 1) {
-    childData.value.push({
-      id: "",
-      createdAt: "",
-      createdUserId: "",
-      createdFullName: "",
-      lastUpdatedAt: "",
-      lastUpdateUserId: "",
-      lastUpdateFullName: "",
-      profileId: "",
-      profileEmployeeId: "",
-      childrenCitizenId: "",
-      childrenPrefix: "",
-      childrenFirstName: "",
-      childrenLastName: "",
-      childrenCareer: "",
-      childrenLive: 1,
-    } as FormChildren);
-  } else if (type === 0 && index !== undefined) {
-    childData.value.splice(index, 1);
-  }
-}
-</script>
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 80vw">
-      <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <Header tittle="ขอปรับปรุงข้อมูลบุตร" :close="closeDialog" />
-        <q-separator />
-
-        <q-card-section class="scroll" style="max-height: 80vh">
-          <div class="row q-col-gutter-sm">
-            <div class="col-xs-12 text-weight-bold">
-              • บุตร
-              <q-btn
-                dense
-                round
-                flat
-                icon="add"
-                color="primary"
-                @click="onChild(1)"
-                ><q-tooltip>เพิ่ม</q-tooltip></q-btn
-              >
-            </div>
-            <div
-              class="row col-12 q-col-gutter-x-xs"
-              v-for="(item, index) in childData"
-              :key="index"
-            >
-              <div class="col-12 q-mb-xs">บุตรคนที่:{{ index + 1 }}</div>
-              <div class="col-xs-6 col-sm-6 col-md-3">
-                <q-input
-                  outlined
-                  hide-bottom-space
-                  bg-color="white"
-                  dense
-                  v-model="item.childrenCitizenId"
-                  :label="`${'เลขประจำตัวประชาชน'}`"
-                  maxlength="13"
-                  :rules="[
-                          (val:string) => !!val || 'กรุณากรอกเลขบัตรประชาชน',
-                          (val:string) =>
-                            val.length === 13 ||
-                            'กรุณากรอกเลขบัตรประชาชนให้ครบ 13 หลัก',
-                        ]
-                  "
-                  class="inputgreen"
-                  mask="#############"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-2">
-                <q-select
-                  outlined
-                  bg-color="white"
-                  lazy-rules
-                  hidden-space
-                  hide-bottom-space
-                  dense
-                  class="inputgreen"
-                  :rules="
-[(val:string) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']
-
-                  "
-                  label="คำนำหน้าชื่อ"
-                  v-model="item.childrenPrefix"
-                  use-input
-                  input-debounce="0"
-                  emit-value
-                  map-options
-                  :options="storeLinkCenter.OpsPerson.prefixOps"
-                  option-label="name"
-                  option-value="name"
-                  @filter="(inputValue:string,
-                    doneFn:Function) => storeProfile.filterSelector(inputValue, doneFn,'prefixOps'
-                    ) "
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-2">
-                <q-input
-                  outlined
-                  dense
-                  hide-bottom-space
-                  bg-color="white"
-                  class="inputgreen"
-                  lazy-rules
-                  v-model="item.childrenFirstName"
-                  :rules="
-[(val:string) => !!val || 'กรุณากรอกชื่อ']
-
-                  "
-                  label="ชื่อ"
-                  hidden-space
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-2">
-                <q-input
-                  outlined
-                  dense
-                  class="inputgreen"
-                  bg-color="white"
-                  hide-bottom-space
-                  lazy-rules
-                  v-model="item.childrenLastName"
-                  :rules="
-[(val:string) => !!val || 'กรุณากรอกนามสกุล']
-
-                  "
-                  label="นามสกุล"
-                />
-              </div>
-              <div class="col-xs-6 col-sm-6 col-md-2">
-                <q-input
-                  outlined
-                  dense
-                  class="inputgreen"
-                  bg-color="white"
-                  v-model="item.childrenCareer"
-                  label="อาชีพ"
-                />
-              </div>
-              <div class="self-center">
-                <q-btn
-                  dense
-                  flat
-                  round
-                  icon="mdi-trash-can"
-                  color="red"
-                  @click="onChild(0, index)"
-                >
-                  <q-tooltip>ลบ</q-tooltip>
-                </q-btn>
-              </div>
-              <div class="col-12">
-                <div class="row q-my-xs">
-                  <div class="q-mr-sm">สถานภาพการมีชีวิต</div>
-                  <div>
-                    <q-radio
-                      class="q-mr-sm"
-                      v-model="item.childrenLive"
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      :val="1"
-                      label="ยังมีชีวิตอยู่"
-                      dense
-                      :color="!item.childrenLive ? 'grey' : 'primary'"
-                    />
-                    <q-radio
-                      v-model="item.childrenLive"
-                      checked-icon="task_alt"
-                      unchecked-icon="panorama_fish_eye"
-                      :val="0"
-                      :color="!item.childrenLive ? 'grey' : 'red'"
-                      label="ถึงแก่กรรม"
-                      dense
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-
-        <q-card-actions align="right">
-          <q-btn
-            label="บันทึกลงทะเบียนประวัติ"
-            color="secondary"
-            type="submit"
-          />
-          <q-btn label="ยกเลิก" color="orange" @click="modal = false"
-            ><q-tooltip>ยกเลิก</q-tooltip></q-btn
-          >
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>

src/modules/04_registryPerson/components/Dialog/DialogUpdate.vue

@@ -201,27 +201,6 @@ async function amiRequest() {
   formDataAddress.currentDistrictId = data.value.currentDistrictId;
   formDataAddress.currentSubDistrictId = data.value.currentSubDistrictId;
   formDataAddress.currentZipCode = data.value.currentZipCode;
-
-  //   formFamily.fatherFirstName = data.value.fatherName;
-  //   formFamily.motherFirstName = data.value.motherName;
-}
-
-/**
- * function fetch ข้อมูลความสัมพันธ์
- */
-async function fetchDataRelationship() {
-  await http
-    .get(config.API.orgRelationship)
-    .then(async (res) => {
-      const list = await res.data.result.map((e: any) => ({
-        id: e.id,
-        name: e.name,
-      }));
-      storeLinkCenter.optionRelationshipMain = list;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
 }
 
 watch(
@@ -230,7 +209,6 @@ watch(
     if (modal.value) {
       showLoader();
       count.value = 0;
-      await fetchDataRelationship();
       await storeLinkCenter.fetchPerson();
       await amiRequest();
       presentAddress.value = formDataAddress.registrationZipCode ? "0" : "1";

src/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue

@@ -13,6 +13,9 @@ import type { DataRequest } from "@/modules/04_registryPerson/interface/response
 
 import Workflow from "@/components/Workflow/Main.vue";
 import DialogUpdate from "@/modules/04_registryPerson/components/Dialog/DialogUpdate.vue";
+import DialogUpdateFather from "@/modules/04_registryPerson/components/Dialog/04_Father.vue";
+import DialogUpdateMother from "@/modules/04_registryPerson/components/Dialog/05_Mother.vue";
+import DialogUpdateCouple from "@/modules/04_registryPerson/components/Dialog/06_Couple.vue";
 
 const $q = useQuasar();
 const router = useRouter();
@@ -29,14 +32,21 @@ const {
 
 const urlImg = ref<string>("");
 const modalUpdate = ref<boolean>(false);
+const modalFather = ref<boolean>(false);
+const modalMother = ref<boolean>(false);
+const modalCouple = ref<boolean>(false);
+
 const profileId = ref<string>("");
-const idCard = ref<string>("");
+const citizenId = ref<string>("");
 const requestId = ref<string>(route.params.id.toString());
-const dataRequest = ref<any>({
+const dataRequest = ref<DataRequest>({
+  id: "",
   fullname: "",
-  createdAt: null,
+  createdAt: "",
   topic: "",
   detail: "",
+  status: "",
+  citizenId: "",
 });
 
 //ฟอร์มสถานะคำร้อง
@@ -66,12 +76,7 @@ async function fetchDataRequest() {
     .get(config.API.requestEdit + `${requestId.value}`)
     .then((res) => {
       const data = res.data.result;
-      dataRequest.value = {
+      dataRequest.value = data;
-        fullname: data.fullname,
-        createdAt: data.createdAt,
-        topic: data.topic,
-        detail: data.detail,
-      };
 
       formData.status = data.status;
       formData.remark = data.remark;
@@ -195,8 +200,32 @@ async function downloadUrl(id: string, fileName: string) {
     });
 }
 
-function onUpdate() {
+function onUpdate(data: DataRequest) {
-  modalUpdate.value = true;
+  citizenId.value = data.citizenId as string;
+  if (data.topic == "ขอปรับปรุงข้อมูลจากกรมการปกครอง") {
+    modalUpdate.value = true;
+  } else if (data.topic == "ขอแก้ไขข้อมูล บิดา") {
+    modalFather.value = true;
+  } else if (data.topic == "ขอแก้ไขข้อมูล มารดา") {
+    modalMother.value = true;
+  } else if (data.topic == "ขอแก้ไขข้อมูล คู่สมรส") {
+    modalCouple.value = true;
+  }
+}
+
+function topicConvert(type: string) {
+  switch (type) {
+    case "ขอแก้ไขข้อมูล บิดา":
+      return "แก้ไขข้อมูล บิดา";
+    case "ขอแก้ไขข้อมูล มารดา":
+      return "แก้ไขข้อมูล มารดา";
+    case "ขอแก้ไขข้อมูล คู่สมรส":
+      return "แก้ไขข้อมูล คู่สมรส";
+    case "ขอปรับปรุงข้อมูลจากกรมการปกครอง":
+      return "ปรับปรุงข้อมูลจากกรมการปกครอง";
+    default:
+      return "";
+  }
 }
 
 onMounted(async () => {
@@ -223,10 +252,10 @@ onMounted(async () => {
     <q-btn
       v-if="workflowRef?.permission.isUpdate"
       color="public"
-      label="ปรับปรุงข้อมูลจากกรมการปกครอง"
+      :label="topicConvert(dataRequest.topic)"
-      @click="onUpdate"
+      @click="onUpdate(dataRequest)"
     >
-      <q-tooltip>ปรับปรุงข้อมูลจากกรมการปกครอง</q-tooltip>
+      <q-tooltip>{{ topicConvert(dataRequest.topic) }}</q-tooltip>
     </q-btn>
   </div>
   <q-card>
@@ -270,7 +299,7 @@ onMounted(async () => {
                         class="full-width"
                         :model-value="
                           dataRequest.createdAt != null
-                            ? date2Thai(dataRequest.createdAt)
+                            ? date2Thai(dataRequest.createdAt as Date)
                             : null
                         "
                         :label="`${'วันที่ยื่นขอ'}`"
@@ -465,7 +494,31 @@ onMounted(async () => {
 
   <DialogUpdate
     v-model:modal="modalUpdate"
-    v-model:id-card="idCard"
+    v-model:id-card="dataRequest.citizenId"
+    v-model:profile-id="profileId"
+    :fetch-data="fetchDataRequest"
+    :request-id="requestId"
+  />
+
+  <DialogUpdateFather
+    v-model:modal="modalFather"
+    v-model:id-card="dataRequest.citizenId"
+    v-model:profile-id="profileId"
+    :fetch-data="fetchDataRequest"
+    :request-id="requestId"
+  />
+
+  <DialogUpdateMother
+    v-model:modal="modalMother"
+    v-model:id-card="dataRequest.citizenId"
+    v-model:profile-id="profileId"
+    :fetch-data="fetchDataRequest"
+    :request-id="requestId"
+  />
+
+  <DialogUpdateCouple
+    v-model:modal="modalCouple"
+    v-model:id-card="dataRequest.citizenId"
     v-model:profile-id="profileId"
     :fetch-data="fetchDataRequest"
     :request-id="requestId"

src/modules/04_registryPerson/interface/response/Main.ts

@@ -27,18 +27,18 @@ interface DataPerson {
 }
 
 interface DataRequest {
-  createdAt: string;
+  createdAt: string|Date;
-  createdFullName: string;
+  createdFullName?: string;
   detail: string;
   fullname: string;
   id: string;
-  lastUpdateFullName: string;
+  lastUpdateFullName?: string;
-  lastUpdatedAt: string;
+  lastUpdatedAt?: string;
-  remark: string;
+  remark?: string;
   status: string;
   topic: string;
   profileId?: string;
-  idcard?: string;
+  citizenId: string;
 }
 
 interface DataProfile {

src/modules/04_registryPerson/stores/LinkCenter.ts

@@ -335,6 +335,24 @@ export const useDataLinkCenter = defineStore("DataLinkCenter", () => {
         break;
     }
   }
+
+  /**
+ * function fetch ข้อมูลความสัมพันธ์
+ */
+function fetchDataRelationship() {
+  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);
+    });
+}
   return {
     fetchPerson,
     OpsPersonFilter,
@@ -348,5 +366,6 @@ export const useDataLinkCenter = defineStore("DataLinkCenter", () => {
     fetchSubDistrict,
     optionRelationshipMain,
     optionRelationship,
+    fetchDataRelationship
   };
 });

src/modules/04_registryPerson/stores/profile.ts

@@ -34,7 +34,6 @@ export const useProfileDataStore = defineStore("profile", () => {
     nationality: null,
     ethnicity: null,
     birthDate: null,
-    phone: null,
     lastName: "",
     firstName: "",
     prefix: "",