hrms-user/src/modules/06_evaluate/components/viewstep/viewStep3.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,
  },
});

const modalPerview = ref<boolean>(false);

const store = useEvaluateStore();
</script>

<template>
  <div class="col-12 row">
    <q-space />
    <q-btn flat round color="primary" icon="download">
      <q-tooltip>ดาวน์โหลด</q-tooltip>
    </q-btn>
    <q-btn
      flat
      round
      color="primary"
      icon="mdi-fullscreen"
      @click="modalPerview = true"
      ><q-tooltip>ดูเต็มจอ</q-tooltip></q-btn
    >
  </div>

  <q-tab-panels v-model="store.tabPanels" animated swipeable vertical>
    <q-tab-panel name="1">
      <ViewPDF :pdfSrc="props.pdfSrc" />
    </q-tab-panel>

    <q-tab-panel name="2">
      <ViewPDF :pdfSrc="props.pdfSrc" />
    </q-tab-panel>

    <q-tab-panel name="3">
      <ViewPDF :pdfSrc="props.pdfSrc" />
    </q-tab-panel>
    <q-tab-panel name="4">
      <ViewPDF :pdfSrc="props.pdfSrc" />
    </q-tab-panel>
    <q-tab-panel name="5">
      <ViewPDF :pdfSrc="props.pdfSrc" />
    </q-tab-panel>
    <q-tab-panel name="6">
      <ViewPDF :pdfSrc="props.pdfSrc" />
    </q-tab-panel>
  </q-tab-panels>

  <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>