เพิ่ม ปุ่ม download file report การลงเวลา

src/modules/09_leave/components/3_Report/DetailReport.vue

@@ -111,6 +111,7 @@ const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const pdfSrc = ref<any>();
 const modalFull = ref<boolean>(false);
+const fileBlob = ref<any>();
 /** ไปหน้าต่อไปของรายงาน */
 function nextPage() {
   if (page.value < numOfPages.value) {
@@ -137,6 +138,7 @@ async function fetchReportTimeRecords(body: any) {
     .then((res) => {
       const data = res.data.result;
       data && genReport(data);
+      dataDetail.value = data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -152,14 +154,13 @@ async function fetchLeaveday(type: string, year: string) {
   await http
     .post(config.API.leaveReportLeaveday(type), body)
     .then((res) => {
-      console.log(res);
       const data = res.data.result;
       data && genReport(data);
+      dataDetail.value = data;
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {});
+    });
 }
 
 async function updateFilterType() {
@@ -221,8 +222,7 @@ async function genReport(data: any) {
     .then(async (res) => {
       const blob = new Blob([res.data]);
       const objectUrl = URL.createObjectURL(blob);
-      console.log(blob);
-
+      fileBlob.value = blob;
       const pdfData = await usePDF(`${objectUrl}`);
       showLoader();
       setTimeout(() => {
@@ -239,12 +239,44 @@ async function genReport(data: any) {
     });
 }
 
+const dataDetail = ref<any>([]);
+async function genReportXLSX(data: any) {
+  await axios
+    .post(apiGenReport, data, {
+      headers: {
+        accept:
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        "content-Type": "application/json",
+      },
+      responseType: "blob",
+    })
+    .then(async (res) => {
+      const blob = new Blob([res.data]);
+      downloadReport(blob, "xlsx");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 async function updateLeaveday() {
   fetchLeaveday(employeeClass.value, yearType.value);
 }
 
+async function downloadReport(data: any, type: string) {
+  const link = document.createElement("a");
+  var fileName = titleReport.value;
+  link.href = window.URL.createObjectURL(new Blob([data]));
+  link.setAttribute("download", `${fileName}.${type}`);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
 onMounted(() => {
-  console.log(typeReport);
   const body = {
     startDate: dateToISO(date.value),
     endDate: dateToISO(date.value),
@@ -343,10 +375,36 @@ onMounted(() => {
 
         <q-space />
         <div class="q-py-xs">
-          <q-btn unelevated color="primary" @click="modalFull = true">
+          <q-btn flat round color="primary" icon="download">
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="downloadReport(fileBlob, '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="genReportXLSX(dataDetail)"
+                >
+                  <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 color="primary" @click="modalFull = true">
             <q-icon left size="2em" name="mdi-eye-outline" />
             <div>แสดงรายงาน</div>
-          </q-btn>
+          </q-btn> -->
         </div>
       </q-toolbar>
       <q-toolbar