hrms-user/src/modules/06_evaluate/components/viewstep/viewPDF.vue

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { VuePDF, usePDF } from "@tato30/vue-pdf";

import { useCounterMixin } from "@/stores/mixin";

const mixin = useCounterMixin();

const { showLoader, hideLoader, messageError, date2Thai } = mixin;

const props = defineProps({
  pdfSrc: {
    type: String,
  },
});

const loadPDF = ref<boolean>(false);

async function loadpdfData() {
  loadPDF.value = false;
  const pdfData = await usePDF(`${props.pdfSrc}`);
  setTimeout(() => {
    pdfSrc.value = pdfData.pdf.value;
    numOfPages.value = pdfData.pages.value;
  }, 1500);
  setTimeout(() => {
    loadPDF.value = true;
  }, 2000);
}

watch(
  () => props.pdfSrc,
  async () => {
    await loadpdfData();
  }
);
onMounted(async () => {
  await loadpdfData();
});

const splitterModel = ref(14);
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const pdfSrc = ref<any>();

/** ไปหน้าต่อไปของรายงาน */
function nextPage() {
  if (page.value < numOfPages.value) {
    page.value++;
  }
}

/** กลับหน้าก่อนหน้าของรายงาน */
function backPage() {
  if (page.value !== 1) {
    page.value--;
  }
}
</script>

<template>
  <q-splitter
    v-model="splitterModel"
    horizontal
    style="
      height: 50vh;
      border: 1px solid rgb(210, 210, 210);
      border-radius: 5px;
    "
    before-class="overflow-hidden disable"
    separator-class="bg-white disabled"
  >
    <template v-slot:before>
      <div class="q-px-sm">
        <div class="row items-start items-center">
          <div class="col">
            <q-btn
              padding="xs"
              icon="mdi-chevron-left"
              color="grey-2"
              text-color="grey-5"
              size="md"
              class="my-auto"
              @click="backPage"
              :disable="page == 1"
            />
          </div>
          <div class="col-12 col-md-auto">
            <div class="q-pa-md flex">
              หน้าที่ {{ page }} จาก {{ numOfPages }}
            </div>
          </div>
          <div class="col text-right">
            <q-btn
              padding="xs"
              icon="mdi-chevron-right"
              color="grey-2"
              text-color="grey-5"
              size="md"
              @click="nextPage"
              :disable="page === numOfPages"
            />
          </div>
        </div>
      </div>
    </template>
    <template v-slot:after>
      <div v-if="loadPDF">
        <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
      </div>

      <div
        v-else
        class="text-center"
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          height: 25vh;
        "
      >
        <q-spinner color="primary" size="3em" :thickness="2" />
      </div>
    </template>
    <template v-slot:default>
      <div class="q-pa-md">
        <div class="row items-start items-center">
          <div class="col">
            <q-btn
              padding="xs"
              icon="mdi-chevron-left"
              color="grey-2"
              text-color="grey-5"
              size="md"
              class="my-auto"
              @click="backPage"
              :disable="page == 1"
            />
          </div>

          <div class="col-12 col-md-auto">
            <div class="q-pa-md flex">
              หน้าที่ {{ page }} จาก {{ numOfPages }}
            </div>
          </div>
          <div class="col text-right">
            <q-btn
              padding="xs"
              icon="mdi-chevron-right"
              color="grey-2"
              text-color="grey-5"
              size="md"
              @click="nextPage"
              :disable="page === numOfPages"
            />
          </div>
        </div>
      </div>
    </template>
  </q-splitter>
  <!-- <q-card class="bg-white">
    <div class="q-pa-md">
      <div class="row items-start items-center">
        <div class="col">
          <q-btn
            padding="xs"
            icon="mdi-chevron-left"
            color="grey-2"
            text-color="grey-5"
            size="md"
            class="my-auto"
            @click="backPage"
            :disable="page == 1"
          />
        </div>
        <div class="col-12 col-md-auto">
          <div class="q-pa-md flex">
            หน้าที่ {{ page }} จาก {{ numOfPages }}
          </div>
        </div>
        <div class="col text-right">
          <q-btn
            padding="xs"
            icon="mdi-chevron-right"
            color="grey-2"
            text-color="grey-5"
            size="md"
            @click="nextPage"
            :disable="page === numOfPages"
          />
        </div>
      </div>
      <div class="row items- items-center">
        <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
      </div>
      <div class="row items- items-end">
        <div class="col">
          <q-btn
            padding="xs"
            icon="mdi-chevron-left"
            color="grey-2"
            text-color="grey-5"
            size="md"
            class="my-auto"
            @click="backPage"
            :disable="page == 1"
          />
        </div>
        <div class="col-12 col-md-auto">
          <div class="q-pa-md flex">
            หน้าที่ {{ page }} จาก {{ numOfPages }}
          </div>
        </div>
        <div class="col text-right">
          <q-btn
            padding="xs"
            icon="mdi-chevron-right"
            color="grey-2"
            text-color="grey-5"
            size="md"
            @click="nextPage"
            :disable="page === numOfPages"
          />
        </div>
      </div>
    </div>
  </q-card> -->
</template>

<style scoped></style>