fix

src/modules/18_command/components/DialogPreviewCommand.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, reactive } from "vue";
+import { ref, watch, reactive, computed } from "vue";
 import { useQuasar } from "quasar";
 import axios from "axios";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
@@ -20,18 +20,22 @@ const modal = defineModel<boolean>("modal", { required: true });
 const command = defineModel<string>("command", { required: true });
 const commandId = defineModel<string>("commandId", { required: true });
 const citizenId = defineModel<string>("citizenId", { required: true });
-const promises = ref<any>([]);
 
+// Computed properties for navigation
+const canGoPrevious = computed(() => page.value > 1);
+const canGoNext = computed(() => page.value < numOfPages.value);
+
+const promises = ref<any>([]);
 const tab = ref<string>("main"); //tab
 const page = ref<number>(1);
 const numOfPages = ref<number>(0); //จำนวนหน้า pdf
 const pdfSrc = ref<PDFDocumentLoadingTask | undefined>(); // ตัวแปรเก็บ เเสดง pdf
 
-const dialog = ref<boolean>(false); // เปิด dialog
 const isLoadView = ref<boolean>(false);
 const isUploadAttachment = ref<boolean>(false);
 const dataCover = ref<DataFile>(); //ข้อมูลไฟล์คำสั่ง
 const dataAttachment = ref<DataFile>(); //ข้อมูลไฟล์แบนท้าย
+const currentObjectUrl = ref<string | null>(null);
 
 /** ปิด popup */
 function closeDialog() {
@@ -77,10 +81,24 @@ async function checkAttachment() {
  * @param type pdf/docx
  */
 async function downloadCover(type: string) {
-  if (tab.value === "main") {
-    window.open(dataCover.value?.downloadUrl, "_blank");
-  } else {
-    window.open(dataAttachment.value?.downloadUrl, "_blank");
+  // if (tab.value === "main") {
+  //   window.open(dataCover.value?.downloadUrl, "_blank");
+  // } else {
+  //   window.open(dataAttachment.value?.downloadUrl, "_blank");
+  // }
+
+  const fileName =
+    tab.value === "main"
+      ? dataCover.value?.fileName
+      : dataAttachment.value?.fileName;
+
+  if (currentObjectUrl.value) {
+    const link = document.createElement("a");
+    link.href = currentObjectUrl.value;
+    link.download = `${fileName}.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
   }
 }
 
@@ -142,6 +160,7 @@ async function fetchPDF(data: any, type: string = "docx?folder=command") {
     .then(async (res) => {
       const blob = new Blob([res.data]);
       const objectUrl = URL.createObjectURL(blob);
+      currentObjectUrl.value = objectUrl;
       const pdfData = usePDF(`${objectUrl}`);
       setTimeout(() => {
         pdfSrc.value = pdfData.pdf.value;
@@ -176,6 +195,24 @@ watch(
   }
 );
 
+/**
+ * Navigate to previous page
+ */
+function goToPreviousPage() {
+  if (canGoPrevious.value) {
+    page.value--;
+  }
+}
+
+/**
+ * Navigate to next page
+ */
+function goToNextPage() {
+  if (canGoNext.value) {
+    page.value++;
+  }
+}
+
 /** check tab เมื่อมีการเปลี่ยน tab*/
 watch(
   () => tab.value,
@@ -190,34 +227,95 @@ watch(
 );
 </script>
 <template>
-  <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 80%">
+  <q-dialog
+    v-model="modal"
+    persistent
+    :maximized="true"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card class="column full-height bg-grey-2">
       <DialogHeader :tittle="`คำสั่ง ${command}`" :close="closeDialog" />
       <q-separator />
 
-      <q-card-section class="scroll" style="max-height: 90vh">
-        <div class="space">
-          <div @click="setTab('main')" :class="getClass(tab == 'main')">
-            <div class="q-pr-sm">คำสั่ง</div>
-          </div>
+      <div
+        class="bg-white q-py-xs q-px-md row justify-center items-center q-gutter-sm shadow-1"
+      >
+        <div class="col-12 row items-center">
+          <div class="space">
+            <div @click="setTab('main')" :class="getClass(tab == 'main')">
+              <div class="q-pr-sm">คำสั่ง</div>
+            </div>
 
-          <div
-            v-if="isUploadAttachment"
-            @click="setTab('second')"
-            :class="getClass(tab == 'second')"
-          >
-            <div class="q-pr-sm">เอกสารแนบท้าย</div>
+            <div
+              v-if="isUploadAttachment"
+              @click="setTab('second')"
+              :class="getClass(tab == 'second')"
+            >
+              <div class="q-pr-sm">เอกสารแนบท้าย</div>
+            </div>
+            <q-space />
           </div>
-          <q-space />
+        </div>
+        <div v-if="isLoadView">
           <q-btn
-            class="text-dark"
             flat
-            dense
-            icon="mdi-fullscreen"
+            round
+            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"
-            @click="dialog = true"
           />
         </div>
+      </div>
+
+      <q-card-section
+        v-if="isLoadView"
+        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-card-section v-else class="col flex flex-center">
+        <div class="text-center">
+          <q-spinner color="primary" size="4em" :thickness="10" />
+        </div>
+      </q-card-section>
+
+      <q-page-sticky position="bottom-right" :offset="[20, 20]">
+        <q-btn
+          fab
+          size="xl"
+          icon="mdi-download"
+          color="primary"
+          @click="downloadCover('pdf')"
+          :loading="!isLoadView"
+        >
+          <q-tooltip>ดาวน์โหลดไฟล์ PDF</q-tooltip>
+        </q-btn>
+      </q-page-sticky>
+
+      <!-- <q-card-section class="scroll" style="max-height: 90vh">
         <q-separator style="margin-top: -1px; z-index: 1" />
         <div class="q-pa-sm">
           <div class="q-pa-sm row q-gutter-sm">
@@ -231,26 +329,6 @@ watch(
               :loading="!isLoadView"
             >
             </q-btn>
-
-            <!-- <q-btn
-              v-if="tab === 'main'"
-              outline
-              class="q-px-sm"
-              color="blue"
-              icon="mdi-file-word"
-              label="ดาวน์โหลดไฟล์ docx"
-              @click="downloadCover('docx')"
-            />
-
-            <q-btn
-              v-else
-              outline
-              class="q-px-sm"
-              color="green"
-              icon="mdi-file-excel"
-              label="ดาวน์โหลดไฟล์ xlsx"
-              @click="downloadCover('xlsx')"
-            /> -->
           </div>
           <q-card bordered class="card-pdf q-mx-sm q-pa-md">
             <div class="justify-between items-center align-center q-pb-sm row">
@@ -300,94 +378,8 @@ watch(
             </div>
           </q-card>
         </div>
-
-        <q-dialog
-          v-model="dialog"
-          persistent
-          :maximized="true"
-          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-btn
-                icon="close"
-                unelevated
-                round
-                dense
-                style="color: #ff8080; background-color: #ffdede"
-                size="12px"
-                v-close-popup
-              />
-            </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>
-              </div>
-            </q-card-section>
-          </q-card>
-        </q-dialog>
-      </q-card-section>
-      <q-separator />
+      </q-card-section> -->
+      <!-- <q-separator /> -->
     </q-card>
   </q-dialog>
 </template>
@@ -431,4 +423,24 @@ watch(
   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;
+}
 </style>