แก้ไข pdf

src/modules/05_placement/components/OrderPlacement/step/step01.vue

@@ -370,12 +370,8 @@
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
+      <q-btn unelevated label="บันทึก" color="public" @click="next"
-        unelevated
+        ><!-- icon="mdi-content-save-outline"
-        label="บันทึก"
-        color="public"
-        @click="next"
-      ><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
       </q-btn>
       <!-- <q-btn flat round color="primary" icon="chevron_left" @click="previous">
@@ -389,7 +385,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
-import type { DataOption } from "@/modules/05_placement/interface/index/Main.ts";
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QForm } from "quasar";
 

src/modules/05_placement/components/OrderPlacement/step/step02.vue

@@ -325,7 +325,7 @@ const selectData = (row: any) => {};
 
 const refresh = () => {};
 
-const paginationLabel = (start: string, end: string, total: string) => {
+const paginationLabel = (start: number, end: number, total: number) => {
   //   if (props.paging == true)
   //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
   //   else

src/modules/05_placement/components/OrderPlacement/step/step03.vue

@@ -334,7 +334,7 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import type { QInput, QForm } from "quasar";
-import type { treeTab } from "@/modules/05_placement/interface/index/Main.ts";
+import type { treeTab } from "@/modules/05_placement/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -614,7 +614,7 @@ onMounted(async () => {
   await nodeTree();
 });
 
-const paginationLabel = (start: string, end: string, total: string) => {
+const paginationLabel = (start: number, end: number, total: number) => {
   //   if (props.paging == true)
   //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
   //   else

src/modules/05_placement/components/OrderPlacement/step/step04.vue

@@ -83,13 +83,8 @@
                 </q-btn>
               </div>
               <div class="pdfWidth">
-                <!-- <VuePDF
+                <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
-                  ref="vuePDFRef"
+                <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
-                  :pdf="pdfData"
-                  :page="page"
-                  fit-parent
-                /> -->
-                <VuePdf :key="page" :src="pdfSrc" :page="page" />
               </div>
               <div
                 class="justify-between items-center align-center q-py-sm row"
@@ -198,27 +193,42 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
-// import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
-// import type { PDFDocumentLoadingTask } from "@tato30/vue-pdf";
+import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
-import { VuePdf, createLoadingTask } from "vue3-pdfjs/esm";
-import { VuePdfPropsType } from "vue3-pdfjs/components/vue-pdf/vue-pdf-props"; // Prop type definitions can also be imported
-import { PDFDocumentProxy } from "pdfjs-dist/types/src/display/api";
 import type { QForm } from "quasar";
 
-onMounted(() => {
+onUnmounted(() => {
-  const loadingTask = createLoadingTask(pdfSrc.value);
+  window.removeEventListener("resize", (e: any) => {
-  loadingTask.promise.then((pdf: PDFDocumentProxy) => {
+    myEventHandler(e);
-    numOfPages.value = pdf.numPages;
   });
 });
 
-const pdfSrc = ref<VuePdfPropsType["src"]>(
+onMounted(async () => {
-  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+  window.addEventListener("resize", (e: any) => {
-);
+    myEventHandler(e);
-const numOfPages = ref<number>(0);
+  });
 
+  const pdfData = usePDF(
+    "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+  );
+
+  console.log("pdfData.pages.value", pdfData);
+  console.log("pdfData.pages.value", pdfData.pages);
+  console.log("pdfData.pages.value", pdfData.pages.value);
+});
+
+const myEventHandler = (e: any) => {
+  console.log("e", e.target.innerWidth);
+  //   if (vuePDFRef !== null) {
+  //     vuePDFRef.value.reload();
+  //   }
+};
+
+const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
+const numOfPages = ref<number>(0);
 const page = ref<number>(1);
+const vuePDFRef = ref<any>(null);
 
 const myForm = ref<QForm | null>(null);
 
@@ -242,7 +252,10 @@ const fileOrder = ref<any>(null);
 const fileTailer = ref<any>(null);
 
 const onchangePage = (val: any) => {
-  console.log(val);
+  //   console.log(val);
+  if (vuePDFRef !== null) {
+    vuePDFRef.value.reload();
+  }
 };
 
 const save = () => {