From 2609b825dd782ca75e2ea16a24af22d636eb53c7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 11 Jul 2025 17:15:03 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=AA=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=AD=E0=B8=9A=E0=B8=AD=E0=B8=B1=E0=B8=95=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=81=E0=B8=B3=E0=B8=A5=E0=B8=B1=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/01_org/MainReport.vue          | 577 ++++++++++++++++++
 src/modules/21_report/views/01_reportOrg.vue  |   8 +-
 2 files changed, 584 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/21_report/components/01_org/MainReport.vue

diff --git a/src/modules/21_report/components/01_org/MainReport.vue b/src/modules/21_report/components/01_org/MainReport.vue
new file mode 100644
index 000000000..06eada631
--- /dev/null
+++ b/src/modules/21_report/components/01_org/MainReport.vue
@@ -0,0 +1,577 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import axios from "axios";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import genReportXLSX from "@/plugins/genreportxlsx";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
+
+import type { DataDocument } from "@/modules/02_organization/interface/index/Main";
+import type { DataOption } from "@/modules/21_report/interface/Main";
+
+import LoadView from "@/components/LoadView.vue";
+/** use */
+const $q = useQuasar();
+const store = useOrganizational(); // store โครงสร้างหน่วยงาน
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
+const historyId = defineModel<string>("historyId", {
+  required: true,
+}); // ID ประวัติโครงสร้างหน่วยงาน
+const count = defineModel<number>("count", { required: true });
+
+//หน่วยงาน
+const organizationId = ref<string>(""); // ID หน่วยงาน
+const organizationOpsMain = ref<DataOption[]>([]); // หน่วยงานทั้งหมด
+const organizationOps = ref<DataOption[]>([]); // หน่วยงานที่เลือก
+
+//Report
+const isLoadPDF = ref<boolean>(false); // โหลดไฟล์ PDF
+const detailReport = ref<any>(undefined); // รายละเอียดรายงาน
+
+//View
+const splitterModel = ref<number>(14); // ค่าตัวแบ่ง
+const numOfPages = ref<number>(0); // จำนวนหน้าของรายงาน
+const page = ref<number>(1); // หน้าเริ่มต้น
+const pdfSrc = ref<any>(undefined); // ไฟล์ PDF
+
+const reportVal = ref<string>(""); // ค่ารายงานที่เลือก
+const baseDocument = ref<DataDocument[]>([
+  {
+    name: "บัญชี 2",
+    val: "report2",
+  },
+
+  {
+    name: "รายงานสรุปจำนวนกรอบอัตรากำลังของข้าราชการกรุงเทพมหานครสามัญ",
+    val: "report4",
+  },
+]);
+const documentOptions = ref<DataDocument[]>(baseDocument.value);
+
+const summary = reactive({
+  totalPosition: 0, // ตำแหน่งทั้งหมด
+  totalPositionCurrentUse: 0, // ตำแหน่งที่มีคนครอง
+  totalPositionCurrentVacant: 0, // ตำแหน่งว่าง
+});
+
+/**
+ * ฟังก์ชันดึงข้อมูลโครงสร้างหน่วยงาน
+ * @param id id โครงสร้าง
+ */
+async function fetchDataOrg(id: string) {
+  await http
+    .get(config.API.orgByid(id))
+    .then((res) => {
+      const data = res.data.result;
+      organizationOpsMain.value = data.data.map((v: any) => {
+        return {
+          name: v.orgRootName,
+          id: v.orgTreeId,
+        };
+      });
+      organizationOps.value = organizationOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันดึงข้อมูลสถิติ
+ * @param data ขอมูลโครงสร้าง
+ */
+async function fetchSummary() {
+  await http
+    .post(config.API.orgSummary, {
+      id: organizationId.value, //*Id node
+      type: 0, //*ประเภทnode
+      isNode: true, //*นับทั้ง node ไหม
+    })
+    .then(async (res: any) => {
+      const data = await res.data.result;
+      summary.totalPosition = data.totalPosition;
+      summary.totalPositionCurrentUse = data.totalPositionCurrentUse;
+      summary.totalPositionCurrentVacant = data.totalPositionCurrentVacant;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชัน DownloadReport
+ * @param list รายงานที่ต้องการดาวน์โหลด
+ */
+async function getReport(list: string) {
+  const listFind = baseDocument.value.find(
+    (item: DataDocument) => item.val == list
+  )?.val;
+  const newReport = listFind === "report2" ? "report2-history" : listFind;
+  pdfSrc.value = undefined;
+  page.value = 1;
+  isLoadPDF.value = true;
+  if (newReport) {
+    await http
+      .get(config.API.orgReport(newReport) + `/${organizationId.value}`)
+      .then(async (res) => {
+        const data = res.data.result;
+        detailReport.value = data;
+        await fetchDocumentTemplate(data);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        isLoadPDF.value = false;
+      });
+  }
+}
+
+/**
+ * ฟังก์ชันเรียกไฟล์ PDF
+ * @param data  ข้อมูลบัญชีวันลา
+ */
+async function fetchDocumentTemplate(data: any) {
+  await axios
+    .post(`${config.API.reportTemplate}/xlsx`, data, {
+      headers: {
+        accept: "application/pdf",
+        "content-Type": "application/json",
+      },
+      responseType: "blob",
+    })
+    .then(async (res) => {
+      const blob = new Blob([res.data]);
+      const objectUrl = URL.createObjectURL(blob);
+      const pdfData = usePDF(`${objectUrl}`);
+
+      setTimeout(() => {
+        pdfSrc.value = pdfData.pdf.value;
+        numOfPages.value = pdfData.pages.value;
+      }, 1500);
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+    });
+}
+
+async function onSearchReport() {
+  showLoader();
+  try {
+    fetchSummary();
+    getReport(reportVal.value);
+  } catch (error) {
+    console.error("Error showing loader:", error);
+  } finally {
+    hideLoader();
+  }
+  // Implement search functionality here
+}
+
+/**
+ * ฟังก์ชันค้นหาคำใน select
+ * @param val คำค้นหา
+ * @param update function
+ * @param type ประเภท select
+ */
+function filterSelector(val: string, update: Function, type: string) {
+  switch (type) {
+    case "organization":
+      update(() => {
+        organizationOps.value = organizationOpsMain.value.filter(
+          (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "report":
+      update(() => {
+        documentOptions.value = baseDocument.value.filter(
+          (v: DataDocument) => v.name.toLowerCase().indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+}
+
+/** ล้างตัวกรอง */
+function clearFilter() {
+  pdfSrc.value = undefined;
+  detailReport.value = undefined;
+  numOfPages.value = 0; // จำนวนหน้าของรายงาน
+  organizationId.value = "";
+  reportVal.value = "";
+  summary.totalPosition = 0;
+  summary.totalPositionCurrentUse = 0;
+  summary.totalPositionCurrentVacant = 0;
+}
+
+/** กลับหน้าก่อนหน้าของรายงาน */
+function backPage() {
+  if (page.value !== 1) {
+    page.value--;
+  }
+}
+
+/** ไปหน้าต่อไปของรายงาน */
+function nextPage() {
+  if (page.value < numOfPages.value) {
+    page.value++;
+  }
+}
+
+/** callback function ทำการ fetch ข้อมูล Tree เมื่อมีการเปลี่ยนแปลง activeId */
+watch(
+  () => store.activeId,
+  () => {
+    store.activeId && fetchDataOrg(store.activeId?.toString());
+  }
+);
+
+/** callback function ทำงาน ทำการ fetch ข้อมูล Tree เมื่อมีการเลือกประวัติโครงสร้าง*/
+watch(
+  () => count.value,
+  () => {
+    clearFilter();
+    organizationOpsMain.value = [];
+    organizationOps.value = [];
+    fetchDataOrg(historyId.value);
+  }
+);
+
+watch(
+  () => store.typeOrganizational,
+  () => {
+    clearFilter();
+    organizationOpsMain.value = [];
+    organizationOps.value = [];
+    store.activeId && fetchDataOrg(store.activeId?.toString());
+  }
+);
+
+/**
+ * lifecycle Hook ทำเมือ่ Components ถูกเรียกใช้งาน
+ * ุ และดึงช้อมูลโครงสร้างตาม ID ของประเภทโครงสร้าง ปัจจุบัน,แบบร่าง
+ */
+onMounted(async () => {
+  const id =
+    store.typeOrganizational === "current" ? store.activeId : historyId.value;
+
+  id && (await fetchDataOrg(id));
+});
+</script>
+
+<template>
+  <q-form greedy @submit.prevent @validation-success="onSearchReport">
+    <div class="row q-col-gutter-sm">
+      <div class="col-12">
+        <q-card class="q-pa-sm">
+          <div class="row q-col-gutter-sm">
+            <div class="col">
+              <q-card flat bordered>
+                <q-card-section
+                  bordered
+                  class="bg-primary text-subtitle2 text-white q-pa-sm row items-center"
+                >
+                  <q-icon name="mdi-filter" class="q-mr-xs" />
+                  ตัวกรอง
+                  <q-space />
+                  <q-btn
+                    dense
+                    size="12px"
+                    class="q-px-sm"
+                    rounded
+                    flat
+                    label="ล้างทั้งหมด"
+                    @click.stop.prevent="clearFilter"
+                  />
+                </q-card-section>
+                <q-card-section class="q-pa-none">
+                  <div class="col-12 q-pb-xs q-px-sm">
+                    <q-select
+                      class="bg-white"
+                      dense
+                      borderless
+                      hide-selected
+                      fill-input
+                      hide-bottom-space
+                      option-label="name"
+                      option-value="id"
+                      emit-value
+                      map-options
+                      v-model="organizationId"
+                      :options="organizationOps"
+                      label="หน่วยงาน"
+                      use-input
+                      @filter="(inputValue: string,
+            doneFn: Function) => filterSelector(inputValue, doneFn,'organization' )"
+                    >
+                      <template v-slot:no-option>
+                        <q-item>
+                          <q-item-section class="text-grey">
+                            ไม่มีข้อมูล
+                          </q-item-section>
+                        </q-item>
+                      </template>
+                    </q-select>
+                  </div>
+                  <q-separator />
+                  <div class="col-12 q-pb-xs q-px-sm">
+                    <q-select
+                      class="bg-white"
+                      dense
+                      borderless
+                      hide-selected
+                      fill-input
+                      hide-bottom-space
+                      option-label="name"
+                      option-value="val"
+                      emit-value
+                      map-options
+                      v-model="reportVal"
+                      :options="documentOptions"
+                      label="รายงาน"
+                      use-input
+                      @filter="(inputValue: string,
+            doneFn: Function) => filterSelector(inputValue, doneFn,'report' )"
+                    >
+                      <template v-slot:no-option>
+                        <q-item>
+                          <q-item-section class="text-grey">
+                            ไม่มีข้อมูล
+                          </q-item-section>
+                        </q-item>
+                      </template>
+                    </q-select>
+                  </div>
+                </q-card-section>
+                <q-separator />
+                <q-card-actions align="right">
+                  <q-btn
+                    dense
+                    class="q-px-md"
+                    label="ค้นหา"
+                    unelevated
+                    color="public"
+                    type="submit"
+                    :disable="organizationId === ''"
+                  />
+                </q-card-actions>
+              </q-card>
+            </div>
+            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 col-xs-12">
+              <div class="col-12">
+                <div class="col-12">
+                  <q-card
+                    bordered
+                    class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
+                  >
+                    <div class="row col q-pa-sm item">
+                      <div class="ellipsis">ตำแหน่งทั้งหมด</div>
+                      <q-space />
+                      <q-badge
+                        color="secondary"
+                        :label="summary.totalPosition"
+                      />
+                    </div>
+                    <div class="row col q-pa-sm item">
+                      <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
+                      <q-space />
+                      <q-badge
+                        color="primary"
+                        :label="summary.totalPositionCurrentUse"
+                      />
+                    </div>
+                    <div class="row col q-pa-sm item">
+                      <div class="ellipsis">ตำแหน่งว่าง</div>
+                      <q-space />
+                      <q-badge
+                        color="red"
+                        :label="summary.totalPositionCurrentVacant"
+                      />
+                    </div>
+                    <div class="row col item">
+                      <div class="row col-12">
+                        <q-space />
+                        <q-btn
+                          :loading="isLoadPDF"
+                          :disable="!detailReport"
+                          flat
+                          round
+                          color="primary"
+                          icon="download"
+                          v-if="checkPermission($route)?.attrIsGet"
+                        >
+                          <q-menu>
+                            <q-list style="min-width: 150px">
+                              <q-item
+                                clickable
+                                v-close-popup
+                                @click.stop.prevent="
+                                  genReportXLSX(
+                                    detailReport,
+                                    `${
+                                      baseDocument.find(
+                                        (e) => e.val === reportVal
+                                      )?.name
+                                    }`,
+                                    '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.stop.prevent="
+                                  genReportXLSX(
+                                    detailReport,
+                                    `${
+                                      baseDocument.find(
+                                        (e) => e.val === reportVal
+                                      )?.name
+                                    }`
+                                  )
+                                "
+                              >
+                                <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>
+                      </div>
+                    </div>
+                  </q-card>
+
+                  <q-splitter
+                    class="q-mt-xs"
+                    v-model="splitterModel"
+                    disable
+                    horizontal
+                    style="
+                      height: 75vh;
+                      border: 1px solid rgb(210, 210, 210);
+                      border-radius: 5px;
+                      width: 100%;
+                    "
+                    before-class="overflow-hidden disable"
+                    separator-class="bg-white disabled"
+                  >
+                    <template v-slot:before>
+                      <div class="q-px-sm">
+                        <div class="row items-start items-center">
+                          <div class="col">
+                            <q-btn
+                              padding="xs"
+                              icon="mdi-chevron-left"
+                              color="grey-2"
+                              text-color="grey-5"
+                              size="md"
+                              class="my-auto"
+                              @click="backPage"
+                              :disable="page == 1"
+                            />
+                          </div>
+                          <div class="col-12 col-md-auto">
+                            <div class="q-pa-md flex">
+                              หน้าที่ {{ page }} จาก {{ numOfPages }}
+                            </div>
+                          </div>
+                          <div class="col text-right">
+                            <q-btn
+                              padding="xs"
+                              icon="mdi-chevron-right"
+                              color="grey-2"
+                              text-color="grey-5"
+                              size="md"
+                              @click="nextPage"
+                              :disable="page === numOfPages"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+                    <template v-slot:after>
+                      <div class="q-pa-md">
+                        <LoadView v-if="isLoadPDF" />
+                        <VuePDF
+                          v-else-if="!isLoadPDF && pdfSrc"
+                          ref="vuePDFRef"
+                          :pdf="pdfSrc"
+                          :page="page"
+                          fit-parent
+                        />
+                      </div>
+                    </template>
+                    <template v-slot:default>
+                      <div class="q-pa-md">
+                        <div class="row items-start items-center">
+                          <div class="col">
+                            <q-btn
+                              padding="xs"
+                              icon="mdi-chevron-left"
+                              color="grey-2"
+                              text-color="grey-5"
+                              size="md"
+                              class="my-auto"
+                              @click="backPage"
+                              :disable="page == 1"
+                            />
+                          </div>
+
+                          <div class="col-12 col-md-auto">
+                            <div class="q-pa-md flex">
+                              หน้าที่ {{ page }} จาก {{ numOfPages }}
+                            </div>
+                          </div>
+                          <div class="col text-right">
+                            <q-btn
+                              padding="xs"
+                              icon="mdi-chevron-right"
+                              color="grey-2"
+                              text-color="grey-5"
+                              size="md"
+                              @click="nextPage"
+                              :disable="page === numOfPages"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </template>
+                  </q-splitter>
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </q-form>
+</template>
+
+<style scoped>
+.list-summary .item {
+  border: 1px solid rgb(231, 231, 231);
+  border-radius: 4px;
+  background-color: white;
+}
+</style>
diff --git a/src/modules/21_report/views/01_reportOrg.vue b/src/modules/21_report/views/01_reportOrg.vue
index cd534a6a7..6054048df 100644
--- a/src/modules/21_report/views/01_reportOrg.vue
+++ b/src/modules/21_report/views/01_reportOrg.vue
@@ -13,6 +13,7 @@ import type { DataOrgRevision } from "@/modules/02_organization/interface/index/
 import type { OrgRevision } from "@/modules/02_organization/interface/response/organizational";
 
 /** importComponents*/
+import MainReport from "@/modules/21_report/components/01_org/MainReport.vue";
 import TreeView from "@/modules/21_report/components/01_org/Main.vue";
 import StructureView from "@/modules/02_organization/components/StructureMain.vue";
 import StructureOrgMain from "@/modules/02_organization/components/StructureOrgMain.vue";
@@ -177,11 +178,16 @@ onMounted(async () => {
       <q-card-section style="padding: 0px">
         <q-tab-panels v-model="store.statusView" animated>
           <q-tab-panel name="list" style="padding: 0px">
-            <TreeView
+            <MainReport
               v-if="store.statusView === 'list'"
               v-model:historyId="historyId"
               v-model:count="count"
             />
+            <!-- <TreeView
+              v-if="store.statusView === 'list'"
+              v-model:historyId="historyId"
+              v-model:count="count"
+            /> -->
           </q-tab-panel>
 
           <q-tab-panel name="tree" style="padding: 0px">