โครงสร้างตัวชี้วัด

src/modules/01_masterdata/components/Indicators/indicatorByPlan/IndicatorByPlan.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, onBeforeMount } from "vue";
 import { QForm, useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useStructureTree } from "@/stores/structureTree";
+
+const { fetchStructureTree, fetchTreeStrategy } = useStructureTree();
 
 /** importType*/
 import type {
@@ -76,65 +79,22 @@ const editStatus = ref<boolean>(false);
 const inputRef = ref<object | null>(null);
 
 /** function fetch หาโครงสร้างที่ใช้งาน*/
-function fetchOrganizationActive() {
-  http
-    .get(config.API.activeOrganization)
-    .then((res) => {
-      const data = res.data.result;
-      if (data) {
-        store.fetchDataActive(data);
-
-        store.activeId && fetchTreeAgency(store.activeId);
-        fetchTreeStrategy();
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+async function fetchOrganizationTree() {
+  nodeAgency.value = await fetchStructureTree(route.meta.Key as string, true);
 }
 
-/** function fetchTree ยุทธศาสตร์ / แผน*/
-function fetchTreeStrategy() {
-  showLoader();
-  http
-    .get(config.API.devStrategy + `/edit/indicator`)
-    .then((res) => {
-      const data = res.data.result;
-      nodeplan.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** ฟังชั่น fetchcTree หน่วยงาน/ส่วนราชการ*/
-function fetchTreeAgency(id: string) {
-  showLoader();
-  http
-    .get(config.API.orgByIdSystem(id, route.meta.Key as string))
-    .then(async (res) => {
-      const data = res.data.result;
-      nodeAgency.value = data;
-      store.treeId = "";
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+/** function fetch หาโครงสร้างที่ใช้งาน*/
+async function fetchOrganizationStrategy() {
+  nodeplan.value = await fetchTreeStrategy();
 }
 
 /** function fetch ข้อมูลตัวชี้วัด*/
-function fetchDataById(id: string) {
+async function fetchDataById(id: string) {
   showLoader();
-  http
+  await http
     .get(config.API.kpiPlanByIdEdit(id))
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       year.value = Number(data.year);
       planData.period = data.round;
       planData.including = data.including;
@@ -184,9 +144,7 @@ function fetchDataById(id: string) {
       messageError($q, err);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1000);
+      hideLoader();
     });
 }
 
@@ -267,11 +225,15 @@ function onSubmit() {
   }
 }
 
-onMounted(() => {
-  fetchOrganizationActive();
+// onBeforeMount(async () => {
+// });
+
+onMounted(async () => {
+  await Promise.all([fetchOrganizationTree(), fetchOrganizationStrategy()]);
+
   if (id.value) {
     editStatus.value = true;
-    fetchDataById(id.value);
+    await fetchDataById(id.value);
   }
 });
 </script>

src/modules/01_masterdata/components/Indicators/indicatorByRole/DetailView.vue

@@ -6,6 +6,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import { useCounterMixin } from "@/stores/mixin";
+import { useStructureTree } from "@/stores/structureTree";
 
 import type { FormDataRole } from "@/modules/01_masterdata/interface/request/Main";
 import type { DataOption } from "@/modules/01_masterdata/interface/index/Main";
@@ -13,6 +14,7 @@ import type { DataOption } from "@/modules/01_masterdata/interface/index/Main";
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
+const { fetchStructureTree } = useStructureTree();
 
 const heightSize = ref<string>("224");
 const filter = ref<string>("");
@@ -98,25 +100,34 @@ function filterOption(val: any, update: Function) {
 }
 
 /** ดึงข้อมูลตำแหน่ง */
-function getOptions() {
-  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,
-      }));
+async function getOptions() {
+  showLoader();
+  await 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((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /** เปิด Dialog หน่วยงาน */
@@ -174,12 +185,12 @@ function onSubmit() {
 
 //
 //
-function getDetail() {
+async function getDetail() {
   showLoader();
-  http
+  await http
     .get(config.API.kpiRoleMainEdit + `/${id.value}`)
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       form.position = data.position;
       form.year = data.year == null ? 0 : data.year;
       form.round = data.round;
@@ -218,34 +229,8 @@ function getDetail() {
     });
 }
 
-function fetchActive() {
-  showLoader();
-  http
-    .get(config.API.activeOrganization)
-    .then((res) => {
-      const data = res.data.result;
-      fetchTree(data.activeId);
-    })
-    .catch((err) => {
-      messageError($q, err);
-      hideLoader();
-    });
-}
-
-async function fetchTree(id: string) {
-  showLoader();
-  http
-    .get(config.API.orgByIdSystem(id, route.meta.Key as string))
-    .then((res) => {
-      const data = res.data.result;
-      node.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+async function fetchStructure() {
+  node.value = await fetchStructureTree(route.meta.Key as string, true);
 }
 
 function updateSelected(data: any) {
@@ -265,7 +250,7 @@ function setModel(val: string) {
 }
 
 onMounted(() => {
-  fetchActive();
+  fetchStructure();
   getOptions();
   if (id.value !== "") {
     getDetail();

src/modules/01_masterdata/views/indicatorByPlan.vue

@@ -7,6 +7,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
+import { useStructureTree } from "@/stores/structureTree";
 
 import type {
   DataOption,
@@ -21,6 +22,7 @@ import Summary from "@/modules/01_masterdata/components/Indicators/Summary.vue";
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
+const { fetchStructureTree } = useStructureTree();
 const { showLoader, hideLoader, dialogRemove, success, messageError } =
   useCounterMixin();
 
@@ -118,34 +120,22 @@ function onClickView(id: string = "") {
 }
 
 function fetchActive() {
-  showLoader();
-  http
-    .get(config.API.activeOrganization)
-    .then((res) => {
-      const data = res.data.result;
-      fetchTree(data.activeId);
-    })
-    .catch((err) => {
-      messageError($q, err);
-      hideLoader();
-    });
+  // showLoader();
+  // http
+  //   .get(config.API.activeOrganization)
+  //   .then((res) => {
+  //     const data = res.data.result;
+  //     // fetchTree(data.activeId);
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //     hideLoader();
+  //   });
 }
 
 /** ดึงข้อมูลโครงสรร้าง */
-async function fetchTree(id: string) {
-  showLoader();
-  http
-    .get(config.API.orgByIdSystem(id, route.meta.Key as string))
-    .then((res) => {
-      const data = res.data.result;
-      node.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+async function fetchTree() {
+  node.value = await fetchStructureTree(route.meta.Key as string, true);
 }
 
 /** เรียกข้อมูลตาม row โครงสร้าง*/
@@ -187,7 +177,6 @@ async function deleteData(idData: string) {
 /** clear input filter */
 function clearFilter() {
   nodeData.keyword = "";
-  fetchActive();
   fetchListProjectNew();
 }
 
@@ -211,9 +200,8 @@ function onClickHistory(id: string) {
       hideLoader();
     });
 }
-
 onMounted(() => {
-  fetchActive();
+  fetchTree();
 });
 </script>
 
@@ -537,7 +525,7 @@ onMounted(() => {
                   <!-- </q-btn> -->
                 </q-td>
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div class="table_ellipsis">
+                  <div class="table_ellipsis2">
                     {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>

src/modules/01_masterdata/views/indicatorByRole.vue

@@ -114,18 +114,18 @@ async function fetchList() {
       pageSize: formFilter.pageSize,
       page: formFilter.page,
     })
-    .then((res) => {
-      const data = res.data.result.data;
+    .then(async (res) => {
+      const data = await res.data.result.data;
       total.value = res.data.result.total;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       rows.value = data;
-      hideLoader();
     })
     .catch((err) => {
       messageError($q, err);
-      hideLoader();
     })
-    .finally(() => {});
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function onClickAddOrView(status: boolean = false, id: string = "") {
@@ -192,8 +192,8 @@ async function getOptions() {
   showLoader();
   await http
     .get(config.API.orgSalaryPosition)
-    .then((res) => {
-      const dataOp = res.data.result;
+    .then(async (res) => {
+      const dataOp = await res.data.result;
       const uniqueNames = new Set();
 
       const filteredData = dataOp
@@ -211,13 +211,13 @@ async function getOptions() {
 
       positionMainOp.value.push(...filteredData);
       positionOp.value.push(...filteredData);
-      hideLoader();
     })
     .catch((err) => {
       messageError($q, err);
-      hideLoader();
     })
-    .finally(() => {});
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function setModel(val: string) {
@@ -246,10 +246,11 @@ function onClickHistory(id: string) {
 }
 
 async function getTotal() {
+  showLoader();
   await http
     .post(config.API.indicatorSummary)
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       indicatorTotal.value = indicatorTotal.value.map((indicator) => {
         return {
           ...indicator,
@@ -260,13 +261,13 @@ async function getTotal() {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {});
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 onMounted(async () => {
-  await getTotal();
-  await getOptions();
-  await fetchList();
+  await Promise.all([getTotal(), getOptions(), fetchList()]);
 });
 </script>