From 9be415bfad53deaaaaf2a759ceb62c5db16663cf Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 26 Apr 2024 12:13:35 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../indicatorByPlan/IndicatorByPlan.vue       | 82 +++++++++----------
 src/modules/14_KPI/views/indicatorByPlan.vue  | 21 +++--
 src/modules/14_KPI/views/indicatorByRole.vue  | 56 ++++++++-----
 .../15_development/components/BasicInfo.vue   | 39 +++++----
 .../components/ProjectDetail.vue              | 25 +++++-
 5 files changed, 138 insertions(+), 85 deletions(-)

diff --git a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
index 590dbfdd6..261800d3e 100644
--- a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
+++ b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
@@ -126,22 +126,6 @@ function fetchTreeAgency(id: string) {
       const data = res.data.result;
       nodeAgency.value = data;
       store.treeId = "";
-
-      if (nodeAgency.value && planData.nodeId) {
-        const nodeTree = await searchAndReplace(
-          nodeAgency.value,
-          planData.nodeId
-        );
-        if (nodeTree) {
-          expandedAgency.value = [];
-          const parts = nodeTree?.orgName.split("/");
-          for (let i = 1; i < parts.length; i++) {
-            const arrangedParts = parts[i];
-            expandedAgency.value.push(arrangedParts);
-          }
-          updateSelectedAgency(nodeTree, true);
-        }
-      }
     })
     .catch((err) => {
       messageError($q, err);
@@ -175,6 +159,30 @@ function fetchDataById(id: string) {
       planData.strategy = data.strategy;
       planData.strategyId = data.strategyId;
 
+      // หน่วยงาน/ส่วนราชการ
+      const arrayexpandedAgency = [
+        data.root,
+        data.child1,
+        data.child2,
+        data.child3,
+        data.child4,
+      ];
+      expandedAgency.value = arrayexpandedAgency
+        .filter((e) => e !== null)
+        .slice(0, -1);
+
+      // ยุทธศาสตร์ / แผน
+      const arrayexpandedPlan = [
+        data.strategyChild1,
+        data.strategyChild2,
+        data.strategyChild3,
+        data.strategyChild4,
+        data.strategyChild5,
+      ];
+      expandedPlan.value = arrayexpandedPlan
+        .filter((e) => e !== null)
+        .slice(0, -1);
+
       fetchRoundOption();
     })
     .catch((err) => {
@@ -237,26 +245,6 @@ function onSubmit() {
   );
 }
 
-/**
- * function หาหน่วยงานที่รับผิดชอบ
- * @param orgTreeData ข้อมูล  nodeTree
- * @param treeId tree ID
- */
-async function searchAndReplace(orgTreeData: any, treeId: string | null) {
-  if (orgTreeData) {
-    for (let orgTree of orgTreeData) {
-      if (orgTree.orgTreeId === treeId) {
-        return orgTree;
-      }
-      let foundOrg: any = await searchAndReplace(orgTree.children, treeId);
-      if (foundOrg) {
-        return foundOrg;
-      }
-    }
-    return false;
-  }
-}
-
 onMounted(() => {
   fetchOrganizationActive();
   if (id.value) {
@@ -525,7 +513,13 @@ onMounted(() => {
             <q-separator />
 
             <q-card-section class="q-pa-sm">
-              <q-input dense outlined v-model="filterAgency" label="ค้นหา">
+              <q-input
+                dense
+                outlined
+                v-model="filterAgency"
+                label="ค้นหา"
+                class="inputgreen"
+              >
                 <template v-slot:append>
                   <q-icon
                     v-if="filterAgency !== ''"
@@ -540,8 +534,8 @@ onMounted(() => {
                 style="height: 350px; overflow: scroll"
                 dense
                 :nodes="nodeAgency"
-                node-key="orgTreeName"
-                label-key="labelName"
+                node-key="orgTreeId"
+                label-key="orgTreeName"
                 selected-color="primary"
                 :filter="filterAgency"
                 no-results-label="ไม่พบข้อมูลที่ค้นหา"
@@ -588,7 +582,13 @@ onMounted(() => {
             <q-separator />
 
             <q-card-section class="q-pa-sm">
-              <q-input dense outlined v-model="filter" label="ค้นหา">
+              <q-input
+                dense
+                outlined
+                v-model="filter"
+                label="ค้นหา"
+                class="inputgreen"
+              >
                 <template v-slot:append>
                   <q-icon
                     v-if="filter !== ''"
@@ -605,7 +605,7 @@ onMounted(() => {
                 :nodes="nodeplan"
                 selected-color="primary"
                 node-key="id"
-                label-key="id"
+                label-key="name"
                 :filter="filter"
                 no-results-label="ไม่พบข้อมูลที่ค้นหา"
                 no-nodes-label="ไม่มีข้อมูล"
diff --git a/src/modules/14_KPI/views/indicatorByPlan.vue b/src/modules/14_KPI/views/indicatorByPlan.vue
index ca534e8a6..679f17507 100644
--- a/src/modules/14_KPI/views/indicatorByPlan.vue
+++ b/src/modules/14_KPI/views/indicatorByPlan.vue
@@ -3,10 +3,13 @@ import { ref, reactive, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
+
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
@@ -40,10 +43,7 @@ const expanded = ref<any>([]);
 const filterMain = ref<string>("");
 const visibleColumns = ref<string[]>(["including", "includingName"]);
 
-const roundOp = ref<any[]>([
-  { id: "APR", name: "รอบเมษายน" },
-  { id: "OCT", name: "รอบตุลาคม" },
-]);
+const roundOp = ref<DataOption[]>([]);
 
 const totalList = ref<number>(1);
 
@@ -192,7 +192,14 @@ onMounted(() => {
         <div class="col-12 q-py-sm q-px-sm">
           <div class="q-gutter-sm">
             <div class="text-subtitle2 text-bold">หน่วยงาน/ส่วนราชการ</div>
-            <q-input dense outlined v-model="filterMain" label="ค้นหา">
+
+            <q-input
+              class="inputgreen"
+              dense
+              outlined
+              v-model="filterMain"
+              label="ค้นหา"
+            >
               <template v-slot:append>
                 <q-icon
                   v-if="filterMain !== ''"
@@ -266,6 +273,7 @@ onMounted(() => {
               }}</template>
               <template #trigger>
                 <q-input
+                  class="inputgreen"
                   dense
                   lazy-rules
                   outlined
@@ -284,6 +292,7 @@ onMounted(() => {
               </template>
             </datepicker>
             <q-select
+              class="inputgreen"
               dense
               outlined
               v-model="nodeData.round"
@@ -312,6 +321,7 @@ onMounted(() => {
           <q-space />
           <div class="row q-gutter-sm">
             <q-input
+              class="inputgreen"
               standout
               dense
               v-model="nodeData.keyword"
@@ -330,6 +340,7 @@ onMounted(() => {
               </template>
             </q-input>
             <q-select
+              class="inputgreen"
               v-model="visibleColumns"
               multiple
               outlined
diff --git a/src/modules/14_KPI/views/indicatorByRole.vue b/src/modules/14_KPI/views/indicatorByRole.vue
index ee7f5c8ff..7c8525582 100644
--- a/src/modules/14_KPI/views/indicatorByRole.vue
+++ b/src/modules/14_KPI/views/indicatorByRole.vue
@@ -11,10 +11,11 @@ import type { NewPagination } from "@/modules/14_KPI/interface/request/Main";
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 
 /** use*/
-const total = ref<number>()
+const total = ref<number>();
 const $q = useQuasar();
 const router = useRouter();
-const { showLoader, hideLoader, dialogRemove, success } = useCounterMixin();
+const { showLoader, hideLoader, dialogRemove, success, messageError } =
+  useCounterMixin();
 
 const positionOp = ref<DataOption[]>([]);
 const positionMainOp = ref<DataOption[]>([]);
@@ -79,10 +80,13 @@ function fetchList() {
     )
     .then((res) => {
       const data = res.data.result.data;
-      total.value = res.data.result.total
+      total.value = res.data.result.total;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       rows.value = data;
     })
+    .catch((err) => {
+      messageError($q, err);
+    })
     .finally(() => {
       hideLoader();
     });
@@ -140,24 +144,32 @@ function filterOption(val: any, update: Function) {
 /** ดึงข้อมูลตำแหน่ง */
 function getOptions() {
   showLoader();
-  http.get(config.API.orgSalaryPosition).then((res) => {
-    const dataOp = res.data.result;
-    const uniqueNames = new Set();
-    const filteredData = dataOp
-      .filter((item: any) => {
-        if (!uniqueNames.has(item.positionName)) {
-          uniqueNames.add(item.positionName);
-          return true;
-        }
-        return false;
-      })
-      .map((item: any) => ({
-        id: item.positionName,
-        name: item.positionName,
-      }));
+  http
+    .get(config.API.orgSalaryPosition)
+    .then((res) => {
+      const dataOp = res.data.result;
+      const uniqueNames = new Set();
+      const filteredData = dataOp
+        .filter((item: any) => {
+          if (!uniqueNames.has(item.positionName)) {
+            uniqueNames.add(item.positionName);
+            return true;
+          }
+          return false;
+        })
+        .map((item: any) => ({
+          id: item.positionName,
+          name: item.positionName,
+        }));
 
-    positionMainOp.value = filteredData;
-  });
+      positionMainOp.value = filteredData;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function getRound() {
@@ -174,6 +186,9 @@ function getRound() {
         name: statusTothai(item.durationKPI),
       }));
     })
+    .catch((err) => {
+      messageError($q, err);
+    })
     .finally(() => {
       hideLoader();
     });
@@ -314,6 +329,7 @@ onMounted(async () => {
           dense
           outlined
           v-model="formFilter.round"
+          class="inputgreen"
           :options="roundOp"
           label="รอบการประเมิน"
           option-label="name"
diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index 37fc6727b..dc44c614f 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -51,18 +51,27 @@ function fetchData(id: string) {
       formData.objective = data.objective;
       formData.nodeId = data.nodeId;
 
-      if (node.value && formData?.nodeId) {
-        const nodeTree = await searchAndReplace(node.value, formData?.nodeId);
-        if (nodeTree) {
-          expanded.value = [];
-          const parts = nodeTree?.orgName.split("/");
-          for (let i = 1; i < parts.length; i++) {
-            const arrangedParts = parts[i];
-            expanded.value.push(arrangedParts);
-          }
-          updateSelected(nodeTree);
-        }
-      }
+      const arrayExpanded = [
+        data.root,
+        data.child1,
+        data.child2,
+        data.child3,
+        data.child4,
+      ];
+      expanded.value = arrayExpanded.filter((e) => e !== null).slice(0, -1);
+
+      // if (node.value && formData?.nodeId) {
+      //   const nodeTree = await searchAndReplace(node.value, formData?.nodeId);
+      //   if (nodeTree) {
+      //     expanded.value = [];
+      //     const parts = nodeTree?.orgName.split("/");
+      //     for (let i = 1; i < parts.length; i++) {
+      //       const arrangedParts = parts[i];
+      //       expanded.value.push(arrangedParts);
+      //     }
+      //     updateSelected(nodeTree);
+      //   }
+      // }
     })
     .catch((err) => {
       messageError($q, err);
@@ -182,7 +191,7 @@ onMounted(async () => {
               class="tree-container"
               dense
               :nodes="node"
-              node-key="orgTreeName"
+              node-key="orgTreeId"
               label-key="labelName"
               v-model:expanded="expanded"
               :filter="filter"
@@ -259,7 +268,7 @@ onMounted(async () => {
                 </datepicker>
               </div>
               <div class="col-xs-10 col-sm-10 col-md-10">
-                <q-input
+                <!-- <q-input
                   dense
                   outlined
                   class="inputgreen"
@@ -269,7 +278,7 @@ onMounted(async () => {
                   hide-bottom-space
                   lazy-rules
                   readonly
-                />
+                /> -->
               </div>
               <div class="col-xs-12 col-sm-12 col-md-12">
                 <q-input
diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index d48d2a22b..f6c9b08da 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -192,6 +192,7 @@ onMounted(() => {
           emit-value
           map-options
           multiple
+          class="inputgreen"
         />
       </div>
     </div>
@@ -216,7 +217,13 @@ onMounted(() => {
               <q-separator />
 
               <q-card-section class="q-pa-sm">
-                <q-input dense outlined v-model="filter" label="ค้นหา">
+                <q-input
+                  dense
+                  outlined
+                  v-model="filter"
+                  label="ค้นหา"
+                  class="inputgreen"
+                >
                   <template v-slot:append>
                     <q-icon
                       v-if="filter !== ''"
@@ -232,7 +239,7 @@ onMounted(() => {
                   :nodes="nodes"
                   selected-color="primary"
                   node-key="id"
-                  label-key="id"
+                  label-key="name"
                   :filter="filter"
                   :no-results-label="notFound"
                   :no-nodes-label="noData"
@@ -267,7 +274,13 @@ onMounted(() => {
               <q-separator />
 
               <q-card-section class="q-pa-sm">
-                <q-input dense outlined v-model="filter2" label="ค้นหา">
+                <q-input
+                  dense
+                  outlined
+                  v-model="filter2"
+                  label="ค้นหา"
+                  class="inputgreen"
+                >
                   <template v-slot:append>
                     <q-icon
                       v-if="filter2 !== ''"
@@ -282,7 +295,7 @@ onMounted(() => {
                   dense
                   :nodes="nodes"
                   node-key="id"
-                  label-key="id"
+                  label-key="name"
                   :filter="filter2"
                   :no-results-label="notFound"
                   :no-nodes-label="noData"
@@ -345,6 +358,7 @@ onMounted(() => {
                   label="จำนวน (วัน)"
                   mask="#"
                   reverse-fill-mask
+                  class="inputgreen"
                 />
               </div>
             </div>
@@ -369,6 +383,7 @@ onMounted(() => {
                   label="จำนวน (วัน)"
                   mask="#"
                   reverse-fill-mask
+                  class="inputgreen"
                 />
               </div>
               <div class="col-12 col-md-4">
@@ -379,6 +394,7 @@ onMounted(() => {
                   v-model="formData.projectNigthHoldPlanned"
                   label="จำนวน (คืน)"
                   mask="#"
+                  class="inputgreen"
                   reverse-fill-mask
                 />
               </div>
@@ -406,6 +422,7 @@ onMounted(() => {
                 label="จำนวน (รุ่น)"
                 mask="#"
                 reverse-fill-mask
+                class="inputgreen"
               />
             </div>
           </div>