From cb58de2ca3741098888bbbc290adc0bb0846d267 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 8 Nov 2023 17:31:50 +0700
Subject: [PATCH] =?UTF-8?q?-=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=A5=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94=E0=B9=81=E0=B8=9A=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1=E0=B8=A5=E0=B8=B2?=
 =?UTF-8?q?=E0=B9=84=E0=B8=9B=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B9=83=E0=B8=99?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=84=E0=B9=8C=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=AB=E0=B8=A7=E0=B9=88=E0=B8=B2=E0=B8=87?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=97=E0=B8=A8=20?=
 =?UTF-8?q?=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B8=A5=E0=B8=B2=E0=B9=84=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=9F=E0=B8=B7=E0=B9=89=E0=B8=99=E0=B8=9F=E0=B8=B9=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=A3=E0=B8=A3=E0=B8=96=E0=B8=A0=E0=B8=B2=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=94=E0=B9=89=E0=B8=B2=E0=B8=99=E0=B8=AD=E0=B8=B2=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=9E=20-=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=9F=E0=B8=B1=E0=B8=87=E0=B8=81=E0=B9=8C=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=B1=E0=B9=88=E0=B8=99=20convert=20=E0=B8=88=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=99=E0=B8=A7=E0=B8=99=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99?=
 =?UTF-8?q?=E0=B9=80=E0=B8=94=E0=B8=B7=E0=B8=AD=E0=B8=99=E0=B8=97=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B9=80=E0=B8=9B=E0=B9=87=E0=B8=99=E0=B8=95=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=A7=E0=B9=80=E0=B8=A5=E0=B8=82=E0=B8=A1=E0=B8=B2=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9B=E0=B9=87=E0=B8=99=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B2=E0=B8=A1=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B8=B1=E0=B8=87=E0=B8=AA=E0=B8=B7=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Forms/11_WorkInternationalForm.vue        |   14 +-
 .../Forms/13_RehabilitationForm.vue           |   20 +-
 src/stores/mixin.ts                           | 1598 ++++++++++-------
 3 files changed, 954 insertions(+), 678 deletions(-)

