เพิ่ม function fetchStructureTree

src/modules/04_registryPerson/views/list.vue

@@ -20,9 +20,11 @@ import DialogHeader from "@/components/DialogHeader.vue";
 import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
+import { useStructureTree } from "@/stores/structureTree";
 
 const $q = useQuasar();
 const store = useRegistryNewDataStore();
+const { fetchStructureTree } = useStructureTree();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 const route = useRoute();
 
@@ -331,36 +333,13 @@ function clearSelect(t: string) {
   fetchDataPerson();
 }
 
-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;
-      store.formFilter.node = nodeData.node;
-      store.formFilter.nodeId = nodeData.nodeId;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-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() {
+  const data = await fetchStructureTree(route.meta.Key as string);
+  if (data) {
+    node.value = data;
+    store.formFilter.node = nodeData.node;
+    store.formFilter.nodeId = nodeData.nodeId;
+  }
 }
 
 function sendNode() {
@@ -371,15 +350,6 @@ function sendNode() {
   fetchDataPerson();
 }
 
-watch(
-  () => selectNode.value,
-  () => {
-    if (selectNode.value) {
-      fetchActive();
-    }
-  }
-);
-
 function updateSelectedTreeMain(data: any) {
   if (nodeData.node === data.orgLevel && nodeData.nodeId === data.orgTreeId) {
     store.formFilter.node = null;
@@ -397,6 +367,7 @@ function updateSelectedTreeMain(data: any) {
 
 onMounted(async () => {
   selectType();
+  fetchTree();
 });
 </script>
 

src/stores/structureTree.ts

@@ -0,0 +1,55 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
+export const useStructureTree = defineStore("structureTree", () => {
+  const activeId = ref<string>("");
+  const dataStore = ref<{ [key: string]: any[] }>({});
+
+  async function fetchStructureTree(sysKey: string) {
+    if (dataStore.value[sysKey]) {
+      return dataStore.value[sysKey] || [];
+    } else {
+      activeId.value === "" && (await fetchActive());
+      const data = await fetchData(sysKey);
+      return data || [];
+    }
+  }
+
+  async function fetchActive() {
+    try {
+      const res = await http.get(config.API.activeOrganization);
+      const data = res.data.result;
+      activeId.value = data.activeId;
+    } catch (err) {
+      messageError($q, err);
+    }
+  }
+
+  async function fetchData(sysKey: string) {
+    // showLoader();
+    try {
+      const res = await http.get(
+        config.API.orgByIdSystem(activeId.value, sysKey)
+      );
+      const data = res.data.result;
+      dataStore.value[sysKey] = data;
+      return data;
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+    }
+  }
+
+  return {
+    fetchStructureTree,
+  };
+});