From 60a09db3b71677766aa6541b2b552c67dae09216 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 11 Jul 2025 14:49:06 +0700
Subject: [PATCH 1/7] fix report salary text hint to tootip

---
 .../21_report/views/05_reportSalary.vue       | 38 +++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/modules/21_report/views/05_reportSalary.vue b/src/modules/21_report/views/05_reportSalary.vue
index af32b2dcd..0cd90d6ed 100644
--- a/src/modules/21_report/views/05_reportSalary.vue
+++ b/src/modules/21_report/views/05_reportSalary.vue
@@ -526,13 +526,30 @@ onMounted(() => {
                       lazy-rules
                       hide-bottom-space
                       bg-color="white"
-                      :hint="
-                        group === 'GROUP1'
-                          ? 'ทั่วไป: ปฏิบัติงาน, ชำนาญงาน, อาวุโส\nวิชาการ: ปฏิบัติการ, ชำนาญการ, ชำนาญการพิเศษ\nอำนวยการ: ต้น'
-                          : 'ทั่วไป: ทักษะพิเศษ\nวิชาการ: เชี่ยวชาญ, ทรงคุณวุฒิ\nอำนวยการ: สูง\nบริหาร: ต้น, สูง'
-                      "
-                      class="multiline-hint"
                     >
+                      <template #append>
+                        <q-icon
+                          name="help_outline"
+                          color="info"
+                          size="20px"
+                          class="cursor-pointer"
+                          v-if="group"
+                        >
+                          <q-tooltip>
+                            <div v-if="group === 'GROUP1'">
+                              <div>ทั่วไป: ปฏิบัติงาน, ชำนาญงาน, อาวุโส</div>
+                              <div>วิชาการ: ปฏิบัติการ, ชำนาญการ, ชำนาญการพิเศษ</div>
+                              <div>อำนวยการ: ต้น</div>
+                            </div>
+                            <div v-else>
+                              <div>ทั่วไป: ทักษะพิเศษ</div>
+                              <div>วิชาการ: เชี่ยวชาญ, ทรงคุณวุฒิ</div>
+                              <div>อำนวยการ: สูง</div>
+                              <div>บริหาร: ต้น, สูง</div>
+                            </div>
+                          </q-tooltip>
+                        </q-icon>
+                      </template>
                     </q-select>
                   </div>
                   <q-separator v-if="employeeClass === 'officer'" />
@@ -847,13 +864,4 @@ onMounted(() => {
   min-height: 32px;
   padding: 2px 9px;
 }
-
-.multiline-hint :deep(.q-field__messages) {
-  white-space: pre-line;
-  font-size: 0.8rem;
-  line-height: 1.2;
-  background-color: #eeeeee;
-  padding: 8px;
-  border-radius: 4px;
-}
 </style>

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

---
 .../21_report/components/01_org/TableMain.vue       | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/modules/21_report/components/01_org/TableMain.vue b/src/modules/21_report/components/01_org/TableMain.vue
index 21689f88d..9de762b8f 100644
--- a/src/modules/21_report/components/01_org/TableMain.vue
+++ b/src/modules/21_report/components/01_org/TableMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import axios from "axios";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
@@ -115,6 +115,17 @@ function backPage() {
     page.value--;
   }
 }
+
+/** ติดตามการเปลี่ยนแปลงของ orgRootId */
+watch(
+  () => orgRootId.value,
+  async () => {
+    // เมื่อ orgRootId มีค่าและ title มีค่า เราจะเรียก getReport
+    if (orgRootId.value && title.value) {
+      await getReport(title.value);
+    }
+  }
+);
 </script>
 
 <template>

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 3/7] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=87?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B9=81=E0=B8=A5=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A3=E0=B8=AD=E0=B8=9A=E0=B8=AD=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=A3=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">

From 963839d98b0d1cb84c906d7975ff8365a3038d1c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 11 Jul 2025 17:22:24 +0700
Subject: [PATCH 4/7] =?UTF-8?q?fix=20CurrentPage=20=3D=3D=3D>=20=20?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=B1=E0=B8=95=E0=B8=A3=E0=B8=B2=E0=B8=81=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B1=E0=B8=87=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B3=20=E0=B8=AF,=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=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=B1=E0=B9=88=E0=B8=A7=E0=B8=84=E0=B8=A3=E0=B8=B2=E0=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TableMain.vue                  | 19 ++++++++++++++-----
 .../20_positionTemp/components/TableMain.vue  | 19 ++++++++++++++-----
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/modules/16_positionEmployee/components/TableMain.vue b/src/modules/16_positionEmployee/components/TableMain.vue
index c8298c04a..e01f1cdcd 100644
--- a/src/modules/16_positionEmployee/components/TableMain.vue
+++ b/src/modules/16_positionEmployee/components/TableMain.vue
@@ -5,6 +5,7 @@ import { useQuasar } from "quasar";
 import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
+import { updateCurrentPage } from "@/utils/function";
 import genreport from "@/plugins/genreportxlsx";
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -203,12 +204,20 @@ function onClickDelete(id: string) {
     await http
       .delete(config.API.orgPosMasterByIdEmp(id))
       .then(async () => {
-        await props.fetchDataTable?.(
-          reqMaster.value.id,
-          reqMaster.value.type,
-          false
+        reqMaster.value.page = await updateCurrentPage(
+          reqMaster.value.page,
+          totalPage.value,
+          posMaster.value.length
         );
-        await getSummary();
+
+        await Promise.all([
+          props.fetchDataTable?.(
+            reqMaster.value.id,
+            reqMaster.value.type,
+            false
+          ),
+          getSummary(),
+        ]);
         success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((err) => {
diff --git a/src/modules/20_positionTemp/components/TableMain.vue b/src/modules/20_positionTemp/components/TableMain.vue
index a58b969fe..c2b47f56e 100644
--- a/src/modules/20_positionTemp/components/TableMain.vue
+++ b/src/modules/20_positionTemp/components/TableMain.vue
@@ -5,6 +5,7 @@ import { useQuasar } from "quasar";
 import { usePositionEmp } from "@/modules/20_positionTemp/store/organizational";
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
+import { updateCurrentPage } from "@/utils/function";
 import genreport from "@/plugins/genreportxlsx";
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -204,12 +205,20 @@ function onClickDelete(id: string) {
     await http
       .delete(config.API.orgPosMasterByIdEmpTemp(id))
       .then(async () => {
-        await props.fetchDataTable?.(
-          reqMaster.value.id,
-          reqMaster.value.type,
-          false
+        reqMaster.value.page = await updateCurrentPage(
+          reqMaster.value.page,
+          totalPage.value,
+          posMaster.value.length
         );
-        await getSummary();
+        await Promise.all([
+          props.fetchDataTable?.(
+            reqMaster.value.id,
+            reqMaster.value.type,
+            false
+          ),
+          getSummary(),
+        ]);
+
         success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((err) => {

From dddb918c94c09845afce249ac7b8bd11a393330d Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 11 Jul 2025 17:32:54 +0700
Subject: [PATCH 5/7] report org fix style & add tooltip

---
 src/modules/21_report/components/01_org/MainReport.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/modules/21_report/components/01_org/MainReport.vue b/src/modules/21_report/components/01_org/MainReport.vue
index 06eada631..19119313d 100644
--- a/src/modules/21_report/components/01_org/MainReport.vue
+++ b/src/modules/21_report/components/01_org/MainReport.vue
@@ -402,18 +402,22 @@ onMounted(async () => {
                         :label="summary.totalPositionCurrentVacant"
                       />
                     </div>
-                    <div class="row col item">
+                    <div class="row col">
                       <div class="row col-12">
                         <q-space />
                         <q-btn
+                          v-if="checkPermission($route)?.attrIsGet"
                           :loading="isLoadPDF"
                           :disable="!detailReport"
                           flat
                           round
                           color="primary"
                           icon="download"
-                          v-if="checkPermission($route)?.attrIsGet"
                         >
+                        <q-tooltip>
+                          ดาวน์โหลดรายงาน
+                        </q-tooltip>
+                        
                           <q-menu>
                             <q-list style="min-width: 150px">
                               <q-item

From fe30f6b607b081048069c3c1d08f305f3ac4adf8 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 14 Jul 2025 10:52:32 +0700
Subject: [PATCH 6/7] fix rows-per-page

---
 .../13_salary/components/02_salaryEmployee/TabStructure.vue     | 2 +-
 .../components/05_salaryListsEmployee/TableTypeOther.vue        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/13_salary/components/02_salaryEmployee/TabStructure.vue b/src/modules/13_salary/components/02_salaryEmployee/TabStructure.vue
index a3b10b375..e248ea98d 100644
--- a/src/modules/13_salary/components/02_salaryEmployee/TabStructure.vue
+++ b/src/modules/13_salary/components/02_salaryEmployee/TabStructure.vue
@@ -288,7 +288,7 @@ onMounted(() => {
     :rows="rows"
     :columns="columns"
     row-key="name"
-    :rows-per-page-options="[1, 10, 20, 50, 100]"
+    :rows-per-page-options="[10, 20, 50, 100]"
     :visible-columns="visibleColumns"
     @update:pagination="updatePageSize"
   >
diff --git a/src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue b/src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue
index ea79252dc..9f12353e4 100644
--- a/src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue
+++ b/src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue
@@ -389,7 +389,7 @@ watch(
     bordered
     :paging="true"
     dense
-    :rows-per-page-options="[1,10, 25, 50, 100]"
+    :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
     @update:pagination="updatePageSizePagination"
   >

From 6f7bdb91ee413d3a00ab54baea5f9faf660b0653 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 14 Jul 2025 10:59:09 +0700
Subject: [PATCH 7/7] fix row-per-page

---
 src/modules/06_retirement/components/02_resign/ResignByid.vue   | 2 +-
 src/modules/06_retirement/components/02_resign/ResignReject.vue | 2 +-
 .../06_retirement/components/03_resignEmp/ResignByid.vue        | 2 +-
 .../06_retirement/components/03_resignEmp/ResignReject.vue      | 2 +-
 src/modules/09_leave/components/05_Leave/DetailLeavePage.vue    | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/modules/06_retirement/components/02_resign/ResignByid.vue b/src/modules/06_retirement/components/02_resign/ResignByid.vue
index d42dc131c..a33f25fcf 100644
--- a/src/modules/06_retirement/components/02_resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/02_resign/ResignByid.vue
@@ -1152,7 +1152,7 @@ onMounted(async () => {
           bordered
           :paging="true"
           dense
-          :rows-per-page-options="[1, 25, 50, 100]"
+          :rows-per-page-options="[10, 25, 50, 100]"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
diff --git a/src/modules/06_retirement/components/02_resign/ResignReject.vue b/src/modules/06_retirement/components/02_resign/ResignReject.vue
index 8fc0fb331..b0061bcc4 100644
--- a/src/modules/06_retirement/components/02_resign/ResignReject.vue
+++ b/src/modules/06_retirement/components/02_resign/ResignReject.vue
@@ -547,7 +547,7 @@ onMounted(async () => {
           bordered
           :paging="true"
           dense
-          :rows-per-page-options="[1, 25, 50, 100]"
+          :rows-per-page-options="[10, 25, 50, 100]"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
diff --git a/src/modules/06_retirement/components/03_resignEmp/ResignByid.vue b/src/modules/06_retirement/components/03_resignEmp/ResignByid.vue
index c2ebfa160..ec11f42b2 100644
--- a/src/modules/06_retirement/components/03_resignEmp/ResignByid.vue
+++ b/src/modules/06_retirement/components/03_resignEmp/ResignByid.vue
@@ -1166,7 +1166,7 @@ onMounted(async () => {
           bordered
           :paging="true"
           dense
-          :rows-per-page-options="[1, 25, 50, 100]"
+          :rows-per-page-options="[10, 25, 50, 100]"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
diff --git a/src/modules/06_retirement/components/03_resignEmp/ResignReject.vue b/src/modules/06_retirement/components/03_resignEmp/ResignReject.vue
index c6d277a82..76cbe2a2b 100644
--- a/src/modules/06_retirement/components/03_resignEmp/ResignReject.vue
+++ b/src/modules/06_retirement/components/03_resignEmp/ResignReject.vue
@@ -532,7 +532,7 @@ onMounted(async () => {
           bordered
           :paging="true"
           dense
-          :rows-per-page-options="[1, 25, 50, 100]"
+          :rows-per-page-options="[10, 25, 50, 100]"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
diff --git a/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue b/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
index d684798b6..df67dc137 100644
--- a/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
+++ b/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
@@ -951,7 +951,7 @@ onMounted(async () => {
                     bordered
                     :paging="true"
                     dense
-                    :rows-per-page-options="[1, 25, 50, 100]"
+                    :rows-per-page-options="[10, 25, 50, 100]"
                   >
                     <template v-slot:header="props">
                       <q-tr :props="props">