Refactoring code module 02_organization

src/modules/02_organization/components/TreeView.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** importType*/
 import type {
@@ -17,10 +20,6 @@ import type { FilterMaster } from "@/modules/02_organization/interface/request/o
 import TreeMain from "@/modules/02_organization/components/TreeMain.vue";
 import TreeTable from "@/modules/02_organization/components/TreeTable.vue";
 
-/** importStore*/
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
-
 /** use*/
 const store = useOrganizational();
 const $q = useQuasar();
@@ -133,7 +132,9 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
     });
 }
 
-/** ดึงข้อมูลสถิติจำนวนด้านบน*/
+/**
+ *  ดึงข้อมูลสถิติจำนวนด้านบน
+ */
 function getSummary() {
   http
     .post(config.API.orgSummary, {
@@ -158,13 +159,20 @@ function getSummary() {
     });
 }
 
-/** funcion ค้นหาข้อมูลใน Table*/
+/**
+ * funcion ค้นหาข้อมูลใน Table
+ */
 async function filterKeyword() {
   reqMaster.page = 1;
   action1.value === false &&
     fetchDataTable(reqMaster.id, reqMaster.type, false);
 }
 
+/**
+ * ค้นหาโครงสร้างในข้อมูลแบบลำดับชั้นเพื่อหาที่ตรงกับ orgTreeId
+ * @param data ข้อมูลโครงสร้าง
+ * @param targetId id ของโครงสร้างที่ต้องการค้นหา
+ */
 function searchAndReplaceOrgName(data: any, targetId: string) {
   for (const child of data) {
     if (child.orgTreeId === targetId) {
@@ -179,17 +187,6 @@ function searchAndReplaceOrgName(data: any, targetId: string) {
   return false; // Not found in this branch
 }
 
-/**lifecycle Hook*/
-onMounted(async () => {
-  const id =
-    store.typeOrganizational === "current"
-      ? store.activeId
-      : store.typeOrganizational === "draft"
-      ? store.draftId
-      : historyId.value;
-  id && (await fetchDataTree(id));
-});
-
 /** callback function ทำงาน ทำการ fetch ข้อมูล Tree เมื่อมีการเลือกประวัติโครงสร้าง*/
 watch(
   () => count.value,
@@ -198,7 +195,9 @@ watch(
   }
 );
 
-/** callblck function ทำการ fetch ข้อมูล Tree เมื่อมีการเปลี่ยนโครงสร้าง*/
+/**
+ *  callblck function ทำการ fetch ข้อมูล Tree เมื่อมีการเปลี่ยนโครงสร้าง
+ */
 watch(
   () => store.typeOrganizational,
   () => {
@@ -210,13 +209,17 @@ watch(
   }
 );
 
-/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
+/**
+ * callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า
+ */
 watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
   action1.value === false &&
     fetchDataTable(reqMaster.id, reqMaster.type, false);
 });
 
-/** callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด*/
+/**
+ * callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด
+ */
 watch(
   () => reqMaster.isAll,
   () => {
@@ -235,6 +238,21 @@ watch(
     store.draftId && fetchDataTree(store.draftId?.toString());
   }
 );
+
+/**
+ * lifecycle Hook ทำเมือ่ Components ถูกเรียกใช้งาน
+ *
+ * ุ และดึงช้อมูลโครงสร้างตาม ID ของประเภทโครงสร้าง ปัจจุบัน,แบบร่าง
+ */
+onMounted(async () => {
+  const id =
+    store.typeOrganizational === "current"
+      ? store.activeId
+      : store.typeOrganizational === "draft"
+      ? store.draftId
+      : historyId.value;
+  id && (await fetchDataTree(id));
+});
 </script>
 
 <template>