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

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();