89 lines
2.4 KiB
Vue
89 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
import ViewPDF from "@/modules/06_evaluate/components/viewstep/viewPDF.vue";
|
|
|
|
import { useEvaluateStore } from "@/modules/06_evaluate/store";
|
|
const props = defineProps({
|
|
pdfSrc: {
|
|
type: String,
|
|
},
|
|
urlDownloadFile: {
|
|
type: String,
|
|
},
|
|
});
|
|
|
|
const modalPerview = ref<boolean>(false);
|
|
|
|
const store = useEvaluateStore();
|
|
const tabPanels = store.tabPanels
|
|
</script>
|
|
|
|
<template>
|
|
<q-card bordered class="col-12 row shadow-0" :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;' ">
|
|
<div class="col-12 row items-center q-px-sm ">
|
|
<div class="q-pl-sm text-weight-medium" >เอกสารที่อัปโหลด</div>
|
|
<q-space />
|
|
<q-btn
|
|
flat
|
|
color="primary"
|
|
icon="download"
|
|
target="_blank"
|
|
dense
|
|
:href="props.urlDownloadFile"
|
|
>
|
|
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
flat
|
|
color="primary"
|
|
icon="mdi-fullscreen"
|
|
dense
|
|
class="q-ml-sm"
|
|
@click="modalPerview = true"
|
|
><q-tooltip>ดูเต็มจอ</q-tooltip></q-btn
|
|
>
|
|
</div>
|
|
|
|
<q-tab-panels v-model="store.tabPanels" animated swipeable vertical class="col-12 row">
|
|
<q-tab-panel name="1">
|
|
<ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="2">
|
|
<ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="3">
|
|
<ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="4">
|
|
<ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="5">
|
|
<ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="6">
|
|
<ViewPDF :pdfSrc="props.pdfSrc" class="col-12" />
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-card>
|
|
|
|
<q-dialog v-model="modalPerview" full-width fullHeight>
|
|
<q-card>
|
|
<q-card-section>
|
|
<DialogHeader :close="() => (modalPerview = false)" />
|
|
</q-card-section>
|
|
|
|
<q-card-section class="q-pt-none">
|
|
<ViewPDF :pdfSrc="props.pdfSrc" :type="'popup'" />
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.q-tab-panel {
|
|
padding: 0px;
|
|
}
|
|
</style>
|