diff --git a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
index 8d97985..f8bb797 100644
--- a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
@@ -15,6 +15,18 @@ const props = defineProps({
   <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
   <div>
     ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
-    <p>*หมายเหตุ รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะยังไม่ทำรอ user confirm</p>
+    <ul>
+      <li>เขียนที่</li>
+      <li>ลาตั้งแต่วันที่</li>
+      <li>ลาถึงวันที่</li>
+      <li>รายละเอียด (ไม่บังคับกรอก)</li>
+      <li>*หลังจากบันทึก แสดงปุ่มดาวน์โหลดแบบฟอร์ม</li>
+      <li>*หลังจากบันทึก แสดง input ให้อัพโหลดเอกสารกลับเข้าระบบ</li>
+    </ul>
+
+    <p>*หมายเหตุ 
+      รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะ หลังจากกดบันทึกแล้วแสดงเอกสาร docx ให้ดาวน์โหลด เพื่อกรอก
+      และเพิ่มให้อัพโหหลดเอกสารกลับเข้ามาในระบบ
+    </p>
   </div>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue b/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
index 1645e0a..750715b 100644
--- a/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
 import { ref } from "vue";
 
+const mixin = useCounterMixin()
+const { arabicNumberToText } = mixin
+
 const edit = ref<boolean>(false);
 const props = defineProps({
   data: {
@@ -15,6 +19,20 @@ const props = defineProps({
   <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
   <div>
     ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
-    <p>*หมายเหตุ รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะยังไม่ทำรอ user confirm</p>
+    <ul>
+      <li>เขียนที่</li>
+      <li>ลาตั้งแต่วันที่</li>
+      <li>ลาถึงวันที่</li>
+      <li>รายละเอียด (ไม่บังคับกรอก)</li>
+      <li>*หลังจากบันทึก แสดงปุ่มดาวน์โหลดแบบฟอร์ม</li>
+      <li>*หลังจากบันทึก แสดง input ให้อัพโหลดเอกสารกลับเข้าระบบ</li>
+    </ul>
+
+    <p>*หมายเหตุ 
+      รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะ หลังจากกดบันทึกแล้วแสดงเอกสาร docx ให้ดาวน์โหลด เพื่อกรอก
+      และเพิ่มให้อัพโหหลดเอกสารกลับเข้ามาในระบบ
+    </p>
+
+   ตัวอย่างการ convert ตัวเลขเป็นข้อความ {{ arabicNumberToText(15500) }}
   </div>
 </template>
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index a268354..58ab4fe 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -1,721 +1,967 @@
-import { defineStore } from "pinia"
-import moment from "moment"
-import CustomComponent from "@/components/CustomDialog.vue"
-import { Loading, QSpinnerCube } from "quasar"
+import { defineStore } from "pinia";
+import moment from "moment";
+import CustomComponent from "@/components/CustomDialog.vue";
+import { Loading, QSpinnerCube } from "quasar";
 
 export const useCounterMixin = defineStore("mixin", () => {
-	/**
-	 * ฟังก์ชันกลาง
-	 */
+  /**
+   * ฟังก์ชันกลาง
+   */
+  const calAge = (
+    srcDate: Date,
+    birthCal: Date = new Date(),
+    eng: boolean = false
+  ) => {
+    const year = eng ? "years" : "ปี";
+    const month = eng ? "months" : "เดือน";
+    const day = eng ? "days" : "วัน";
 
-	const calAge = (srcDate: Date, birthCal: Date = new Date(), eng: boolean = false) => {
-		const year = eng ? "years" : "ปี"
-		const month = eng ? "months" : "เดือน"
-		const day = eng ? "days" : "วัน"
+    if (srcDate == null) {
+      return `0 ${year} 0 ${month} 0 ${day}`;
+    }
 
-		if (srcDate == null) {
-			return `0 ${year} 0 ${month} 0 ${day}`
-		}
+    const toDay = birthCal;
+    const birth = new Date(srcDate);
 
-		const toDay = birthCal
-		const birth = new Date(srcDate)
+    const yearNow = toDay.getFullYear();
+    const monthNow = toDay.getMonth();
+    const dateNow = toDay.getDate();
 
-		const yearNow = toDay.getFullYear()
-		const monthNow = toDay.getMonth()
-		const dateNow = toDay.getDate()
+    const yearDob = birth.getFullYear();
+    const monthDob = birth.getMonth();
+    const dateDob = birth.getDate();
 
-		const yearDob = birth.getFullYear()
-		const monthDob = birth.getMonth()
-		const dateDob = birth.getDate()
+    const lastYear = 12;
+    const subtractDate: Object = moment().subtract(1, "months").endOf("month");
 
-		const lastYear = 12
-		const subtractDate: Object = moment().subtract(1, "months").endOf("month")
+    const lastMonths = new Date(subtractDate.toString()).getDate();
 
-		const lastMonths = new Date(subtractDate.toString()).getDate()
+    let yearAge = yearNow - yearDob;
+    let monthAge = 0;
+    let dateAge = 0;
 
-		let yearAge = yearNow - yearDob
-		let monthAge = 0
-		let dateAge = 0
+    if (monthNow >= monthDob) {
+      monthAge = monthNow - monthDob;
+    } else {
+      yearAge--;
+      monthAge = lastYear + monthNow - monthDob;
+    }
 
-		if (monthNow >= monthDob) {
-			monthAge = monthNow - monthDob
-		} else {
-			yearAge--
-			monthAge = lastYear + monthNow - monthDob
-		}
+    if (dateNow >= dateDob) {
+      dateAge = dateNow - dateDob;
+    } else {
+      monthAge--;
+      dateAge = lastMonths + dateNow - dateDob;
 
-		if (dateNow >= dateDob) {
-			dateAge = dateNow - dateDob
-		} else {
-			monthAge--
-			dateAge = lastMonths + dateNow - dateDob
+      if (monthAge < 0) {
+        monthAge = 11;
+        yearAge--;
+      }
+    }
 
-			if (monthAge < 0) {
-				monthAge = 11
-				yearAge--
-			}
-		}
+    const age = {
+      years: yearAge,
+      months: monthAge,
+      days: dateAge,
+    };
 
-		const age = {
-			years: yearAge,
-			months: monthAge,
-			days: dateAge,
-		}
+    return `${yearAge} ${year} ${monthAge} ${month} ${dateAge} ${day}`;
+  };
 
-		return `${yearAge} ${year} ${monthAge} ${month} ${dateAge} ${day}`
-	}
+  function date2Thai(
+    srcDate: Date,
+    isFullMonth: boolean = false,
+    isTime: boolean = false
+  ) {
+    if (srcDate == null) {
+      return null;
+      `
+    `;
+    }
+    const date = new Date(srcDate);
+    const isValidDate = Boolean(+date);
+    if (!isValidDate) return srcDate.toString();
+    if (isValidDate && date.getFullYear() < 1000) return srcDate.toString();
+    const fullMonthThai = [
+      "มกราคม",
+      "กุมภาพันธ์",
+      "มีนาคม",
+      "เมษายน",
+      "พฤษภาคม",
+      "มิถุนายน",
+      "กรกฎาคม",
+      "สิงหาคม",
+      "กันยายน",
+      "ตุลาคม",
+      "พฤศจิกายน",
+      "ธันวาคม",
+    ];
+    const abbrMonthThai = [
+      "ม.ค.",
+      "ก.พ.",
+      "มี.ค.",
+      "เม.ย.",
+      "พ.ค.",
+      "มิ.ย.",
+      "ก.ค.",
+      "ส.ค.",
+      "ก.ย.",
+      "ต.ค.",
+      "พ.ย.",
+      "ธ.ค.",
+    ];
+    let dstYear = 0;
+    if (date.getFullYear() > 2500) {
+      dstYear = date.getFullYear();
+    } else {
+      dstYear = date.getFullYear() + 543;
+    }
+    let dstMonth = "";
+    if (isFullMonth) {
+      dstMonth = fullMonthThai[date.getMonth()];
+    } else {
+      dstMonth = abbrMonthThai[date.getMonth()];
+    }
+    let dstTime = "";
+    if (isTime) {
+      const H = date.getHours().toString().padStart(2, "0");
+      const M = date.getMinutes().toString().padStart(2, "0");
+      // const S = date.getSeconds().toString().padStart(2, "0")
+      // dstTime = " " + H + ":" + M + ":" + S + " น."
+      dstTime = " " + H + ":" + M + " น.";
+    }
+    return (
+      date.getDate().toString().padStart(2, "0") +
+      " " +
+      dstMonth +
+      " " +
+      dstYear +
+      dstTime
+    );
+  }
 
-	function date2Thai(srcDate: Date, isFullMonth: boolean = false, isTime: boolean = false) {
-		if (srcDate == null) {
-			return null
-			;`
-    `
-		}
-		const date = new Date(srcDate)
-		const isValidDate = Boolean(+date)
-		if (!isValidDate) return srcDate.toString()
-		if (isValidDate && date.getFullYear() < 1000) return srcDate.toString()
-		const fullMonthThai = ["มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม"]
-		const abbrMonthThai = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."]
-		let dstYear = 0
-		if (date.getFullYear() > 2500) {
-			dstYear = date.getFullYear()
-		} else {
-			dstYear = date.getFullYear() + 543
-		}
-		let dstMonth = ""
-		if (isFullMonth) {
-			dstMonth = fullMonthThai[date.getMonth()]
-		} else {
-			dstMonth = abbrMonthThai[date.getMonth()]
-		}
-		let dstTime = ""
-		if (isTime) {
-			const H = date.getHours().toString().padStart(2, "0")
-			const M = date.getMinutes().toString().padStart(2, "0")
-			// const S = date.getSeconds().toString().padStart(2, "0")
-			// dstTime = " " + H + ":" + M + ":" + S + " น."
-			dstTime = " " + H + ":" + M + " น."
-		}
-		return date.getDate().toString().padStart(2, "0") + " " + dstMonth + " " + dstYear + dstTime
-	}
+  function dateThai(
+    srcDate: Date,
+    isFullMonth: boolean = true,
+    isTime: boolean = false
+  ) {
+    if (srcDate == null) {
+      return null;
+      `
+    `;
+    }
+    const date = new Date(srcDate);
+    const isValidDate = Boolean(+date);
+    if (!isValidDate) return srcDate.toString();
+    if (isValidDate && date.getFullYear() < 1000) return srcDate.toString();
+    const fullMonthThai = [
+      "มกราคม",
+      "กุมภาพันธ์",
+      "มีนาคม",
+      "เมษายน",
+      "พฤษภาคม",
+      "มิถุนายน",
+      "กรกฎาคม",
+      "สิงหาคม",
+      "กันยายน",
+      "ตุลาคม",
+      "พฤศจิกายน",
+      "ธันวาคม",
+    ];
+    const abbrMonthThai = [
+      "ม.ค.",
+      "ก.พ.",
+      "มี.ค.",
+      "เม.ย.",
+      "พ.ค.",
+      "มิ.ย.",
+      "ก.ค.",
+      "ส.ค.",
+      "ก.ย.",
+      "ต.ค.",
+      "พ.ย.",
+      "ธ.ค.",
+    ];
+    let dstYear = 0;
+    if (date.getFullYear() > 2500) {
+      dstYear = date.getFullYear();
+    } else {
+      dstYear = date.getFullYear() + 543;
+    }
+    let dstMonth = "";
+    if (isFullMonth) {
+      dstMonth = fullMonthThai[date.getMonth()];
+    } else {
+      dstMonth = abbrMonthThai[date.getMonth()];
+    }
+    let dstTime = "";
+    if (isTime) {
+      const H = date.getHours().toString().padStart(2, "0");
+      const M = date.getMinutes().toString().padStart(2, "0");
+      // const S = date.getSeconds().toString().padStart(2, "0")
+      // dstTime = " " + H + ":" + M + ":" + S + " น."
+      dstTime = " " + H + ":" + M + " น.";
+    }
+    return (
+      date.getDate().toString().padStart(2, "0") +
+      " " +
+      dstMonth +
+      " " +
+      dstYear +
+      dstTime
+    );
+  }
 
-	function dateThai(srcDate: Date, isFullMonth: boolean = true, isTime: boolean = false) {
-		if (srcDate == null) {
-			return null
-			;`
-    `
-		}
-		const date = new Date(srcDate)
-		const isValidDate = Boolean(+date)
-		if (!isValidDate) return srcDate.toString()
-		if (isValidDate && date.getFullYear() < 1000) return srcDate.toString()
-		const fullMonthThai = ["มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม"]
-		const abbrMonthThai = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."]
-		let dstYear = 0
-		if (date.getFullYear() > 2500) {
-			dstYear = date.getFullYear()
-		} else {
-			dstYear = date.getFullYear() + 543
-		}
-		let dstMonth = ""
-		if (isFullMonth) {
-			dstMonth = fullMonthThai[date.getMonth()]
-		} else {
-			dstMonth = abbrMonthThai[date.getMonth()]
-		}
-		let dstTime = ""
-		if (isTime) {
-			const H = date.getHours().toString().padStart(2, "0")
-			const M = date.getMinutes().toString().padStart(2, "0")
-			// const S = date.getSeconds().toString().padStart(2, "0")
-			// dstTime = " " + H + ":" + M + ":" + S + " น."
-			dstTime = " " + H + ":" + M + " น."
-		}
-		return date.getDate().toString().padStart(2, "0") + " " + dstMonth + " " + dstYear + dstTime
-	}
+  function dateMonth2Thai(srcDate: Date, isFullMonth = false, isTime = false) {
+    if (!srcDate) return srcDate;
+    const date = new Date(srcDate);
+    const isValidDate = Boolean(+date);
+    if (!isValidDate) return srcDate;
+    if (isValidDate && date.getFullYear() < 1000) return srcDate;
+    const fullMonthThai = [
+      "มกราคม",
+      "กุมภาพันธ์",
+      "มีนาคม",
+      "เมษายน",
+      "พฤษภาคม",
+      "มิถุนายน",
+      "กรกฎาคม",
+      "สิงหาคม",
+      "กันยายน",
+      "ตุลาคม",
+      "พฤศจิกายน",
+      "ธันวาคม",
+    ];
+    const abbrMonthThai = [
+      "ม.ค.",
+      "ก.พ.",
+      "มี.ค.",
+      "เม.ย.",
+      "พ.ค.",
+      "มิ.ย.",
+      "ก.ค.",
+      "ส.ค.",
+      "ก.ย.",
+      "ต.ค.",
+      "พ.ย.",
+      "ธ.ค.",
+    ];
+    let dstYear = 0;
+    if (date.getFullYear() > 2500) {
+      dstYear = date.getFullYear();
+    } else {
+      dstYear = date.getFullYear() + 543;
+    }
+    let dstMonth = "";
+    if (isFullMonth) {
+      dstMonth = fullMonthThai[date.getMonth()];
+    } else {
+      dstMonth = abbrMonthThai[date.getMonth()];
+    }
+    let dstTime = "";
+    if (isTime) {
+      const H = date.getHours().toString().padStart(2, "0");
+      const M = date.getMinutes().toString().padStart(2, "0");
+      // const S = date.getSeconds().toString().length === 1 ? "0" + date.getSeconds() : date.getSeconds()
+      // dstTime = " " + H + ":" + M + ":" + S + " น."
+      dstTime = " " + H + ":" + M + " น.";
+    }
+    return date.getDate().toString().padStart(2, "0") + " " + dstMonth;
+  }
 
-	function dateMonth2Thai(srcDate: Date, isFullMonth = false, isTime = false) {
-		if (!srcDate) return srcDate
-		const date = new Date(srcDate)
-		const isValidDate = Boolean(+date)
-		if (!isValidDate) return srcDate
-		if (isValidDate && date.getFullYear() < 1000) return srcDate
-		const fullMonthThai = ["มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม"]
-		const abbrMonthThai = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."]
-		let dstYear = 0
-		if (date.getFullYear() > 2500) {
-			dstYear = date.getFullYear()
-		} else {
-			dstYear = date.getFullYear() + 543
-		}
-		let dstMonth = ""
-		if (isFullMonth) {
-			dstMonth = fullMonthThai[date.getMonth()]
-		} else {
-			dstMonth = abbrMonthThai[date.getMonth()]
-		}
-		let dstTime = ""
-		if (isTime) {
-			const H = date.getHours().toString().padStart(2, "0")
-			const M = date.getMinutes().toString().padStart(2, "0")
-			// const S = date.getSeconds().toString().length === 1 ? "0" + date.getSeconds() : date.getSeconds()
-			// dstTime = " " + H + ":" + M + ":" + S + " น."
-			dstTime = " " + H + ":" + M + " น."
-		}
-		return date.getDate().toString().padStart(2, "0") + " " + dstMonth
-	}
+  function monthYear2Thai(month: number, year: number, isFullMonth = false) {
+    const date = new Date(`${year}-${month + 1}-1`);
+    const fullMonthThai = [
+      "มกราคม",
+      "กุมภาพันธ์",
+      "มีนาคม",
+      "เมษายน",
+      "พฤษภาคม",
+      "มิถุนายน",
+      "กรกฎาคม",
+      "สิงหาคม",
+      "กันยายน",
+      "ตุลาคม",
+      "พฤศจิกายน",
+      "ธันวาคม",
+    ];
+    const abbrMonthThai = [
+      "ม.ค.",
+      "ก.พ.",
+      "มี.ค.",
+      "เม.ย.",
+      "พ.ค.",
+      "มิ.ย.",
+      "ก.ค.",
+      "ส.ค.",
+      "ก.ย.",
+      "ต.ค.",
+      "พ.ย.",
+      "ธ.ค.",
+    ];
+    let dstYear = 0;
+    if (date.getFullYear() > 2500) {
+      dstYear = date.getFullYear();
+    } else {
+      dstYear = date.getFullYear() + 543;
+    }
+    let dstMonth = "";
+    if (isFullMonth) {
+      dstMonth = fullMonthThai[date.getMonth()];
+    } else {
+      dstMonth = abbrMonthThai[date.getMonth()];
+    }
+    return dstMonth + " " + dstYear;
+  }
 
-	function monthYear2Thai(month: number, year: number, isFullMonth = false) {
-		const date = new Date(`${year}-${month + 1}-1`)
-		const fullMonthThai = ["มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม"]
-		const abbrMonthThai = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."]
-		let dstYear = 0
-		if (date.getFullYear() > 2500) {
-			dstYear = date.getFullYear()
-		} else {
-			dstYear = date.getFullYear() + 543
-		}
-		let dstMonth = ""
-		if (isFullMonth) {
-			dstMonth = fullMonthThai[date.getMonth()]
-		} else {
-			dstMonth = abbrMonthThai[date.getMonth()]
-		}
-		return dstMonth + " " + dstYear
-	}
+  function dateToISO(date: Date) {
+    return (
+      date.getFullYear() +
+      "-" +
+      appendLeadingZeroes(date.getMonth() + 1) +
+      "-" +
+      appendLeadingZeroes(date.getDate())
+    );
+  }
 
-	function dateToISO(date: Date) {
-		return date.getFullYear() + "-" + appendLeadingZeroes(date.getMonth() + 1) + "-" + appendLeadingZeroes(date.getDate())
-	}
+  function appendLeadingZeroes(n: number) {
+    if (n <= 9) return "0" + n;
+    return n;
+  }
 
-	function appendLeadingZeroes(n: Number) {
-		if (n <= 9) return "0" + n
-		return n
-	}
+  function textToPhone(n: string) {
+    const p = n.substr(0, 3) + "-" + n.substr(3, 3) + "-" + n.substr(6, 4);
+    return p;
+  }
 
-	function textToPhone(n: string) {
-		const p = n.substr(0, 3) + "-" + n.substr(3, 3) + "-" + n.substr(6, 4)
-		return p
-	}
+  function textToFax(n: string) {
+    const p = n.substr(0, 2) + "-" + n.substr(2, 3) + "-" + n.substr(5, 4);
+    return p;
+  }
 
-	function textToFax(n: string) {
-		const p = n.substr(0, 2) + "-" + n.substr(2, 3) + "-" + n.substr(5, 4)
-		return p
-	}
+  const success = (q: any, val: string) => {
+    // useQuasar ไม่สามารถใช้นอกไฟล์ .vue
+    if (val !== "") {
+      return q.notify({
+        message: val,
+        color: "primary",
+        icon: "mdi-information",
+        position: "bottom-right",
+        multiLine: true,
+        timeout: 1000,
+        badgeColor: "positive",
+        classes: "my-notif-class",
+      });
+    }
+  };
 
-	const success = (q: any, val: string) => {
-		// useQuasar ไม่สามารถใช้นอกไฟล์ .vue
-		if (val !== "") {
-			return q.notify({
-				message: val,
-				color: "primary",
-				icon: "mdi-information",
-				position: "bottom-right",
-				multiLine: true,
-				timeout: 1000,
-				badgeColor: "positive",
-				classes: "my-notif-class",
-			})
-		}
-	}
+  const fails = (q: any, val: string) => {
+    // useQuasar ไม่สามารถใช้นอกไฟล์ .vue
+    if (val !== "") {
+      return q.notify({
+        message: val,
+        color: "red",
+        icon: "mdi-information",
+        position: "bottom-right",
+        multiLine: true,
+        timeout: 1000,
+        badgeColor: "positive",
+        classes: "my-notif-class",
+      });
+    }
+  };
 
-	const fails = (q: any, val: string) => {
-		// useQuasar ไม่สามารถใช้นอกไฟล์ .vue
-		if (val !== "") {
-			return q.notify({
-				message: val,
-				color: "red",
-				icon: "mdi-information",
-				position: "bottom-right",
-				multiLine: true,
-				timeout: 1000,
-				badgeColor: "positive",
-				classes: "my-notif-class",
-			})
-		}
-	}
+  function notify(q: any, val: string) {
+    if (val !== "") {
+      q.notify({
+        color: "teal-10",
+        message: val,
+        icon: "mdi-information",
+        position: "bottom-right",
+        multiLine: true,
+        timeout: 7000,
+        actions: [{ label: "ปิด", color: "white", handler: () => {} }],
+      });
+    }
+  }
+  function notifyError(q: any, val: string) {
+    if (val !== "") {
+      q.notify({
+        color: "negative",
+        message: val,
+        icon: "mdi-alert-circle",
+        position: "top",
+        multiLine: true,
+        timeout: 12000,
+        actions: [{ label: "ปิด", color: "white", handler: () => {} }],
+      });
+    }
+  }
 
-	function notify(q: any, val: string) {
-		if (val !== "") {
-			q.notify({
-				color: "teal-10",
-				message: val,
-				icon: "mdi-information",
-				position: "bottom-right",
-				multiLine: true,
-				timeout: 7000,
-				actions: [{ label: "ปิด", color: "white", handler: () => {} }],
-			})
-		}
-	}
-	function notifyError(q: any, val: string) {
-		if (val !== "") {
-			q.notify({
-				color: "negative",
-				message: val,
-				icon: "mdi-alert-circle",
-				position: "top",
-				multiLine: true,
-				timeout: 12000,
-				actions: [{ label: "ปิด", color: "white", handler: () => {} }],
-			})
-		}
-	}
+  const messageError = (q: any, e: any = "") => {
+    if (e.response !== undefined) {
+      if (e.response.data.status !== undefined) {
+        if (e.response.data.status == 401) {
+          //invalid_token
+          q.dialog({
+            component: CustomComponent,
+            componentProps: {
+              title: `พบข้อผิดพลาด`,
+              message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
+              icon: "warning",
+              color: "red",
+              onlycancel: true,
+            },
+          });
+        } else {
+          q.dialog({
+            component: CustomComponent,
+            componentProps: {
+              title: `พบข้อผิดพลาด`,
+              message: `${e.response.data.message}`,
+              icon: "warning",
+              color: "red",
+              onlycancel: true,
+            },
+          });
+        }
+      } else {
+        if (e.response.status == 401) {
+          //invalid_token
+          q.dialog({
+            component: CustomComponent,
+            componentProps: {
+              title: `พบข้อผิดพลาด`,
+              message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
+              icon: "warning",
+              color: "red",
+              onlycancel: true,
+            },
+          });
+        } else {
+          q.dialog({
+            component: CustomComponent,
+            componentProps: {
+              title: `พบข้อผิดพลาด`,
+              message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
+              icon: "warning",
+              color: "red",
+              onlycancel: true,
+            },
+          });
+        }
+      }
+    } else {
+      q.dialog({
+        component: CustomComponent,
+        componentProps: {
+          title: `พบข้อผิดพลาด`,
+          message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
+          icon: "warning",
+          color: "red",
+          onlycancel: true,
+        },
+      });
+    }
+  };
 
-	const messageError = (q: any, e: any = "") => {
-		if (e.response !== undefined) {
-			if (e.response.data.status !== undefined) {
-				if (e.response.data.status == 401) {
-					//invalid_token
-					q.dialog({
-						component: CustomComponent,
-						componentProps: {
-							title: `พบข้อผิดพลาด`,
-							message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
-							icon: "warning",
-							color: "red",
-							onlycancel: true,
-						},
-					})
-				} else {
-					q.dialog({
-						component: CustomComponent,
-						componentProps: {
-							title: `พบข้อผิดพลาด`,
-							message: `${e.response.data.message}`,
-							icon: "warning",
-							color: "red",
-							onlycancel: true,
-						},
-					})
-				}
-			} else {
-				if (e.response.status == 401) {
-					//invalid_token
-					q.dialog({
-						component: CustomComponent,
-						componentProps: {
-							title: `พบข้อผิดพลาด`,
-							message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
-							icon: "warning",
-							color: "red",
-							onlycancel: true,
-						},
-					})
-				} else {
-					q.dialog({
-						component: CustomComponent,
-						componentProps: {
-							title: `พบข้อผิดพลาด`,
-							message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
-							icon: "warning",
-							color: "red",
-							onlycancel: true,
-						},
-					})
-				}
-			}
-		} else {
-			q.dialog({
-				component: CustomComponent,
-				componentProps: {
-					title: `พบข้อผิดพลาด`,
-					message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
-					icon: "warning",
-					color: "red",
-					onlycancel: true,
-				},
-			})
-		}
-	}
+  const dialogMessage = (
+    // ไม่เอาใส่ undefined
+    q: any,
+    title: string | undefined,
+    message: string | undefined,
+    icon: string | undefined,
+    textOk: string | undefined,
+    color: string | undefined,
+    ok?: Function | undefined,
+    cancel?: Function | undefined,
+    onlycancel: Boolean = false
+  ) => {
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: title,
+        message: message,
+        icon: icon,
+        color: color,
+        textOk: textOk,
+        onlycancel: onlycancel,
+      },
+    })
+      .onOk(() => {
+        if (ok != undefined) ok();
+      })
+      .onCancel(() => {
+        if (cancel != undefined) cancel();
+      });
+  };
 
-	const dialogMessage = (
-		// ไม่เอาใส่ undefined
-		q: any,
-		title: string | undefined,
-		message: string | undefined,
-		icon: string | undefined,
-		textOk: string | undefined,
-		color: string | undefined,
-		ok?: Function | undefined,
-		cancel?: Function | undefined,
-		onlycancel: Boolean = false
-	) => {
-		q.dialog({
-			component: CustomComponent,
-			componentProps: {
-				title: title,
-				message: message,
-				icon: icon,
-				color: color,
-				textOk: textOk,
-				onlycancel: onlycancel,
-			},
-		})
-			.onOk(() => {
-				if (ok != undefined) ok()
-			})
-			.onCancel(() => {
-				if (cancel != undefined) cancel()
-			})
-	}
+  const showLoader = () => {
+    Loading.show({
+      spinner: QSpinnerCube,
+      spinnerSize: 140,
+      spinnerColor: "primary",
+      backgroundColor: "white",
+    });
+  };
 
-	const showLoader = () => {
-		Loading.show({
-			spinner: QSpinnerCube,
-			spinnerSize: 140,
-			spinnerColor: "primary",
-			backgroundColor: "white",
-		})
-	}
+  const hideLoader = () => {
+    Loading.hide();
+  };
 
-	const hideLoader = () => {
-		Loading.hide()
-	}
+  function modalDelete(
+    q: any,
+    title: string,
+    message: string,
+    ok: Function,
+    cancel?: Function
+  ) {
+    q.dialog({
+      title: `<span class="text-red">${title}</span>`,
+      message: `<span class="text-black">${message}</span>`,
+      cancel: {
+        flat: true,
+        color: "grey-14",
+      },
+      ok: {
+        color: "red-6",
+      },
+      focus: "none",
+      persistent: true,
+      html: true,
+    })
+      .onOk(() => {
+        ok();
+      })
+      .onCancel(() => {
+        if (cancel != undefined) cancel();
+      })
+      .onDismiss(() => {});
+  }
 
-	function modalDelete(q: any, title: string, message: string, ok: Function, cancel?: Function) {
-		q.dialog({
-			title: `<span class="text-red">${title}</span>`,
-			message: `<span class="text-black">${message}</span>`,
-			cancel: {
-				flat: true,
-				color: "grey-14",
-			},
-			ok: {
-				color: "red-6",
-			},
-			focus: "none",
-			persistent: true,
-			html: true,
-		})
-			.onOk(() => {
-				ok()
-			})
-			.onCancel(() => {
-				if (cancel != undefined) cancel()
-			})
-			.onDismiss(() => {})
-	}
+  function modalConfirm(
+    q: any,
+    title: string,
+    message: string,
+    ok: Function,
+    cancel?: Function
+  ) {
+    q.dialog({
+      title: `<span class="text-primary">${title}</span>`,
+      message: `<span class="text-black">${message}</span>`,
+      cancel: {
+        flat: true,
+        color: "grey",
+      },
+      ok: {
+        color: "primary",
+      },
+      focus: "none",
+      persistent: true,
+      html: true,
+    })
+      .onOk(() => {
+        ok();
+      })
+      .onCancel(() => {
+        if (cancel != undefined) cancel();
+      })
+      .onDismiss(() => {});
+  }
 
-	function modalConfirm(q: any, title: string, message: string, ok: Function, cancel?: Function) {
-		q.dialog({
-			title: `<span class="text-primary">${title}</span>`,
-			message: `<span class="text-black">${message}</span>`,
-			cancel: {
-				flat: true,
-				color: "grey",
-			},
-			ok: {
-				color: "primary",
-			},
-			focus: "none",
-			persistent: true,
-			html: true,
-		})
-			.onOk(() => {
-				ok()
-			})
-			.onCancel(() => {
-				if (cancel != undefined) cancel()
-			})
-			.onDismiss(() => {})
-	}
+  function modalWarning(q: any, title: string, message: string, ok?: Function) {
+    // q.dialog({
+    //   title: `<span class="text-red">${title}</span>`,
+    //   message: `<span class="text-black">${message}</span>`,
+    //   ok: {
+    //     push: true,
+    //     color: "primary",
+    //   },
+    //   focus: "none",
+    //   persistent: true,
+    //   html: true,
+    // })
+    //   .onOk(() => {
+    //     if (ok != undefined) ok();
+    //   })
+    //   .onCancel(() => {})
+    //   .onDismiss(() => {});
 
-	function modalWarning(q: any, title: string, message: string, ok?: Function) {
-		// q.dialog({
-		//   title: `<span class="text-red">${title}</span>`,
-		//   message: `<span class="text-black">${message}</span>`,
-		//   ok: {
-		//     push: true,
-		//     color: "primary",
-		//   },
-		//   focus: "none",
-		//   persistent: true,
-		//   html: true,
-		// })
-		//   .onOk(() => {
-		//     if (ok != undefined) ok();
-		//   })
-		//   .onCancel(() => {})
-		//   .onDismiss(() => {});
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: title,
+        message: message,
+        icon: "warning",
+        color: "warning",
+        onlycancel: true,
+      },
+    });
+  }
 
-		q.dialog({
-			component: CustomComponent,
-			componentProps: {
-				title: title,
-				message: message,
-				icon: "warning",
-				color: "warning",
-				onlycancel: true,
-			},
-		})
-	}
+  function modalError(q: any, title: string, message: string, ok?: Function) {
+    // q.dialog({
+    //   title: `<span class="text-red">${title}</span>`,
+    //   message: `<span class="text-black">${message}</span>`,
+    //   ok: {
+    //     push: true,
+    //     color: "primary",
+    //   },
+    //   focus: "none",
+    //   persistent: true,
+    //   html: true,
+    // })
+    //   .onOk(() => {
+    //     if (ok != undefined) ok();
+    //   })
+    //   .onCancel(() => {})
+    //   .onDismiss(() => {});
 
-	function modalError(q: any, title: string, message: string, ok?: Function) {
-		// q.dialog({
-		//   title: `<span class="text-red">${title}</span>`,
-		//   message: `<span class="text-black">${message}</span>`,
-		//   ok: {
-		//     push: true,
-		//     color: "primary",
-		//   },
-		//   focus: "none",
-		//   persistent: true,
-		//   html: true,
-		// })
-		//   .onOk(() => {
-		//     if (ok != undefined) ok();
-		//   })
-		//   .onCancel(() => {})
-		//   .onDismiss(() => {});
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: title,
+        message: message,
+        icon: "warning",
+        color: "red",
+        onlycancel: true,
+      },
+    });
+  }
 
-		q.dialog({
-			component: CustomComponent,
-			componentProps: {
-				title: title,
-				message: message,
-				icon: "warning",
-				color: "red",
-				onlycancel: true,
-			},
-		})
-	}
+  const dateText = (val: Date) => {
+    if (val != null) {
+      return date2Thai(val);
+    } else {
+      return "-";
+    }
+  };
 
