ปรับหน้ารายละเอียดของผู้สอบผ่าน ให้เป็นข้อมูลหลักจากระบบใหม่

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"
         />