UI รายงานสถิติข้อมูลข้าราชการ กทม. สามัญ

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

@@ -1,21 +1,44 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch,computed } from "vue";
+import axios from "axios";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import { checkPermission } from "@/utils/permissions";
 import { useRouter } from "vue-router";
 import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
+import { useCounterMixin } from "@/stores/mixin";
 
 //importType
-import type { QTableProps } from "quasar";
-import type { FormFilter } from "@/modules/04_registryPerson/interface/request/Main";
+import { useQuasar, type QTableProps } from "quasar";
+import type {
+  FormFilter,
+  RangeAge,
+} from "@/modules/04_registryPerson/interface/request/Main";
 
 //importComponent
 import DialogHistory from "@/modules/04_registryPerson/components/DialogHistory.vue";
-
+import DialogHeader from "@/components/DialogHeader.vue";
 //use
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { messageError } = mixin;
 const store = useRegistryNewDataStore();
 const router = useRouter();
 
+const detailReport = ref<any>();
+const rangeAge = ref<RangeAge>({
+  min: 20,
+  max: 80,
+});
+
+const objMarkerLabel = computed(()=>{
+  return { 50: `ช่วงอายุ ${rangeAge.value.min}-${rangeAge.value.max} ปี`}
+})
+
+const loadingBtn = ref<boolean>(false);
+const year = ref<number>(new Date().getFullYear());
 //props
 const formFilter = defineModel<FormFilter>("formFilter", { required: true }); //ข้อมูลการค้นหา
 const maxPage = defineModel<Number>("maxPage", { required: true }); //จำนวนหน้าทั้งหมด
@@ -30,7 +53,7 @@ const props = defineProps({
 
 //ตัวแปร
 const modalHistory = ref<boolean>(false); //ประวัติถือครองตำแหน่ง
-
+const modalReport = ref<boolean>(false);
 //ข้อมูล Table
 const columns = ref<QTableProps["columns"]>([
   {
@@ -193,6 +216,84 @@ function redirectToPagePetition() {
   }
 }
 
+function onGovernment() {
+  modalReport.value = true;
+  getReport();
+}
+
+function closeDialog() {
+  modalReport.value = false;
+  rangeAge.value = {
+    min: 20,
+    max: 80,
+  };
+}
+
+async function getReport() {
+  loadingBtn.value = true;
+  await http
+    .get(
+      config.API.reportOrgByType(
+        empType.value == "officer" ? "officer" : "emp"
+      ) +
+        `?rootId=&year=${year.value}&ageMin=${rangeAge.value.min}&ageMax=${rangeAge.value.max}`
+    )
+    .then((res) => {
+      const data = res.data.result;
+      detailReport.value = data;
+      console.log("🚀 ~ .then ~ data:", data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        loadingBtn.value = false;
+      }, 500);
+    });
+}
+
+/**
+ * function เรียกไฟล์ XLSX
+ * @param data ข้อมูลรายงานสถิติการลา
+ */
+async function genReportXLSX(data: any) {
+  await axios
+    .post(`${config.API.reportTemplate}/xlsx`, data, {
+      headers: {
+        accept:
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        "content-Type": "application/json",
+      },
+      responseType: "blob",
+    })
+    .then(async (res) => {
+      const blob = new Blob([res.data]);
+      await downloadReport(blob, "xlsx");
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+    });
+}
+
+/**
+ *
+ * @param data ข้อมูลรายงานสถิติการลา
+ * @param type นามสกุลไฟล์
+ */
+async function downloadReport(data: any, type: string) {
+  const link = document.createElement("a");
+  var fileName =
+    empType.value == "officer"
+      ? "รายงานสถิติข้อมูลข้าราชการ กทม. สามัญ"
+      : "รายงานสถิติข้อมูลลูกจ้างประจำ กทม.";
+  link.href = window.URL.createObjectURL(new Blob([data]));
+  link.setAttribute("download", `${fileName}.${type}`);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
 /**
  * ดูการเปลี่ยนแปลงของ formFilter.value.pageSize
  * เมื่อมีการเปลี่ยนแปลงจำทำการดึงข้อมูลรายการทะเบียนประวัติใหม่ตามจำนวน  formFilter.value.pageSize
@@ -235,6 +336,22 @@ watch(
     <div v-if="total > 0" class="text-teal">
       พบข้อมูลทั้งหมด {{ total.toLocaleString() }} รายการ
     </div>
+    <!-- empType === "officer" ? -->
+    <div>
+      <q-btn
+        flat
+        dense
+        icon="download"
+        color="primary"
+        round
+        @click="onGovernment"
+        ><q-tooltip
+          >รายงานสถิติข้อมูล{{
+            empType == "officer" ? "ข้าราชการ กทม. สามัญ" : "ลูกจ้างประจำ กทม."
+          }}</q-tooltip
+        ></q-btn
+      >
+    </div>
     <q-select
       v-if="store.mode === 'table'"
       v-model="visibleColumns"
@@ -510,6 +627,88 @@ watch(
     </template>
   </d-table>
 
+  <q-dialog v-model="modalReport" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <DialogHeader
+        :tittle="
+          empType == 'officer'
+            ? 'รายงานสถิติข้อมูลข้าราชการ กทม. สามัญ'
+            : 'รายงานสถิติข้อมูลลูกจ้างประจำ กทม.'
+        "
+        :close="closeDialog"
+      />
+      <q-separator />
+      <q-card-section class="q-pt-none" style="padding: 0px">
+        <div class="q-pa-sm q-gutter-y-sm">
+          <q-toolbar class="q-pa-sm bg-grey-2" style="border-radius: 5px">
+            <div class="q-pr-xs col-4">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="year"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                @update:model-value="getReport"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
+                    :label="`${'ปีงบประมาณ'}`"
+                    bg-color="white"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="q-pr-xs col-4">
+              <div class="q-px-sm">
+                <q-range
+                  :model-value="rangeAge"
+                  :min="20"
+                  :max="80"
+                  label-always
+                  :marker-labels="objMarkerLabel"
+                  color="primary"
+                  @change="(val:RangeAge) => { rangeAge = val,getReport() }"
+                >
+                </q-range>
+              </div>
+            </div>
+            <div class="q-pr-xs col-4">
+              <q-btn
+                :loading="loadingBtn"
+                :disable="loadingBtn"
+                color="primary"
+                icon="download"
+                label="ดาวน์โหลดรายงาน"
+                @click="genReportXLSX(detailReport)"
+                style="width: 100%"
+              >
+                <q-tooltip>ดาวน์โหลดรายงาน</q-tooltip>
+              </q-btn>
+            </div>
+          </q-toolbar>
+        </div>
+      </q-card-section>
+      <q-separator />
+    </q-card>
+  </q-dialog>
+
   <!-- ประวัติถือครองตำแหน่ง -->
   <DialogHistory v-model:modal="modalHistory" />
 </template>