142 lines
4.5 KiB
Vue
142 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
import { 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 { 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) => {
|
|
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(fileName.value[selectedItem.value - 1]);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-list separator>
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
:active="selectedItem === 1 ? true : false"
|
|
active-class="text-primary"
|
|
@click="handleItemClick(1)"
|
|
>
|
|
<q-item-section>แบบพิจารณาคุณสมบัติบุคคล</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
:active="selectedItem === 2 ? true : false"
|
|
active-class="text-primary"
|
|
@click="handleItemClick(2)"
|
|
>
|
|
<q-item-section>แบบแสดงรายละเอียดการเสนอผลงาน</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
:active="selectedItem === 3 ? true : false"
|
|
active-class="text-primary"
|
|
@click="handleItemClick(3)"
|
|
>
|
|
<q-item-section
|
|
>แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
|
|
(เอกสารแบบ ก.)</q-item-section
|
|
>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
:active="selectedItem === 4 ? true : false"
|
|
active-class="text-primary"
|
|
@click="handleItemClick(4)"
|
|
>
|
|
<q-item-section> แบบประเมินคุณลักษณะบุคคล </q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
:active="selectedItem === 5 ? true : false"
|
|
active-class="text-primary"
|
|
@click="handleItemClick(5)"
|
|
>
|
|
<q-item-section>
|
|
แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
:active="selectedItem === 6 ? true : false"
|
|
active-class="text-primary"
|
|
@click="handleItemClick(6)"
|
|
>
|
|
<q-item-section> ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) </q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</template>
|
|
|
|
<style scoped></style>
|