จัดทำประกาศผู้มีผลการปฏิบัติราชการระดับดีเด่นและดีมาก => API

src/modules/14_KPI/views/report.vue

@@ -5,6 +5,7 @@ import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import config from "@/app.config";
 import http from "@/plugins/http";
 import axios from "axios";
+import genReport from "@/plugins/genreport";
 
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -44,6 +45,8 @@ function fetchRoundOption() {
         roundOp.value = [];
         round.value = "";
         organization.value = "";
+        dataDownload.value = null;
+        pdfSrc.value = null;
       }
     })
     .catch((err) => {
@@ -93,14 +96,50 @@ function fetchReport() {
     };
     http
       .post(config.API.kpiReport(), body)
-      .then((res) => {})
-      .catch((err) => {})
-      .finally(() => {
+      .then((res) => {
+        dataDownload.value = res.data.result;
+        page.value = 1;
+        genPDf(res.data.result);
+      })
+      .catch((err) => {
+        messageError($q, err);
         hideLoader();
       });
   }
 }
 
+/**
+ * function เรียกไฟล์ PDF
+ * @param data  ข้อมูลบัญชีวันลา
+ */
+async function genPDf(data: any) {
+  showLoader();
+  await axios
+    .post(config.API.reportTemplate + `/docx`, data, {
+      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 = await usePDF(`${objectUrl}`);
+      showLoader();
+      setTimeout(() => {
+        pdfSrc.value = pdfData.pdf.value;
+        numOfPages.value = pdfData.pages.value;
+        hideLoader();
+      }, 1500);
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+      hideLoader();
+    });
+}
+
 function changOption() {
   fetchReport();
 }
@@ -117,16 +156,11 @@ const splitterModel = ref(14);
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const pdfSrc = ref<any>();
-const fileBlob = ref<any>();
+const dataDownload = ref<any>();
 
 async function downloadReport(data: any, type: string) {
-  const link = document.createElement("a");
   var fileName = "ประกาศผู้มีผลการปฏิบัติราชการระดับดีเด่นและดีมาก";
-  link.href = window.URL.createObjectURL(new Blob([data]));
-  link.setAttribute("download", `${fileName}.${type}`);
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
+  genReport(data, fileName, type);
 }
 
 /** ไปหน้าต่อไปของรายงาน */
@@ -227,13 +261,19 @@ onMounted(() => {
 
         <q-space />
 
-        <q-btn flat round color="primary" icon="download">
+        <q-btn
+          flat
+          round
+          color="primary"
+          icon="download"
+          :disable="!dataDownload"
+        >
           <q-menu>
             <q-list style="min-width: 150px">
               <q-item
                 clickable
                 v-close-popup
-                @click="downloadReport(fileBlob, 'pdf')"
+                @click="downloadReport(dataDownload, 'pdf')"
               >
                 <q-item-section avatar
                   ><q-icon color="red" name="mdi-file-pdf"
@@ -243,7 +283,7 @@ onMounted(() => {
               <q-item
                 clickable
                 v-close-popup
-                @click="downloadReport(fileBlob, 'docx')"
+                @click="downloadReport(dataDownload, 'docx')"
               >
                 <q-item-section avatar
                   ><q-icon color="blue" name="mdi-file-word"
@@ -266,7 +306,7 @@ onMounted(() => {
         before-class="overflow-hidden disable"
         separator-class="bg-white disabled"
       >
-        <template v-slot:before>
+        <template v-slot:before v-if="pdfSrc">
           <div class="q-px-sm">
             <div class="row items-start items-center">
               <div class="col">
@@ -300,12 +340,12 @@ onMounted(() => {
             </div>
           </div>
         </template>
-        <template v-slot:after>
+        <template v-slot:after v-if="pdfSrc">
           <div class="q-pa-md">
             <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
           </div>
         </template>
-        <template v-slot:default>
+        <template v-slot:default v-if="pdfSrc">
           <div class="q-pa-md">
             <div class="row items-start items-center">
               <div class="col">