fix โครงสร้างอัตรากำลัง ==> Org Chart

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,50 @@ 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) {
+  agencyId.value = "";
+  await http
+    .get(config.API.orgByid(id))
+    .then((res) => {
+      const data = res.data.result.data;
+      agencyData.value = 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]) => {
@@ -150,17 +200,10 @@ watch(
         : store.historyId;
 
     fetchOrgChart();
+    fetchAgencyData(rootOrgID.value);
   }
 );
 
-/** ฟังก์ชันเลื่อน 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 +214,7 @@ onMounted(async () => {
 
   await fetchOrgChart();
   await scrollToCenter();
+  await fetchAgencyData(rootOrgID.value);
 });
 
 onBeforeMount(() => {
@@ -182,7 +226,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 +239,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