ผูก API สรุปผลการพิจารณา

src/modules/11_discipline/components/4_Result/Form.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useQuasar, QForm } from "quasar";
 import { useRouter, useRoute } from "vue-router";
+
 import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 
@@ -14,7 +17,7 @@ const investigateDis = useInvestigateDisStore();
 const { fecthDirector } = investigateDis;
 
 const mixin = useCounterMixin();
-const { date2Thai, hideLoader, dialogConfirm } = mixin;
+const { date2Thai, hideLoader, dialogConfirm, success, messageError } = mixin;
 const router = useRouter();
 const route = useRoute();
 
@@ -34,16 +37,20 @@ const props = defineProps({
     type: Function,
     default: () => "",
   },
+  fetchData: {
+    type: Function,
+    default: () => "",
+  },
 });
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
-  detail: "",
+  resultDescription: "",
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectdisciplinary: FormRef = {
-  detail: detailRef,
+  resultDescription: detailRef,
 };
 
 /** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
@@ -74,8 +81,17 @@ function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      console.log(formData);
-      props.onSubmit();
+      await http
+        .put(config.API.listResultById(id.value), formData)
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(async () => {
+          await props.fetchData();
+        });
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -83,23 +99,24 @@ function onSubmit() {
 }
 
 async function fetchDatadetail() {
-  formData.detail = props.data.detail;
+  formData.resultDescription = props.data.resultDescription;
 }
 /**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
  * เก็บข้อมูลลง formData
  */
-watch(props.data, async () => {
-  fetchDatadetail();
-});
+watch(
+  () => props.data,
+  async () => {
+    await fetchDatadetail();
+  }
+);
 
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
-onMounted(async () => {
-  await fetchDatadetail();
-});
+onMounted(async () => {});
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
@@ -114,7 +131,7 @@ onMounted(async () => {
                 dense
                 outlined
                 ref="detailRef"
-                v-model="formData.detail"
+                v-model="formData.resultDescription"
                 for="#detail"
                 label="สรุปผลการพิจารณา"
                 hide-bottom-space