-	const dateText = (val: Date) => {
-		if (val != null) {
-			return date2Thai(val)
-		} else {
-			return "-"
-		}
-	}
+  /**
+   * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
+   * @param val ช่วงวันที่
+   */
+  const dateThaiRange = (val: [Date, Date]) => {
+    if (val === null) {
+      return "";
+    } else if (date2Thai(val[0]) === date2Thai(val[1])) {
+      return `${date2Thai(val[0])}`;
+    } else {
+      return `${date2Thai(val[0])} - ${date2Thai(val[1])}`;
+    }
+  };
 
-	/**
-	 * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
-	 * @param val ช่วงวันที่
-	 */
-	const dateThaiRange = (val: [Date, Date]) => {
-		if (val === null) {
-			return ""
-		} else if (date2Thai(val[0]) === date2Thai(val[1])) {
-			return `${date2Thai(val[0])}`
-		} else {
-			return `${date2Thai(val[0])} - ${date2Thai(val[1])}`
-		}
-	}
+  const weekThai = (val: Number) => {
+    switch (val) {
+      case 0:
+        return "วันอาทิตย์";
+      case 1:
+        return "วันจันทร์";
+      case 2:
+        return "วันอังคาร";
+      case 3:
+        return "วันพุธ";
+      case 4:
+        return "วันพฤหัสบดี";
+      case 5:
+        return "วันศุกร์";
+      case 6:
+        return "วันเสาร์";
+      default:
+        return "-";
+    }
+  };
 
