Refactoring code module 02_organization

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

@@ -1,46 +1,45 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+import { StructChart } from "structure-chart";
+import "structure-chart/structure-chart.css";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-
-import { StructChart } from "structure-chart";
-import "structure-chart/structure-chart.css";
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrganizational } from "@/modules/02_organization/store/organizational";
 
+const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useOrganizational();
 const { showLoader, hideLoader, messageError } = mixin;
-const $q = useQuasar(); // show dialog
 
-// import chartData from '@/assets/structChartData'
-// const dataSource = ref(chartData)
 const dataSource = ref(); // ข้อมูล Chart
 const rootOrgID = ref(); // org id ของ root ตัวปัจจุบันที่เลือกอยู่
 const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
 const chartRef = ref(); // อ้างอิงไปที่ตัว chart
-const savePNG = () => {
-  chartRef.value.savePNG();
-};
-const savePDF = () => {
-  chartRef.value.savePDF();
-};
-
 const loader = ref<boolean>(false); // Loader
 
-onMounted(async () => {
-  const id =
-    store.typeOrganizational === "current"
-      ? store.activeId
-      : store.typeOrganizational === "draft"
-      ? store.draftId
-      : store.historyId;
+/**
+ * function ดาวน์โหลดไฟล์โครงสร้าง PNG
+ */
+function savePNG() {
+  chartRef.value.savePNG();
+}
 
-  id && (await fetchStructChart(id, "0"));
-});
+/**
+ * function ดาวน์โหลดไฟล์โครงสร้าง PDF
+ */
+function savePDF() {
+  chartRef.value.savePDF();
+}
 
+/**
+ * function ดึงข้อมูลโครงสร้าง
+ * @param id id โครงสร้าง
+ * @param type
+ * @param status
+ */
 async function fetchStructChart(
   id: string,
   type: string,
@@ -49,9 +48,9 @@ async function fetchStructChart(
   showLoader();
   await http
     .get(config.API.orgStructChart(id, type))
-    .then((res) => {
+    .then(async (res) => {
       if (res.data.result.length > 0) {
-        const data = res.data.result[0];
+        const data = await res.data.result[0];
         const struct = [];
         struct.push({ ...data, officer: [], heads: [] });
         dataSource.value = struct[0];
@@ -72,14 +71,14 @@ async function fetchStructChart(
  * เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้น ๆ จาก API
  * @param data
  */
-const refreshChart = async (data: any, type: number) => {
+async function refreshChart(data: any, type: number) {
   if (data.value === undefined) {
     fetchStructChart(data, type.toString());
     rootOrgID.value = data;
   } else {
     searchAndReplace(dataSource.value, data.value);
   }
-};
+}
 
 function searchAndReplace(data: any, id: string) {
   if (data.deptID === id) {
@@ -100,7 +99,7 @@ function searchAndReplace(data: any, id: string) {
  * @param id OrgID ของหน่วยงานที่ต้องการหา
  * @param chart Array ของ Object ของหน่วยงานย่อยใน Tree นั้น ๆ
  */
-const chartTraverse = (id: any, chart: any): any => {
+function chartTraverse(id: any, chart: any): any {
   let _returnPath = [];
   for (const child of chart) {
     if (child.deptID === id) {
@@ -128,7 +127,7 @@ const chartTraverse = (id: any, chart: any): any => {
       }
     }
   }
-};
+}
 
 const findPath = (id: any) => {
   let _path = [];
@@ -149,13 +148,13 @@ const theBreadcrumb = ref();
 /**
  * สร้าง Path Breadcrumbs
  */
-const breadcrumbsGen = () => {
+function breadcrumbsGen() {
   if (rootOrgID.value !== 0) {
     theBreadcrumb.value = [];
     const newPath = findPath(rootOrgID.value);
     theBreadcrumb.value = newPath;
   }
-};
+}
 
 watch(
   () => store.typeOrganizational,
@@ -178,6 +177,17 @@ watch(
     store.historyId && (await fetchStructChart(store.historyId, "0", true));
   }
 );
+
+onMounted(async () => {
+  const id =
+    store.typeOrganizational === "current"
+      ? store.activeId
+      : store.typeOrganizational === "draft"
+      ? store.draftId
+      : store.historyId;
+
+  id && (await fetchStructChart(id, "0"));
+});
 </script>
 
 <template>