From 938b1f8e9874af5695c825434d5ec170f97c71bd Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 11 Jul 2025 12:14:16 +0700
Subject: [PATCH] fix reprot

---
 src/interface/main.ts                         |   2 +
 .../07_insignia/views/06_ReportMain.vue       |   2 +-
 .../21_report/components/01_org/Main.vue      |  68 ++++-----
 .../21_report/components/01_org/TreeMain.vue  |   2 +-
 .../21_report/views/04_reportEvaluate.vue     | 113 +++++++++++----
 .../21_report/views/05_reportSalary.vue       | 134 ++++++++++++++----
 6 files changed, 229 insertions(+), 92 deletions(-)

diff --git a/src/interface/main.ts b/src/interface/main.ts
index b6126d2ec..91b4f8464 100644
--- a/src/interface/main.ts
+++ b/src/interface/main.ts
@@ -55,6 +55,8 @@ interface DataStructureTree {
   orgRootCode: string;
   orgRootShortName: string;
   isDeputy?: boolean;
+  id?: string;
+  orgTreeDnaId?: string; // Added for compatibility with the new structure
 }
 
 interface DataStrategy {
diff --git a/src/modules/07_insignia/views/06_ReportMain.vue b/src/modules/07_insignia/views/06_ReportMain.vue
index cc252c64b..e0b285020 100644
--- a/src/modules/07_insignia/views/06_ReportMain.vue
+++ b/src/modules/07_insignia/views/06_ReportMain.vue
@@ -510,7 +510,7 @@ onMounted(async () => {
                           <template v-slot:default-header="prop">
                             <q-item
                               @click.stop="onSelectedNode(prop.node)"
-                              :active="nodeId === prop.node.orgTreeId"
+                              :active="nodeId === prop.node.orgTreeDnaId"
                               clickable
                               active-class="my-list-link text-primary text-weight-medium"
                               class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
diff --git a/src/modules/21_report/components/01_org/Main.vue b/src/modules/21_report/components/01_org/Main.vue
index 6c83fdc9a..40512081d 100644
--- a/src/modules/21_report/components/01_org/Main.vue
+++ b/src/modules/21_report/components/01_org/Main.vue
@@ -144,29 +144,29 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
 }
 
 /**  ดึงข้อมูลสถิติจำนวนด้านบน*/
-function getSummary() {
-  http
-    .post(config.API.orgSummary, {
-      id: reqMaster.id, //*Id node
-      type: reqMaster.type, //*ประเภทnode
-      isNode: reqMaster.isAll, //*นับทั้ง node ไหม
-    })
-    .then(async (res: any) => {
-      const data = await res.data.result;
-      store.getSumPosition({
-        totalPosition: data.totalPosition,
-        totalPositionCurrentUse: data.totalPositionCurrentUse,
-        totalPositionCurrentVacant: data.totalPositionCurrentVacant,
-        totalPositionNextUse: data.totalPositionNextUse,
-        totalPositionNextVacant: data.totalPositionNextVacant,
-        totalRootPosition: data.totalPosition,
-        totalRootPositionCurrentUse: data.totalPositionCurrentUse,
-        totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
-        totalRootPositionNextUse: data.totalPositionNextUse,
-        totalRootPositionNextVacant: data.totalPositionNextVacant,
-      });
-    });
-}
+// function getSummary() {
+//   http
+//     .post(config.API.orgSummary, {
+//       id: reqMaster.id, //*Id node
+//       type: reqMaster.type, //*ประเภทnode
+//       isNode: reqMaster.isAll, //*นับทั้ง node ไหม
+//     })
+//     .then(async (res: any) => {
+//       const data = await res.data.result;
+//       store.getSumPosition({
+//         totalPosition: data.totalPosition,
+//         totalPositionCurrentUse: data.totalPositionCurrentUse,
+//         totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+//         totalPositionNextUse: data.totalPositionNextUse,
+//         totalPositionNextVacant: data.totalPositionNextVacant,
+//         totalRootPosition: data.totalPosition,
+//         totalRootPositionCurrentUse: data.totalPositionCurrentUse,
+//         totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
+//         totalRootPositionNextUse: data.totalPositionNextUse,
+//         totalRootPositionNextVacant: data.totalPositionNextVacant,
+//       });
+//     });
+// }
 
 /** funcion ค้นหาข้อมูลใน Table*/
 async function filterKeyword() {
@@ -222,17 +222,17 @@ watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
 });
 
 /** callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด*/
-watch(
-  () => reqMaster.isAll,
-  () => {
-    getSummary();
-    if (reqMaster.page !== 1) {
-      reqMaster.page = 1;
-    } else {
-      fetchDataTable(reqMaster.id, reqMaster.type, false);
-    }
-  }
-);
+// watch(
+//   () => reqMaster.isAll,
+//   () => {
+//     getSummary();
+//     if (reqMaster.page !== 1) {
+//       reqMaster.page = 1;
+//     } else {
+//       fetchDataTable(reqMaster.id, reqMaster.type, false);
+//     }
+//   }
+// );
 
 watch(
   () => store.draftId,
diff --git a/src/modules/21_report/components/01_org/TreeMain.vue b/src/modules/21_report/components/01_org/TreeMain.vue
index 1fd822ea7..96279f6a9 100644
--- a/src/modules/21_report/components/01_org/TreeMain.vue
+++ b/src/modules/21_report/components/01_org/TreeMain.vue
@@ -71,7 +71,7 @@ function updateSelected(data: DataTree) {
       .post(config.API.orgSummary, {
         id: data.orgTreeId, //*Id node
         type: data.orgLevel, //*ประเภทnode
-        isNode: false, //*นับทั้ง node ไหม
+        isNode: true, //*นับทั้ง node ไหม
       })
       .then(async (res: any) => {
         const data = await res.data.result;
diff --git a/src/modules/21_report/views/04_reportEvaluate.vue b/src/modules/21_report/views/04_reportEvaluate.vue
index c0413e795..a2e2b674d 100644
--- a/src/modules/21_report/views/04_reportEvaluate.vue
+++ b/src/modules/21_report/views/04_reportEvaluate.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import axios from "axios";
@@ -21,14 +21,23 @@ const { fetchStructureTree } = useStructureTree();
 const { messageError } = useCounterMixin();
 
 const loadingBtn = ref<boolean>(false);
-const expandedModal = ref<boolean>(false);
+// const expandedModal = ref<boolean>(false);
 const org = ref<string>("");
 
 const isLoadStructureTree = ref<boolean>(true);
-const filterTree = ref<string>("");
+// const filterTree = ref<string>("");
 const nodeId = ref<string>("");
-const nodeName = ref<string>("");
-const node = ref<DataStructureTree[]>([]);
+// const nodeName = ref<string>("");
+// const node = ref<DataStructureTree[]>([]);
+const organizationOpsMain = ref<DataStructureTree[]>([]);
+const organizationOps = ref<DataStructureTree[]>([]);
+const organizationName = computed(() => {
+  return (
+    organizationOpsMain.value.find(
+      (e: DataStructureTree) => e.orgTreeDnaId === nodeId.value
+    )?.orgRootName || ""
+  );
+});
 
 const year = ref<number>(new Date().getFullYear());
 
@@ -49,7 +58,9 @@ async function fetchDataTree() {
         ...item,
         children: null,
       }));
-      node.value = data;
+      organizationOps.value = data;
+      organizationOpsMain.value = data;
+      // node.value = data;
     }
   } catch (err) {
     messageError($q, err);
@@ -110,24 +121,24 @@ async function fetchDocumentTemplate(data: any) {
 function onDownloadFile(type: string) {
   genReportXLSX(
     detailReport.value,
-    `รายงานสรุปจำนวนผลงานการประเมิน_${nodeName.value}`,
+    `รายงานสรุปจำนวนผลงานการประเมิน_${organizationName.value}`,
     type
   );
 }
 
-/**
- * function เลือกหน่วยงาน
- * @param id id หน่วยงาน
- * @param level ระดับหน่วยงาน
- */
-function onSelectedNode(data: any) {
-  if (data.orgTreeId !== nodeId.value) {
-    nodeId.value = data.orgTreeDnaId;
-    nodeName.value = data.orgTreeName;
-    org.value = data.orgName;
-    expandedModal.value = false;
-  }
-}
+// /**
+//  * function เลือกหน่วยงาน
+//  * @param id id หน่วยงาน
+//  * @param level ระดับหน่วยงาน
+//  */
+// function onSelectedNode(data: any) {
+//   if (data.orgTreeId !== nodeId.value) {
+//     nodeId.value = data.orgTreeDnaId;
+//     nodeName.value = data.orgTreeName;
+//     org.value = data.orgName;
+//     expandedModal.value = false;
+//   }
+// }
 
 /** กลับหน้าก่อนหน้าของรายงาน */
 function backPage() {
@@ -147,9 +158,30 @@ function clearFilter() {
   pdfSrc.value = undefined;
   detailReport.value = undefined;
   year.value = new Date().getFullYear();
-  org.value = "";
+  // org.value = "";
   nodeId.value = "";
-  nodeName.value = "";
+  // nodeName.value = "";
+}
+
+/**
+ * function ค้นหาคำใน 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: DataStructureTree) => v.labelName.toLowerCase().indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
 }
 
 onMounted(() => {
@@ -229,8 +261,36 @@ onMounted(() => {
                   />
                 </q-card-section>
                 <q-card-section class="q-pa-none">
-                  <div class="col-12">
-                    <q-expansion-item
+                  <div class="col-12 q-pb-xs q-px-sm">
+                    <q-select
+                      menu-anchor="top left"
+                      menu-self="bottom left"
+                      class="bg-white"
+                      dense
+                      borderless
+                      hide-selected
+                      fill-input
+                      hide-bottom-space
+                      option-label="orgRootName"
+                      option-value="orgTreeDnaId"
+                      emit-value
+                      map-options
+                      v-model="nodeId"
+                      :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>
+                    <!-- <q-expansion-item
                       v-model="expandedModal"
                       dense
                       dense-toggle
@@ -249,7 +309,6 @@ onMounted(() => {
                           >
                           </q-input>
                         </div>
-                        <!-- @click="onOpenOrg" -->
                       </template>
                       <q-separator />
 
@@ -287,7 +346,7 @@ onMounted(() => {
                           <template v-slot:default-header="prop">
                             <q-item
                               @click.stop="onSelectedNode(prop.node)"
-                              :active="nodeId === prop.node.orgTreeId"
+                              :active="nodeId === prop.node.orgTreeDnaId"
                               clickable
                               active-class="my-list-link text-primary text-weight-medium"
                               class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
@@ -313,7 +372,7 @@ onMounted(() => {
                           </template>
                         </q-tree>
                       </q-card-section>
-                    </q-expansion-item>
+                    </q-expansion-item> -->
                   </div>
                   <q-separator />
                   <div class="col-12 q-px-sm">
diff --git a/src/modules/21_report/views/05_reportSalary.vue b/src/modules/21_report/views/05_reportSalary.vue
index 4d8387726..af32b2dcd 100644
--- a/src/modules/21_report/views/05_reportSalary.vue
+++ b/src/modules/21_report/views/05_reportSalary.vue
@@ -25,8 +25,8 @@ const { messageError, showLoader, hideLoader } = useCounterMixin();
 
 const checkId = ref<string>("");
 const isLoadStructureTree = ref<boolean>(true);
-const expandedModal = ref<boolean>(false);
-const org = ref<string>("");
+// const expandedModal = ref<boolean>(false);
+// const org = ref<string>("");
 const year = ref<number>(new Date().getFullYear());
 const isLoadFilePdf = ref<boolean>(false);
 const employeeClass = ref<string>("officer");
@@ -81,14 +81,24 @@ const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const pdfSrc = ref<any>();
 
-const filterTree = ref<string>("");
+// const filterTree = ref<string>("");
 const nodeId = ref<string>("");
-const nodeName = ref<string>("");
-const node = ref<DataStructureTree[]>([]);
+// const nodeName = ref<string>("");
+// const node = ref<DataStructureTree[]>([]);
 
 const detailReport = ref<any>();
 const splitterModel = ref(14);
 
+const organizationOpsMain = ref<DataStructureTree[]>([]);
+const organizationOps = ref<DataStructureTree[]>([]);
+const organizationName = computed(() => {
+  return (
+    organizationOpsMain.value.find(
+      (e: DataStructureTree) => e.id === nodeId.value
+    )?.orgRootName || ""
+  );
+});
+
 /** ฟังก์ชันเรียกข้อมูลรอบการขึ้นเงินเดือน*/
 async function fetchDataRound() {
   isRound.value = false;
@@ -142,7 +152,9 @@ async function fetchDataOrg(revisionId: string) {
       children: null,
       labelName: `${item.orgRootName} ${item.orgRootCode} ${item.orgRootShortName}`,
     }));
-    node.value = data;
+    // node.value = data;
+    organizationOps.value = data;
+    organizationOpsMain.value = data;
   } catch (err) {
     messageError($q, err);
   } finally {
@@ -150,19 +162,19 @@ async function fetchDataOrg(revisionId: string) {
   }
 }
 
-/**
- * function เลือกหน่วยงาน
- * @param id id หน่วยงาน
- * @param level ระดับหน่วยงาน
- */
-function onSelectedNode(data: any) {
-  if (data.id !== nodeId.value) {
-    nodeId.value = data.id;
-    nodeName.value = data.orgRootName;
-    org.value = data.orgRootName;
-    expandedModal.value = false;
-  }
-}
+// /**
+//  * function เลือกหน่วยงาน
+//  * @param id id หน่วยงาน
+//  * @param level ระดับหน่วยงาน
+//  */
+// function onSelectedNode(data: any) {
+//   if (data.id !== nodeId.value) {
+//     nodeId.value = data.id;
+//     nodeName.value = data.orgRootName;
+//     org.value = data.orgRootName;
+//   }
+//   expandedModal.value = false;
+// }
 
 function onChangeYear() {
   fetchDataRound();
@@ -253,7 +265,7 @@ async function fetchDataReportUnified(
     try {
       const res = await http.get(finalUrl);
       const dataList = res.data.result;
-      await fetchDocumentTemplate(dataList);
+      dataList && (await fetchDocumentTemplate(dataList));
     } catch (e) {
       messageError($q, e);
     } finally {
@@ -296,7 +308,7 @@ function onDownloadFile(type: string) {
   const name = reportOption.value.find(
     (e) => e.keyId === report.value?.keyId
   )?.name;
-  genReportXLSX(detailReport.value, `${name}_${nodeName.value}`, type);
+  genReportXLSX(detailReport.value, `${name}_${organizationName.value}`, type);
 }
 
 /** กลับหน้าก่อนหน้าของรายงาน */
@@ -322,9 +334,30 @@ function clearFilter() {
 
   detailReport.value = undefined;
   pdfSrc.value = undefined;
-  org.value = "";
+  // org.value = "";
   nodeId.value = "";
-  nodeName.value = "";
+  // nodeName.value = "";
+}
+
+/**
+ * function ค้นหาคำใน 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: DataStructureTree) => v.labelName.toLowerCase().indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
 }
 
 onMounted(() => {
@@ -493,7 +526,14 @@ onMounted(() => {
                       lazy-rules
                       hide-bottom-space
                       bg-color="white"
-                    />
+                      :hint="
+                        group === 'GROUP1'
+                          ? 'ทั่วไป: ปฏิบัติงาน, ชำนาญงาน, อาวุโส\nวิชาการ: ปฏิบัติการ, ชำนาญการ, ชำนาญการพิเศษ\nอำนวยการ: ต้น'
+                          : 'ทั่วไป: ทักษะพิเศษ\nวิชาการ: เชี่ยวชาญ, ทรงคุณวุฒิ\nอำนวยการ: สูง\nบริหาร: ต้น, สูง'
+                      "
+                      class="multiline-hint"
+                    >
+                    </q-select>
                   </div>
                   <q-separator v-if="employeeClass === 'officer'" />
                   <div class="col-12 q-px-sm">
@@ -509,8 +549,36 @@ onMounted(() => {
                     />
                   </div>
                   <q-separator />
-                  <div class="col-12">
-                    <q-expansion-item
+                  <div class="col-12 q-pb-xs q-px-sm">
+                    <q-select
+                      menu-anchor="top left"
+                      menu-self="bottom left"
+                      class="bg-white"
+                      dense
+                      borderless
+                      hide-selected
+                      fill-input
+                      hide-bottom-space
+                      option-label="orgRootName"
+                      option-value="id"
+                      emit-value
+                      map-options
+                      v-model="nodeId"
+                      :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>
+                    <!-- <q-expansion-item
                       v-model="expandedModal"
                       dense
                       dense-toggle
@@ -529,7 +597,6 @@ onMounted(() => {
                           >
                           </q-input>
                         </div>
-                        <!-- @click="onOpenOrg" -->
                       </template>
                       <q-separator />
 
@@ -575,7 +642,7 @@ onMounted(() => {
                           <template v-slot:default-header="prop">
                             <q-item
                               @click.stop="onSelectedNode(prop.node)"
-                              :active="nodeId === prop.node.orgTreeId"
+                              :active="nodeId === prop.node.id"
                               clickable
                               active-class="my-list-link text-primary text-weight-medium"
                               class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
@@ -601,7 +668,7 @@ onMounted(() => {
                           </template>
                         </q-tree>
                       </q-card-section>
-                    </q-expansion-item>
+                    </q-expansion-item> -->
                   </div>
                 </q-card-section>
                 <q-separator />
@@ -780,4 +847,13 @@ 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>