436 lines
12 KiB
Vue
436 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch, reactive } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import axios from "axios";
|
|
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import genReport from "@/plugins/genreport";
|
|
import genReportXLSX from "@/plugins/genreportxlsx";
|
|
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
|
|
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
|
|
import type { DataFile } from "@/modules/18_command/interface/index/Main";
|
|
|
|
const $q = useQuasar();
|
|
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
|
|
|
const modal = defineModel<boolean>("modal", { required: true });
|
|
const command = defineModel<string>("command", { required: true });
|
|
const commandId = defineModel<string>("commandId", { required: true });
|
|
const issue = ref<string | null>(null);
|
|
const promises = ref<any>([]);
|
|
|
|
const tab = ref<string>("main"); //tab
|
|
const page = ref<number>(1);
|
|
const numOfPages = ref<number>(0); //จำนวนหน้า pdf
|
|
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>(); // ตัวแปรเก็บ เเสดง pdf
|
|
|
|
const dialog = ref<boolean>(false); // เปิด dialog
|
|
const isLoadView = ref<boolean>(false);
|
|
const isUploadAttachment = ref<boolean>(false);
|
|
const dataCover = ref<DataFile>(); //ข้อมูลไฟล์คำสั่ง
|
|
const dataAttachment = ref<DataFile>(); //ข้อมูลไฟล์แบนท้าย
|
|
|
|
/** ปิด popup */
|
|
function closeDialog() {
|
|
modal.value = false;
|
|
command.value = "";
|
|
commandId.value = "";
|
|
}
|
|
|
|
/**
|
|
* เปลี่ยน tab
|
|
* @param val ชื่อ tab
|
|
*/
|
|
function setTab(val: string) {
|
|
tab.value = val;
|
|
page.value = 1;
|
|
}
|
|
|
|
/**
|
|
* ดึง class ตามที่ set ไว้
|
|
*/
|
|
function getClass(val: boolean) {
|
|
return {
|
|
"card-header-active q-px-lg q-py-md cursor-pointer": val,
|
|
"card-header q-px-lg q-py-md cursor-pointer": !val,
|
|
};
|
|
}
|
|
|
|
async function checkAttachment() {
|
|
await http
|
|
.get(config.API.commandRegister(commandId.value))
|
|
.then(async (res) => {
|
|
const data = res.data.result;
|
|
isUploadAttachment.value = data.isUploadAttachment;
|
|
if (isUploadAttachment.value) {
|
|
promises.value.push(fetchDataCommand("attachment"));
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ฟังชั่นดาวห์โหลดไฟล์
|
|
* @param type pdf/docx
|
|
*/
|
|
async function downloadCover(type: string) {
|
|
if (tab.value === "main") {
|
|
window.open(dataCover.value?.downloadUrl, "_blank");
|
|
|
|
// genReport(
|
|
// dataCover.value,
|
|
// `คำสั่ง ${issue.value}`,
|
|
// type,
|
|
// "?folder=command"
|
|
// );
|
|
} else {
|
|
window.open(dataAttachment.value?.downloadUrl, "_blank");
|
|
// genReportXLSX(
|
|
// dataAttachment.value,
|
|
// `เอกสารแนบท้าย ${issue.value}`,
|
|
// type,
|
|
// "?folder=command"
|
|
// );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันดึงข้อมูลโหลดไฟล์คำสั่ง
|
|
* @param type ประเภท cover เป็นคำสั่ง attachment เป็น แบนท้าย
|
|
*/
|
|
async function fetchDataCommand(type: string) {
|
|
let newType = type === "cover" ? "คำสั่ง" : "แนบท้าย";
|
|
await http
|
|
.get(
|
|
config.API.fileByFile("ระบบออกคำสั่ง", newType, commandId.value, newType)
|
|
)
|
|
.then(async (res) => {
|
|
const data = res.data;
|
|
console.log(res);
|
|
|
|
if (type === "cover") {
|
|
dataCover.value = data;
|
|
await fetchPDF(dataCover.value);
|
|
} else {
|
|
dataAttachment.value = data;
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** ฟังชั่นกำหนดค่าของ PDF*/
|
|
async function fetchPDF(data: any, type: string = "docx?folder=command") {
|
|
isLoadView.value = false;
|
|
axios
|
|
.get(data.downloadUrl, {
|
|
method: "GET",
|
|
responseType: "blob",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: type, // ถ้ามีการระบุเมื่ออัปโหลด
|
|
},
|
|
})
|
|
.then(async (res) => {
|
|
const blob = new Blob([res.data]);
|
|
const objectUrl = URL.createObjectURL(blob);
|
|
const pdfData = usePDF(`${objectUrl}`);
|
|
setTimeout(() => {
|
|
pdfSrc.value = pdfData.pdf.value;
|
|
numOfPages.value = pdfData.pages.value;
|
|
isLoadView.value = true;
|
|
}, 1500);
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
isLoadView.value = true;
|
|
});
|
|
}
|
|
|
|
watch(
|
|
() => modal.value,
|
|
async () => {
|
|
if (modal.value) {
|
|
showLoader();
|
|
promises.value = [checkAttachment(), fetchDataCommand("cover")];
|
|
|
|
await Promise.all(promises.value)
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
hideLoader();
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
} else {
|
|
tab.value = "main";
|
|
pdfSrc.value = undefined;
|
|
}
|
|
}
|
|
);
|
|
|
|
/**
|
|
* check tab เมื่อมีการเปลี่ยน tab
|
|
*/
|
|
watch(
|
|
() => tab.value,
|
|
() => {
|
|
if (tab.value === "main") {
|
|
fetchPDF(dataCover.value);
|
|
}
|
|
if (tab.value === "second") {
|
|
fetchPDF(dataAttachment.value, "xlsx?folder=command");
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
<template>
|
|
<q-dialog v-model="modal" persistent>
|
|
<q-card class="col-12" style="width: 80%">
|
|
<DialogHeader :tittle="`คำสั่ง ${command}`" :close="closeDialog" />
|
|
<q-separator />
|
|
|
|
<q-card-section>
|
|
<div class="space">
|
|
<div @click="setTab('main')" :class="getClass(tab == 'main')">
|
|
<div class="q-pr-sm">คำสั่ง</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="isUploadAttachment"
|
|
@click="setTab('second')"
|
|
:class="getClass(tab == 'second')"
|
|
>
|
|
<div class="q-pr-sm">เอกสารแนบท้าย</div>
|
|
</div>
|
|
<q-space />
|
|
<q-btn
|
|
class="text-dark"
|
|
flat
|
|
dense
|
|
icon="mdi-fullscreen"
|
|
color="primary"
|
|
@click="dialog = true"
|
|
/>
|
|
</div>
|
|
<q-separator style="margin-top: -1px; z-index: 1" />
|
|
<div class="q-pa-sm">
|
|
<div class="q-pa-sm row q-gutter-sm">
|
|
<q-btn
|
|
outline
|
|
color="red"
|
|
icon="mdi-file-pdf"
|
|
label="ดาวน์โหลดไฟล์ PDF"
|
|
@click="downloadCover('pdf')"
|
|
class="q-px-sm"
|
|
>
|
|
</q-btn>
|
|
|
|
<!-- <q-btn
|
|
v-if="tab === 'main'"
|
|
outline
|
|
class="q-px-sm"
|
|
color="blue"
|
|
icon="mdi-file-word"
|
|
label="ดาวน์โหลดไฟล์ docx"
|
|
@click="downloadCover('docx')"
|
|
/>
|
|
|
|
<q-btn
|
|
v-else
|
|
outline
|
|
class="q-px-sm"
|
|
color="green"
|
|
icon="mdi-file-excel"
|
|
label="ดาวน์โหลดไฟล์ xlsx"
|
|
@click="downloadCover('xlsx')"
|
|
/> -->
|
|
</div>
|
|
<q-card bordered class="card-pdf q-mx-sm q-pa-md">
|
|
<div class="justify-between items-center align-center q-pb-sm row">
|
|
<q-btn
|
|
class="text-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@click="page = page > 1 ? page - 1 : page"
|
|
>
|
|
<q-icon name="mdi-chevron-left" />
|
|
</q-btn>
|
|
|
|
<span class="body-2 grey--text">
|
|
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
|
</span>
|
|
|
|
<q-btn
|
|
class="text-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@click="page = page < numOfPages ? page + 1 : page"
|
|
>
|
|
<q-icon name="mdi-chevron-right" />
|
|
</q-btn>
|
|
</div>
|
|
<div class="pdfWidth" v-if="isLoadView">
|
|
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
|
|
</div>
|
|
<div
|
|
class="full-width row flex-center text-accent q-gutter-sm"
|
|
v-else
|
|
>
|
|
<span
|
|
><div
|
|
style="
|
|
height: 60vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
"
|
|
class="text-grey-5"
|
|
>
|
|
<q-spinner color="primary" size="3em" :thickness="10" />
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<q-dialog
|
|
v-model="dialog"
|
|
persistent
|
|
:maximized="true"
|
|
transition-show="slide-up"
|
|
transition-hide="slide-down"
|
|
>
|
|
<q-card class="bg-white text-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>
|
|
<q-card-section bordered class="card-pdf q-ma-md q-pa-md">
|
|
<div
|
|
class="justify-between items-center align-center q-pb-sm row"
|
|
>
|
|
<q-btn
|
|
class="text-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@click="page = page > 1 ? page - 1 : page"
|
|
>
|
|
<q-icon name="mdi-chevron-left" />
|
|
</q-btn>
|
|
|
|
<span class="body-2 grey--text text-black">
|
|
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
|
</span>
|
|
|
|
<q-btn
|
|
class="text-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@click="page = page < numOfPages ? page + 1 : page"
|
|
>
|
|
<q-icon name="mdi-chevron-right" />
|
|
</q-btn>
|
|
</div>
|
|
<div class="pdfWidth">
|
|
<VuePDF
|
|
ref="vuePDFRef"
|
|
:pdf="pdfSrc"
|
|
:page="page"
|
|
fit-parent
|
|
:scale="0.1"
|
|
/>
|
|
<!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
|
|
</div>
|
|
<div
|
|
class="justify-between items-center align-center q-pt-sm row"
|
|
>
|
|
<q-btn
|
|
class="text-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@click="page = page > 1 ? page - 1 : page"
|
|
>
|
|
<q-icon name="mdi-chevron-left" />
|
|
</q-btn>
|
|
|
|
<span class="body-2 grey--text text-black">
|
|
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
|
</span>
|
|
|
|
<q-btn
|
|
class="text-dark bg-grey-4"
|
|
flat
|
|
dense
|
|
@click="page = page < numOfPages ? page + 1 : page"
|
|
>
|
|
<q-icon name="mdi-chevron-right" />
|
|
</q-btn>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
</q-card-section>
|
|
<q-separator />
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.space {
|
|
background-color: #e9eaec61;
|
|
display: flex;
|
|
z-index: 3;
|
|
min-height: 40px;
|
|
}
|
|
|
|
.card-header-active {
|
|
margin-top: 5px;
|
|
margin-left: -1px;
|
|
background-color: white;
|
|
padding: 2px !important;
|
|
border-radius: 10px 10px 0px 0px;
|
|
border: 1px solid #e9eaec;
|
|
width: 200px;
|
|
display: flex;
|
|
justify-content: center;
|
|
border-bottom-style: none;
|
|
font-weight: 600;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-header {
|
|
margin-top: 5px;
|
|
background-color: transparent;
|
|
padding: 2px !important;
|
|
border-radius: 10px 10px 0px 0px;
|
|
width: 200px;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-weight: normal;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-pdf {
|
|
border-radius: 10px;
|
|
border: 1px solid #e9eaec;
|
|
background-color: #e9eaec61;
|
|
}
|
|
</style>
|