-	const weekThai = (val: Number) => {
-		switch (val) {
-			case 0:
-				return "วันอาทิตย์"
-			case 1:
-				return "วันจันทร์"
-			case 2:
-				return "วันอังคาร"
-			case 3:
-				return "วันพุธ"
-			case 4:
-				return "วันพฤหัสบดี"
-			case 5:
-				return "วันศุกร์"
-			case 6:
-				return "วันเสาร์"
-			default:
-				return "-"
-		}
-	}
+  const genColor15 = (val: number) => {
+    val = val % 15;
+    switch (val) {
+      case 1:
+        return "pink";
+      case 2:
+        return "purple";
+      case 3:
+        return "deep-purple";
+      case 4:
+        return "indigo";
+      case 5:
+        return "blue";
+      case 6:
+        return "light-blue";
+      case 7:
+        return "cyan";
+      case 8:
+        return "teal";
+      case 9:
+        return "green";
+      case 10:
+        return "light-green";
+      case 11:
+        return "amber";
+      case 12:
+        return "orange";
+      case 13:
+        return "deep-orange";
+      case 14:
+        return "brown";
+      case 0:
+        return "blue-grey";
+      default:
+        return "";
+    }
+  };
 
-	const genColor15 = (val: number) => {
-		val = val % 15
-		switch (val) {
-			case 1:
-				return "pink"
-			case 2:
-				return "purple"
-			case 3:
-				return "deep-purple"
-			case 4:
-				return "indigo"
-			case 5:
-				return "blue"
-			case 6:
-				return "light-blue"
-			case 7:
-				return "cyan"
-			case 8:
-				return "teal"
-			case 9:
-				return "green"
-			case 10:
-				return "light-green"
-			case 11:
-				return "amber"
-			case 12:
-				return "orange"
-			case 13:
-				return "deep-orange"
-			case 14:
-				return "brown"
-			case 0:
-				return "blue-grey"
-			default:
-				return ""
-		}
-	}
+  const typeCategoryExam = (val: string) => {
+    switch (val) {
+      case "hygiene":
+        return "สำนักอนามัย";
+      case "physician":
+        return "สำนักการแพทย์";
+      case "city":
+        return "สำนักผังเมือง";
+      case "culture":
+        return "สำนักวัฒนธรรม กีฬา และการท่องเที่ยว";
+      default:
+        return "-";
+    }
+  };
 
