โครงสร้างทะเบียนประวัติ

src/interface/main.ts

@@ -23,4 +23,35 @@ interface RoleData {
   parentNode: string;
 }
 
-export type { DataOption, FormProfile, RoleData };
+interface DataStructureTree {
+  labelName: string;
+  orgCode: string;
+  orgLevel: number;
+  orgName: string;
+  orgRevisionId: string;
+  orgRootName: string;
+  orgTreeCode: string;
+  orgTreeFax: string;
+  orgTreeId: string;
+  orgTreeName: string;
+  orgTreeOrder: number;
+  orgTreePhoneEx: string;
+  orgTreePhoneIn: string;
+  orgTreeRank: string;
+  orgTreeRankSub: string;
+  orgTreeShortName: string;
+  responsibility: string;
+  totalPosition: number;
+  totalPositionCurrentUse: number;
+  totalPositionCurrentVacant: number;
+  totalPositionNextUse: number;
+  totalPositionNextVacant: number;
+  totalRootPosition: number;
+  totalRootPositionCurrentUse: number;
+  totalRootPositionCurrentVacant: number;
+  totalRootPositionNextUse: number;
+  totalRootPositionNextVacant: number;
+  children: DataStructureTree[];
+}
+
+export type { DataOption, FormProfile, RoleData, DataStructureTree };

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

@@ -333,9 +333,11 @@ function clearSelect(t: string) {
   fetchDataPerson();
 }
 
