refactor(command):perview cover attachment
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
dfdb0fc70c
commit
04476043a4
1 changed files with 156 additions and 64 deletions
|
|
@ -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,127 @@ 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-btn-dropdown color="primary" icon="download" fab>
|
||||
<q-list>
|
||||
<q-item clickable v-close-popup @click="downloadCover('pdf')">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-file-pdf" color="red" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>ดาวน์โหลดไฟล์ PDF</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
v-if="tab === 'main'"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="downloadCover('docx')"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-file-word" color="blue" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>ดาวน์โหลดไฟล์ Word</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
v-else
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="downloadCover('xlsx')"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-file-excel" color="green" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>ดาวน์โหลดไฟล์ xlsx</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
<!-- <q-btn fab size="xl" icon="mdi-download" color="primary">
|
||||
<q-menu>
|
||||
<q-list dense style="min-width: 180px">
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section style="min-width: 0px" avatar>
|
||||
<q-tooltip>ประวัติการแก้ไข</q-tooltip>
|
||||
<q-icon
|
||||
color="deep-purple"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
name="mdi-history"
|
||||
size="xs"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>ประวัติการแก้ไข</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section style="min-width: 0px" avatar>
|
||||
<q-tooltip>รายละเอียด</q-tooltip>
|
||||
<q-icon
|
||||
flat
|
||||
dense
|
||||
round
|
||||
color="info"
|
||||
name="mdi-eye"
|
||||
size="xs"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>รายละเอียด</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
|
||||
</q-btn> -->
|
||||
</q-page-sticky>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
|
@ -376,4 +444,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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue