รายงานระบบการสรรหาบุคคล

src/modules/04_registryPerson/components/TableView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch,computed } from "vue";
+import { ref, watch, computed } from "vue";
 import axios from "axios";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -33,9 +33,9 @@ const rangeAge = ref<RangeAge>({
   max: 80,
 });
 
-const objMarkerLabel = computed(()=>{
-  return { 50: `ช่วงอายุ ${rangeAge.value.min}-${rangeAge.value.max} ปี`}
-})
+const objMarkerLabel = computed(() => {
+  return { 50: `ช่วงอายุ ${rangeAge.value.min}-${rangeAge.value.max} ปี` };
+});
 
 const loadingBtn = ref<boolean>(false);
 const year = ref<number>(new Date().getFullYear());
@@ -218,7 +218,6 @@ function redirectToPagePetition() {
 
 function onGovernment() {
   modalReport.value = true;
-  getReport();
 }
 
 function closeDialog() {
@@ -240,8 +239,7 @@ async function getReport() {
     )
     .then((res) => {
       const data = res.data.result;
-      detailReport.value = data;
-      console.log("🚀 ~ .then ~ data:", data);
+      genReportXLSX(data);
     })
     .catch((err) => {
       messageError($q, err);
@@ -649,7 +647,6 @@ watch(
                 autoApply
                 year-picker
                 :enableTimePicker="false"
-                @update:model-value="getReport"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
@@ -676,15 +673,14 @@ watch(
               </datepicker>
             </div>
             <div class="q-pr-xs col-4">
-              <div class="q-px-sm">
+              <div class="q-px-sm q-mx-md">
                 <q-range
-                  :model-value="rangeAge"
+                  v-model="rangeAge"
                   :min="20"
                   :max="80"
-                  label-always
+                  label
                   :marker-labels="objMarkerLabel"
                   color="primary"
-                  @change="(val:RangeAge) => { rangeAge = val,getReport() }"
                 >
                 </q-range>
               </div>
@@ -696,7 +692,7 @@ watch(
                 color="primary"
                 icon="download"
                 label="ดาวน์โหลดรายงาน"
-                @click="genReportXLSX(detailReport)"
+                @click="getReport"
                 style="width: 100%"
               >
                 <q-tooltip>ดาวน์โหลดรายงาน</q-tooltip>