dowload show report เครื่องราช

src/modules/07_insignia/components/2_Manage/Tab1.vue

@@ -196,6 +196,9 @@ const props = defineProps({
   roleUser: {
     type: String,
   },
+  roundName: {
+    type: String,
+  },
   requestStatus: {
     type: String,
   },
@@ -359,13 +362,13 @@ const downloadFile = (response: any, filename: string) => {
 const downloadReport = async (type: string = "pdf") => {
   showLoader();
   await http
-    .get(config.API.reportInsignia("45", type, fileId.value), {
+    .get(config.API.reportInsignia("45", type, props.roundId!), {
       responseType: "blob",
     })
     .then(async (res) => {
       downloadFile(
         res,
-        `บัญชีแสดงรายชื่อผู้ขอพระราชทานเหรียญจักรพรรดิมาลา.${type}`
+        `บัญชีแสดงรายชื่อผู้ขอพระราชทานเหรียญจักรพรรดิมาลา ${props.roundName}.${type}`
       );
     })
     .catch((e) => {
@@ -595,15 +598,31 @@ const paginationLabel2 = (start: number, end: number, total: number) => {
           @update:model-value="DataStore.searchFilterTable"
         />
         <div>
-          <q-btn
-            size="md"
-            icon="mdi-download"
-            flat
-            round
-            color="primary"
-            @click="downloadReport('pdf')"
-          >
+          <q-btn size="md" icon="mdi-download" flat round color="primary">
+            <!-- @click="downloadReport('pdf')" -->
             <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup @click="downloadReport('pdf')">
+                  <q-item-section avatar
+                    ><q-icon color="red" name="mdi-file-pdf"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .PDF</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="downloadReport('docx')">
+                  <q-item-section avatar
+                    ><q-icon color="blue" name="mdi-file-word"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .docx</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="downloadReport('xlsx')">
+                  <q-item-section avatar
+                    ><q-icon color="green" name="mdi-file-excel"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .xlsx</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
           </q-btn>
           <q-btn
             size="12px"

src/modules/07_insignia/components/2_Manage/listManage.vue

@@ -74,6 +74,7 @@ const fecthlistRound = async () => {
       // const lastIndex = optionRound.value.length;
       const lastValue = optionRound.value[0];
       round.value = lastValue.id.toString();
+      roundName.value = lastValue.name;
       fecthStat(round.value);
     })
     .catch((err) => {
@@ -405,6 +406,7 @@ const requestSendNote = async () => {
         <tab1
           :tab="tab"
           :roundId="round"
+          :roundName="roundName"
           :fecthInsigniaByOc="fecthInsigniaByOc"
           :role-user="roleUser"
           :request-status="requestStatus"

src/modules/07_insignia/components/report/Report_01.vue

@@ -7,6 +7,8 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { QForm } from "quasar";
+
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -18,20 +20,22 @@ const {
 } = mixin;
 const $q = useQuasar();
 
+const myForm = ref<QForm>();
 const pdfSrc = ref<any>();
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const dialog = ref<boolean>(false);
 onMounted(async () => {
-  const pdfData = usePDF(
-    "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
-  );
+  await fecthlistRound();
+  //   const pdfData = usePDF(
+  //     "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+  //   );
 
-  setTimeout(() => {
-    pdfSrc.value = pdfData.pdf.value;
-    numOfPages.value = pdfData.pages.value;
-  }, 1000);
-  console.log(pdfData);
+  //   setTimeout(() => {
+  //     pdfSrc.value = pdfData.pdf.value;
+  //     numOfPages.value = pdfData.pages.value;
+  //   }, 1000);
+  //   console.log(pdfData);
 });
 
 const splitterModel = ref(14);
@@ -43,11 +47,9 @@ const optionsReport = ref<any>([
   { id: 41, name: "รายงานขร.3" },
   { id: 42, name: "รายงานขร.4" },
 ]);
-const selectList = ref<any>({ id: 0, name: "เลือกกรอบการยื่นขอ" });
-const optionsList = ref<any>([
-  { id: 1, name: "list 1" },
-  { id: 2, name: "list 2" },
-]);
+const selectList = ref<any>();
+const optionsList = ref<any>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
+
 const nextPage = () => {
   if (page.value < numOfPages.value) {
     page.value++;
@@ -63,6 +65,44 @@ const backHistory = () => {
   window.history.back();
 };
 
+const fecthlistRound = async () => {
+  await http
+    .get(config.API.listRoundInsignia())
+    .then((res: any) => {
+      optionsList.value = res.data.result.map((e: any) => ({
+        id: e.period_id,
+        year: e.period_year,
+        name: e.period_name,
+      }));
+    })
+    .catch((err) => {
+      console.log(err);
+      messageError($q, err);
+    });
+};
+
+const conditionDocument = (type: string) => {
+  myForm.value?.validate().then(async (success: boolean) => {
+    if (success) {
+      if (type == "show") {
+        await downloadReport("pdf", false);
+      } else {
+        await downloadReport("pdf", false);
+        await downloadReport(type, true);
+      }
+    }
+  });
+};
+
+const showDocument = (url: any) => {
+  const pdfData = usePDF(url);
+
+  setTimeout(() => {
+    pdfSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+  }, 1000);
+};
+
 const downloadFile = (response: any, filename: string) => {
   const link = document.createElement("a");
   var fileName = filename;
@@ -73,21 +113,34 @@ const downloadFile = (response: any, filename: string) => {
   document.body.removeChild(link);
 };
 
-const downloadReport = async (type: string = "pdf") => {
+const downloadReport = async (
+  type: string = "pdf",
+  download: boolean = true
+) => {
   showLoader();
   await http
     .get(
       config.API.reportInsignia(
         selectReport.value.id.toString(),
         type,
-        fileId.value
+        selectList.value.id
       ),
       {
         responseType: "blob",
       }
     )
     .then(async (res) => {
-      downloadFile(res, `${selectReport.value.name}.${type}`);
+      if (download) {
+        downloadFile(
+          res,
+          `${selectReport.value.name} ${selectList.value.name}.${type}`
+        );
+      } else {
+        const url = URL.createObjectURL(new Blob([res.data]));
+        // pdfSrc.value = "";
+        // numOfPages.value = 0;
+        showDocument(url);
+      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -116,39 +169,81 @@ const downloadReport = async (type: string = "pdf") => {
     <q-card flat bordered class="col-12 q-mt-sm">
       <div class="q-pa-md q-gutter-y-sm">
         <q-toolbar style="padding: 0">
-          <q-select
-            class="q-mr-sm"
-            dense
-            outlined
-            v-model="selectReport"
-            :options="optionsReport"
-            :label="optionsReport.name"
-            option-value="id"
-            option-label="name"
-          />
-          <q-select
-            dense
-            outlined
-            v-model="selectList"
-            :options="optionsList"
-            :label="optionsList.name"
-            option-value="id"
-            option-label="name"
-          />
+          <q-form ref="myForm" class="row items-center">
+            <q-select
+              use-input
+              fill-input
+              hide-selected
+              class="q-mr-sm"
+              dense
+              outlined
+              v-model="selectReport"
+              :options="optionsReport"
+              :label="optionsReport.name"
+              option-value="id"
+              option-label="name"
+              style="width: 150px"
+            />
+            <q-select
+              class="q-pa-none"
+              use-input
+              fill-input
+              hide-selected
+              dense
+              outlined
+              v-model="selectList"
+              :options="optionsList"
+              label="เลือกรอบ"
+              option-value="id"
+              option-label="name"
+              :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
+            />
+          </q-form>
+          <!-- style="width: 200px" -->
           <q-space />
           <div class="q-pa-ms q-gutter-sm" style="padding: 0">
-            <q-btn
-              outline
-              color="primary"
-              icon="download"
-              label="ดาวน์โหลด"
-              @click="downloadReport('pdf')"
-            />
+            <q-btn outline color="primary" icon="download" label="ดาวน์โหลด">
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="conditionDocument('pdf')"
+                  >
+                    <q-item-section avatar
+                      ><q-icon color="red" name="mdi-file-pdf"
+                    /></q-item-section>
+                    <q-item-section>ไฟล์ .PDF</q-item-section>
+                  </q-item>
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="conditionDocument('docx')"
+                  >
+                    <q-item-section avatar
+                      ><q-icon color="blue" name="mdi-file-word"
+                    /></q-item-section>
+                    <q-item-section>ไฟล์ .docx</q-item-section>
+                  </q-item>
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="conditionDocument('xlsx')"
+                  >
+                    <q-item-section avatar
+                      ><q-icon color="green" name="mdi-file-excel"
+                    /></q-item-section>
+                    <q-item-section>ไฟล์ .xlsx</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
             <q-btn
               unelevated
               icon="mdi-eye"
               color="primary"
               label="แสดงรายงาน"
+              @click="conditionDocument('show')"
             />
             <q-btn
               unelevated

src/modules/07_insignia/components/report/Report_02.vue

@@ -2,37 +2,57 @@
 import { ref, onMounted } from "vue";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import { useCounterMixin } from "@/stores/mixin";
-import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 import { useQuasar } from "quasar";
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { QForm } from "quasar";
+
 const store = useInsigniaDataStore();
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  success,
+} = mixin;
 const { typeReport, titleReport } = store;
-
 const $q = useQuasar();
 
+const myForm = ref<QForm>();
 const pdfSrc = ref<any>();
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const dialog = ref<boolean>(false);
-onMounted(async () => {
-  const pdfData = usePDF(
-    "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
-  );
 
-  setTimeout(() => {
-    pdfSrc.value = pdfData.pdf.value;
-    numOfPages.value = pdfData.pages.value;
-  }, 1000);
-  console.log(pdfData);
+onMounted(async () => {
+  await fecthlistRound();
+  //   const pdfData = usePDF(
+  //     "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+  //   );
+
+  //   setTimeout(() => {
+  //     pdfSrc.value = pdfData.pdf.value;
+  //     numOfPages.value = pdfData.pages.value;
+  //   }, 1000);
+  //   console.log(pdfData);
 });
 
 const splitterModel = ref(14);
 const fileId = ref<string>("");
+const selectReport = ref<any>({ id: 39, name: "รายงานขร.1" });
+const optionsReport = ref<any>([
+  { id: 39, name: "รายงานขร.1" },
+  { id: 40, name: "รายงานขร.2" },
+  { id: 41, name: "รายงานขร.3" },
+  { id: 42, name: "รายงานขร.4" },
+]);
+const selectList = ref<any>();
+const optionsList = ref<any>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
 
 const nextPage = () => {
   if (page.value < numOfPages.value) {
@@ -49,6 +69,44 @@ const backHistory = () => {
   window.history.back();
 };
 
+const fecthlistRound = async () => {
+  await http
+    .get(config.API.listRoundInsignia())
+    .then((res: any) => {
+      optionsList.value = res.data.result.map((e: any) => ({
+        id: e.period_id,
+        year: e.period_year,
+        name: e.period_name,
+      }));
+    })
+    .catch((err) => {
+      console.log(err);
+      messageError($q, err);
+    });
+};
+
+const conditionDocument = (type: string) => {
+  myForm.value?.validate().then(async (success: boolean) => {
+    if (success) {
+      if (type == "show") {
+        await downloadReport("pdf", false);
+      } else {
+        await downloadReport("pdf", false);
+        await downloadReport(type, true);
+      }
+    }
+  });
+};
+
+const showDocument = (url: any) => {
+  const pdfData = usePDF(url);
+
+  setTimeout(() => {
+    pdfSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+  }, 1000);
+};
+
 const downloadFile = (response: any, filename: string) => {
   const link = document.createElement("a");
   var fileName = filename;
@@ -59,14 +117,24 @@ const downloadFile = (response: any, filename: string) => {
   document.body.removeChild(link);
 };
 
-const downloadReport = async (type: string = "pdf") => {
+const downloadReport = async (
+  type: string = "pdf",
+  download: boolean = true
+) => {
   showLoader();
   await http
-    .get(config.API.reportInsignia(typeReport, type, fileId.value), {
+    .get(config.API.reportInsignia(typeReport, type, selectList.value.id), {
       responseType: "blob",
     })
     .then(async (res) => {
-      downloadFile(res, ` ${titleReport}.${type}`);
+      if (download) {
+        downloadFile(res, `${titleReport} ${selectList.value.name}.${type}`);
+      } else {
+        const url = URL.createObjectURL(new Blob([res.data]));
+        // pdfSrc.value = "";
+        // numOfPages.value = 0;
+        showDocument(url);
+      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -95,20 +163,81 @@ const downloadReport = async (type: string = "pdf") => {
     <q-card flat bordered class="col-12 q-mt-sm">
       <div class="q-pa-md q-gutter-y-sm">
         <q-toolbar style="padding: 0">
+          <q-form ref="myForm" class="row items-center">
+            <!-- <q-select
+              use-input
+              fill-input
+              hide-selected
+              class="q-mr-sm"
+              dense
+              outlined
+              v-model="selectReport"
+              :options="optionsReport"
+              :label="optionsReport.name"
+              option-value="id"
+              option-label="name"
+              style="width: 150px"
+            /> -->
+            <q-select
+              class="q-pa-none"
+              use-input
+              fill-input
+              hide-selected
+              dense
+              outlined
+              v-model="selectList"
+              :options="optionsList"
+              label="เลือกรอบ"
+              option-value="id"
+              option-label="name"
+              :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
+            />
+          </q-form>
+          <!-- style="width: 200px" -->
           <q-space />
           <div class="q-pa-ms q-gutter-sm" style="padding: 0">
-            <q-btn
-              outline
-              color="primary"
-              icon="download"
-              label="ดาวน์โหลด"
-              @click="downloadReport('pdf')"
-            />
+            <q-btn outline color="primary" icon="download" label="ดาวน์โหลด">
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="conditionDocument('pdf')"
+                  >
+                    <q-item-section avatar
+                      ><q-icon color="red" name="mdi-file-pdf"
+                    /></q-item-section>
+                    <q-item-section>ไฟล์ .PDF</q-item-section>
+                  </q-item>
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="conditionDocument('docx')"
+                  >
+                    <q-item-section avatar
+                      ><q-icon color="blue" name="mdi-file-word"
+                    /></q-item-section>
+                    <q-item-section>ไฟล์ .docx</q-item-section>
+                  </q-item>
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="conditionDocument('xlsx')"
+                  >
+                    <q-item-section avatar
+                      ><q-icon color="green" name="mdi-file-excel"
+                    /></q-item-section>
+                    <q-item-section>ไฟล์ .xlsx</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
             <q-btn
               unelevated
               icon="mdi-eye"
               color="primary"
               label="แสดงรายงาน"
+              @click="conditionDocument('show')"
             />
             <q-btn
               unelevated