แจ้งเตือน กรณีมีแก้ไข

src/modules/11_discipline/components/1_Complaint/Form.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive, watch, watchEffect } from "vue";
-import { useQuasar } from "quasar";
+import { is, useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import type { QTableProps } from "quasar";
 /** import Type */
@@ -55,6 +55,8 @@ const complaintFromRef = ref<Object | null>(null);
 const appellantRef = ref<Object | null>(null);
 const resultRef = ref<Object | null>(null);
 
+const isSave = ref<boolean>(false); // มีการแก้ไขรอบันทึก
+
 const fileList = ref<ArrayFileList[]>([]);
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -305,6 +307,7 @@ function onSubmit() {
         props.onSubmit(formData);
       } else props.onSubmit(formData);
       // props.onSubmit(formData);
+      isSave.value = false;
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -393,7 +396,6 @@ function upLoadFileDoc() {
   http
     .put(config.API.complaintFileUpload(formData.id), Data)
     .then((res) => {
-      console.log(res);
       success($q, "บันทึกข้อมูลสำเร็จ");
       props.getData();
     })
@@ -404,12 +406,10 @@ function upLoadFileDoc() {
       hideLoader();
       formData.documentFile = null;
     });
-  console.log("file", formData.documentFile, formData.id);
 }
 
 async function addPerson(data: any) {
   toggleModal();
-  console.log(data);
   await complainstStore.fetchComplainstAdd(data);
 }
 
@@ -425,6 +425,7 @@ function deletePerson(id: string) {
 }
 
 function removePerson(id: string) {
+  isSave.value = true;
   const dataRow = complainstStore.rowsAdd;
   const updatedRows = dataRow.filter((item: any) => item.personId !== id);
   complainstStore.rowsAdd = updatedRows;
@@ -443,9 +444,21 @@ onMounted(() => {
   complainstStore.visibleColumns = visibleColumns.value;
 });
 </script>
+
 <template>
   <div class="row col-12 bg-white">
     <div class="col-sm-12 col-md-9">
+      <div v-if="isSave === true" class="q-pa-sm q-gutter-sm">
+        <q-banner
+          inline-actions
+          bordered
+          class="bg-red-1 text-red border-orange"
+        >
+          <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
+          ยังไม่ได้บันทึกข้อมูล
+        </q-banner>
+      </div>
+
       <form @submit.prevent="validateForm">
         <div class="col-12">
           <q-card bordered>
@@ -1108,4 +1121,8 @@ onMounted(() => {
   />
 </template>
 
-<style scoped></style>
+<style scoped>
+.q-banner {
+  min-height: 25px;
+}
+</style>