เพิ่มโครงการ/หลักสูตรการฝึกอบรม => ข้อมูลเบื้องต้น,เป้าหมาย

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import BasicInfo from "@/modules/15_development/components/BasicInfo.vue";
 import Target from "@/modules/15_development/components/Target.vue";
@@ -10,18 +12,115 @@ import FollowResult from "@/modules/15_development/components/FollowResult.vue";
 import Other from "@/modules/15_development/components/Other.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
-const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
+const store = useDevelopmentDataStore();
+const {
+  success,
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  dialogMessageNotify,
+} = useCounterMixin();
 
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
+const projectId = ref<string | null>(
+  route.params.id ? route.params.id.toLocaleString() : null
+);
 const tab = ref<string>("BasicInfo");
 
-function onSubmit() {
-  dialogConfirm($q, () => {});
+function fetchDataProject(id: string) {
+  showLoader();
+  http
+    .get(config.API.developmentMainById(id))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      /** ข้อมูลเบื้องต้น*/
+      store.formAddProject.year = data.year;
+      store.formAddProject.projectName = data.projectName;
+      store.formAddProject.reason = data.reason;
+      store.formAddProject.objective = data.objective;
+
+      /**เป้าหมาย*/
+      const plannedGoals = data.plannedGoals.map((e: any) => ({
+        groupTarget: e.groupTarget,
+        groupTargetSub: e.groupTargetSub,
+        position: e.position,
+        posTypePlannedId: e.posTypePlannedId,
+        posLevelPlannedId: e.posLevelPlannedId,
+        type: e.type,
+        amount: e.amount,
+      }));
+      const plannedPeoples = data.plannedPeoples.map((e: any) => ({
+        groupTarget: e.groupTarget,
+        amount: e.amount,
+      }));
+      store.formAddProject.plannedGoals = plannedGoals;
+      store.formAddProject.plannedPeoples = plannedPeoples;
+
+      const actualGoals = data.actualGoals.map((e: any) => ({
+        groupTarget: e.groupTarget,
+        groupTargetSub: e.groupTargetSub,
+        position: e.position,
+        posTypeActualId: e.posTypeActualId,
+        posLevelActualId: e.posLevelActualId,
+        type: e.type,
+        amount: e.amount,
+      }));
+      const actualPeoples = data.actualPeoples.map((e: any) => ({
+        groupTarget: e.groupTarget,
+        amount: e.amount,
+      }));
+      store.formAddProject.actualGoals = actualGoals;
+      store.formAddProject.actualPeoples = actualPeoples;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 1000);
+    });
 }
+
+function onSubmit() {
+  if (store.formAddProject.projectName === "" && tab.value !== "BasicInfo") {
+    dialogMessageNotify($q, "ชื่อโครงการ/กิจกรรม/หลักสูตร");
+    tab.value = "BasicInfo";
+  } else {
+    dialogConfirm($q, async () => {
+      showLoader();
+      const url = projectId.value
+        ? config.API.developmentMainById(projectId.value)
+        : config.API.developmentMain;
+      const method = projectId.value ? "put" : "post";
+      try {
+        const res = await http[method](url, store.formAddProject);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        !projectId.value && router.push(`/development/${res.data.result}`);
+        projectId.value && fetchDataProject(projectId.value);
+      } catch (e) {
+        messageError($q, e);
+      } finally {
+        hideLoader();
+      }
+    });
+  }
+}
+
+onMounted(() => {
+  projectId.value && fetchDataProject(projectId.value);
+});
+
+onUnmounted(() => {
+  store.clearFormAddProject();
+});
 </script>
 <template>
   <q-form greedy @submit.prevent @validation-success="onSubmit">
@@ -33,7 +132,7 @@ function onSubmit() {
         class="q-mr-sm"
         icon="mdi-arrow-left"
         color="primary"
-        @click="router.go(-1)"
+        @click="router.push('/development')"
       />
       {{ `${title}รายการโครงการ/หลักสูตรการฝึกอบรม` }}
       <q-space />