Merge branch 'develop' into dev
All checks were successful
Build & Deploy on Dev / build (push) Successful in 2m33s
All checks were successful
Build & Deploy on Dev / build (push) Successful in 2m33s
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
commit
589cc5da55
10 changed files with 501 additions and 521 deletions
|
|
@ -94,7 +94,7 @@ async function getPDF(url: string, type: string) {
|
|||
store.urlDownloadFile = url;
|
||||
const blob = new Blob([res.data]);
|
||||
const objectUrl = URL.createObjectURL(blob);
|
||||
|
||||
store.currentObjectUrl = objectUrl;
|
||||
const pdfData = await usePDF(`${objectUrl}`);
|
||||
setTimeout(() => {
|
||||
store.log = 1;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import { ref, watch, onMounted, computed } from "vue";
|
||||
import { VuePDF } from "@tato30/vue-pdf";
|
||||
|
||||
/** importStore*/
|
||||
|
|
@ -14,6 +14,8 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const isPopup = computed(() => props.type === "popup");
|
||||
|
||||
const splitterModel = ref(14);
|
||||
const numOfPages = ref<number>(0);
|
||||
const page = ref<number>(1);
|
||||
|
|
@ -33,6 +35,17 @@ function backPage() {
|
|||
}
|
||||
}
|
||||
|
||||
function onDownloadFile() {
|
||||
if (store.currentObjectUrl) {
|
||||
const link = document.createElement("a");
|
||||
link.href = store.currentObjectUrl;
|
||||
link.download = `เอกสาร.pdf`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => store.log,
|
||||
() => {
|
||||
|
|
@ -51,7 +64,57 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="isPopup"
|
||||
class="bg-white q-py-xs q-px-md row justify-center items-center q-gutter-sm shadow-1"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="mdi-chevron-left"
|
||||
:disable="page == 1"
|
||||
@click="backPage"
|
||||
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="page === numOfPages"
|
||||
@click="nextPage"
|
||||
color="primary"
|
||||
/>
|
||||
</div>
|
||||
<q-card-section v-if="isPopup" 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-page-sticky v-if="isPopup" position="bottom-right" :offset="[20, 20]">
|
||||
<q-btn
|
||||
fab
|
||||
size="xl"
|
||||
icon="mdi-download"
|
||||
color="primary"
|
||||
@click="onDownloadFile"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
|
||||
</q-btn>
|
||||
</q-page-sticky>
|
||||
|
||||
<q-splitter
|
||||
v-if="!isPopup"
|
||||
v-model="splitterModel"
|
||||
horizontal
|
||||
class="bg-grey-1 q-px-sm"
|
||||
|
|
@ -144,4 +207,12 @@ onMounted(() => {
|
|||
</q-splitter>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
/* สไตล์เพื่อให้ PDF ดูเหมือนวางบนโต๊ะ */
|
||||
.pdf-viewer-wrapper {
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
max-width: 900px; /* จำกัดความกว้างเพื่อความสวยงามบนจอใหญ่ */
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/Eval
|
|||
|
||||
/** use*/
|
||||
const store = useEvaluateDetailStore();
|
||||
const modalPerview = ref<boolean>(false); //แสดง Popup เอกสาร
|
||||
const modalPerview = ref<boolean>(false); //แสดง Popup เอกสาร
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -68,21 +68,35 @@ const modalPerview = ref<boolean>(false); //แสดง Popup เอกสา
|
|||
</q-tab-panels>
|
||||
</q-card>
|
||||
|
||||
<q-dialog v-model="modalPerview" full-width fullHeight persistent>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<DialogHeader :close="() => (modalPerview = false)" />
|
||||
</q-card-section>
|
||||
<q-dialog
|
||||
v-model="modalPerview"
|
||||
persistent
|
||||
:maximized="true"
|
||||
transition-show="slide-up"
|
||||
transition-hide="slide-down"
|
||||
>
|
||||
<q-card class="column full-height bg-grey-2">
|
||||
<DialogHeader :close="() => (modalPerview = false)" class="bg-white" />
|
||||
|
||||
<q-card-section class="q-pt-none">
|
||||
<ViewPDF :type="'popup'" />
|
||||
</q-card-section>
|
||||
<ViewPDF :type="'popup'" />
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.q-tab-panel {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/* ปรับแต่ง Scrollbar ให้ดูสะอาดตา */
|
||||
.scroll::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.scroll::-webkit-scrollbar-thumb {
|
||||
background: #bdbdbd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: #9e9e9e;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -42,17 +42,31 @@ const modalPerview = ref<boolean>(false);
|
|||
<div class="col-12"><ViewPDF class="col-12" /></div>
|
||||
</q-card>
|
||||
|
||||
<q-dialog v-model="modalPerview" full-width fullHeight persistent>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<DialogHeader :close="() => (modalPerview = false)" />
|
||||
</q-card-section>
|
||||
<q-dialog
|
||||
v-model="modalPerview"
|
||||
persistent
|
||||
:maximized="true"
|
||||
transition-show="slide-up"
|
||||
transition-hide="slide-down"
|
||||
>
|
||||
<q-card class="column full-height bg-grey-2">
|
||||
<DialogHeader :close="() => (modalPerview = false)" class="bg-white" />
|
||||
|
||||
<q-card-section class="q-pt-none">
|
||||
<ViewPDF :type="'popup'" />
|
||||
</q-card-section>
|
||||
<ViewPDF :type="'popup'" />
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
/* ปรับแต่ง Scrollbar ให้ดูสะอาดตา */
|
||||
.scroll::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.scroll::-webkit-scrollbar-thumb {
|
||||
background: #bdbdbd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: #9e9e9e;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
|
|||
const urlDownloadFile = ref<string>("");
|
||||
const pdfSrcStore = ref<any>();
|
||||
const numOfPagesStore = ref<any>();
|
||||
const currentObjectUrl = ref<string | null>(null);
|
||||
|
||||
/** คอลัมน์ ใบอนุญาตประกอบวิชาชีพ*/
|
||||
const columnsCertificates = ref<QTableProps["columns"]>([
|
||||
|
|
@ -423,6 +424,7 @@ export const useEvaluateDetailStore = defineStore("evaluateDetailStore", () => {
|
|||
columnExperience,
|
||||
|
||||
pdfSrcStore,
|
||||
currentObjectUrl,
|
||||
urlDownloadFile,
|
||||
numOfPagesStore,
|
||||
log,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, reactive } from "vue";
|
||||
import { ref, watch, reactive, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import axios from "axios";
|
||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
|
|
@ -20,18 +20,22 @@ 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 });
|
||||
const promises = ref<any>([]);
|
||||
|
||||
// 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 dialog = ref<boolean>(false); // เปิด dialog
|
||||
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() {
|
||||
|
|
@ -77,10 +81,24 @@ async function checkAttachment() {
|
|||
* @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");
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -117,8 +135,24 @@ async function fetchDataCommand(type: string) {
|
|||
dataAttachment.value = data;
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
.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();
|
||||
|
|
@ -142,6 +176,7 @@ async function fetchPDF(data: any, type: string = "docx?folder=command") {
|
|||
.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;
|
||||
|
|
@ -155,6 +190,27 @@ async function fetchPDF(data: any, type: string = "docx?folder=command") {
|
|||
});
|
||||
}
|
||||
|
||||
/** 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 () => {
|
||||
|
|
@ -169,6 +225,7 @@ watch(
|
|||
hideLoader();
|
||||
});
|
||||
} else {
|
||||
cleanupObjectUrl();
|
||||
tab.value = "main";
|
||||
pdfSrc.value = undefined;
|
||||
page.value = 1;
|
||||
|
|
@ -190,204 +247,93 @@ watch(
|
|||
);
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 80%">
|
||||
<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 />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 90vh">
|
||||
<div class="space">
|
||||
<div @click="setTab('main')" :class="getClass(tab == 'main')">
|
||||
<div class="q-pr-sm">คำสั่ง</div>
|
||||
</div>
|
||||
<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
|
||||
v-if="isUploadAttachment"
|
||||
@click="setTab('second')"
|
||||
:class="getClass(tab == 'second')"
|
||||
>
|
||||
<div class="q-pr-sm">เอกสารแนบท้าย</div>
|
||||
</div>
|
||||
<q-space />
|
||||
</div>
|
||||
<q-space />
|
||||
</div>
|
||||
<div v-if="isLoadView">
|
||||
<q-btn
|
||||
class="text-dark"
|
||||
flat
|
||||
dense
|
||||
icon="mdi-fullscreen"
|
||||
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"
|
||||
@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"
|
||||
:loading="!isLoadView"
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<!-- <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>
|
||||
<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-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-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>
|
||||
|
|
@ -431,4 +377,24 @@ watch(
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
|
|||
import type { FormDataDetail } from "@/modules/18_command/interface/request/Main";
|
||||
import type { DataOperators } from "@/modules/18_command/interface/response/Main";
|
||||
|
||||
import DialogPerview from "@/modules/18_command/components/Step/Dialog1_Perview.vue";
|
||||
import Dialog1_AddOperator from "@/modules/18_command/components/Step/Dialog1_AddOperetor.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
|
|
@ -55,7 +54,6 @@ let formData = reactive<FormDataDetail>({
|
|||
});
|
||||
const commandVolume = ref<string>(""); //เล่มที่
|
||||
const commandChapter = ref<string>(""); //ตอนที่
|
||||
const modalPreview = ref<boolean>(false); //แสดงตัวอย่าง
|
||||
const isIdofficer = ref<boolean>(false); //เช็ค สกจ.
|
||||
|
||||
const rows = ref<Array<DataOperators>>([]);
|
||||
|
|
@ -632,11 +630,6 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<DialogPerview
|
||||
v-model:modal="modalPreview"
|
||||
v-model:data-template-detail="formData"
|
||||
/>
|
||||
|
||||
<Dialog1_AddOperator
|
||||
v-model:modal="modalAddOperator"
|
||||
:command-id="commandId"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { onMounted, ref, watch, computed } from "vue";
|
||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
|
||||
|
|
@ -15,6 +15,8 @@ import type { DataFileOrder } from "@/modules/18_command/interface/response/Main
|
|||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const mixin = useCounterMixin();
|
||||
|
|
@ -140,6 +142,21 @@ watch(tab, () => {
|
|||
}
|
||||
});
|
||||
|
||||
const canGoPrevious = computed(() => page.value > 1);
|
||||
const canGoNext = computed(() => page.value < numOfPages.value);
|
||||
|
||||
function goToPreviousPage() {
|
||||
if (canGoPrevious.value) {
|
||||
page.value -= 1;
|
||||
}
|
||||
}
|
||||
|
||||
function goToNextPage() {
|
||||
if (canGoNext.value) {
|
||||
page.value += 1;
|
||||
}
|
||||
}
|
||||
|
||||
/** hook */
|
||||
onMounted(async () => {
|
||||
showLoader();
|
||||
|
|
@ -262,76 +279,77 @@ onMounted(async () => {
|
|||
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-card class="column full-height bg-grey-2">
|
||||
<DialogHeader
|
||||
:tittle="tab === 'main' ? 'คำสั่ง' : 'เอกสารแนบท้าย'"
|
||||
:close="() => (dialog = false)"
|
||||
class="bg-white"
|
||||
/>
|
||||
<q-separator />
|
||||
<div
|
||||
class="bg-white q-py-xs q-px-md row justify-center items-center q-gutter-sm shadow-1"
|
||||
>
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
flat
|
||||
round
|
||||
dense
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
size="12px"
|
||||
v-close-popup
|
||||
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>
|
||||
<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>
|
||||
<q-card-section 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-page-sticky position="bottom-right" :offset="[20, 20]">
|
||||
<q-fab color="primary" icon="download" direction="up">
|
||||
<q-fab-action
|
||||
color="red"
|
||||
@click="downloadCover('pdf')"
|
||||
icon="mdi-file-pdf"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
|
||||
</q-fab-action>
|
||||
<q-fab-action
|
||||
v-if="tab === 'main'"
|
||||
color="blue"
|
||||
@click="downloadCover('docx')"
|
||||
icon="mdi-file-word"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์ DOCX</q-tooltip>
|
||||
</q-fab-action>
|
||||
<q-fab-action
|
||||
v-else
|
||||
color="green"
|
||||
@click="downloadCover('xlsx')"
|
||||
icon="mdi-file-excel"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์ XLSX</q-tooltip>
|
||||
</q-fab-action>
|
||||
</q-fab>
|
||||
</q-page-sticky>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
|
@ -376,4 +394,28 @@ onMounted(async () => {
|
|||
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;
|
||||
}
|
||||
|
||||
:deep(.q-btn-dropdown__arrow) {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,156 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
import axios from "axios";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const { showLoader, hideLoader, messageError } = useCounterMixin();
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const dataTemplateDetail = defineModel<any>("dataTemplateDetail", {
|
||||
required: true,
|
||||
});
|
||||
|
||||
const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
|
||||
const numOfPages = ref<number>(0);
|
||||
const page = ref<number>(1);
|
||||
const vuePDFRef = ref<any>(null);
|
||||
|
||||
async function fetchPDF(type: string = "docx") {
|
||||
showLoader();
|
||||
await axios
|
||||
.post(
|
||||
config.API.reportTemplate + `/${type}`,
|
||||
{
|
||||
template: "command_test",
|
||||
reportName: "docx-report",
|
||||
data: {
|
||||
commandNo: dataTemplateDetail.value.commandNo, //
|
||||
commandYear: dataTemplateDetail.value.commandYear, //
|
||||
commandTitle: "นาย",
|
||||
detailHeader: dataTemplateDetail.value.detailHeader, //
|
||||
detailBody: dataTemplateDetail.value.detailBody, //
|
||||
detailFooter: dataTemplateDetail.value.detailFooter, //
|
||||
commandDate: "",
|
||||
name: "Chief Technology Officer",
|
||||
position: "Chief Technology Officer",
|
||||
issue: dataTemplateDetail.value.issue, //
|
||||
},
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
accept: "application/pdf",
|
||||
"content-Type": "application/json",
|
||||
},
|
||||
responseType: "blob",
|
||||
}
|
||||
)
|
||||
.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;
|
||||
hideLoader();
|
||||
}, 1500);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
modal.value = false;
|
||||
pdfSrc.value = undefined;
|
||||
page.value = 1
|
||||
}
|
||||
|
||||
watch(modal, () => {
|
||||
modal.value && fetchPDF();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent full-height full-width>
|
||||
<q-card>
|
||||
<DialogHeader :tittle="'ตัวอย่างคำสั่ง'" :close="onClose" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section
|
||||
bordered
|
||||
class="scroll q-ma-md q-pa-md"
|
||||
style="height: 90%"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { ref, watch, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { VuePDF, usePDF } from "@tato30/vue-pdf";
|
||||
import axios from "axios";
|
||||
|
|
@ -18,11 +18,16 @@ const dataFile = defineModel<DataFileDownload | undefined>("dataFile", {
|
|||
required: false,
|
||||
});
|
||||
|
||||
// Computed properties for navigation
|
||||
const canGoPrevious = computed(() => page.value > 1);
|
||||
const canGoNext = computed(() => page.value < numOfPages.value);
|
||||
|
||||
const pdfSrc = ref<any | undefined>();
|
||||
const numOfPages = ref<number>(0);
|
||||
const page = ref<number>(1);
|
||||
const vuePDFRef = ref<any>(null);
|
||||
const isLoadPDF = ref<boolean>(false);
|
||||
const currentObjectUrl = ref<string | null>(null);
|
||||
const title = ref<string>("");
|
||||
|
||||
/**
|
||||
* function loafFile PDF
|
||||
|
|
@ -43,6 +48,7 @@ async function fetchPDF(url: string, type: string) {
|
|||
.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;
|
||||
|
|
@ -59,9 +65,36 @@ function onClose() {
|
|||
modal.value = false;
|
||||
}
|
||||
|
||||
/** Navigate to previous page*/
|
||||
function goToPreviousPage() {
|
||||
if (canGoPrevious.value) {
|
||||
page.value--;
|
||||
}
|
||||
}
|
||||
|
||||
/** Navigate to next page*/
|
||||
function goToNextPage() {
|
||||
if (canGoNext.value) {
|
||||
page.value++;
|
||||
}
|
||||
}
|
||||
|
||||
function onDownloadFile() {
|
||||
if (currentObjectUrl.value) {
|
||||
const fileName = dataFile.value ? dataFile.value.fileName : "";
|
||||
const link = document.createElement("a");
|
||||
link.href = currentObjectUrl.value;
|
||||
link.download = `${fileName}.pdf`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
}
|
||||
|
||||
watch(modal, (val) => {
|
||||
if (val && dataFile.value) {
|
||||
fetchPDF(dataFile.value.downloadUrl, dataFile.value.fileType);
|
||||
title.value = dataFile.value.fileName;
|
||||
} else {
|
||||
pdfSrc.value = undefined;
|
||||
page.value = 1;
|
||||
|
|
@ -78,91 +111,92 @@ watch(modal, (val) => {
|
|||
transition-show="slide-up"
|
||||
transition-hide="slide-down"
|
||||
>
|
||||
<q-card>
|
||||
<DialogHeader :close="onClose" />
|
||||
<q-card class="column full-height bg-grey-2">
|
||||
<DialogHeader :tittle="title" :close="onClose" class="bg-white" />
|
||||
|
||||
<q-separator />
|
||||
|
||||
<div
|
||||
v-if="isLoadPDF"
|
||||
class="bg-white q-py-xs q-px-md row justify-center items-center q-gutter-sm shadow-1"
|
||||
>
|
||||
<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>
|
||||
|
||||
<q-card-section
|
||||
v-if="isLoadPDF"
|
||||
bordered
|
||||
class="card-pdf q-ma-md q-pa-md scroll"
|
||||
style="max-height: 90vh"
|
||||
class="col scroll q-pa-md flex flex-center"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</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 class="pdf-viewer-wrapper shadow-5">
|
||||
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section v-else>
|
||||
<div class="full-width row flex-center text-accent q-gutter-sm">
|
||||
<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>
|
||||
<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="onDownloadFile"
|
||||
:loading="!isLoadPDF"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
|
||||
</q-btn>
|
||||
</q-page-sticky>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
/* สไตล์เพื่อให้ 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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue