From 0a3ce7b2729c4e4c806fe1d1c2db34bb15d0a850 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 10 Feb 2026 16:16:47 +0700
Subject: [PATCH] feat:view pdf

---
 src/components/ViewPDF.vue                    | 321 ++++++++++++++++++
 .../04_registryPerson/views/detailView.vue    |  17 +-
 2 files changed, 337 insertions(+), 1 deletion(-)

diff --git a/src/components/ViewPDF.vue b/src/components/ViewPDF.vue
index e69de29bb..26f1b456b 100644
--- a/src/components/ViewPDF.vue
+++ b/src/components/ViewPDF.vue
@@ -0,0 +1,321 @@
+<script setup lang="ts">
+import { ref, watch, computed, onUnmounted } from "vue";
+import { useQuasar } from "quasar";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import axios from "axios";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const { messageError } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const title = defineModel<string>("title", { required: true });
+const dataFile = defineModel<any | undefined>("dataFile", {
+  required: false,
+});
+
+const pdfSrc = ref<any | undefined>();
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const isLoadPDF = ref<boolean>(false);
+const isLoading = ref<boolean>(false);
+const currentObjectUrl = ref<string | null>(null);
+
+// Computed properties for navigation
+const canGoPrevious = computed(() => page.value > 1);
+const canGoNext = computed(() => page.value < numOfPages.value);
+const pageInfo = computed(
+  () => `หน้าที่ ${page.value} จาก ${numOfPages.value}`
+);
+
+/**
+ * Navigate to previous page
+ */
+function goToPreviousPage() {
+  if (canGoPrevious.value) {
+    page.value--;
+  }
+}
+
+/**
+ * Navigate to next page
+ */
+function goToNextPage() {
+  if (canGoNext.value) {
+    page.value++;
+  }
+}
+
+/**
+ * Clean up object URL to prevent memory leaks
+ */
+function cleanupObjectUrl() {
+  if (currentObjectUrl.value) {
+    URL.revokeObjectURL(currentObjectUrl.value);
+    currentObjectUrl.value = null;
+  }
+}
+
+/**
+ * Reset PDF state
+ */
+function resetPdfState() {
+  cleanupObjectUrl();
+  pdfSrc.value = undefined;
+  page.value = 1;
+  numOfPages.value = 0;
+  isLoadPDF.value = false;
+  isLoading.value = false;
+}
+
+/**
+ * Load PDF file from URL
+ * @param url - Link to load file
+ * @param type - File type
+ */
+async function fetchPDF(dataFile: string): Promise<void> {
+  try {
+    isLoading.value = true;
+    isLoadPDF.value = false;
+
+    // Clean up previous object URL
+    cleanupObjectUrl();
+
+    console.log("fetchdata");
+
+    const response = await axios.post(
+      `${config.API.reportTemplate}/docx`,
+      dataFile,
+      {
+        headers: {
+          accept: "application/pdf",
+          "content-Type": "application/json",
+        },
+        responseType: "arraybuffer",
+      }
+    );
+
+    const blob = new Blob([response.data], { type: "application/pdf" });
+    const objectUrl = URL.createObjectURL(blob);
+    currentObjectUrl.value = objectUrl;
+
+    const pdfData = usePDF(objectUrl);
+
+    // Wait for PDF to be ready
+    const checkPdfReady = () => {
+      if (pdfData.pdf.value && pdfData.pages.value) {
+        pdfSrc.value = pdfData.pdf.value;
+        numOfPages.value = pdfData.pages.value;
+        isLoadPDF.value = true;
+        isLoading.value = false;
+      } else {
+        // Retry after a short delay
+        setTimeout(checkPdfReady, 100);
+      }
+    };
+
+    checkPdfReady();
+  } catch (error) {
+    isLoading.value = false;
+    isLoadPDF.value = false;
+    messageError($q, error);
+  }
+}
+
+function onClose() {
+  modal.value = false;
+}
+
+function onDownloadFile() {
+  if (currentObjectUrl.value) {
+    const link = document.createElement("a");
+    link.href = currentObjectUrl.value;
+    link.download = `${title.value}.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+}
+
+watch(modal, (val) => {
+  if (val && dataFile.value) {
+    fetchPDF(dataFile.value);
+  } else {
+    resetPdfState();
+  }
+});
+
+// Cleanup on component unmount
+onUnmounted(() => {
+  cleanupObjectUrl();
+});
+</script>
+
+<template>
+  <q-dialog
+    v-model="modal"
+    persistent
+    :maximized="true"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card>
+      <DialogHeader :tittle="`${title}`" :close="onClose" />
+
+      <q-separator />
+
+      <!-- PDF Content -->
+      <q-card-section
+        v-if="isLoadPDF"
+        bordered
+        :class="
+          $q.screen.gt.xs
+            ? ['q-ma-xl', 'q-pa-xl', 'scroll']
+            : ['q-ma-xs', 'q-pa-xs', 'scroll']
+        "
+      >
+        <!-- Top Navigation -->
+        <div class="pagination-controls">
+          <q-btn
+            class="nav-button"
+            flat
+            dense
+            :disable="!canGoPrevious"
+            @click="goToPreviousPage"
+          >
+            <q-icon name="mdi-chevron-left" />
+          </q-btn>
+
+          <span class="page-info">{{ pageInfo }}</span>
+
+          <q-btn
+            class="nav-button"
+            flat
+            dense
+            :disable="!canGoNext"
+            @click="goToNextPage"
+          >
+            <q-icon name="mdi-chevron-right" />
+          </q-btn>
+        </div>
+
+        <!-- PDF Viewer -->
+        <div class="pdf-container">
+          <VuePDF
+            ref="vuePDFRef"
+            :pdf="pdfSrc"
+            :page="page"
+            fit-parent
+            :scale="0.1"
+          />
+        </div>
+
+        <!-- Bottom Navigation -->
+        <div class="pagination-controls">
+          <q-btn
+            class="nav-button"
+            flat
+            dense
+            :disable="!canGoPrevious"
+            @click="goToPreviousPage"
+          >
+            <q-icon name="mdi-chevron-left" />
+          </q-btn>
+
+          <span class="page-info">{{ pageInfo }}</span>
+
+          <q-btn
+            class="nav-button"
+            flat
+            dense
+            :disable="!canGoNext"
+            @click="goToNextPage"
+          >
+            <q-icon name="mdi-chevron-right" />
+          </q-btn>
+        </div>
+      </q-card-section>
+
+      <!-- Loading State -->
+      <q-card-section v-else>
+        <div class="full-width row flex-center text-accent q-gutter-sm">
+          <span
+            ><div
+              style="
+                height: 60vh;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+              "
+              class="text-grey-5"
+            >
+              <q-spinner color="primary" size="3em" :thickness="10" />
+            </div>
+          </span>
+        </div>
+      </q-card-section>
+      <q-page-sticky position="bottom-right" :offset="[20, 20]">
+        <q-btn
+          fab
+          size="xl"
+          icon="mdi-download"
+          color="primary"
+          @click="onDownloadFile"
+          :loading="!isLoadPDF"
+        >
+          <q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
+        </q-btn>
+      </q-page-sticky>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.pagination-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.nav-button {
+  color: #424242;
+  background-color: #f5f5f5;
+}
+
+.nav-button:hover {
+  background-color: #eeeeee;
+}
+
+.page-info {
+  font-size: 14px;
+  color: #424242;
+  font-weight: 500;
+}
+
+.pdf-container {
+  width: 100%;
+  margin: 16px 0;
+}
+
+.loading-container {
+  height: 60vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #9e9e9e;
+}
+
+.loading-text {
+  color: #757575;
+  font-size: 16px;
+  margin: 0;
+}
+</style>
diff --git a/src/modules/04_registryPerson/views/detailView.vue b/src/modules/04_registryPerson/views/detailView.vue
index 7e8c150aa..9690c31c5 100644
--- a/src/modules/04_registryPerson/views/detailView.vue
+++ b/src/modules/04_registryPerson/views/detailView.vue
@@ -42,6 +42,7 @@ const DialogResign = defineAsyncComponent(
 const DialogTransfer = defineAsyncComponent(
   () => import("@/modules/04_registryPerson/components/DialogTransfer.vue")
 );
+const ViewPDF = defineAsyncComponent(() => import("@/components/ViewPDF.vue"));
 
 /** use*/
 const $q = useQuasar();
@@ -80,6 +81,10 @@ const formDetail = ref<ResponseObject>(); //ข้อมูลส่วนตั
 const modalDialogResign = ref<boolean>(false); //ป๊อบอัพขอลาออก
 const modalDialogTransfer = ref<boolean>(false); //ป๊อบอัพขอโอน
 const modalDialogRetired = ref<boolean>(false); //ป๊อบอัพข้อมูลการพ้นจากราชการ
+const modalDialogViewPDF = ref<boolean>(false); //ป๊อบอัพแสดงไฟล์ PDF
+
+const selectedDataFile = ref<any | undefined>(undefined); //ไฟล์ PDF ที่เลือกแสดง
+const titleDialogViewPDF = ref<string>(""); //ชื่อไฟล์ PDF ที่เลือกแสดง
 
 //รายการเมนูออกคำสั่งข้าราชการ
 const baseItemsMenu = ref<DataOptionSys[]>([
@@ -436,7 +441,11 @@ async function onClickDownloadKp7(type: string) {
     .get(url)
     .then(async (res) => {
       const data = await res.data.result;
-      await genReport(data, `${fileName}`, type);
+      selectedDataFile.value = data;
+      titleDialogViewPDF.value = fileName;
+      modalDialogViewPDF.value = true;
+
+      // await genReport(data, `${fileName}`, type);
     })
     .catch((err) => {
       messageError($q, err);
@@ -1257,6 +1266,12 @@ onMounted(async () => {
   <DialogResign v-model:modal="modalDialogResign" />
   <!-- ขอโอน -->
   <DialogTransfer v-model:modal="modalDialogTransfer" />
+
+  <ViewPDF
+    v-model:modal="modalDialogViewPDF"
+    :dataFile="selectedDataFile"
+    :title="titleDialogViewPDF"
+  />
 </template>
 
 <style scoped>