131 lines
3.6 KiB
Vue
131 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
import { useQuasar } from "quasar";
|
|
import axios from "axios";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useEvaluateStore } from "@/modules/06_evaluate/store";
|
|
|
|
const $q = useQuasar();
|
|
const store = useEvaluateStore();
|
|
const mixin = useCounterMixin();
|
|
const route = useRoute();
|
|
const { messageError } = mixin;
|
|
|
|
/** id ประเมิน*/
|
|
const evaluateId = ref<string>(route.params.id.toString());
|
|
|
|
/** emit*/
|
|
const emit = defineEmits(["update:file"]);
|
|
|
|
const isLoading = ref(false);
|
|
const selectedItem = ref(1);
|
|
const formTemplates = ref([
|
|
{
|
|
title: "แบบพิจารณาคุณสมบัติบุคคล",
|
|
fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
|
|
},
|
|
{
|
|
title: "แบบแสดงรายละเอียดการเสนอผลงาน",
|
|
fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
|
|
},
|
|
{
|
|
title: "แบบประเมินคุณลักษณะบุคคล",
|
|
fileName: "4-แบบประเมินคุณลักษณะบุคคล",
|
|
},
|
|
{
|
|
title: "ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
|
|
fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
|
|
},
|
|
]);
|
|
|
|
/**
|
|
* function กดเลือกแสดงเอกสาน
|
|
* @param itemNumber เอกสาร
|
|
*/
|
|
function handleItemClick(itemNumber: number) {
|
|
store.tabPanels = itemNumber.toString();
|
|
selectedItem.value = itemNumber;
|
|
fetchDocument(formTemplates.value[itemNumber - 1].fileName);
|
|
}
|
|
|
|
/**
|
|
* function เรีกยเอกสาร
|
|
* @param fileName ชื่อเอกสาร
|
|
*/
|
|
async function fetchDocument(fileName: string, forceDownload = false) {
|
|
if (forceDownload) {
|
|
isLoading.value = true;
|
|
}
|
|
evaluateId.value &&
|
|
(await http
|
|
.get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
|
|
.then(async (res) => {
|
|
await downloadFile(res.data.downloadUrl);
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
isLoading.value = false;
|
|
}));
|
|
}
|
|
|
|
/**
|
|
* function ดาวน์โหลดไฟล์
|
|
* @param url ลิงก์ดาวน์โหลดไฟล์
|
|
*/
|
|
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, url);
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
});
|
|
}
|
|
|
|
/** HooK lifecycle*/
|
|
onMounted(async () => {
|
|
await fetchDocument(
|
|
formTemplates.value[selectedItem.value - 1].fileName,
|
|
true
|
|
);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-skeleton
|
|
v-if="isLoading"
|
|
class="q-pa-md"
|
|
type="Qcard"
|
|
style="width: 100%; height: 100%"
|
|
/>
|
|
<q-list separator v-else>
|
|
<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>
|