-	const typeCategoryExam = (val: string) => {
-		switch (val) {
-			case "hygiene":
-				return "สำนักอนามัย"
-			case "physician":
-				return "สำนักการแพทย์"
-			case "city":
-				return "สำนักผังเมือง"
-			case "culture":
-				return "สำนักวัฒนธรรม กีฬา และการท่องเที่ยว"
-			default:
-				return "-"
-		}
-	}
+  const typeRetire = (val: string) => {
+    switch (val) {
+      case "retire":
+        return "เกษียณอายุราชการ";
+      case "resign":
+        return "ลาออก";
+      case "transfer":
+        return "ให้โอน";
+      case "death":
+        return "ถึงแก่กรรม";
+      case "layoff":
+        return "ให้ออก";
+      case "discharge":
+        return "ปลดออก";
+      case "dismiss":
+        return "ไล่ออก";
+      case "other":
+        return "อื่นๆ";
+      default:
+        return "-";
+    }
+  };
 
-	const typeRetire = (val: string) => {
-		switch (val) {
-			case "retire":
-				return "เกษียณอายุราชการ"
-			case "resign":
-				return "ลาออก"
-			case "transfer":
-				return "ให้โอน"
-			case "death":
-				return "ถึงแก่กรรม"
-			case "layoff":
-				return "ให้ออก"
-			case "discharge":
-				return "ปลดออก"
-			case "dismiss":
-				return "ไล่ออก"
-			case "other":
-				return "อื่นๆ"
-			default:
-				return "-"
-		}
-	}
+  const typeChangeName = (val: string) => {
+    switch (val) {
+      case "firstName":
+        return "เปลี่ยนชื่อ";
+      case "lastName":
+        return "เปลี่ยนนามสกุล";
+      case "all":
+        return "เปลี่ยนชื่อ-นามสกุล";
+      default:
+        return "-";
+    }
+  };
 
-	const typeChangeName = (val: string) => {
-		switch (val) {
-			case "firstName":
-				return "เปลี่ยนชื่อ"
-			case "lastName":
-				return "เปลี่ยนนามสกุล"
-			case "all":
-				return "เปลี่ยนชื่อ-นามสกุล"
-			default:
-				return "-"
-		}
-	}
+  const statusLeave = (val: string) => {
+    switch (val) {
+      case "waitting":
+        return "รออนุมัติ";
+      case "reject":
+        return "ไม่ผ่านการอนุมัติ";
+      case "approve":
+        return "ผ่านการอนุมัติ";
+      case "cancel":
+        return "ยกเลิก";
+      default:
+        return "-";
+    }
+  };
+  const dialogConfirm = (
+    q: any,
+    ok?: Function,
+    title?: string, // ถ้ามี cancel action ใส่เป็น null
+    desc?: string, // ถ้ามี cancel action ใส่เป็น null
+    cancel?: Function
+  ) => {
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: title && title != null ? title : "ยืนยันการบันทึก",
+        message:
+          desc && desc != null
+            ? desc
+            : "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+        icon: "info",
+        color: "public",
+        textOk: "ตกลง",
+        onlycancel: false,
+      },
+    })
+      .onOk(() => {
+        if (ok) ok();
+      })
+      .onCancel(() => {
+        if (cancel) cancel();
+      });
+  };
 
-	const statusLeave = (val: string) => {
-		switch (val) {
-			case "waitting":
-				return "รออนุมัติ"
-			case "reject":
-				return "ไม่ผ่านการอนุมัติ"
-			case "approve":
-				return "ผ่านการอนุมัติ"
-			case "cancel":
-				return "ยกเลิก"
-			default:
-				return "-"
-		}
-	}
-	const dialogConfirm = (
-		q: any,
-		ok?: Function,
-		title?: string, // ถ้ามี cancel action ใส่เป็น null
-		desc?: string, // ถ้ามี cancel action ใส่เป็น null
-		cancel?: Function
-	  ) => {
-		q.dialog({
-		  component: CustomComponent,
-		  componentProps: {
-			title: title && title != null ? title : "ยืนยันการบันทึก",
-			message:
-			  desc && desc != null
-				? desc
-				: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-			icon: "info",
-			color: "public",
-			textOk: "ตกลง",
-			onlycancel: false,
-		  },
-		})
-		  .onOk(() => {
-			if (ok) ok();
-		  })
-		  .onCancel(() => {
-			if (cancel) cancel();
-		  });
-	  };
-	
-	  const dialogRemove = (
-		q: any,
-		ok?: Function,
-		title?: string, // ถ้ามี cancel action ใส่เป็น null
-		desc?: string, // ถ้ามี cancel action ใส่เป็น null
-		cancel?: Function
-	  ) => {
-		q.dialog({
-		  component: CustomComponent,
-		  componentProps: {
-			title: title && title != null ? title : "ยืนยันการลบข้อมูล",
-			message:
-			  desc && desc != null
-				? desc
-				: "ต้องการยืนยันการลบข้อมูลนี้ใช่หรือไม่?",
-			icon: "delete",
-			color: "red",
-			textOk: "ตกลง",
-			onlycancel: false,
-		  },
-		})
-		  .onOk(() => {
-			if (ok) ok();
-		  })
-		  .onCancel(() => {
-			if (cancel) cancel();
-		  });
-	  };
-	return {
-		calAge,
-		date2Thai,
-		dateThai,
-		dateToISO,
-		notify,
-		notifyError,
-		dateText,
-		monthYear2Thai,
-		dateMonth2Thai,
-		success,
-		weekThai,
-		genColor15,
-		typeCategoryExam,
-		textToPhone,
-		textToFax,
-		dateThaiRange,
-		modalDelete,
-		modalConfirm,
-		modalError,
-		dialogMessage,
-		messageError,
-		showLoader,
-		hideLoader,
-		typeRetire,
-		typeChangeName,
-		statusLeave,
-		modalWarning,
-		fails,
-		dialogConfirm,
-		dialogRemove
+  const dialogRemove = (
+    q: any,
+    ok?: Function,
+    title?: string, // ถ้ามี cancel action ใส่เป็น null
+    desc?: string, // ถ้ามี cancel action ใส่เป็น null
+    cancel?: Function
+  ) => {
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: title && title != null ? title : "ยืนยันการลบข้อมูล",
+        message:
+          desc && desc != null
+            ? desc
+            : "ต้องการยืนยันการลบข้อมูลนี้ใช่หรือไม่?",
+        icon: "delete",
+        color: "red",
+        textOk: "ตกลง",
+        onlycancel: false,
+      },
+    })
+      .onOk(() => {
+        if (ok) ok();
+      })
+      .onCancel(() => {
+        if (cancel) cancel();
+      });
+  };
 
