โครงการtab ข้อมูลเบื้องต้น API

src/modules/15_development/components/BasicInfo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { reactive, ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 
@@ -9,11 +9,22 @@ import DialogSelectAgency from "@/modules/15_development/components/DialogSelect
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
 const store = useDevelopmentDataStore();
-const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
+const mixin = useCounterMixin();
 
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = mixin;
 const route = useRoute();
 const projectId = ref<string>(route.params.id.toLocaleString());
 
@@ -25,6 +36,8 @@ const formData = reactive<FormBasicinfo>({
   objective: "",
 });
 
+const rows = ref<FormBasicinfo[]>([]);
+
 const modalDialogSelect = ref<boolean>(false);
 function selectAgency() {
   modalDialogSelect.value = true;
@@ -33,14 +46,56 @@ function updateAgency(name: string) {
   formData.org = name;
 }
 
+async function fetchData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.developmentBasicInfoById(id))
+    .then(async (res) => {
+      const data = res.data.result;
+      formData.year = data.year;
+      formData.reason = data.reason;
+      formData.projectName = data.projectName;
+      formData.objective = data.objective;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function editData(id: string) {
+  await http
+    .put(config.API.developmentBasicInfoById(id), {
+      year: formData.year,
+      reason: formData.reason,
+      projectName: formData.projectName,
+      objective: formData.objective,
+    })
+    .then(() => {
+      fetchData(id);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
-    // post
-    console.log("projectId===>", projectId.value);
+    editData(projectId.value);
     hideLoader();
   });
 }
+
+onMounted(async () => {
+  fetchData(projectId.value);
+});
 </script>
 
 <template>
@@ -49,7 +104,7 @@ function onSubmit() {
       <div class="col-xs-6 col-sm-2 col-md-2">
         <datepicker
           menu-class-name="modalfix"
-          v-model="store.formAddProject.year"
+          v-model="formData.year"
           :locale="'th'"
           autoApply
           year-picker
@@ -65,7 +120,7 @@ function onSubmit() {
               lazy-rules
               outlined
               class="inputgreen"
-              :model-value="Number(store.formAddProject.year) + 543"
+              :model-value="Number(formData.year) + 543"
               :label="`${'ปีงบประมาณ'}`"
             >
               <template v-slot:prepend>
@@ -93,16 +148,16 @@ function onSubmit() {
           @click="selectAgency"
         />
         <!-- :rules="[
-        (val:string) =>
-          !!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
-      ]" -->
+          (val:string) =>
+            !!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
+        ]" -->
       </div>
       <div class="col-xs-12 col-sm-12 col-md-12">
         <q-input
           outlined
           class="inputgreen"
           dense
-          v-model="store.formAddProject.projectName"
+          v-model="formData.projectName"
           label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
           rows="6"
           type="textarea"
@@ -110,7 +165,6 @@ function onSubmit() {
           :rules="[
             (val:string) =>
               !!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,
-
           ]"
         />
       </div>
@@ -119,7 +173,7 @@ function onSubmit() {
           outlined
           class="inputgreen"
           dense
-          v-model="store.formAddProject.reason"
+          v-model="formData.reason"
           label="หลักการและเหตุผล"
           rows="6"
           hide-bottom-space
@@ -131,7 +185,7 @@ function onSubmit() {
           outlined
           class="inputgreen"
           dense
-          v-model="store.formAddProject.objective"
+          v-model="formData.objective"
           label="วัตถุประสงค์"
           rows="6"
           hide-bottom-space