fix:evaluate
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
b8ad7203ca
commit
ca7e5b247e
5 changed files with 123 additions and 22 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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue