Merge branch 'develop' into devTee

package-lock.json

@@ -19,8 +19,10 @@
                 "@tato30/vue-pdf": "^1.5.1",
                 "@vuepic/vue-datepicker": "^3.6.3",
                 "bma-org-chart": "^0.0.7",
+                "dom-to-image-more": "^3.6.0",
                 "keycloak-js": "^20.0.2",
                 "moment": "^2.29.4",
+                "pdf-lib": "^1.17.1",
                 "pinia": "^2.0.29",
                 "quasar": "^2.11.1",
                 "socket.io-client": "^4.7.4",
@@ -1143,6 +1145,24 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@pdf-lib/standard-fonts": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz",
+            "integrity": "sha512-hU30BK9IUN/su0Mn9VdlVKsWBS6GyhVfqjwl1FjZN4TxP6cCw0jP2w7V3Hf5uX7M0AZJ16vey9yE0ny7Sa59ZA==",
+            "license": "MIT",
+            "dependencies": {
+                "pako": "^1.0.6"
+            }
+        },
+        "node_modules/@pdf-lib/upng": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@pdf-lib/upng/-/upng-1.0.1.tgz",
+            "integrity": "sha512-dQK2FUMQtowVP00mtIksrlZhdFXQZPC+taih1q4CvPZ5vqdxR/LKBaFg0oAfzd1GlHZXXSPdQfzQnt+ViGvEIQ==",
+            "license": "MIT",
+            "dependencies": {
+                "pako": "^1.0.10"
+            }
+        },
         "node_modules/@quasar/extras": {
             "version": "1.15.8",
             "license": "MIT",
@@ -3006,6 +3026,12 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/dom-to-image-more": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/dom-to-image-more/-/dom-to-image-more-3.6.0.tgz",
+            "integrity": "sha512-0BB0M9gRRP7znKBNLRAvNyWnkDIzSgMSDcS7WdPDzPnWhW2YJqxUR/dCHiJ2HdCV3K2rVky5Vba8UF31mvrCuQ==",
+            "license": "MIT"
+        },
         "node_modules/domexception": {
             "version": "4.0.0",
             "dev": true,
@@ -5871,6 +5897,12 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/pako": {
+            "version": "1.0.11",
+            "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+            "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+            "license": "(MIT AND Zlib)"
+        },
         "node_modules/panzoom": {
             "version": "9.4.3",
             "resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.3.tgz",
@@ -5980,6 +6012,24 @@
                 "through": "~2.3"
             }
         },
+        "node_modules/pdf-lib": {
+            "version": "1.17.1",
+            "resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.17.1.tgz",
+            "integrity": "sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==",
+            "license": "MIT",
+            "dependencies": {
+                "@pdf-lib/standard-fonts": "^1.0.0",
+                "@pdf-lib/upng": "^1.0.1",
+                "pako": "^1.0.11",
+                "tslib": "^1.11.1"
+            }
+        },
+        "node_modules/pdf-lib/node_modules/tslib": {
+            "version": "1.14.1",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+            "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+            "license": "0BSD"
+        },
         "node_modules/pdfjs-dist": {
             "version": "3.7.107",
             "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.7.107.tgz",

package.json

@@ -26,8 +26,10 @@
         "@tato30/vue-pdf": "^1.5.1",
         "@vuepic/vue-datepicker": "^3.6.3",
         "bma-org-chart": "^0.0.7",
+        "dom-to-image-more": "^3.6.0",
         "keycloak-js": "^20.0.2",
         "moment": "^2.29.4",
+        "pdf-lib": "^1.17.1",
         "pinia": "^2.0.29",
         "quasar": "^2.11.1",
         "socket.io-client": "^4.7.4",

src/modules/10_registry/02_Government/07_Position.vue

@@ -176,6 +176,11 @@ const baseColumns = ref<QTableColumn[]>([
     label: "ตำแหน่งทางการบริหาร",
     sortable: true,
     field: "positionExecutive",
+    format(val, row) {
+      return !row.positionExecutiveField
+        ? val
+        : `${val} (${row.positionExecutiveField})`;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -189,7 +194,9 @@ const baseColumns = ref<QTableColumn[]>([
     field: "commandNo",
     format(val, row) {
       return row.commandNo && row.commandYear
-        ? `${row.commandNo}/${Number(row.commandYear) + 543}`
+        ? row.commandType !== "C-PM-47"
+          ? `${row.commandNo}/${Number(row.commandYear) + 543}`
+          : `${row.commandNo}`
         : "";
     },
     headerStyle: "font-size: 14px",

src/modules/10_registry/03_Salary/01_Salary.vue

@@ -160,6 +160,11 @@ const baseColumns = ref<QTableColumn[]>([
     label: "ตำแหน่งทางการบริหาร",
     sortable: true,
     field: "positionExecutive",
+    format(val, row) {
+      return !row.positionExecutiveField
+        ? val
+        : `${val} (${row.positionExecutiveField})`;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -173,7 +178,9 @@ const baseColumns = ref<QTableColumn[]>([
     field: "commandNo",
     format(val, row) {
       return row.commandNo && row.commandYear
-        ? `${row.commandNo}/${Number(row.commandYear) + 543}`
+        ? row.commandType !== "C-PM-47"
+          ? `${row.commandNo}/${Number(row.commandYear) + 543}`
+          : `${row.commandNo}`
         : "";
     },
     headerStyle: "font-size: 14px",

src/modules/10_registry/interface/index/Main.ts

@@ -196,6 +196,7 @@ interface SalaryFormType {
   refCommandNo: string | null;
   templateDoc: string;
   order: number;
+  commandType: string;
 }
 
 interface NopaidFormType {

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 {
+  showLoadingSpinner();
-    showLoader();
+  isLoadBtn.value = true;
-    await scrollToCenter();
+  setTimeout(async () => {
-    await chartRef.value.savePNG();
+    try {
-  } catch {
+      // export แบบเต็มๆ
-    messageError($q);
+      scrollContainer.value && (await exportChartToPNG(scrollContainer.value));
-  } finally {
+    } finally {
-    hideLoader();
+      isLoadBtn.value = false;
-  }
+    }
+  }, 500);
 }
 
 /** function ดาวน์โหลดไฟล์โครงสร้าง PDF*/
 async function savePDF() {
-  try {
+  showLoadingSpinner();
-    showLoader();
+  isLoadBtn.value = true;
-    await scrollToCenter();
+  setTimeout(async () => {
-    await chartRef.value.savePDF();
+    try {
-  } catch {
+      // export แบบเต็มๆ
-    messageError($q);
+      scrollContainer.value && (await exportChartToPDF(scrollContainer.value));
-  } finally {
+    } finally {
-    hideLoader();
+      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;

src/plugins/exportChart.ts

@@ -0,0 +1,115 @@
+import domtoimage from "dom-to-image-more";
+import { PDFDocument } from "pdf-lib";
+
+/** ฟังก์ชันสำหรับแสดง loading spinner */
+export function showLoadingSpinner() {
+  const loading = document.createElement("div");
+  loading.id = "loading-spinner";
+  loading.style.position = "fixed";
+  loading.style.top = "0";
+  loading.style.left = "0";
+  loading.style.width = "100vw";
+  loading.style.height = "100vh";
+  loading.style.background = "rgba(0,0,0,0.2)";
+  loading.style.display = "flex";
+  loading.style.alignItems = "center";
+  loading.style.justifyContent = "center";
+  loading.style.zIndex = "9999";
+  loading.innerHTML = `
+    <div style="display:flex;flex-direction:column;align-items:center;">
+      <div style="
+        border: 8px solid #f3f3f3;
+        border-top: 8px solid #3498db;
+        border-radius: 50%;
+        width: 60px;
+        height: 60px;
+        animation: spin 1s linear infinite;
+      "></div>
+     
+    </div>
+    <style>
+      @keyframes spin {
+        0% { transform: rotate(0deg);}
+        100% { transform: rotate(360deg);}
+      }
+    </style>
+  `;
+  document.body.appendChild(loading);
+}
+
+/** ฟังก์ชันสำหรับซ่อน loading spinner */
+function hideLoadingSpinner() {
+  const loading = document.getElementById("loading-spinner");
+  if (loading) loading.remove();
+}
+
+/**
+ * ฟังก์ชันสำหรับ export โครงสร้างองค์กรเป็น PNG
+ * @param node HTMLElement ที่ต้องการ export เป็น PNG
+ */
+export async function exportChartToPNG(node: HTMLElement): Promise<void> {
+  if (node) {
+    try {
+      // สร้าง PNG จาก DOM ขนาดเต็ม
+      const imageData = await domtoimage.toPng(node, {
+        bgcolor: "#fff",
+        quality: 1,
+        width: node.scrollWidth,
+        height: node.scrollHeight,
+      });
+
+      const link = document.createElement("a");
+      link.download = "orgchart.png";
+      link.href = imageData;
+      link.click();
+    } catch (error: any) {
+      alert("Export ไม่สำเร็จ: " + error.message);
+    } finally {
+      hideLoadingSpinner();
+    }
+  }
+}
+
+/**
+ * ฟังก์ชันสำหรับ export โครงสร้างองค์กรเป็น PNG
+ * @param node HTMLElement ที่ต้องการ export เป็น PNG
+ */
+export async function exportChartToPDF(node: HTMLElement): Promise<void> {
+  // ใช้ scrollWidth/scrollHeight เพื่อขนาดเต็ม
+  const width = node.scrollWidth;
+  const height = node.scrollHeight;
+
+  try {
+    // สร้าง PNG จาก DOM ขนาดเต็ม
+    const imageData = await domtoimage.toPng(node, {
+      width,
+      height,
+      bgcolor: "#fff",
+    });
+    // สร้าง PDF ด้วย pdf-lib
+    const pdfDoc = await PDFDocument.create();
+    const page = pdfDoc.addPage([width, height]);
+    const pngImage = await pdfDoc.embedPng(imageData);
+    page.drawImage(pngImage, {
+      x: 0,
+      y: 0,
+      width,
+      height,
+    });
+    const pdfBytes = await pdfDoc.save();
+    // ดาวน์โหลด PDF
+    const blob = new Blob([pdfBytes], { type: "application/pdf" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "orgchart.pdf";
+    a.click();
+    URL.revokeObjectURL(url);
+  } catch (err: any) {
+    alert("Export ไม่สำเร็จ: " + err.message);
+
+    console.error(err);
+  } finally {
+    hideLoadingSpinner();
+  }
+}

src/stores/mixin.ts

@@ -225,7 +225,13 @@ export const useCounterMixin = defineStore("mixin", () => {
   }
 
   function monthYear2Thai(month: number, year: number, isFullMonth = false) {
-    const date = new Date(`${year}-${month + 1}-1`);
+    if (
+      month < 0 ||
+      month > 11 ||
+      !Number.isFinite(month) ||
+      !Number.isFinite(year)
+    )
+      return "";
     const fullMonthThai = [
       "มกราคม",
       "กุมภาพันธ์",
@@ -254,19 +260,12 @@ export const useCounterMixin = defineStore("mixin", () => {
       "พ.ย.",
       "ธ.ค.",
     ];
-    let dstYear = 0;
+
-    if (date.getFullYear() > 2500) {
+    // assume year is in BE if > 2500
-      dstYear = date.getFullYear();
+    let dstYear = year > 2500 ? year : year + 543;
-    } else {
+    // month is already 0-based
-      dstYear = date.getFullYear() + 543;
+    let dstMonth = isFullMonth ? fullMonthThai[month] : abbrMonthThai[month];
-    }
+    return `${dstMonth} ${dstYear}`;
-    let dstMonth = "";
-    if (isFullMonth) {
-      dstMonth = fullMonthThai[date.getMonth()];
-    } else {
-      dstMonth = abbrMonthThai[date.getMonth()];
-    }
-    return dstMonth + " " + dstYear;
   }
 
   function dateToISO(date: Date) {

src/types/dom-to-image-more.d.ts

@@ -0,0 +1,36 @@
+declare module "dom-to-image-more" {
+  export interface Options {
+    filter?: (node: Node) => boolean;
+    bgcolor?: string;
+    width?: number;
+    height?: number;
+    style?: any;
+    quality?: number;
+    imagePlaceholder?: string;
+    cacheBust?: boolean;
+  }
+
+  export function toPng(node: HTMLElement, options?: Options): Promise<string>;
+  export function toJpeg(node: HTMLElement, options?: Options): Promise<string>;
+  export function toSvg(node: HTMLElement, options?: Options): Promise<string>;
+  export function toPixelData(
+    node: HTMLElement,
+    options?: Options
+  ): Promise<Uint8ClampedArray>;
+  export function toCanvas(
+    node: HTMLElement,
+    options?: Options
+  ): Promise<HTMLCanvasElement>;
+  export function toBlob(node: HTMLElement, options?: Options): Promise<Blob>;
+
+  const domtoimage: {
+    toPng: typeof toPng;
+    toJpeg: typeof toJpeg;
+    toSvg: typeof toSvg;
+    toPixelData: typeof toPixelData;
+    toCanvas: typeof toCanvas;
+    toBlob: typeof toBlob;
+  };
+
+  export default domtoimage;
+}