API ประเมืน

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

@@ -1,19 +1,73 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { onMounted, ref } 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 store = useEvaluateStore();
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const $q = useQuasar();
+
+const { showLoader, hideLoader, messageError } = mixin;
+
+const props = defineProps({
+  evaluateId: {
+    type: String,
+  },
+});
+
+const emit = defineEmits(["update:file"]);
 
 const selectedItem = ref(1);
 
-function handleItemClick(itemNumber: number) {
-  store.tabPanels = itemNumber.toString();
-  selectedItem.value = itemNumber;
+async function fetchDocument() {
+  showLoader();
+  props.evaluateId &&
+    (await http
+      .get(
+        config.API.loadFileDocument(
+          "เล่ม 2",
+          props.evaluateId,
+          "1-เอกสารเล่ม 2"
+        )
+      )
+      .then((res) => {
+        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);
+
+      emit("update:file", objectUrl);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  await fetchDocument();
+});
 </script>
 
 <template>
@@ -23,7 +77,6 @@ function handleItemClick(itemNumber: number) {
       v-ripple
       :active="selectedItem === 1 ? true : false"
       active-class="text-primary"
-      @click="handleItemClick(1)"
     >
       <q-item-section>เอกสารเล่ม 2</q-item-section>
     </q-item>