hrms-user/src/modules/06_evaluate/components/step/step8.vue
2024-08-14 12:23:33 +07:00

394 lines
11 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 genReport from "@/plugins/genreport";
/** importStore*/
import { useEvaluateStore } from "@/modules/06_evaluate/store";
import { useCounterMixin } from "@/stores/mixin";
/**use*/
const store = useEvaluateStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const route = useRoute();
const { showLoader, hideLoader, messageError, success } = mixin;
const evaluateId = ref<string>(route.params.id.toString());
const status = ref<string>("WAIT_CHECK_DOC_V2");
const fileEvaluationEdit = ref<any>();
const modalView = ref<boolean>(false);
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const pdfSrc = ref<any>();
/** ไปหน้าต่อไปของรายงาน */
function nextPage() {
if (page.value < numOfPages.value) {
page.value++;
}
}
/** กลับหน้าก่อนหน้าของรายงาน */
function backPage() {
if (page.value !== 1) {
page.value--;
}
}
/**
* function เรียก Path อัปโหลดไฟล์
* @param volume เล่ม
* @param id ประเมิน
* @param type ชือไฟล์
* @param file ไฟล์
*/
async function fetchPathUpload(
volume: string,
id: string | undefined,
type: string,
file: any
) {
const body = {
fileList: {
fileName: type,
metadata: {
subject: subject.value,
author: author.value,
position: assignedPosition.value,
},
},
};
if (id && file) {
showLoader();
await http
.post(config.API.loadPathDocument(volume, id), body)
.then((res) => {
const foundKey: string | undefined = Object.keys(res.data).find(
(key) =>
res.data[key]?.fileName !== undefined &&
res.data[key]?.fileName !== ""
);
foundKey && uploadfile(res.data[foundKey]?.uploadUrl, file);
})
.catch((err) => {
messageError($q, err);
hideLoader();
});
// .finally(() => {
// });
}
}
/**
*
* @param uploadUrl ลิงก์อัปโหลด
* @param file ไฟล์
*/
async function uploadfile(uploadUrl: string, file: any) {
await axios
.put(uploadUrl, file, {
headers: {
"Content-Type": file.type,
},
})
.then(() => {
success($q, "อัปโหลไฟล์สำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
const downloadUrl = ref<string>("");
/** function เช็คไฟล์อัปโหลด*/
function checkDoc() {
showLoader();
http
.get(
config.API.loadFileDocument(
"เล่ม 2",
evaluateId.value,
"2-เอกสารเล่ม 2 (ฉบับแก้ไข)"
)
)
.then((res: any) => {
downloadUrl.value = res.data.downloadUrl;
})
.catch((e) => {
// messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
const author = ref<string>("");
const subject = ref<string>("");
const assignedPosition = ref<string>("");
/**
* function เรียกข้อมูลผลงาน
* @param id ประเมิน
*/
async function fetcheSigner(id: string) {
showLoader();
await http
.get(config.API.evaluationSignerDoc2(id))
.then((res) => {
const data = res.data.result;
author.value = data.authorDoc2;
subject.value = data.subjectDoc2;
assignedPosition.value = data.assignedPosition;
})
.catch(() => {})
.finally(() => {
hideLoader();
});
}
/** lifecycleHook*/
onMounted(async () => {
await checkDoc();
await fetcheSigner(evaluateId.value);
});
</script>
<template>
<div class="col-12 q-pa-sm">
<div class="row q-col-gutter-md">
<div class="col-12 text-center">
<q-badge
v-if="status == 'WAIT_CHECK_DOC_V2'"
outline
color="orange-5"
label="รอพิจารณาผลการประเมิน"
class="q-pa-sm"
style="font-size: 16px"
/>
</div>
<!-- <div class="col-12">
<q-card bordered style="border: 1px solid #d6dee1">
<q-card class="col-12 items-center">
<q-tabs
v-model="tabMenu"
dense
align="left"
inline-label
class="rounded-borders"
indicator-color="primary"
active-bg-color="teal-1"
active-class="text-primary"
>
<q-tab name="director" label="กรรมการ" />
<q-tab name="meeting" label="การประชุม" />
</q-tabs>
<q-separator />
<q-tab-panels v-model="tabMenu" animated>
<q-tab-panel name="director"
><TableDirector :type="tabMenu" :row="directorList"
/></q-tab-panel>
<q-tab-panel name="meeting">
<TableDirector :type="tabMenu" :row="meetingList"
/></q-tab-panel>
</q-tab-panels>
</q-card>
</q-card>
</div> -->
<div class="col-12">
<q-card class="shadow-0" bordered>
<div class="row col-12 bg-grey-1 q-px-sm q-py-xs items-center">
<div class="text-weight-medium">เอกสารเล 2 (ฉบบแกไข)</div>
<q-space />
<!-- <q-btn
v-if="downloadUrl != ''"
:href="downloadUrl"
target="_blank"
color="blue"
flat
dense
icon="visibility"
>
<q-tooltip> ไฟลเอกสาร </q-tooltip></q-btn
> -->
</div>
<div class="col-12"><q-separator /></div>
<div class="row">
<div class="col-12 q-pa-sm">
<div v-if="store.currentStep == 8" class="row col-12">
<div class="col-12">
<q-file
v-model="fileEvaluationEdit"
class="col-12"
outlined
dense
hide-bottom-space
lazy-rules
accept=".pdf"
label="อัปโหลดไฟล์"
>
<template v-slot:prepend>
<q-icon name="attach_file" />
</template>
<template v-slot:after>
<q-btn
flat
round
dense
color="primary"
icon="mdi-upload"
@click="
fetchPathUpload(
'เล่ม 2',
evaluateId,
'2-เอกสารเล่ม 2 (ฉบับแก้ไข)',
fileEvaluationEdit
)
"
><q-tooltip>ปโหลดไฟล</q-tooltip></q-btn
>
</template>
</q-file>
</div>
</div>
<div v-else>
<div class="row col-12 q-px-sm q-py-xs items-center">
<div>เอกสารเล 2 (ฉบบแกไข)</div>
<q-space />
<q-btn
v-if="downloadUrl != ''"
:href="downloadUrl"
target="_blank"
color="blue"
flat
dense
icon="visibility"
>
<q-tooltip> ไฟลเอกสาร </q-tooltip></q-btn
>
</div>
<!-- <div>เอกสารเล 2 (ฉบบแกไข)</div>
<q-btn
v-if="downloadUrl != ''"
:href="downloadUrl"
target="_blank"
color="blue"
flat
dense
icon="visibility"
>
<q-tooltip> ไฟลเอกสาร </q-tooltip></q-btn
> -->
</div>
</div>
</div>
</q-card>
</div>
</div>
</div>
<!-- Dialog Full Screen -->
<q-dialog
v-model="modalView"
persistent
:maximized="true"
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card class="bg-white">
<div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
<q-btn
icon="close"
unelevated
round
dense
style="color: #ff8080; background-color: #ffdede"
size="12px"
v-close-popup
/>
</div>
<div class="q-pa-md">
<div class="row items-start items-center">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หนาท {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
<div class="row items- items-center">
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
</div>
<div class="row items- items-end">
<div class="col">
<q-btn
padding="xs"
icon="mdi-chevron-left"
color="grey-2"
text-color="grey-5"
size="md"
class="my-auto"
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หนาท {{ page }} จาก {{ numOfPages }}
</div>
</div>
<div class="col text-right">
<q-btn
padding="xs"
icon="mdi-chevron-right"
color="grey-2"
text-color="grey-5"
size="md"
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
</div>
</q-card>
</q-dialog>
</template>
<style scoped></style>