-	}
-})
+  /**
+   * ฟังก์ชั่นเช็คและแปลงตัวเลขก่อนส่งไป convert เป็นข้อความที่ฟังก์ชั่น arabicNumberToText
+   * @param Number จำนวนเงินเดือน 
+   * @returns ตัวเลขที่ถูกแปลง format แล้ว
+   */
+  function CheckNumber(Number: any) {
+    let decimal = false;
+    Number = Number.toString();
+    Number = Number.replace(/ |,|บาท|฿/gi, "");
+    for (var i = 0; i < Number.length; i++) {
+      if (Number[i] == ".") {
+        decimal = true;
+      }
+    }
+    if (decimal == false) {
+      Number = Number + ".00";
+    }
+    return Number;
+  }
+
+  /**
+   * ฟังก์ชั่น convert จำนวนเงินเดือนที่เป็นตัวเลขมาเป็นข้อความตัวหนังสือ
+   * @param numberVal จำนวนเงินเดือน
+   * @returns เงินเดือนแบบข้อความ (คำอ่าน)
+   */
+  function arabicNumberToText(numberVal: any) {
+    var numberVal = CheckNumber(numberVal);
+    const NumberArray = [
+      "ศูนย์",
+      "หนึ่ง",
+      "สอง",
+      "สาม",
+      "สี่",
+      "ห้า",
+      "หก",
+      "เจ็ด",
+      "แปด",
+      "เก้า",
+      "สิบ",
+    ];
+
+    const DigitArray = ["", "สิบ", "ร้อย", "พัน", "หมื่น", "แสน", "ล้าน"];
+
+    let bahtText = "";
+    if (isNaN(numberVal)) {
+      return "ข้อมูลนำเข้าไม่ถูกต้อง";
+    } else {
+      if (numberVal - 0 > 9999999.9999) {
+        return "ข้อมูลนำเข้าเกินขอบเขตที่ตั้งไว้";
+      } else {
+        numberVal = numberVal.split(".");
+        if (numberVal[1].length > 0) {
+          numberVal[1] = numberVal[1].substring(0, 2);
+        }
+
+        const numberValLen = numberVal[0].length - 0;
+        for (let i = 0; i < numberValLen; i++) {
+          const tmp = numberVal[0].substring(i, i + 1) - 0;
+          if (tmp != 0) {
+            if (i == numberValLen - 1 && tmp == 1) {
+              bahtText += "เอ็ด";
+            } else if (i == numberValLen - 2 && tmp == 2) {
+              bahtText += "ยี่";
+            } else if (i == numberValLen - 2 && tmp == 1) {
+              bahtText += "";
+            } else {
+              bahtText += NumberArray[tmp];
+            }
+            bahtText += DigitArray[numberValLen - i - 1];
+          }
+        }
+        bahtText += "บาท";
+        if (numberVal[1] == "0" || numberVal[1] == "00") {
+          bahtText += "ถ้วน";
+        } else {
+          let DecimalLen = numberVal[1].length - 0;
+          for (var i = 0; i < DecimalLen; i++) {
+            var tmp = numberVal[1].substring(i, i + 1) - 0;
+            if (tmp != 0) {
+              if (i == DecimalLen - 1 && tmp == 1) {
+                bahtText += "เอ็ด";
+              } else if (i == DecimalLen - 2 && tmp == 2) {
+                bahtText += "ยี่";
+              } else if (i == DecimalLen - 2 && tmp == 1) {
+                bahtText += "";
+              } else {
+                bahtText += NumberArray[tmp];
+              }
+              bahtText += DigitArray[DecimalLen - i - 1];
+            }
+          }
+          bahtText += "สตางค์";
+        }
+        return bahtText;
+      }
+    }
+  }
+
+  return {
+    calAge,
+    date2Thai,
+    dateThai,
+    dateToISO,
+    notify,
+    notifyError,
+    dateText,
+    monthYear2Thai,
+    dateMonth2Thai,
+    success,
+    weekThai,
+    genColor15,
+    typeCategoryExam,
+    textToPhone,
+    textToFax,
+    dateThaiRange,
+    modalDelete,
+    modalConfirm,
+    modalError,
+    dialogMessage,
+    messageError,
+    showLoader,
+    hideLoader,
+    typeRetire,
+    typeChangeName,
+    statusLeave,
+    modalWarning,
+    fails,
+    dialogConfirm,
+    dialogRemove,
+    arabicNumberToText,
+  };
+});