Merge branch 'develop' into devTee

src/modules/02_organization/components/StructureOrgMain.vue

@@ -18,6 +18,8 @@ import {
   exportChartToPNG,
 } from "@/plugins/exportChart";
 
+import type { DataOption } from "@/modules/02_organization/interface/index/Main";
+
 const mixin = useCounterMixin();
 const store = useOrganizational();
 const storeOrg = useStructStore();
@@ -31,11 +33,15 @@ const dataSourceLock = ref(); // ข้อมูลตั้งต้นขอ
 const chartRef = ref(); // อ้างอิงไปที่ตัว chart
 const scrollContainer = ref<HTMLElement | null>(null);
 
+const agencyId = ref<string>(""); // id ของหน่วยงานที่เลือก
+const agencyData = ref<DataOption[]>([]); // ข้อมูลรายการหน่วยงาน
+const agencyOp = ref<DataOption[]>([]); // ตัวเลือกหน่วยงาน
+
 /** fetch ข้อมูล Chart โครงสร้าง*/
-async function fetchOrgChart() {
+async function fetchOrgChart(agencyId: string = "root") {
   if (rootOrgID.value) {
     showLoader();
-    let urlRequest = config.API.orgChart(rootOrgID.value);
+    let urlRequest = config.API.orgChart(rootOrgID.value) + `/${agencyId}`;
     await http
       .get(urlRequest)
       .then(async (response) => {
@@ -135,6 +141,51 @@ async function savePDF() {
   }, 500);
 }
 
+/** ฟังก์ชันเลื่อน scroll ไปที่กึ่งกลาง*/
+async function scrollToCenter() {
+  const container = scrollContainer.value;
+  if (container) {
+    container.scrollLeft = (container.scrollWidth - container.clientWidth) / 2;
+  }
+}
+
+async function fetchAgencyData(id: string) {
+  if (!id) return; // ถ้าไม่มี id ให้ return ออกไป
+
+  agencyId.value = "";
+  try {
+    const data = await storeOrg.fetchDataTree(id);
+    console.log(data);
+
+    agencyData.value = data.data.map((item: any) => ({
+      id: item.orgTreeId,
+      name: item.orgName,
+    }));
+    agencyOp.value = agencyData.value;
+  } catch (err) {
+    messageError($q, err);
+  }
+}
+
+function onSelectAgency(val: string) {
+  const id = val || "root"; // ถ้าไม่มีการเลือกหน่วยงาน ให้ใช้ root
+  fetchOrgChart(id);
+}
+
+/**
+ * ฟังก์ชันต้นหาข้อมูลของ Option ขอสถานะ
+ * @param val ค่าที่ต้องการฟิลเตอร์
+ * @param update  อัพเดทค่า
+ * @param refData ดาต้าที่ต้องการฟิลเตอร์
+ */
+function filterOption(val: string, update: Function) {
+  update(() => {
+    agencyOp.value = agencyData.value.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
 watch(
   [() => store.typeOrganizational, () => store.historyId],
   ([new1], [old1]) => {
@@ -149,18 +200,13 @@ watch(
         ? store.draftId
         : store.historyId;
 
-    fetchOrgChart();
+    if (rootOrgID.value) {
+      fetchAgencyData(rootOrgID.value);
+      fetchOrgChart();
+    }
   }
 );
 
-/** ฟังก์ชันเลื่อน scroll ไปที่กึ่งกลาง*/
-async function scrollToCenter() {
-  const container = scrollContainer.value;
-  if (container) {
-    container.scrollLeft = (container.scrollWidth - container.clientWidth) / 2;
-  }
-}
-
 onMounted(async () => {
   rootOrgID.value =
     store.typeOrganizational === "current"
@@ -171,6 +217,7 @@ onMounted(async () => {
 
   await fetchOrgChart();
   await scrollToCenter();
+  await fetchAgencyData(rootOrgID.value);
 });
 
 onBeforeMount(() => {
@@ -182,7 +229,7 @@ onBeforeMount(() => {
   <!-- <div class="toptitle text-dark col-12 row items-center">แผนภูมิองค์กร</div> -->
   <div class="text-dark">
     <q-card class="col-12 q-mt-sm">
-      <div class="q-pa-sm">
+      <div class="q-pa-sm row">
         <q-btn flat round color="primary" @click="savePNG()" icon="mdi-image">
           <q-tooltip> ดาวน์โหลด PNG </q-tooltip>
         </q-btn>
@@ -195,6 +242,33 @@ onBeforeMount(() => {
         >
           <q-tooltip> ดาวน์โหลด PDF </q-tooltip>
         </q-btn>
+
+        <q-space />
+        <q-select
+          v-model="agencyId"
+          :label="`${'หน่วยงาน'}`"
+          option-label="name"
+          :options="agencyOp"
+          option-value="id"
+          dense
+          emit-value
+          map-options
+          use-input
+          hide-selected
+          fill-input
+          outlined
+          clearable
+          @clear="() => (agencyId = '')"
+          @update:model-value="onSelectAgency"
+          @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+          style="width: 400px"
+        >
+          <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

src/modules/02_organization/store/chart.ts

@@ -1,9 +1,40 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 export const useStructStore = defineStore("StructStore", () => {
   const dataSource = ref();
+  const cachedData = ref<Record<string, any>>({});
+
+  /**
+   * ฟังก์ชันดึงข้อมูลโครงสร้าง
+   * @param keyId id โครงสร้าง
+   */
+  async function fetchDataTree(keyId: string) {
+    // ตรวจสอบว่ามีข้อมูลใน cache แล้วหรือไม่
+    if (cachedData.value[keyId]) {
+      return cachedData.value[keyId];
+    }
+
+    // ถ้าไม่มีข้อมูลใน cache หรือ forceRefresh เป็น true ให้ดึงข้อมูลจาก API
+    try {
+      const res = await http.get(config.API.orgByid(keyId));
+      const result = res.data.result;
+
+      // เก็บข้อมูลใน cache
+      cachedData.value[keyId] = result;
+
+      return result;
+    } catch (error) {
+      console.error("Error fetching data tree:", error);
+      return [];
+    }
+  }
+
   return {
     dataSource,
+    fetchDataTree,
   };
 });

src/modules/17_acting/views/main.vue

@@ -395,7 +395,7 @@ onMounted(async () => {
                         `${col.posNo} ${
                           col.fullNameCurrentHolder
                             ? " (" + col.fullNameCurrentHolder + ")"
-                            : ""
+                            : "ว่าง"
                         }`
                       }}
                     </q-item-section>