UI ออกคำสั่ง

src/modules/18_command/components/Step/Dialog1_Perview.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { onMounted, ref } 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 type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { dialogConfirm } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const vuePDFRef = ref<any>(null);
+
+function fetchPDF(type: string = "docx") {
+  axios
+    .post(
+      config.API.reportTemplate + `/${type}`,
+      {
+        template: "command_test",
+        reportName: "docx-report",
+        data: {
+          commandNo: "๑๒๓๔๕",
+          commandYear: "กระผม",
+          commandTitle: "นาย",
+          detailHeader: "Administrator",
+          detailBody: "detailBody",
+          detailFooter: "detailFooter",
+          commandDate: "",
+          name: "Chief Technology Officer",
+          position: "Chief Technology Officer",
+        },
+      },
+      {
+        headers: {
+          accept: "application/pdf",
+          "content-Type": "application/json",
+        },
+        responseType: "blob",
+      }
+    )
+    .then(async (res) => {
+      const blob = new Blob([res.data]);
+      const objectUrl = URL.createObjectURL(blob);
+      const pdfData = usePDF(`${objectUrl}`);
+      setTimeout(() => {
+        pdfSrc.value = pdfData.pdf.value;
+        numOfPages.value = pdfData.pages.value;
+      }, 1500);
+    })
+    .catch(async (e) => {
+      //   messageError($q, e);
+      //   hideLoader();
+    });
+}
+
+function onClose() {
+  modal.value = false;
+}
+
+onMounted(() => {
+  fetchPDF();
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent full-height full-width>
+    <q-card>
+      <DialogHeader :tittle="'ตัวอย่างคำสั่ง'" :close="onClose" />
+      <q-separator />
+
+      <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"
+          />
+        </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>
+</template>
+
+<style scoped></style>