load orgchart

src/modules/12_organization/views/main.vue

@@ -10,6 +10,12 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import "structure-chart/structure-chart.css";
 
+import {
+  exportChartToPNG,
+  exportChartToPDF,
+  showLoadingSpinner,
+} from "@/plugins/exportChart";
+
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
@@ -88,30 +94,33 @@ function findPath(id: any) {
   }
 }
 
+const isLoadBtn = ref(false);
 /** function ดาวน์โหลดไฟล์โครงสร้าง PNG*/
 async function savePNG() {
-  try {
-    showLoader();
-    await scrollToCenter();
-    await chartRef.value.savePNG();
-  } catch {
-    messageError($q);
-  } finally {
-    hideLoader();
-  }
+  showLoadingSpinner();
+  isLoadBtn.value = true;
+  setTimeout(async () => {
+    try {
+      // export แบบเต็มๆ
+      scrollContainer.value && (await exportChartToPNG(scrollContainer.value));
+    } finally {
+      isLoadBtn.value = false;
+    }
+  }, 500);
 }
 
 /** function ดาวน์โหลดไฟล์โครงสร้าง PDF*/
 async function savePDF() {
-  try {
-    showLoader();
-    await scrollToCenter();
-    await chartRef.value.savePDF();
-  } catch {
-    messageError($q);
-  } finally {
-    hideLoader();
-  }
+  showLoadingSpinner();
+  isLoadBtn.value = true;
+  setTimeout(async () => {
+    try {
+      // export แบบเต็มๆ
+      scrollContainer.value && (await exportChartToPDF(scrollContainer.value));
+    } finally {
+      isLoadBtn.value = false;
+    }
+  }, 500);
 }
 
 /** ฟังก์ชันเลื่อน scroll ไปที่กึ่งกลาง*/
@@ -127,6 +136,7 @@ async function scrollToCenter() {
  * @param data
  */
 async function refreshChart(data: any, type: number) {
+  if (isLoadBtn.value) return; // ถ้าโหลดอยู่ไม่ให้ทำอะไร
   if (data.value === undefined) {
     fetchStructChart(data, type.toString());
     rootOrgID.value = data;
@@ -229,8 +239,9 @@ onMounted(async () => {
           <div class="q-pa-sm row wrap items-center">
             <q-btn
               flat
+              :diasble="isLoadBtn"
               round
-              color="primary"
+              :color="!isLoadBtn ? 'primary' : 'grey-7'"
               @click="savePNG()"
               icon="mdi-image"
             >
@@ -239,7 +250,8 @@ onMounted(async () => {
             <q-btn
               flat
               round
-              color="red-7"
+              :color="!isLoadBtn ? 'red-7' : 'grey-7'"
+              :diasble="isLoadBtn"
               @click="savePDF()"
               icon="mdi-file-pdf-box"
             >
@@ -263,7 +275,9 @@ onMounted(async () => {
           <div class="col-12">
             <q-separator />
           </div>
+
           <div
+            id="structChart"
             ref="scrollContainer"
             style="
               overflow-x: auto;