API ประเมิน step 1-4

src/modules/06_evaluate/components/step/step3.vue

@@ -1,19 +1,82 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { reactive, ref, onMounted } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import axios from "axios";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
 
+const $q = useQuasar();
 const store = useEvaluateStore();
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, showLoader, hideLoader, messageError } = mixin;
+
+const props = defineProps({
+  evaluateId: {
+    type: String,
+  },
+});
+const emit = defineEmits(["update:file"]);
 
 const selectedItem = ref(1);
+const fileName = ref([
+  "1-แบบพิจารณาคุณสมบัติบุคคล",
+  "2-แบบแสดงรายละเอียดการเสนอผลงาน",
+  "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)",
+  "4-แบบประเมินคุณลักษณะบุคคล",
+  "5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)",
+  "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
+]);
 
 function handleItemClick(itemNumber: number) {
   store.tabPanels = itemNumber.toString();
   selectedItem.value = itemNumber;
+  fetchDocument(fileName.value[itemNumber - 1]);
 }
+async function fetchDocument(fileName: string) {
+  showLoader();
+  props.evaluateId &&
+    (await http
+      .get(config.API.loadFileDocument("เล่ม 1", props.evaluateId, fileName))
+      .then((res) => {
+        console.log(res.data.downloadUrl);
+        downloadFile(res.data.downloadUrl);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      }));
+}
+
+async function downloadFile(url: string) {
+  await axios
+    .get(url, {
+      responseType: "blob",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+    .then((res) => {
+      const blob = new Blob([res.data]);
+      const objectUrl = URL.createObjectURL(blob);
+      console.log(blob);
+
+      console.log(objectUrl);
+
+      emit("update:file", objectUrl);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  await fetchDocument(fileName.value[selectedItem.value - 1]);
+});
 </script>
 
 <template>