ต่อ API ดาวน์โหลดรายงาน

src/modules/15_development/views/MainPage.vue

@@ -5,6 +5,8 @@ import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import genReportXLSX from "@/plugins/genreportxlsx";
+
 /**importType*/
 import type {
   DataOption,
@@ -60,20 +62,20 @@ const visibleColumns = ref<string[]>(["year", "projectName", "org"]);
 /** เมนูดาวน์โหลด*/
 const itemDownload = ref<ItemsMenu[]>([
   {
-    label: "ดาวน์โหลด 1",
-    value: "",
+    label: "Excel",
+    value: "EXCEL",
     icon: "mdi-file-pdf-box",
     color: "green",
   },
   {
     label: "ดาวน์โหลด 2",
-    value: "",
+    value: "PDF",
     icon: "mdi-file-table",
     color: "red",
   },
   {
     label: "ดาวน์โหลด 3",
-    value: "",
+    value: "WORD",
     icon: "mdi-file-word",
     color: "blue",
   },
@@ -143,6 +145,25 @@ function fetchListProjectNew() {
   fetchListProject();
 }
 
+function onDownload() {
+  showLoader();
+  http
+    .get(config.API.developmentReportMain())
+    .then((res) => {
+      const dataList = res.data.result;
+      genReportXLSX(
+        dataList,
+        "รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด"
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 onMounted(() => {
   fetchListProject();
 });
@@ -217,6 +238,16 @@ onMounted(() => {
       <div class="row q-gutter-sm">
         <div>
           <q-btn
+            flat
+            round
+            dense
+            icon="mdi-arrow-down-bold-circle-outline"
+            color="blue"
+            @click="onDownload"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+          </q-btn>
+          <!-- <q-btn
             flat
             round
             color="blue"
@@ -224,7 +255,13 @@ onMounted(() => {
           >
             <q-menu>
               <q-list style="min-width: 100px" dense>
-                <q-item clickable v-close-popup v-for="items in itemDownload">
+                <q-item
+                  clickable
+                  v-close-popup
+                  v-for="items in itemDownload"
+                  :key="items.value"
+                  @click="onDownload(items.value)"
+                >
                   <q-item-section avatar>
                     <q-icon :color="items.color" :name="items.icon" />
                   </q-item-section>
@@ -235,7 +272,7 @@ onMounted(() => {
               </q-list>
             </q-menu>
             <q-tooltip>ดาวน์โหลด</q-tooltip>
-          </q-btn>
+          </q-btn> -->
         </div>
         <div>
           <q-input