400 lines
10 KiB
Vue
400 lines
10 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch, reactive, computed } 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 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 citizenId = defineModel<string>("citizenId", { required: true });
|
|
|
|
// Computed properties for navigation
|
|
const canGoPrevious = computed(() => page.value > 1);
|
|
const canGoNext = computed(() => page.value < numOfPages.value);
|
|
|
|
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 isLoadView = ref<boolean>(false);
|
|
const isUploadAttachment = ref<boolean>(false);
|
|
const dataCover = ref<DataFile>(); //ข้อมูลไฟล์คำสั่ง
|
|
const dataAttachment = ref<DataFile>(); //ข้อมูลไฟล์แบนท้าย
|
|
const currentObjectUrl = ref<string | null>(null);
|
|
|
|
/** ปิด popup */
|
|
function closeDialog() {
|
|
modal.value = false;
|
|
command.value = "";
|
|
// commandId.value = "";
|
|
// citizenId.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");
|
|
// } else {
|
|
// window.open(dataAttachment.value?.downloadUrl, "_blank");
|
|
// }
|
|
|
|
const fileName =
|
|
tab.value === "main"
|
|
? dataCover.value?.fileName
|
|
: dataAttachment.value?.fileName;
|
|
|
|
if (currentObjectUrl.value) {
|
|
const link = document.createElement("a");
|
|
link.href = currentObjectUrl.value;
|
|
link.download = `${fileName}.pdf`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ฟังก์ชันดึงข้อมูลโหลดไฟล์คำสั่ง
|
|
* @param type ประเภท cover เป็นคำสั่ง attachment เป็น แบนท้าย
|
|
*/
|
|
async function fetchDataCommand(type: string) {
|
|
let newType = type === "cover" ? "คำสั่ง" : "แนบท้าย";
|
|
const pathAPI =
|
|
type === "cover"
|
|
? config.API.fileByFile(
|
|
"ระบบออกคำสั่ง",
|
|
newType,
|
|
commandId.value,
|
|
newType
|
|
)
|
|
: config.API.subFileByFileName(
|
|
"ระบบออกคำสั่ง",
|
|
newType,
|
|
commandId.value,
|
|
citizenId.value,
|
|
newType
|
|
);
|
|
await http
|
|
.get(pathAPI)
|
|
.then(async (res) => {
|
|
const data = res.data;
|
|
|
|
if (type === "cover") {
|
|
dataCover.value = data;
|
|
await fetchPDF(dataCover.value);
|
|
} else {
|
|
dataAttachment.value = data;
|
|
}
|
|
})
|
|
.catch(async (e) => {
|
|
if (type !== "cover") {
|
|
try {
|
|
const res = await http.get(
|
|
config.API.fileByFile(
|
|
"ระบบออกคำสั่ง",
|
|
newType,
|
|
commandId.value,
|
|
newType
|
|
)
|
|
);
|
|
dataAttachment.value = res.data;
|
|
} catch (error) {
|
|
messageError($q, e);
|
|
}
|
|
} else {
|
|
messageError($q, e);
|
|
}
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** ฟังชั่นกำหนดค่าของ PDF*/
|
|
async function fetchPDF(data: any, type: string = "docx?folder=command") {
|
|
isLoadView.value = false;
|
|
pdfSrc.value = undefined;
|
|
page.value = 1;
|
|
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);
|
|
currentObjectUrl.value = objectUrl;
|
|
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;
|
|
});
|
|
}
|
|
|
|
/** Navigate to previous page*/
|
|
function goToPreviousPage() {
|
|
if (canGoPrevious.value) {
|
|
page.value--;
|
|
}
|
|
}
|
|
|
|
/** Navigate to next page*/
|
|
function goToNextPage() {
|
|
if (canGoNext.value) {
|
|
page.value++;
|
|
}
|
|
}
|
|
|
|
function cleanupObjectUrl() {
|
|
if (currentObjectUrl.value) {
|
|
URL.revokeObjectURL(currentObjectUrl.value);
|
|
currentObjectUrl.value = null;
|
|
}
|
|
}
|
|
|
|
watch(
|
|
() => modal.value,
|
|
async () => {
|
|
if (modal.value) {
|
|
showLoader();
|
|
promises.value = [checkAttachment(), fetchDataCommand("cover")];
|
|
await Promise.all(promises.value)
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
} else {
|
|
cleanupObjectUrl();
|
|
tab.value = "main";
|
|
pdfSrc.value = undefined;
|
|
page.value = 1;
|
|
}
|
|
}
|
|
);
|
|
|
|
/** 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
|
|
:maximized="true"
|
|
transition-show="slide-up"
|
|
transition-hide="slide-down"
|
|
>
|
|
<q-card class="column full-height bg-grey-2">
|
|
<DialogHeader :tittle="`คำสั่ง ${command}`" :close="closeDialog" />
|
|
<q-separator />
|
|
|
|
<div
|
|
class="bg-white q-py-xs q-px-md row justify-center items-center q-gutter-sm shadow-1"
|
|
>
|
|
<div class="col-12 row items-center">
|
|
<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 />
|
|
</div>
|
|
</div>
|
|
<div v-if="isLoadView">
|
|
<q-btn
|
|
flat
|
|
round
|
|
icon="mdi-chevron-left"
|
|
:disable="!canGoPrevious"
|
|
@click="goToPreviousPage"
|
|
color="primary"
|
|
/>
|
|
|
|
<q-chip
|
|
outline
|
|
color="primary"
|
|
label-color="grey-9"
|
|
class="q-px-lg text-weight-bold"
|
|
>
|
|
หน้า {{ page }} / {{ numOfPages || "-" }}
|
|
</q-chip>
|
|
|
|
<q-btn
|
|
flat
|
|
round
|
|
icon="mdi-chevron-right"
|
|
:disable="!canGoNext"
|
|
@click="goToNextPage"
|
|
color="primary"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<q-card-section
|
|
v-if="isLoadView"
|
|
class="col scroll q-pa-md flex flex-center"
|
|
>
|
|
<div class="pdf-viewer-wrapper shadow-5">
|
|
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section v-else class="col flex flex-center">
|
|
<div class="text-center">
|
|
<q-spinner color="primary" size="4em" :thickness="10" />
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-page-sticky position="bottom-right" :offset="[20, 20]">
|
|
<q-btn
|
|
fab
|
|
size="xl"
|
|
icon="mdi-download"
|
|
color="primary"
|
|
@click="downloadCover('pdf')"
|
|
:loading="!isLoadView"
|
|
>
|
|
<q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
|
|
</q-btn>
|
|
</q-page-sticky>
|
|
</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;
|
|
}
|
|
|
|
/* สไตล์เพื่อให้ PDF ดูเหมือนวางบนโต๊ะ */
|
|
.pdf-viewer-wrapper {
|
|
background-color: white;
|
|
width: 100%;
|
|
max-width: 900px; /* จำกัดความกว้างเพื่อความสวยงามบนจอใหญ่ */
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* ปรับแต่ง Scrollbar ให้ดูสะอาดตา */
|
|
.scroll::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
.scroll::-webkit-scrollbar-thumb {
|
|
background: #bdbdbd;
|
|
border-radius: 4px;
|
|
}
|
|
.scroll::-webkit-scrollbar-thumb:hover {
|
|
background: #9e9e9e;
|
|
}
|
|
</style>
|