+const isLoad = ref<boolean>(false);
 async function fetchTree() {
   const data = await fetchStructureTree(route.meta.Key as string);
   if (data) {
+    isLoad.value = true;
     node.value = data;
     store.formFilter.node = nodeData.node;
     store.formFilter.nodeId = nodeData.nodeId;
@@ -365,6 +367,11 @@ function updateSelectedTreeMain(data: any) {
   }
 }
 
+/** callback function เมื่อมีการเปิด popup*/
+watch(selectNode, () => {
+  isLoad.value && hideLoader();
+});
+
 onMounted(async () => {
   selectType();
   fetchTree();
@@ -453,7 +460,7 @@ onMounted(async () => {
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-              @click="() => (selectNode = true)"
+              @click="() => ((selectNode = true), showLoader())"
             >
               <template v-slot:label>
                 {{

src/modules/08_registryEmployee/components/DialogSelectPos.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, onBeforeMount, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 
@@ -19,10 +19,11 @@ import Header from "@/components/DialogHeader.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
-import { asCleanDays } from "@fullcalendar/core/internal";
+import { useStructureTree } from "@/stores/structureTree";
 
 /** use*/
 const $q = useQuasar();
+const { fetchStructureTree } = useStructureTree();
 const {
   success,
   showLoader,
@@ -204,47 +205,18 @@ const selectedPos = ref<any[]>([]);
 const datePos = ref<Date>(new Date());
 const posMasterMain = ref<any>([]);
 const orgRevisionId = ref<string>("");
-
-/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
-async function fetchOrganizationActive() {
-  showLoader();
-  await http
-    .get(config.API.activeOrganization)
-    .then((res) => {
-      const data = res.data.result;
-      if (data) {
-        orgRevisionId.value = data.activeId;
-        fetchDataTree(data.activeId);
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
+const isLoad = ref<boolean>(false);
 /**
  * function fetch ข้อมูลของ Tree
  * @param id id โครงสร้าง
  */
-async function fetchDataTree(id: string) {
-  showLoader();
-  await http
-    .get(config.API.orgByIdSystem(id, route.meta.Key as string))
-    .then((res) => {
-      const data = res.data.result;
-      if (data) {
-        nodes.value = data;
-        filterItemsTaps(data);
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1000);
-    });
+async function fetchDataTree() {
+  const data = await fetchStructureTree(route.meta.Key as string, true);
+  if (data) {
+    nodes.value = data;
+    filterItemsTaps(data);
+    isLoad.value = true;
+  }
 }
 
 /**
@@ -333,7 +305,7 @@ async function fetchPosFind(level: number, id: string) {
   await http
     .post(config.API.orgPosFind, body)
     .then(async (res) => {
-      const data = res.data.result;
+      const data = await res.data.result;
 
       expanded.value = data;
       nodeId.value = id;
@@ -400,7 +372,7 @@ function closePopup() {
 }
 
 /** function clearData*/
-function clearData() {
+async function clearData() {
   nodeId.value = "";
   expanded.value = [];
   positionId.value = "";
@@ -441,12 +413,14 @@ watch(
   () => modal.value,
   async () => {
     if (modal.value) {
-      await fetchOrganizationActive();
+      showLoader();
+      await clearData();
       if (props?.dataRow?.node !== null && props?.dataRow?.nodeId !== null) {
         await fetchPosFind(props?.dataRow?.node, props?.dataRow?.nodeId);
       } else {
         expanded.value = [];
       }
+      isLoad.value && hideLoader();
     }
   }
 );
@@ -468,6 +442,10 @@ watch(
     }
   }
 );
+
+onBeforeMount(async () => {
+  await fetchDataTree();
+});
 </script>
 
 <template>

src/modules/08_registryEmployee/views/Main.vue

@@ -215,14 +215,14 @@ watch(
   }
 );
 
-function fetchList() {
+async function fetchList() {
   showLoader();
   http
     .get(config.API.registryNew("-temp"), { params: queryParams })
-    .then((res) => {
+    .then(async (res) => {
+      rows.value = await res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.total / queryParams.pageSize);
       total.value = res.data.result.total;
-      rows.value = res.data.result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -273,8 +273,8 @@ function onClickSendOrder() {
   modalSendOrder.value = true;
 }
 
-onMounted(() => {
-  fetchList();
+onMounted(async () => {
+  await fetchList();
 });
 </script>
 

src/stores/structureTree.ts

@@ -6,23 +6,36 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 
+import type { DataStructureTree } from "@/interface/main";
+
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 export const useStructureTree = defineStore("structureTree", () => {
   const activeId = ref<string>("");
-  const dataStore = ref<{ [key: string]: any[] }>({});
+  const dataStore = ref<{ [key: string]: DataStructureTree[] }>({});
 
-  async function fetchStructureTree(sysKey: string) {
+  /**
+   * fetch ข้อมูลโครงสร้างตามคีย์ของระบบ
+   * @param sysKey คีย์ของระบบ
+   * @param isLoad สถานะที่ใช้ในการแสดงตัวโหลด true = แสดง, false = ไม่แสดง
+   * @returns ข้อมูลโครงสร้าง
+   */
+  async function fetchStructureTree(sysKey: string, isLoad: boolean = false) {
     if (dataStore.value[sysKey]) {
       return dataStore.value[sysKey] || [];
     } else {
       activeId.value === "" && (await fetchActive());
-      const data = await fetchData(sysKey);
+      const data = await fetchData(sysKey, isLoad);
       return data || [];
     }
   }
 
+  /**
+   * fetch ข้อมูลโครงสร้างองค์กรปัจจุบัน
+   *
+   * เช็ต activeId.value เป็นค่า data.activeId ที่ได้จากข้อมูลที่ดึงมา
+   */
   async function fetchActive() {
     try {
       const res = await http.get(config.API.activeOrganization);
@@ -33,8 +46,17 @@ export const useStructureTree = defineStore("structureTree", () => {
     }
   }
 
-  async function fetchData(sysKey: string) {
-    // showLoader();
+  /**
+   * fetch ข้อมูลโครงสร้างจาก API
+   * @param sysKey คีย์ของระบบ
+   * @param isLoad  สถานะที่ใช้ในการแสดงตัวโหลด true = แสดง, false = ไม่แสดง
+   * @returns ข้อมูลโครงสร้าง
+   *
+   * เมื่อ isLoad เป็น true จะทำการแสดงตัวโหลด showLoader
+   * และเก็บค่าใน dataStore.value ตามคีย์ของระบบที่รับมา
+   */
+  async function fetchData(sysKey: string, isLoad: boolean) {
+    isLoad && showLoader();
     try {
       const res = await http.get(
         config.API.orgByIdSystem(activeId.value, sysKey)