134 lines
3.9 KiB
Vue
134 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import { usePDF } from "@tato30/vue-pdf";
|
|
|
|
import { useRoute } from "vue-router";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import axios from "axios";
|
|
|
|
/** importStore*/
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
|
|
|
|
/** use*/
|
|
const route = useRoute();
|
|
const $q = useQuasar();
|
|
const store = useEvaluateDetailStore();
|
|
const mixin = useCounterMixin();
|
|
const { showLoader, hideLoader, messageError } = mixin;
|
|
|
|
const id = ref<string>(route.params.id as string); //id ประเมิน
|
|
const selectedItem = ref<number>(1); //ไฟล์ที่เลือก
|
|
|
|
const formTemplates = ref([
|
|
{
|
|
title: "แบบพิจารณาคุณสมบัติบุคคล",
|
|
fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
|
|
},
|
|
{
|
|
title: "แบบแสดงรายละเอียดการเสนอผลงาน",
|
|
fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
|
|
},
|
|
{
|
|
title: "แบบประเมินคุณลักษณะบุคคล",
|
|
fileName: "4-แบบประเมินคุณลักษณะบุคคล",
|
|
},
|
|
{
|
|
title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
|
|
fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
|
|
},
|
|
]);
|
|
|
|
/**
|
|
* funtion เลือกไฟล์
|
|
* @param itemNumber indexItems
|
|
*/
|
|
function handleItemClick(itemNumber: number) {
|
|
store.tabPanels = itemNumber.toString();
|
|
selectedItem.value = itemNumber;
|
|
store.pdfSrcStore = undefined;
|
|
fetchDocument(formTemplates.value[itemNumber - 1].fileName);
|
|
}
|
|
|
|
/**
|
|
* function เรีกยเอกสาร
|
|
* @param fileName ชื่อเอกสาร
|
|
*/
|
|
async function fetchDocument(fileName: string) {
|
|
showLoader();
|
|
id.value &&
|
|
(await http
|
|
.get(config.API.evaluationFilebyId("เล่ม 1", id.value, fileName))
|
|
.then(async (res) => {
|
|
const link = res.data.downloadUrl;
|
|
const type = res.data.fileType;
|
|
await getPDF(link, type);
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
}));
|
|
}
|
|
|
|
/**
|
|
* function loafFile PDF
|
|
* @param url linkLoadFile
|
|
* @param type ประเภทไฟล์
|
|
*/
|
|
async function getPDF(url: string, type: string) {
|
|
axios
|
|
.get(url, {
|
|
method: "GET",
|
|
responseType: "blob",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
|
|
},
|
|
})
|
|
.then(async (res) => {
|
|
store.log = 0;
|
|
store.urlDownloadFile = url;
|
|
const blob = new Blob([res.data]);
|
|
const objectUrl = URL.createObjectURL(blob);
|
|
store.currentObjectUrl = objectUrl;
|
|
const pdfData = await usePDF(`${objectUrl}`);
|
|
setTimeout(() => {
|
|
store.log = 1;
|
|
store.pdfSrcStore = pdfData.pdf.value;
|
|
store.numOfPagesStore = pdfData.pages.value;
|
|
}, 1500);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
store.log = 0;
|
|
});
|
|
}
|
|
|
|
/** HooK lifecycle*/
|
|
onMounted(async () => {
|
|
await fetchDocument(formTemplates.value[selectedItem.value - 1].fileName);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-list separator>
|
|
<q-item
|
|
v-for="(item, index) in formTemplates"
|
|
:key="index"
|
|
clickable
|
|
v-ripple
|
|
:active="selectedItem === index + 1 ? true : false"
|
|
active-class="text-primary"
|
|
@click="handleItemClick(index + 1)"
|
|
class="cursor-pointer"
|
|
>
|
|
<q-item-section>{{ item.title }}</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</template>
|
|
|
|
<style scoped></style>
|