From 7afafb68e5fcf3f2620f27b4cbba15de6e747c3c Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Mon, 20 May 2024 10:49:45 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94=E0=B8=82?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=AA=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=9C=E0=B9=88=E0=B8=B2=E0=B8=99=20=E0=B9=83?=
 =?UTF-8?q?=E0=B8=AB=E0=B9=89=E0=B9=80=E0=B8=9B=E0=B9=87=E0=B8=99=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=AB=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=81=E0=B8=88=E0=B8=B2=E0=B8=81=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=9A=E0=B9=83=E0=B8=AB=E0=B8=A1=E0=B9=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PersonalDetail/Detail.vue      | 104 +++++++++---------
 .../components/PersonalDetail/Education.vue   |  47 ++++----
 .../PersonalDetail/Information/Address.vue    |  16 ++-
 .../PersonalDetail/Information/Certicate.vue  | 103 ++++++++---------
 .../PersonalDetail/Information/Family.vue     |  40 +++++--
 .../Information/Information.vue               |   3 +-
 .../PersonalDetail/Qualification.vue          |  64 +++++++----
 7 files changed, 204 insertions(+), 173 deletions(-)

diff --git a/src/modules/05_placement/components/PersonalDetail/Detail.vue b/src/modules/05_placement/components/PersonalDetail/Detail.vue
index 1185f776d..e492e8315 100644
--- a/src/modules/05_placement/components/PersonalDetail/Detail.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Detail.vue
@@ -23,7 +23,6 @@ import Document from "@/modules/05_placement/components/PersonalDetail/Informati
 import {
   AddressDataDefualt,
   FamilyDataDefualt,
-  
 } from "@/modules/05_placement/interface/index/Main";
 
 import type {
@@ -34,7 +33,7 @@ import type {
   Address,
   Certificate,
   optionData,
-  InformationOps
+  InformationOps,
 } from "@/modules/05_placement/interface/index/Main";
 
 import type { Information } from "@/modules/05_placement/components/PersonalDetail/profileType";
@@ -102,8 +101,6 @@ const FamilyData = ref<Family>(FamilyDataDefualt);
 const AddressData = ref<Address>(AddressDataDefualt);
 const CertificateData = ref<Certificate[]>([]);
 
-
-
 const guidCheck = (id: string) => {
   if (id == "00000000-0000-0000-0000-000000000000") {
     return null;
@@ -265,8 +262,7 @@ const fetchData = async () => {
     .catch((e: any) => {
       messageError($q, e);
     })
-    .finally(() => {
-    });
+    .finally(() => {});
 };
 
 const fetchDataByType = async (type: string) => {
@@ -349,48 +345,48 @@ const fetchDataByType = async (type: string) => {
         ExamData.value.examNumber = data.examNumber;
         ExamData.value.examRound = data.examRound;
         ExamData.value.pass = data.pass;
+      } else if (type == "Certificate") {
+        let listCert: Certificate[] = [];
+
+        data.certificates.map((row: any) => {
+          listCert.push({
+            id: guidCheck(row.id) ?? "",
+            certificateNo: guidCheck(row.certificateNo) ?? "",
+            issuer: row.issuer ?? "",
+            issueDate: new Date(row.issueDate) ?? new Date(),
+            expireDate: new Date(row.expireDate) ?? new Date(),
+            certificateType: row.certificateType ?? "",
+          });
+        });
+        CertificateData.value = listCert;
+      } else if (type == "Education") {
+        let listRow: Education[] = [];
+        data.education.map((row: any) => {
+          listRow.push({
+            id: guidCheck(row.id) ?? "",
+            educationLevel: row.educationLevel ?? "",
+            educationLevelId: guidCheck(row.educationLevelId) ?? "",
+            institute: row.institute ?? "",
+            degree: row.degree ?? "",
+            field: row.field ?? "",
+            gpa: row.gpa ?? "",
+            country: row.country ?? "",
+            duration: row.duration ?? "",
+            other: row.other ?? "",
+            fundName: row.fundName ?? "",
+            durationYear: row.durationYear ?? 0,
+            finishDate: row.finishDate ?? new Date(),
+            isDate: row.isDate ? "true" : "false",
+            startDate: row.startDate ? new Date(row.startDate) : new Date(),
+            endDate: row.endDate ? new Date(row.endDate) : new Date(),
+            positionPath: row.positionPath ?? "",
+            isEducation: row.isEducation ? true : false,
+          });
+        });
+        EducationData.value = listRow;
+      } else if (type == "Qualification") {
+        QualificationData.value = data.isProperty;
       }
-
-      QualificationData.value = data.isProperty;
-
-      let listRow: Education[] = [];
-      data.education.map((row: any) => {
-        listRow.push({
-          id: guidCheck(row.id) ?? "",
-          educationLevel: row.educationLevel ?? "",
-          educationLevelId: guidCheck(row.educationLevelId) ?? "",
-          institute: row.institute ?? "",
-          degree: row.degree ?? "",
-          field: row.field ?? "",
-          gpa: row.gpa ?? "",
-          country: row.country ?? "",
-          duration: row.duration ?? "",
-          other: row.other ?? "",
-          fundName: row.fundName ?? "",
-          durationYear: row.durationYear ?? 0,
-          finishDate: row.finishDate ?? new Date(),
-          isDate: row.isDate ? "true" : "false",
-          startDate: row.startDate ? new Date(row.startDate) : new Date(),
-          endDate: row.endDate ? new Date(row.endDate) : new Date(),
-          positionPath: row.positionPath ?? "",
-          isEducation: row.isEducation ? true : false,
-        });
-      });
-      EducationData.value = listRow;
-
-      let listCert: Certificate[] = [];
-
-      data.certificates.map((row: any) => {
-        listCert.push({
-          id: guidCheck(row.id) ?? "",
-          certificateNo: guidCheck(row.certificateNo) ?? "",
-          issuer: row.issuer ?? "",
-          issueDate: new Date(row.issueDate) ?? new Date(),
-          expireDate: new Date(row.expireDate) ?? new Date(),
-          certificateType: row.certificateType ?? "",
-        });
-      });
-      CertificateData.value = listCert;
     })
     .catch((e: any) => {
       messageError($q, e);
@@ -403,7 +399,7 @@ const fetchDataByType = async (type: string) => {
 /**
  * get รายการ ข้อมูลเกี่ยวกับบุคคล
  */
- const fetchPerson = async () => {
+const fetchPerson = async () => {
   await http
     .get(config.API.profileNewMetaMain)
     .then((res) => {
@@ -465,8 +461,7 @@ const fetchDataByType = async (type: string) => {
       OpsFilter.value.religionOps = optionreligions;
     })
     .catch((e: any) => {})
-    .finally(() => {
-    });
+    .finally(() => {});
 };
 
 onMounted(async () => {
@@ -474,9 +469,8 @@ onMounted(async () => {
 
   await fetchData();
   await changeTab("information");
-  await fetchPerson()
+  await fetchPerson();
 });
-
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row q-pb-sm">
@@ -529,7 +523,7 @@ onMounted(async () => {
           v-model:statusEdit="statusEdit"
           :profileType="profileType"
           v-model:data="CertificateData"
-          :fetch="fetchData"
+          :fetch="fetchDataByType"
         />
       </div>
 
@@ -538,7 +532,7 @@ onMounted(async () => {
         <EducationVue
           v-model:statusEdit="statusEdit"
           v-model:data="EducationData"
-          :fetch="fetchData"
+          :fetch="fetchDataByType"
         />
       </div>
 
@@ -552,7 +546,7 @@ onMounted(async () => {
         <Qualification
           v-model:statusEdit="statusEdit"
           v-model:data="QualificationData"
-          :fetch="fetchData"
+          :fetch="fetchDataByType"
         />
       </div>
 
diff --git a/src/modules/05_placement/components/PersonalDetail/Education.vue b/src/modules/05_placement/components/PersonalDetail/Education.vue
index 46fd997b3..6215e1905 100644
--- a/src/modules/05_placement/components/PersonalDetail/Education.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Education.vue
@@ -494,7 +494,7 @@ const saveData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      await props.fetch();
+      await props.fetch('Education');
       rows.value = props.data;
     });
 };
@@ -544,7 +544,7 @@ const editData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      await props.fetch();
+      await props.fetch('Education');
       rows.value = props.data;
     });
 };
@@ -559,16 +559,17 @@ const deletePlacementEducation = async () => {
   showLoader();
   await http
     .delete(config.API.placementEducationId(id.value))
-    .then((res) => {
+    .then(async(res) => {
       success($q, "ลบข้อมูลสำเร็จ");
       modal.value = false;
+      await props.fetch('Education');
+      rows.value = props.data;
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(async () => {
-      await props.fetch();
-      rows.value = props.data;
+
     });
 };
 
@@ -577,17 +578,16 @@ const deletePlacementEducation = async () => {
  */
 const clickClose = async () => {
   if (editRow.value == true) {
-    $q.dialog({
-      title: `ข้อมูลมีการแก้ไข`,
-      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
-      cancel: "ยกเลิก",
-      ok: "ยืนยัน",
-      persistent: true,
-    }).onOk(async () => {
-      modal.value = false;
-      next.value = false;
-      previous.value = false;
-    });
+    dialogConfirm(
+      $q,
+      () => {
+        modal.value = false;
+        next.value = false;
+        previous.value = false;
+      },
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่"
+    );
   } else {
     modal.value = false;
     next.value = false;
@@ -658,7 +658,7 @@ const addData = () => {
  * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
  */
 const clickCancel = async () => {
-  myForm.value.resetValidation()
+  myForm.value.resetValidation();
   if (editRow.value == true) {
     dialogConfirm(
       $q,
@@ -774,16 +774,19 @@ const getClass = (val: boolean) => {
       </ProfileTable>
     </q-form>
   </q-card>
-  
+
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
-      <q-form ref="myForm" greedy @submit.prevent @validation-success="clickSave">
+      <q-form
+        ref="myForm"
+        greedy
+        @submit.prevent
+        @validation-success="clickSave"
+      >
         <DialogHeader tittle="ประวัติการศึกษา" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 items-top q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
+          <div class="row col-12 items-top q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-xs-6 col-sm-6 col-md-6">
               <selector
                 :class="getClass(edit)"
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
index 9addb031c..730419061 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
@@ -140,6 +140,7 @@ const refreshData = async () => {
       async () => {
         emit("update:statusEdit", false);
         await props.fetch("Address");
+        fetchProvince()
         edit.value = false;
         onEdit.value = false;
       },
@@ -210,6 +211,7 @@ const editData = async () => {
 
 // เลือกข้อมูลจังหวัด
 const selectProvince = async (e: string | null, name: string) => {
+  onEdit.value = true;
   if (e != null) {
     if (name == "1") {
       registAddress.subDistrictId = "";
@@ -227,6 +229,7 @@ const selectProvince = async (e: string | null, name: string) => {
 
 // เลือกข้อมูลอำเภอ
 const selectDistrict = async (e: string | null, name: string) => {
+  onEdit.value = true;
   if (e != null) {
     if (name == "1") {
       registAddress.subDistrictId = "";
@@ -242,6 +245,7 @@ const selectDistrict = async (e: string | null, name: string) => {
 
 // เลือกข้อมูลตำบล
 const selectSubDistrict = (e: string | null, name: string) => {
+  onEdit.value = true;
   if (e != null) {
     if (name == "1") {
       const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
@@ -329,14 +333,12 @@ const fetchProvince = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
     });
 };
 
 // ดึงข้อมูลอำเภอ
 const fetchDistrict = async (id: string | null, position: string) => {
   if (id != null && id != "") {
-    showLoader();
     await http
       .get(config.API.orgProvince + `/${id}`)
       .then(async (res) => {
@@ -374,7 +376,6 @@ const fetchDistrict = async (id: string | null, position: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
       });
   }
 };
@@ -382,7 +383,6 @@ const fetchDistrict = async (id: string | null, position: string) => {
 // ดึงข้อมูลตำบล
 const fetchSubDistrict = async (id: string | null, position: string) => {
   if (id != null && id != "") {
-    showLoader();
     await http
       .get(config.API.orgDistrict + `/${id}`)
       .then(async (res) => {
@@ -447,6 +447,10 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+
+function checkEdit() {
+  onEdit.value = true;
+}
 </script>
 
 <template>
@@ -477,6 +481,7 @@ const getClass = (val: boolean) => {
             v-model="addressData.registAddress"
             :rules="[(val: string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
             :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
@@ -583,6 +588,7 @@ const getClass = (val: boolean) => {
             label="ใช่"
             dense
             :disable="!edit"
+            @update:modelValue="checkEdit"
           />
           <q-radio
             v-model="addressData.registSame"
@@ -591,6 +597,7 @@ const getClass = (val: boolean) => {
             val="0"
             label="ไม่"
             dense
+            @update:modelValue="checkEdit"
             :disable="!edit"
           />
         </div>
@@ -603,6 +610,7 @@ const getClass = (val: boolean) => {
             dense
             lazy-rules
             type="textarea"
+            @update:modelValue="checkEdit"
             autogrow
             :readonly="!edit"
             :borderless="!edit"
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue b/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
index fe346d1c6..257103e21 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
@@ -349,7 +349,7 @@ const saveData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      await props.fetch();
+      await props.fetch("Certificate");
       rows.value = props.data;
     });
 };
@@ -376,7 +376,7 @@ const editData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      await props.fetch();
+      await props.fetch("Certificate");
       rows.value = props.data;
     });
 };
@@ -385,38 +385,27 @@ const editData = async () => {
  * ลบลบข้อมูล
  */
 const clickDelete = async () => {
-  $q.dialog({
-    title: `ลบข้อมูล`,
-    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
-    cancel: "ยกเลิก",
-    ok: "ยืนยัน",
-    persistent: true,
-  })
-    .onOk(async () => {
-      showLoader();
-      await http
-        .delete(
-          config.API.placementCertDetailId(
-            route.params.personalId.toString(),
-            id.value
-          )
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .delete(
+        config.API.placementCertDetailId(
+          route.params.personalId.toString(),
+          id.value
         )
-        .then((res) => {
-          success($q, "ลบข้อมูลสำเร็จ");
-          modal.value = false;
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await props.fetch();
-          rows.value = props.data;
-        });
-    })
-    .onCancel(async () => {
-      await props.fetch();
-      rows.value = props.data;
-    });
+      )
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await props.fetch("Certificate");
+        rows.value = props.data;
+      });
+  });
 };
 
 /**
@@ -424,17 +413,16 @@ const clickDelete = async () => {
  */
 const clickClose = async () => {
   if (editRow.value == true) {
-    $q.dialog({
-      title: `ข้อมูลมีการแก้ไข`,
-      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
-      cancel: "ยกเลิก",
-      ok: "ยืนยัน",
-      persistent: true,
-    }).onOk(async () => {
-      modal.value = false;
-      next.value = false;
-      previous.value = false;
-    });
+    dialogConfirm(
+      $q,
+      () => {
+        modal.value = false;
+        next.value = false;
+        previous.value = false;
+      },
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่"
+    );
   } else {
     modal.value = false;
     next.value = false;
@@ -479,19 +467,18 @@ const addData = () => {
  * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
  */
 const clickCancel = async () => {
-  myForm.value.resetValidation()
+  myForm.value.resetValidation();
   if (editRow.value == true) {
-    $q.dialog({
-      title: `ข้อมูลมีการแก้ไข`,
-      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
-      cancel: "ยกเลิก",
-      ok: "ยืนยัน",
-      persistent: true,
-    }).onOk(async () => {
-      edit.value = false;
-      await checkRowPage();
-      await getData();
-    });
+    dialogConfirm(
+      $q,
+      async () => {
+        edit.value = false;
+        await checkRowPage();
+        await getData();
+      },
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันยกเลิกการแก้ไขใช่หรือไม่"
+    );
   } else {
     edit.value = false;
     await checkRowPage();
@@ -638,9 +625,7 @@ const getClass = (val: boolean) => {
         />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 items-top q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
+          <div class="row col-12 items-top q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Family.vue b/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
index 4927a6853..bbdef7391 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
@@ -56,11 +56,13 @@ const onEdit = ref<boolean>(false);
 const myform = ref<QForm | null>(null);
 const familyData = ref<Family>(props.data);
 
-onMounted(async () => {
-  emit("update:statusEdit", false);
-});
 
-const filterSelector = (val: any, update: Function, refData: string) => {
+
+function checkEdit() {
+  onEdit.value = true;
+}
+
+function filterSelector(val: any, update: Function, refData: string){
   update(() => {
     props.Ops[`${refData}`] = props.OpsFilter[`${refData}`].filter(
       (v: DataOption) => v.name.indexOf(val) > -1
@@ -68,7 +70,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
   });
 };
 
-const refreshData = async () => {
+async function refreshData(){
   if (myform.value != null) {
     myform.value.reset();
   }
@@ -89,7 +91,7 @@ const refreshData = async () => {
   }
 };
 
-const editData = async () => {
+async function editData(){
   dialogConfirm($q, async () => {
     showLoader();
     //   const body: ResponseObject = {
@@ -148,7 +150,7 @@ const editData = async () => {
   });
 };
 
-const saveData = async () => {
+async function saveData(){
   await myform.value?.validate().then(async (success: boolean) => {
     if (success) {
       await editData();
@@ -157,7 +159,8 @@ const saveData = async () => {
   });
 };
 
-const selectRadio = (e: boolean, i: any) => {
+function selectRadio(e: boolean, i: any){
+  onEdit.value = true;
   if (e) {
     familyData.value.marryPrefixId = "";
     familyData.value.marryFirstName = "";
@@ -167,10 +170,9 @@ const selectRadio = (e: boolean, i: any) => {
   }
 };
 
-const changeBtn = async () => {
+async function changeBtn(){
   if (edit.value == true) {
     if (props.statusEdit === true) {
-      edit.value = false;
       props.notiNoEdit();
     } else {
       emit("update:statusEdit", true);
@@ -180,12 +182,16 @@ const changeBtn = async () => {
   }
 };
 
-const getClass = (val: boolean) => {
+function getClass(val: boolean){
   return {
     "full-width inputgreen cursor-pointer": val,
     "full-width cursor-pointer": !val,
   };
 };
+
+onMounted(async () => {
+  emit("update:statusEdit", false);
+});
 </script>
 
 <template>
@@ -206,6 +212,7 @@ const getClass = (val: boolean) => {
         <div class="col-xs-12 col-sm-3 col-md-3">
           <selector
             :hide-dropdown-icon="!edit"
+            @update:modelValue="checkEdit"
             hide-bottom-space
             :class="getClass(edit)"
             :readonly="!edit"
@@ -241,6 +248,7 @@ const getClass = (val: boolean) => {
             v-model="familyData.fatherFirstName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
             :label="`${'ชื่อ'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
@@ -255,6 +263,7 @@ const getClass = (val: boolean) => {
             v-model="familyData.fatherLastName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
             :label="`${'นามสกุล'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <div class="col-xs-12 col-sm-3 col-md-3">
@@ -268,6 +277,7 @@ const getClass = (val: boolean) => {
             :borderless="!edit"
             v-model="familyData.fatherOccupation"
             :label="`${'อาชีพ'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
 
@@ -292,6 +302,7 @@ const getClass = (val: boolean) => {
             option-value="id"
             :label="`${'คำนำหน้า'}`"
             use-input
+            @update:modelValue="checkEdit"
             input-debounce="0"
             @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
@@ -311,6 +322,7 @@ const getClass = (val: boolean) => {
             v-model="familyData.motherFirstName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
             :label="`${'ชื่อ'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
@@ -325,6 +337,7 @@ const getClass = (val: boolean) => {
             v-model="familyData.motherLastName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
             :label="`${'นามสกุล'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <div class="col-xs-12 col-sm-3 col-md-3">
@@ -338,6 +351,7 @@ const getClass = (val: boolean) => {
             :borderless="!edit"
             v-model="familyData.motherOccupation"
             :label="`${'อาชีพ'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
@@ -387,6 +401,7 @@ const getClass = (val: boolean) => {
             option-value="id"
             :label="`${'คำนำหน้า'}`"
             use-input
+            @update:modelValue="checkEdit"
             input-debounce="0"
             @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
@@ -406,6 +421,7 @@ const getClass = (val: boolean) => {
             v-model="familyData.marryFirstName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
             :label="`${'ชื่อ'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.couple == '1'">
@@ -420,6 +436,7 @@ const getClass = (val: boolean) => {
             v-model="familyData.marryLastName"
             :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
             :label="`${'นามสกุล'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
         <!-- <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.couple == '1'">
@@ -450,6 +467,7 @@ const getClass = (val: boolean) => {
             :borderless="!edit"
             v-model="familyData.marryOccupation"
             :label="`${'อาชีพ'}`"
+            @update:modelValue="checkEdit"
           />
         </div>
       </div>
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Information.vue b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
index 1d1b5171e..f9bfe39ca 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
@@ -19,6 +19,7 @@ import { useProfileDataStore } from "@/modules/05_placement/store";
 import type { QForm } from "quasar";
 import type { PropType } from "vue";
 
+const onEdit = ref<boolean>(false);
 const props = defineProps({
   statusEdit: {
     type: Boolean,
@@ -251,7 +252,7 @@ const getClass = (val: boolean) => {
   };
 };
 
-const onEdit = ref<boolean>(false);
+
 function checkEdit() {
   onEdit.value = true;
 }
diff --git a/src/modules/05_placement/components/PersonalDetail/Qualification.vue b/src/modules/05_placement/components/PersonalDetail/Qualification.vue
index b12e95f91..545ac9b3d 100644
--- a/src/modules/05_placement/components/PersonalDetail/Qualification.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Qualification.vue
@@ -15,7 +15,7 @@ import type { Property } from "@/modules/05_placement/interface/index/Main";
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const route = useRoute();
-const { showLoader, hideLoader, messageError, success } = mixin;
+const { showLoader, hideLoader, messageError, success, dialogConfirm } = mixin;
 
 const props = defineProps({
   statusEdit: {
@@ -34,36 +34,39 @@ const props = defineProps({
 const emit = defineEmits(["update:statusEdit", "update:data"]);
 
 const edit = ref<boolean>(false);
+const onEdit = ref<boolean>(false);
 
 onMounted(() => {
   emit("update:statusEdit", false);
 });
 
 const saveData = async () => {
-  showLoader();
-  await http
-    .put(
-      config.API.placementPropertyId(route.params.personalId.toString()),
-      props.data
-    )
-    .then((res: any) => {
-      success($q, "แก้ไขข้อมูลสำเร็จ");
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await props.fetch();
-      edit.value = false;
-      hideLoader();
-      changeBtn();
-    });
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .put(
+        config.API.placementPropertyId(route.params.personalId.toString()),
+        props.data
+      )
+      .then((res: any) => {
+        success($q, "แก้ไขข้อมูลสำเร็จ");
+        onEdit.value = false;
+      })
+      .catch((e: any) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await props.fetch("Qualification");
+        edit.value = false;
+        hideLoader();
+        changeBtn();
+      });
+  });
 };
 
 const changeBtn = async () => {
   if (edit.value == true) {
     if (props.statusEdit === true) {
-      edit.value = false;
     } else {
       emit("update:statusEdit", true);
     }
@@ -73,8 +76,26 @@ const changeBtn = async () => {
 };
 
 const onCancel = async () => {
-  await props.fetch();
+  if (onEdit.value) {
+    dialogConfirm(
+      $q,
+      async () => {
+        emit("update:statusEdit", false);
+        await props.fetch("Qualification");
+        edit.value = false;
+        onEdit.value = false;
+      },
+      `ข้อมูลมีการแก้ไข`,
+      `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`
+    );
+  } else {
+    edit.value = false;
+  }
 };
+
+function checkEdit() {
+  onEdit.value = true;
+}
 </script>
 <template>
   <q-form ref="myform" greedy @submit.prevent @validation-success="saveData">
@@ -96,6 +117,7 @@ const onCancel = async () => {
           v-model="item.value"
           :label="item.name"
           keep-color
+          @update:modelValue="checkEdit"
           color="gray-5"
           :disable="!statusEdit"
         />