From a3536816059ab1f764ad5c3f8056a89a248cba35 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 24 Feb 2025 11:41:25 +0700
Subject: [PATCH] =?UTF-8?q?filter=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=87?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../21_report/views/02_reportRegistry.vue     | 172 +++++++++++++++---
 1 file changed, 144 insertions(+), 28 deletions(-)

diff --git a/src/modules/21_report/views/02_reportRegistry.vue b/src/modules/21_report/views/02_reportRegistry.vue
index ecaf4cca6..3d70e56a9 100644
--- a/src/modules/21_report/views/02_reportRegistry.vue
+++ b/src/modules/21_report/views/02_reportRegistry.vue
@@ -5,10 +5,12 @@ import * as XLSX from "xlsx";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useRoute } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useReportStore } from "@/modules/21_report/store";
 import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
+import { useStructureTree } from "@/stores/structureTree";
 
 import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
 import type {
@@ -24,9 +26,10 @@ import type {
 import DialogOrg from "@/modules/21_report/components/01_org/DialogOrg.vue";
 
 const $q = useQuasar();
+const route = useRoute();
 const storeReport = useReportStore();
 const stroeRegistry = useRegistryNewDataStore();
-
+const { fetchStructureTree } = useStructureTree();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader, date2Thai } = mixin;
 
@@ -486,8 +489,8 @@ async function onSearch() {
     education: education.value,
     ageMin: rangeAge.value.min,
     ageMax: rangeAge.value.max,
-    dateStart: dateStart.value ?? "",
-    dateEnd: dateEnd.value ?? "",
+    dateStart: dateStart.value ?? null,
+    dateEnd: dateEnd.value ?? null,
 
     isProbation: isProbation.value,
     isRetire: isRetire.value,
@@ -587,15 +590,44 @@ function clearFilter() {
   isProbation.value = false; //ทดลองปฏิบัติราชการ
   isRetire.value = false; //แสดงผู้พ้นจากราชการ
   retireType.value = ""; //ประเภมการพ้นราชการ
+
+  expandedModal.value = false;
+  filterTree.value = "";
 }
 
 watch(
   () => pagination.value.descending,
   () => {
-    sortBy.value = pagination.value.descending ? "DESC" : "ASC";
+    if (pagination.value.sortBy === "dateAppoint") {
+      sortBy.value = pagination.value.descending ? "DESC" : "ASC";
+    }
   }
 );
 
+const node = ref<any[]>([]);
+const filterTree = ref<string>("");
+const expanded = ref<string[]>([]);
+const expandedModal = ref<boolean>(false);
+
+async function fetchTree() {
+  const data = await fetchStructureTree(route.meta.Key as string, true);
+  if (data) {
+    node.value = data;
+  }
+}
+
+/**
+ * ฟังก์ชันเลือกหน่วยงาน/ส่วนราชการ
+ * @param data  ข้อมูลหน่วยงาน/ส่วนราชการที่ต้องการค้นหาร
+ * เพื่อค้นหาข้อมูลตามหน่วยงาน/ส่วนราชการ
+ */
+function updateSelectedTreeMain(data: any) {
+  org.value = data.orgName;
+  storeReport.formFilter.node = data.orgLevel;
+  storeReport.formFilter.nodeId = data.orgTreeId;
+  expandedModal.value = false
+}
+
 onMounted(async () => {
   showLoader();
   Promise.all([
@@ -604,6 +636,7 @@ onMounted(async () => {
     getExecutive(),
     getDataPerson(),
     getEducationLevel(),
+    fetchTree(),
   ])
 
     .catch((e) => {
@@ -750,29 +783,103 @@ onMounted(async () => {
                 <q-separator />
                 <div class="row col-12">
                   <div class="row col-12 q-col-x-gutter-xs items-center">
-                    <div class="col-12 q-px-sm">
-                      <q-input
+                    <div class="col-12">
+                      <q-expansion-item
+                        v-model="expandedModal"
                         dense
-                        :model-value="org ? org : 'ทั้งหมด'"
-                        autogrow
-                        borderless
-                        label="สังกัด"
-                        class="bg-white"
-                        @click="onOpenOrg"
+                        dense-toggle
+                        expand-separator
+                        class="expansion-item"
                       >
-                        <template v-if="org" v-slot:append>
-                          <q-icon
-                            name="cancel"
-                            @click.stop.prevent="
-                              (org = ''),
-                                (storeReport.formFilter.node = null),
-                                (storeReport.formFilter.nodeId = null)
-                            "
-                            class="cursor-pointer"
-                            style="opacity: 0.6"
-                          />
+                        <template #header>
+                          <div class="full-width flex items-stretch">
+                            <q-input
+                              dense
+                              :model-value="org ? org : 'ทั้งหมด'"
+                              autogrow
+                              borderless
+                              label="สังกัด"
+                              class="bg-white full-width "
+                            >
+                              <template v-if="org" v-slot:append>
+                                <q-icon
+                                  name="cancel"
+                                  @click.stop.prevent="
+                                    (org = ''),
+                                      (storeReport.formFilter.node = null),
+                                      (storeReport.formFilter.nodeId = null)
+                                  "
+                                  class="cursor-pointer"
+                                  style="opacity: 0.6"
+                                />
+                              </template>
+                            </q-input>
+                          </div>
+                          <!-- @click="onOpenOrg" -->
                         </template>
-                      </q-input>
+                        <q-separator />
+
+                        <q-card-section>
+                          <q-input
+                            dense
+                            outlined
+                            v-model="filterTree"
+                            label="ค้นหา"
+                          >
+                            <template v-slot:append>
+                              <q-icon
+                                v-if="filterTree !== ''"
+                                name="clear"
+                                class="cursor-pointer"
+                                @click="filterTree = ''"
+                              />
+                              <q-icon v-else name="search" color="grey-5" />
+                            </template>
+                          </q-input>
+                          <q-tree
+                            class="tree-container q-mt-sm"
+                            dense
+                            :nodes="node"
+                            node-key="orgTreeName"
+                            label-key="labelName"
+                            v-model:expanded="expanded"
+                            no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                            no-nodes-label="ไม่มีข้อมูล"
+                            :filter="filterTree.trim()"
+                          >
+                            <template v-slot:default-header="prop">
+                              <q-item
+                                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"
+                                :active="
+                                  storeReport.formFilter.nodeId ===
+                                  prop.node.orgTreeId
+                                "
+                                @click.stop="updateSelectedTreeMain(prop.node)"
+                              >
+                                <div>
+                                  <div class="text-weight-medium">
+                                    {{ prop.node.orgTreeName }}
+                                  </div>
+                                  <div class="text-weight-light text-grey-8">
+                                    {{
+                                      prop.node.orgCode == null
+                                        ? null
+                                        : prop.node.orgCode
+                                    }}
+                                    {{
+                                      prop.node.orgTreeShortName == null
+                                        ? null
+                                        : prop.node.orgTreeShortName
+                                    }}
+                                  </div>
+                                </div>
+                              </q-item>
+                            </template>
+                          </q-tree>
+                        </q-card-section>
+                      </q-expansion-item>
                     </div>
                     <div class="col-12"><q-separator /></div>
                     <div class="col-12 q-px-sm">
@@ -1307,7 +1414,7 @@ onMounted(async () => {
               </q-card>
             </div>
 
-            <div class="col-lg-10 col-md-9 col-sm-9 col-xs-12 col-xs-12 flex">
+            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 col-xs-12 flex">
               <q-card bordered class="col-12">
                 <div class="row col-12 q-pa-sm items-center">
                   <div
@@ -1427,9 +1534,7 @@ onMounted(async () => {
 
 .tree-container {
   overflow: auto;
-  height: 60vh;
-  border: 1px solid #e6e6e7;
-  border-radius: 10px;
+  height: 50vh;
 }
 .my-list-link {
   color: rgb(118, 168, 222);
@@ -1438,4 +1543,15 @@ onMounted(async () => {
   font-weight: 600;
   border: 1px solid rgba(175, 185, 196, 0.217);
 }
+
+.expansion-item {
+  .q-item__section--side {
+    padding-right: 3px;
+  }
+
+  .q-item--dense {
+    min-height: 32px;
+    padding: 2px 9px;
+  }
+}
 </style>