Merge branch 'develop' of https://github.com/Frappet/BMA-EHR-USER into develop

src/modules/05_leave/components/DialogDetail.vue

@@ -1,241 +1,270 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue"
-import { useQuasar } from "quasar"
-import http from "@/plugins/http"
-import config from "@/app.config"
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** import type*/
-import type { FremDetail, FormDelete, FormDeleteRef, FromCancelDetail } from "@/modules/05_leave/interface/response/leave"
+import type {
+  FremDetail,
+  FormDelete,
+  FormDeleteRef,
+  FromCancelDetail,
+} from "@/modules/05_leave/interface/response/leave";
 
 /** import componest*/
-import FormLeave from "@/modules/05_leave/components/formDetail/formLeave.vue"
-import FormChildbirth from "@/modules/05_leave/components/formDetail/formChildbirth.vue"
-import FormHoliday from "@/modules/05_leave/components/formDetail/formHoliday.vue"
-import FormUpasom from "@/modules/05_leave/components/formDetail/formUpasom.vue"
-import FormHajj from "@/modules/05_leave/components/formDetail/formHajj.vue"
-import FormCheckSelect from "@/modules/05_leave/components/formDetail/formCheckSelect.vue"
-import FormStudy from "@/modules/05_leave/components/formDetail/formStudy.vue"
-import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/formLeaveToTraining.vue"
-import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue"
-import FormSpouse from "@/modules/05_leave/components/formDetail/formSpouse.vue"
-import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue"
-import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue"
+import FormLeave from "@/modules/05_leave/components/formDetail/formLeave.vue";
+import FormChildbirth from "@/modules/05_leave/components/formDetail/formChildbirth.vue";
+import FormHoliday from "@/modules/05_leave/components/formDetail/formHoliday.vue";
+import FormUpasom from "@/modules/05_leave/components/formDetail/formUpasom.vue";
+import FormHajj from "@/modules/05_leave/components/formDetail/formHajj.vue";
+import FormCheckSelect from "@/modules/05_leave/components/formDetail/formCheckSelect.vue";
+import FormStudy from "@/modules/05_leave/components/formDetail/formStudy.vue";
+import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/formLeaveToTraining.vue";
+import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue";
+import FormSpouse from "@/modules/05_leave/components/formDetail/formSpouse.vue";
+import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue";
+import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue";
 
 /** import stort*/
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
 
-const dataStore = useLeaveStore()
-const { convertStatud } = dataStore
-const mixin = useCounterMixin()
-const { showLoader, hideLoader, messageError, date2Thai, success, dialogConfirm } = mixin
+const dataStore = useLeaveStore();
+const { convertStatud } = dataStore;
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  success,
+  dialogConfirm,
+} = mixin;
 
-const $q = useQuasar()
+const $q = useQuasar();
 
 const props = defineProps({
-	modal: {
-		type: Boolean,
-		require: true,
-	},
-	leaveId: {
-		type: String,
-		require: true,
-	},
-	onClickClose: {
-		type: Function,
-		require: true,
-	},
-	leaveType: {
-		type: Object,
-		require: true,
-	},
-	leaveStatus: {
-		type: String,
-		require: true,
-	},
-	fetchDataTable: {
-		type: Function,
-		require: true,
-	},
-})
+  modal: {
+    type: Boolean,
+    require: true,
+  },
+  leaveId: {
+    type: String,
+    require: true,
+  },
+  onClickClose: {
+    type: Function,
+    require: true,
+  },
+  leaveType: {
+    type: Object,
+    require: true,
+  },
+  leaveStatus: {
+    type: String,
+    require: true,
+  },
+  fetchDataTable: {
+    type: Function,
+    require: true,
+  },
+});
 
-const titleMain = ref<string>("รายละเอียดการลาของ")
-const titleMainCancle = ref<string>("รายละเอียดการยกเลิกการลาของ")
-const titleName = ref<string>("")
+const titleMain = ref<string>("รายละเอียดการลาของ");
+const titleMainCancle = ref<string>("รายละเอียดการยกเลิกการลาของ");
+const titleName = ref<string>("");
 /**checkForm Form การลา*/
-const checkForm = ref<string>("")
+const checkForm = ref<string>("");
 
 /** Form รายละเอียดข้อมูล*/
 const formData = reactive<FremDetail>({
-	id: "", //Id การยื่นขอลา
-	leaveTypeName: "", // Name ประเภทการลา
-	leaveTypeId: "", //Id ประเภทการลา
-	fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
-	dateSendLeave: new Date(), // วันที่ยืนใบลา
-	status: "", //สถานะการของลา
-	leaveDateStart: new Date(), //วันเริ่มการลา
-	leaveDateEnd: new Date(), //วันสิ้นสุดการลา
-	leaveCount: 0, //จำนวนวันลา
-	leaveWrote: "", //เขียนที่
-	leaveAddress: "", //สถานที่ติดต่อขณะลา
-	leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
-	leaveDetail: "", //รายละเอียดการลา
-	leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
-	leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
-	leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-	leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-	leaveTotal: 0, //จำนวนวันที่ลา(Auto)
-	leavebirthDate: new Date(), //วันเดือนปีเกิด(Auto)
-	leavegovernmentDate: new Date(), //วันที่เข้ารับราชการ(Auto)
-	leaveSalary: 0, //เงินเดือนปัจจุบัน(Auto)
-	leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
-	leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
-	wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-	wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-	restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
-	restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
-	ordainDayStatus: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
-	ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
-	ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
-	ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
-	ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
-	ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
-	ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
-	hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
-	absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-	absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-	absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-	absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-	absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-	studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-	studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-	studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-	studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-	studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-	studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-	studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-	coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
-	coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
-	coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
-	coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
-	coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
-	coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
-	coupleDayStartDateHistory: new Date(), //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
-	coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
-	coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
-	approveStep: "",
-	dear: "",
-})
+  id: "", //Id การยื่นขอลา
+  leaveTypeName: "", // Name ประเภทการลา
+  leaveTypeId: "", //Id ประเภทการลา
+  fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
+  dateSendLeave: new Date(), // วันที่ยืนใบลา
+  status: "", //สถานะการของลา
+  leaveDateStart: new Date(), //วันเริ่มการลา
+  leaveDateEnd: new Date(), //วันสิ้นสุดการลา
+  leaveCount: 0, //จำนวนวันลา
+  leaveWrote: "", //เขียนที่
+  leaveAddress: "", //สถานที่ติดต่อขณะลา
+  leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
+  leaveDetail: "", //รายละเอียดการลา
+  leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
+  leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
+  leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveTotal: 0, //จำนวนวันที่ลา(Auto)
+  leavebirthDate: new Date(), //วันเดือนปีเกิด(Auto)
+  leavegovernmentDate: new Date(), //วันที่เข้ารับราชการ(Auto)
+  leaveSalary: 0, //เงินเดือนปัจจุบัน(Auto)
+  leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
+  leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
+  wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+  wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+  restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
+  restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
+  ordainDayStatus: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
+  ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
+  ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
+  ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
+  ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
+  ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
+  ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
+  hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
+  absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
+  coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
+  coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
+  coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
+  coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
+  coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+  coupleDayStartDateHistory: new Date(), //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
+  coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
+  coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+  approveStep: "",
+  dear: "",
+});
 /** Form รายละเอียดข้อมูล*/
 const formDataCancle = reactive<FromCancelDetail>({
-	id: "",
-	leaveTypeName: "",
-	fullname: "",
-	status: "",
-	leaveDocDelete: "",
-	leaveResonDelete: "",
-	leaveWrote: "",
-	leaveAddress: "",
-	leaveNumber: "",
-	leaveDetail: "",
-	leaveTotal: 0,
-	leaveStartDate: new Date(),
-	leaveEndDate: new Date(),
-})
+  id: "",
+  leaveTypeName: "",
+  fullname: "",
+  status: "",
+  leaveDocDelete: "",
+  leaveResonDelete: "",
+  leaveWrote: "",
+  leaveAddress: "",
+  leaveNumber: "",
+  leaveDetail: "",
+  leaveTotal: 0,
+  leaveStartDate: new Date(),
+  leaveEndDate: new Date(),
+});
 
 /** form ขอยกเลิก*/
 const formDelete = reactive<FormDelete>({
-	writeAt: "",
-	reason: "",
-	doc: null,
-})
+  writeAt: "",
+  reason: "",
+  doc: null,
+});
 /**Validate ข้อมูล */
-const writeAtRef = ref<Object | null>(null)
-const reasonRef = ref<Object | null>(null)
-const docRef = ref<Object | null>(null)
+const writeAtRef = ref<Object | null>(null);
+const reasonRef = ref<Object | null>(null);
+const docRef = ref<Object | null>(null);
 const formDeleteRef: FormDeleteRef = {
-	writeAt: writeAtRef,
-	reason: reasonRef,
-	doc: docRef,
-}
+  writeAt: writeAtRef,
+  reason: reasonRef,
+  doc: docRef,
+};
 
 /**
  * function เรียกข้อมูลการลา
  * @param id การลา
  */
 async function fetchDataDetail(id: string) {
-	showLoader()
-	await http
-		.get(config.API.leaveUserId(id), {})
-		.then(res => {
-			const data = res.data.result
-			titleName.value = data.fullName ?? "-"
-			formData.id = data.id ?? "-"
-			formData.leaveTypeName = data.leaveTypeName ?? "-"
-			formData.leaveTypeId = data.leaveTypeId ?? "-"
-			formData.fullname = data.fullName ?? "-"
-			formData.dateSendLeave = data.dateSendLeave && date2Thai(data.dateSendLeave)
-			formData.status = data.status ?? "-"
-			formData.leaveDateStart = data.leaveStartDate && date2Thai(data.leaveStartDate)
-			formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate)
-			formData.leaveCount = data.leaveTotal ?? "-"
-			formData.leaveWrote = data.leaveWrote ?? "-"
-			formData.leaveAddress = data.leaveAddress ?? "-"
-			formData.leaveNumber = data.leaveNumber ?? "-"
-			formData.leaveDetail = data.leaveDetail ?? "-"
-			formData.leaveDocument = data.leaveDocument
-			formData.leaveDraftDocument = data.leaveDraftDocument
-			formData.leaveLastStart = data.leaveLastStart && date2Thai(data.leaveLastStart)
-			formData.leaveLastEnd = data.leaveLastStart && date2Thai(data.leaveLastEnd)
-			formData.leaveTotal = data.leaveTotal
-			formData.leavebirthDate = data.leaveBirthDate && date2Thai(data.leaveBirthDate)
-			formData.leavegovernmentDate = data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate)
-			formData.leaveSalary = data.leaveSalary ?? "-"
-			formData.leaveSalaryText = data.leaveSalaryText ?? "-"
-			formData.wifeDayName = data.wifeDayName ?? "-"
-			formData.wifeDayDateBorn = data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn)
-			formData.restDayOldTotal = data.restDayOldTotal ?? "-"
-			formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-"
-			formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช"
-			formData.ordainDayLocationName = data.ordainDayLocationName ?? "-"
-			formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-"
-			formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-"
-			formData.ordainDayOrdination = data.ordainDayOrdination && date2Thai(data.ordainDayOrdination)
-			formData.ordainDayBuddhistLentName = data.ordainDayBuddhistLentName ?? "-"
-			formData.ordainDayBuddhistLentAddress = data.ordainDayBuddhistLentAddress ?? "-"
-			formData.hajjDayStatus = data.hajjDayStatus ? "เคย" : "ไม่เคยไปประกอบพิธีฮัจญ์"
-			formData.absentDaySummon = data.absentDaySummon ?? "-"
-			formData.absentDayLocation = data.absentDayLocation ?? "-"
-			formData.absentDayRegistorDate = data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate)
-			formData.absentDayGetIn = data.absentDayGetIn ?? "-"
-			formData.absentDayAt = data.absentDayAt ?? "-"
-			formData.studyDaySubject = data.studyDaySubject ?? "-"
-			formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-"
-			formData.studyDayUniversityName = data.studyDayUniversityName ?? "-"
-			formData.studyDayTrainingSubject = data.studyDayTrainingSubject ?? "-" ?? "-"
-			formData.studyDayTrainingName = data.studyDayTrainingName ?? "-"
-			formData.studyDayCountry = data.studyDayCountry ?? "-"
-			formData.studyDayScholarship = data.studyDayScholarship ?? "-"
-			formData.coupleDayName = data.coupleDayName ?? "-"
-			formData.coupleDayPosition = data.coupleDayPosition ?? "-"
-			formData.coupleDayLevel = data.coupleDayLevel ?? "-"
-			formData.coupleDayLevelCountry = data.coupleDayLevelCountry ?? "-"
-			formData.coupleDayCountryHistory = data.coupleDayCountryHistory ?? "-"
-			formData.coupleDayTotalHistory = data.coupleDayTotalHistory ?? "-"
-			formData.coupleDayStartDateHistory = data.coupleDayStartDateHistory && date2Thai(data.coupleDayStartDateHistory)
-			formData.coupleDayEndDateHistory = data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory)
-			formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-"
-			formData.approveStep = data.approveStep ?? "-"
-			formData.dear = data.dear ?? "-"
-			checkLeaveType(formData.leaveTypeId, formData.leaveTypeName)
-		})
-		.catch(err => {
-			props.onClickClose?.()
-			messageError($q, err)
-		})
-		.finally(() => {
-			hideLoader()
-		})
+  showLoader();
+  await http
+    .get(config.API.leaveUserId(id), {})
+    .then((res) => {
+      const data = res.data.result;
+      titleName.value = data.fullName ?? "-";
+      formData.id = data.id ?? "-";
+      formData.leaveTypeName = data.leaveTypeName ?? "-";
+      formData.leaveTypeId = data.leaveTypeId ?? "-";
+      formData.fullname = data.fullName ?? "-";
+      formData.dateSendLeave =
+        data.dateSendLeave && date2Thai(data.dateSendLeave);
+      formData.status = data.status ?? "-";
+      formData.leaveDateStart =
+        data.leaveStartDate && date2Thai(data.leaveStartDate);
+      formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
+      formData.leaveCount = data.leaveTotal ?? "-";
+      formData.leaveWrote = data.leaveWrote ?? "-";
+      formData.leaveAddress = data.leaveAddress ?? "-";
+      formData.leaveNumber = data.leaveNumber ?? "-";
+      formData.leaveDetail = data.leaveDetail ?? "-";
+      formData.leaveDocument = data.leaveDocument;
+      formData.leaveDraftDocument = data.leaveDraftDocument;
+      formData.leaveLastStart =
+        data.leaveLastStart && date2Thai(data.leaveLastStart);
+      formData.leaveLastEnd =
+        data.leaveLastStart && date2Thai(data.leaveLastEnd);
+      formData.leaveTotal = data.leaveTotal;
+      formData.leavebirthDate =
+        data.leaveBirthDate && date2Thai(data.leaveBirthDate);
+      formData.leavegovernmentDate =
+        data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate);
+      formData.leaveSalary = data.leaveSalary ?? "-";
+      formData.leaveSalaryText = data.leaveSalaryText ?? "-";
+      formData.wifeDayName = data.wifeDayName ?? "-";
+      formData.wifeDayDateBorn =
+        data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
+      formData.restDayOldTotal = data.restDayOldTotal ?? "-";
+      formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-";
+      formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช";
+      formData.ordainDayLocationName = data.ordainDayLocationName ?? "-";
+      formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-";
+      formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-";
+      formData.ordainDayOrdination =
+        data.ordainDayOrdination && date2Thai(data.ordainDayOrdination);
+      formData.ordainDayBuddhistLentName =
+        data.ordainDayBuddhistLentName ?? "-";
+      formData.ordainDayBuddhistLentAddress =
+        data.ordainDayBuddhistLentAddress ?? "-";
+      formData.hajjDayStatus = data.hajjDayStatus
+        ? "เคย"
+        : "ไม่เคยไปประกอบพิธีฮัจญ์";
+      formData.absentDaySummon = data.absentDaySummon ?? "-";
+      formData.absentDayLocation = data.absentDayLocation ?? "-";
+      formData.absentDayRegistorDate =
+        data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate);
+      formData.absentDayGetIn = data.absentDayGetIn ?? "-";
+      formData.absentDayAt = data.absentDayAt ?? "-";
+      formData.studyDaySubject = data.studyDaySubject ?? "-";
+      formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-";
+      formData.studyDayUniversityName = data.studyDayUniversityName ?? "-";
+      formData.studyDayTrainingSubject =
+        data.studyDayTrainingSubject ?? "-" ?? "-";
+      formData.studyDayTrainingName = data.studyDayTrainingName ?? "-";
+      formData.studyDayCountry = data.studyDayCountry ?? "-";
+      formData.studyDayScholarship = data.studyDayScholarship ?? "-";
+      formData.coupleDayName = data.coupleDayName ?? "-";
+      formData.coupleDayPosition = data.coupleDayPosition ?? "-";
+      formData.coupleDayLevel = data.coupleDayLevel ?? "-";
+      formData.coupleDayLevelCountry = data.coupleDayLevelCountry ?? "-";
+      formData.coupleDayCountryHistory = data.coupleDayCountryHistory ?? "-";
+      formData.coupleDayTotalHistory = data.coupleDayTotalHistory ?? "-";
+      formData.coupleDayStartDateHistory =
+        data.coupleDayStartDateHistory &&
+        date2Thai(data.coupleDayStartDateHistory);
+      formData.coupleDayEndDateHistory =
+        data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory);
+      formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-";
+      formData.approveStep = data.approveStep ?? "-";
+      formData.dear = data.dear ?? "-";
+      checkLeaveType(formData.leaveTypeId, formData.leaveTypeName);
+    })
+    .catch((err) => {
+      props.onClickClose?.();
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /**
@@ -244,33 +273,33 @@ async function fetchDataDetail(id: string) {
  * @param leaveTypeName  ประเภทการลา
  */
 function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
-	if (props.leaveType) {
-		const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId)
-		const type = filtertype.code
-		if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
-			checkForm.value = "FormLeave"
-		} else if (type === "LV-004") {
-			checkForm.value = "FormChildbirth"
-		} else if (type === "LV-005") {
-			checkForm.value = "FormHoliday"
-		} else if (type === "LV-006") {
-			checkForm.value = "FormUpasom"
-		} else if (type === "LV-006" && leaveTypeName === "พิธีฮัจญ์ฯ") {
-			checkForm.value = "FormHajj"
-		} else if (type === "LV-007") {
-			checkForm.value = "FormCheckSelect"
-		} else if (type === "LV-008" && leaveTypeName === "ลาไปศีกษา") {
-			checkForm.value = "FormStudy"
-		} else if (type === "LV-008") {
-			checkForm.value = "FormLeaveToTraining"
-		} else if (type === "LV-009") {
-			checkForm.value = "FormLeaveToWorkInternational"
-		} else if (type === "LV-010") {
-			checkForm.value = "FormSpouse"
-		} else if (type === "LV-011") {
-			checkForm.value = "FormVocationalRehabilitation"
-		}
-	}
+  if (props.leaveType) {
+    const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId);
+    const type = filtertype.code;
+    if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
+      checkForm.value = "FormLeave";
+    } else if (type === "LV-004") {
+      checkForm.value = "FormChildbirth";
+    } else if (type === "LV-005") {
+      checkForm.value = "FormHoliday";
+    } else if (type === "LV-006") {
+      checkForm.value = "FormUpasom";
+    } else if (type === "LV-006" && leaveTypeName === "พิธีฮัจญ์ฯ") {
+      checkForm.value = "FormHajj";
+    } else if (type === "LV-007") {
+      checkForm.value = "FormCheckSelect";
+    } else if (type === "LV-008" && leaveTypeName === "ลาไปศีกษา") {
+      checkForm.value = "FormStudy";
+    } else if (type === "LV-008") {
+      checkForm.value = "FormLeaveToTraining";
+    } else if (type === "LV-009") {
+      checkForm.value = "FormLeaveToWorkInternational";
+    } else if (type === "LV-010") {
+      checkForm.value = "FormSpouse";
+    } else if (type === "LV-011") {
+      checkForm.value = "FormVocationalRehabilitation";
+    }
+  }
 }
 
 /**
@@ -278,199 +307,260 @@ function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
  * @param id ยกเลิกการลา
  */
 async function fetchDataCancelDetail(id: string) {
-	showLoader()
-	await http
-		.get(config.API.leaveCancelById(id))
-		.then(res => {
-			const data = res.data.result
-			formDataCancle.leaveTypeName = data.leaveTypeName ?? "-"
-			formDataCancle.leaveWrote = data.leaveWrote ?? "-"
-			formDataCancle.fullname = data.fullName ?? "-"
-			formDataCancle.status = convertStatud(data.status) ?? "-"
-			formDataCancle.leaveStartDate = data.leaveStartDate && date2Thai(data.leaveStartDate)
-			formDataCancle.leaveEndDate = data.leaveEndDate && date2Thai(data.leaveEndDate)
-			formDataCancle.leaveTotal = data.leaveTotal ?? "-"
-			formDataCancle.leaveAddress = data.leaveAddress ?? "-"
-			formDataCancle.leaveNumber = data.leaveNumber ?? "-"
-			formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-"
-			formDataCancle.leaveDetail = data.leaveDetail ?? "-"
-			formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null
+  showLoader();
+  await http
+    .get(config.API.leaveCancelById(id))
+    .then((res) => {
+      const data = res.data.result;
+      formDataCancle.leaveTypeName = data.leaveTypeName ?? "-";
+      formDataCancle.leaveWrote = data.leaveWrote ?? "-";
+      formDataCancle.fullname = data.fullName ?? "-";
+      formDataCancle.status = convertStatud(data.status) ?? "-";
+      formDataCancle.leaveStartDate =
+        data.leaveStartDate && date2Thai(data.leaveStartDate);
+      formDataCancle.leaveEndDate =
+        data.leaveEndDate && date2Thai(data.leaveEndDate);
+      formDataCancle.leaveTotal = data.leaveTotal ?? "-";
+      formDataCancle.leaveAddress = data.leaveAddress ?? "-";
+      formDataCancle.leaveNumber = data.leaveNumber ?? "-";
+      formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-";
+      formDataCancle.leaveDetail = data.leaveDetail ?? "-";
+      formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null;
 
-			console.log(res)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			hideLoader()
-		})
+      console.log(res);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /** function ยินยันการบันทึกข้อมูล*/
 async function onClickSave() {
-	const hasError = []
-	for (const key in formDeleteRef) {
-		if (Object.prototype.hasOwnProperty.call(formDeleteRef, key)) {
-			const property = formDeleteRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		dialogConfirm(
-			$q,
-			() => {
-				onSubmit()
-			},
-			"ยืนยันการบันทึกข้อมูล",
-			"ต้องการยินยันการบันทึกข้อมูลนี้หรือไม่ ?"
-		)
-	} else {
-		console.log(hasError)
-	}
+  const hasError = [];
+  for (const key in formDeleteRef) {
+    if (Object.prototype.hasOwnProperty.call(formDeleteRef, key)) {
+      const property = formDeleteRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    dialogConfirm(
+      $q,
+      () => {
+        onSubmit();
+      },
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยินยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    );
+  } else {
+    console.log(hasError);
+  }
 }
 
 /** function บันทึกข้อมูล*/
 async function onSubmit() {
-	showLoader()
-	const id = props.leaveId ? props.leaveId : ""
-	const formData = new FormData()
-	formData.append("leaveWrote", formDelete.writeAt)
-	formData.append("reason", formDelete.reason)
-	formData.append("doc", formDelete.doc)
-	await http
-		.post(config.API.leaveCancelById(id), formData)
-		.then(() => {
-			success($q, "บันทึกข้อมูลสำเร็จ")
-			props.onClickClose?.()
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			props.fetchDataTable?.()
-			hideLoader()
-		})
+  showLoader();
+  const id = props.leaveId ? props.leaveId : "";
+  const formData = new FormData();
+  formData.append("leaveWrote", formDelete.writeAt);
+  formData.append("reason", formDelete.reason);
+  formData.append("doc", formDelete.doc);
+  await http
+    .post(config.API.leaveCancelById(id), formData)
+    .then(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      props.onClickClose?.();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      props.fetchDataTable?.();
+      hideLoader();
+    });
 }
 
 watch(
-	() => props.modal,
-	() => {
-		if (props.modal === true) {
-			formDelete.writeAt = ""
-			formDelete.reason = ""
-			formDelete.doc = null
+  () => props.modal,
+  () => {
+    if (props.modal === true) {
+      formDelete.writeAt = "";
+      formDelete.reason = "";
+      formDelete.doc = null;
 
-			props.leaveStatus === "DELETE" ? props.leaveId && fetchDataCancelDetail(props.leaveId) : props.leaveId && fetchDataDetail(props.leaveId)
-		}
-	}
-)
+      props.leaveStatus === "DELETE"
+        ? props.leaveId && fetchDataCancelDetail(props.leaveId)
+        : props.leaveId && fetchDataDetail(props.leaveId);
+    }
+  }
+);
 </script>
 
 <template>
-	<q-dialog v-model="props.modal" persistent>
-		<q-card q-card style="min-width: 70%" v-if="props.leaveStatus != 'DELETE'">
-			<q-card-section class="row items-center q-pa-sm">
-				<div class="text-bold q-pl-sm">{{ titleMain }}{{ titleName }}</div>
-				<q-space />
-				<q-btn icon="close" unelevated round dense @click="props.onClickClose" style="color: #ff8080; background-color: #ffdede" />
-			</q-card-section>
-			<q-separator />
-			<q-card-section class="q-p-md row q-gutter-y-md">
-				<div flat :class="props.leaveStatus === 'CANCEL' ? 'col-xs-6 col-sm-6' : 'col-12'">
-					<div class="col-12 q-col-gutter-sm row items-center"></div>
-					<!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
-					<FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
+  <q-dialog v-model="props.modal" persistent>
+    <q-card q-card style="min-width: 70%" v-if="props.leaveStatus != 'DELETE'">
+      <q-card-section class="row items-center q-pa-sm">
+        <div class="text-bold q-pl-sm">{{ titleMain }}{{ titleName }}</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="props.onClickClose"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="q-p-md row q-gutter-y-md">
+        <div
+          flat
+          :class="
+            props.leaveStatus === 'CANCEL' ? 'col-xs-6 col-sm-6' : 'col-12'
+          "
+        >
+          <div class="col-12 q-col-gutter-sm row items-center"></div>
+          <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
+          <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
 
-					<!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
-					<FormChildbirth v-else-if="checkForm === 'FormChildbirth'" :data="formData" />
+          <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
+          <FormChildbirth
+            v-else-if="checkForm === 'FormChildbirth'"
+            :data="formData"
+          />
 
-					<!-- ลาพักผ่อน -->
-					<FormHoliday v-else-if="checkForm === 'FormHoliday'" :data="formData" />
+          <!-- ลาพักผ่อน -->
+          <FormHoliday
+            v-else-if="checkForm === 'FormHoliday'"
+            :data="formData"
+          />
 
-					<!-- ลาอุปสมบท -->
-					<FormUpasom v-else-if="checkForm === 'FormUpasom'" :data="formData" />
+          <!-- ลาอุปสมบท -->
+          <FormUpasom v-else-if="checkForm === 'FormUpasom'" :data="formData" />
 
-					<!-- ลาประกอบพิธีฮัจญ์ -->
-					<FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
+          <!-- ลาประกอบพิธีฮัจญ์ -->
+          <FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
 
-					<!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
-					<FormCheckSelect v-else-if="checkForm === 'FormCheckSelect'" :data="formData" />
+          <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
+          <FormCheckSelect
+            v-else-if="checkForm === 'FormCheckSelect'"
+            :data="formData"
+          />
 
-					<!-- ลาไปศึกษา -->
-					<FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" />
+          <!-- ลาไปศึกษา -->
+          <FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" />
 
-					<!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
-					<FormLeaveToTraining v-else-if="checkForm === 'FormLeaveToTraining'" :data="formData" />
+          <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
+          <FormLeaveToTraining
+            v-else-if="checkForm === 'FormLeaveToTraining'"
+            :data="formData"
+          />
 
-					<!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
-					<FormLeaveToWorkInternational v-else-if="checkForm === 'FormLeaveToWorkInternational'" :data="formData" />
+          <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
+          <FormLeaveToWorkInternational
+            v-else-if="checkForm === 'FormLeaveToWorkInternational'"
+            :data="formData"
+          />
 
-					<!-- ลาติดตามคู่สมรส -->
-					<FormSpouse v-else-if="checkForm === 'FormSpouse'" :data="formData" />
+          <!-- ลาติดตามคู่สมรส -->
+          <FormSpouse v-else-if="checkForm === 'FormSpouse'" :data="formData" />
 
-					<!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
-					<FormVocationalRehabilitation v-else-if="checkForm === 'FormVocationalRehabilitation'" :data="formData" />
-				</div>
+          <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
+          <FormVocationalRehabilitation
+            v-else-if="checkForm === 'FormVocationalRehabilitation'"
+            :data="formData"
+          />
+        </div>
 
-				<div flat class="col-xs-6 col-sm-6" v-if="props.leaveStatus === 'CANCEL'">
-					<q-card-section>
-						<q-input ref="writeAtRef" v-model="formDelete.writeAt" label="เขียนที่" :rules="[val => !!val || 'กรุณากรอกเขียนที่']" lazy-rules outlined dense />
-						<q-input
-							ref="reasonRef"
-							v-model="formDelete.reason"
-							type="textarea"
-							label="กรอกเหตุผล"
-							:rules="[val => !!val || 'กรูณากรอกเหตุผล']"
-							lazy-rules
-							class="q-mt-md"
-							outlined
-							dense
-						/>
-						<q-file
-							ref="docRef"
-							outlined
-							v-model="formDelete.doc"
-							label="เลือกไฟล์เอกสารหลักฐาน"
-							:rules="[val => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
-							lazy-rules
-							class="q-mt-md"
-							use-chips
-							dense
-						>
-							<template v-slot:prepend>
-								<q-icon name="attach_file" />
-							</template>
-						</q-file>
-					</q-card-section>
-				</div>
-			</q-card-section>
-			<q-separator />
-			<q-card-section class="row items-center q-pa-sm" v-if="props.leaveStatus === 'CANCEL'">
-				<q-space />
-				<q-btn label="ยืนยัน" unelevated color="secondary" dense class="q-px-md" @click="onClickSave" />
-			</q-card-section>
-		</q-card>
+        <div
+          flat
+          class="col-xs-6 col-sm-6"
+          v-if="props.leaveStatus === 'CANCEL'"
+        >
+          <q-input
+            ref="writeAtRef"
+            v-model="formDelete.writeAt"
+            label="เขียนที่"
+            :rules="[(val) => !!val || 'กรุณากรอกเขียนที่']"
+            lazy-rules
+            outlined
+            dense
+          />
+          <q-input
+            ref="reasonRef"
+            v-model="formDelete.reason"
+            type="textarea"
+            label="กรอกเหตุผล"
+            :rules="[(val) => !!val || 'กรูณากรอกเหตุผล']"
+            lazy-rules
+            outlined
+            dense
+          />
+          <q-file
+            ref="docRef"
+            outlined
+            v-model="formDelete.doc"
+            label="เลือกไฟล์เอกสารหลักฐาน"
+            :rules="[(val) => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
+            lazy-rules
+            use-chips
+            dense
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" />
+            </template>
+          </q-file>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-section
+        class="row items-center q-pa-sm"
+        v-if="props.leaveStatus === 'CANCEL'"
+      >
+        <q-space />
+        <q-btn
+          label="ยืนยัน"
+          unelevated
+          color="secondary"
+          dense
+          class="q-px-md"
+          @click="onClickSave"
+        />
+      </q-card-section>
+    </q-card>
 
-		<q-card q-card style="min-width: 70%" v-if="props.leaveStatus === 'DELETE'">
-			<q-card-section class="row items-center q-pa-sm">
-				<div class="text-bold q-pl-sm">{{ titleMainCancle }}{{ titleName }}</div>
-				<q-space />
-				<q-btn icon="close" unelevated round dense @click="props.onClickClose" style="color: #ff8080; background-color: #ffdede" />
-			</q-card-section>
-			<q-separator />
-			<q-card-section class="q-p-md row q-gutter-y-md">
-				<div flat class="col-12">
-					<div class="col-12 q-col-gutter-sm row items-center"></div>
-					<!-- FormCancel -->
-					<FormCancel :data="formDataCancle" />
-				</div>
-			</q-card-section>
-			<q-separator />
-		</q-card>
-	</q-dialog>
+    <q-card q-card style="min-width: 70%" v-if="props.leaveStatus === 'DELETE'">
+      <q-card-section class="row items-center q-pa-sm">
+        <div class="text-bold q-pl-sm">
+          {{ titleMainCancle }}{{ titleName }}
+        </div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="props.onClickClose"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="q-p-md row q-gutter-y-md">
+        <div flat class="col-12">
+          <div class="col-12 q-col-gutter-sm row items-center"></div>
+          <!-- FormCancel -->
+          <FormCancel :data="formDataCancle" />
+        </div>
+      </q-card-section>
+      <q-separator />
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>

src/modules/05_leave/components/FormLeave/01_SickForm.vue

@@ -0,0 +1,509 @@
+<script setup lang="ts">
+import { ref, reactive, watch, computed, onMounted } from "vue";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/05_leave/interface/request/SickForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const router = useRouter();
+const {
+  date2Thai,
+  dateToISO,
+  dialogConfirm,
+  success,
+  messageError,
+  fails,
+  showLoader,
+  hideLoader,
+} = mixin;
+const edit = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  }
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataSick = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveRange: "ALL",
+  leaveTotal: "",
+  leaveLast: null,
+  leaveNumber: "",
+  leaveAddress: "",
+  leaveDetail: "",
+  leaveDocument: [],
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveRangeRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
+const leaveLastRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const FormRef: FormRef = {
+  leaveWrote: leaveWroteRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveRange: leaveRangeRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+async function fileUploadDoc(files: any) {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+}
+
+/**
+ * function รีเซทค่า leaveStartDate เเละ leaveEndDate
+ */
+function resetDate() {
+  if (
+    formDataSick.leaveRange === "MORNING" ||
+    formDataSick.leaveRange === "AFTERNOON"
+  ) {
+    formDataSick.leaveStartDate = null;
+    formDataSick.leaveEndDate = null;
+  }
+  console.log("testnull");
+}
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function onValidate() {
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    //   if (formDataSick.leaveDocument.length > 0) {
+    //     const blob = formDataSick.leaveDocument.slice(
+    //       0,
+    //       formDataSick.leaveDocument[0].size
+    //     );
+    //     const newFile = new File(blob, nameFile.value, {
+    //       type: formDataSick.leaveDocument[0].type,
+    //     });
+    //     formData.append("leaveDocument", newFile);
+    //   }
+
+    formData.append("leaveDocument", formDataSick.leaveDocument);
+    formData.append("type", formDataSick.type);
+    formData.append("leaveRange", formDataSick.leaveRange);
+    formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate));
+    formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate));
+    formData.append("leaveWrote", formDataSick.leaveWrote);
+    formData.append("leaveAddress", formDataSick.leaveAddress);
+    formData.append("leaveNumber", formDataSick.leaveNumber);
+    formData.append("leaveDetail", formDataSick.leaveDetail);
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataSick.leaveStartDate ?? null,
+      EndLeaveDate: formDataSick.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataSick.leaveTotal =
+          data.totalDate - data.sumDateWork - data.sumDateHoliday;
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
+ */
+const isReadOnly = computed(() => {
+  const conditionleaveRange =
+    formDataSick.leaveRange === "MORNING" ||
+    formDataSick.leaveRange === "AFTERNOON";
+  if (conditionleaveRange) {
+    formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null
+    formDataSick.leaveTotal = 0.5;
+  } else {
+    formDataSick.leaveTotal = null;
+  }
+  return conditionleaveRange;
+});
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+function resetEndDate(type: string) {
+  if (type === "day") {
+    formDataSick.EndLeaveDate === null;
+  }
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataSick.leaveWrote = props.data.leaveWrote;
+    formDataSick.leaveStartDate = new Date(props.data.leaveStartDate);
+    formDataSick.leaveEndDate = new Date(props.data.leaveEndDate);
+    formDataSick.contractTel = props.data.contractTel;
+    formDataSick.leaveTotal = props.data.leaveTotal;
+    formDataSick.leaveNumber = props.data.leaveNumber;
+    formDataSick.leaveDetail = props.data.leaveDetail;
+    // formDataSick.leaveDocument = props.data.leaveDocument;
+    formDataSick.leaveAddress = props.data.leaveAddress;
+    formDataSick.leaveAddress = props.data.leaveAddress;
+  }
+});
+</script>
+
+<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          hide-bottom-space
+          bg-color="white"
+          outlined
+          v-model="formDataSick.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <div class="col-12 col-md-4 col-sm-12">
+          <q-radio
+            v-model="formDataSick.leaveRange"
+            val="ALL"
+            label="ลาทั้งวัน"
+            checked-icon="task_alt"
+          />
+          <q-radio
+            v-model="formDataSick.leaveRange"
+            val="MORNING"
+            label="ลาครึ่งวันเช้า"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+          <q-radio
+            v-model="formDataSick.leaveRange"
+            val="AFTERNOON"
+            label="ลาครึ่งวันบ่าย"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+        </div>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formDataSick.leaveStartDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :readonly="!edit"
+              @update:model-value="formDataSick.leaveEndDate = null"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveStartDateRef"
+                  for="leaveStartDateRef"
+                  hide-bottom-space
+                  :readonly="!edit"
+                  bg-color="white"
+                  class="full-width cursor-pointer inputgreen"
+                  :model-value="
+                    formDataSick.leaveStartDate != null
+                      ? date2Thai(formDataSick.leaveStartDate)
+                      : null
+                  "
+                  :label="`${'ลาตั้งแต่วันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                  style="color: var(--q-primary)"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <datepicker
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formDataSick.leaveEndDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :readonly="!formDataSick.leaveStartDate"
+              @update:model-value="FetchCheck(), isReadOnly"
+              :min-date="formDataSick.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="leaveEndDateRef"
+                  for="leaveEndDateRef"
+                  hide-bottom-space
+                  bg-color="white"
+                  :readonly="!formDataSick.leaveStartDate"
+                  :class="inputEdit(isReadOnly)"
+                  :model-value="
+                    formDataSick.leaveEndDate != null
+                      ? date2Thai(formDataSick.leaveEndDate)
+                      : null
+                  "
+                  :label="`${'ลาถึงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-input
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              bg-color="white"
+              outlined
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="formDataSick.leaveTotal"
+              label="จำนวนวันที่ลา"
+              readonly
+              hide-bottom-space
+            />
+            <q-input
+              class="col-12 col-md-3 col-sm-6"
+              dense
+              outlined
+              ref="leaveLastRef"
+              for="leaveLastRef"
+              v-model="dataStore.leaveLast"
+              label="ลาครั้งสุดท้ายเมื่อวันที่"
+              readonly
+              hide-bottom-space
+              bg-color="white"
+            />
+          </div>
+        </div>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+              dense
+              outlined
+              ref="leaveNumberRef"
+              for="leaveNumberRef"
+              v-model="formDataSick.leaveNumber"
+              mask="(###)-###-####"
+              hide-bottom-space
+              bg-color="white"
+              unmasked-value
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
+              dense
+              outlined
+              ref="leaveAddressRef"
+              for="leaveAddressRef"
+              v-model="formDataSick.leaveAddress"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+              hide-bottom-space
+              bg-color="white"
+            />
+          </div>
+        </div>
+        <q-input
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataSick.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+          bg-color="white"
+        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-file
+              for="leaveDocumentRef"
+              v-model="formDataSick.leaveDocument"
+              dense
+              label="เอกสารประกอบ"
+              outlined
+              use-chips
+              bg-color="white"
+              class="col-12 q-pl-sm col-12"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+          </div>
+        </div>
+        <div class="col-12 col-sm-6 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in formDataSick.leaveDocument"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <q-separator class="q-mt-sm" />
+
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/03_Birth.vue

@@ -0,0 +1,422 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const mixin = useCounterMixin();
+const router = useRouter();
+const $q = useQuasar();
+const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
+  mixin;
+const edit = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataBirth = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "",
+  leaveLast: "",
+  leaveNumber: "",
+  leaveAddress: "",
+  leaveDetail: "",
+  leaveDocument: [],
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const FormRef: FormRef = {
+  leaveWrote: leaveWroteRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+async function fileUploadDoc(files: any) {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+}
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function onValidate() {
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataBirth.leaveDocument.length > 0) {
+    // 	const blob = formDataBirth.leaveDocument.slice(0, formDataBirth.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataBirth.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+    formData.append("leaveDocument", formDataBirth.leaveDocument);
+    formData.append("type", formDataBirth.type);
+    formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate));
+    formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate));
+    formData.append("leaveWrote", formDataBirth.leaveWrote);
+    formData.append("leaveAddress", formDataBirth.leaveAddress);
+    formData.append("leaveNumber", formDataBirth.leaveNumber);
+    formData.append("leaveDetail", formDataBirth.leaveDetail);
+
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataBirth.leaveStartDate ?? null,
+      EndLeaveDate: formDataBirth.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataBirth.leaveTotal = data.totalDate;
+        // formDataBirth.leaveLast = data.sumDateWork
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataBirth.leaveWrote = props.data.leaveWrote;
+    formDataBirth.leaveStartDate = props.data.leaveStartDate;
+    formDataBirth.leaveEndDate = props.data.leaveEndDate;
+    formDataBirth.leaveTotal = props.data.leaveTotal;
+    formDataBirth.leaveNumber = props.data.leaveNumber;
+    formDataBirth.leaveDetail = props.data.leaveDetail;
+    // formDataBirth.leaveDocument = props.data.leaveDocument;
+  }
+});
+</script>
+
+<!-- ฟอร์มลาคลอดบุตร-->
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          outlined
+          v-model="formDataBirth.leaveWrote"
+          label="เขียนที่"
+          hide-bottom-space
+          bg-color="white"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataBirth.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+          @update:model-value="formDataBirth.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveStartDateRef"
+              for="leaveStartDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataBirth.leaveStartDate != null
+                  ? date2Thai(formDataBirth.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataBirth.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          @update:model-value="fetchCheck()"
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!formDataBirth.leaveStartDate"
+          :min-date="formDataBirth.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              for="leaveEndDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!formDataBirth.leaveStartDate"
+              class="full-width datepicker"
+              :model-value="
+                formDataBirth.leaveEndDate != null
+                  ? date2Thai(formDataBirth.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-3 col-sm-6"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataBirth.leaveTotal"
+          label="จำนวนวันที่ลา"
+          bg-color="white"
+          readonly
+          hide-bottom-space
+        />
+        <q-input
+          class="col-12 col-md-3 col-sm-6"
+          dense
+          outlined
+          ref="leaveLastRef"
+          for="leaveLastRef"
+          v-model="dataStore.leaveLast"
+          label="ลาครั้งสุดท้ายเมื่อวันที่"
+          readonly
+          hide-bottom-space
+          bg-color="white"
+        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveNumberRef"
+              for="leaveNumberRef"
+              v-model="formDataBirth.leaveNumber"
+              mask="(###)-###-####"
+              unmasked-value
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveAddressRef"
+              for="leaveAddressRef"
+              v-model="formDataBirth.leaveAddress"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+        <q-input
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          bg-color="white"
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataBirth.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <q-file
+          for="leaveDocumentRef"
+          hide-bottom-space
+          v-model="formDataBirth.leaveDocument"
+          @added="fileUploadDoc"
+          dense
+          bg-color="white"
+          label="เอกสารประกอบ"
+          outlined
+          use-chips
+          multiple
+          class="q-pl-sm col-12"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+        </q-file>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in formDataBirth.leaveDocument"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <q-separator class="q-mt-sm" />
+
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue

@@ -0,0 +1,507 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/05_leave/interface/request/HelpWifeForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const mixin = useCounterMixin();
+const router = useRouter();
+const $q = useQuasar();
+const {
+  date2Thai,
+  calculateDurationYmd,
+  dateToISO,
+  dialogConfirm,
+  fails,
+  success,
+  messageError,
+} = mixin;
+const edit = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataHelpWife = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  wifeDayName: "",
+  wifeDayDateBorn: null,
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "",
+  leaveNumber: "",
+  leaveAddress: "",
+  leaveDetail: "",
+  leaveDocument: [],
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const wifeDayNameRef = ref<object | null>(null);
+const wifeDayDateBornRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const FormRef: FormRef = {
+  leaveWrote: leaveWroteRef,
+  wifeDayName: wifeDayNameRef,
+  wifeDayDateBorn: wifeDayDateBornRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function onValidate() {
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataHelpWife.leaveDocument.length > 0) {
+    // 	const blob = formDataHelpWife.leaveDocument.slice(0, formDataHelpWife.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataHelpWife.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+    formData.append("leaveDocument", formDataHelpWife.leaveDocument);
+    formData.append("type", formDataHelpWife.type);
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataHelpWife.leaveStartDate)
+    );
+    formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate));
+    formData.append("leaveWrote", formDataHelpWife.leaveWrote);
+    formData.append("leaveAddress", formDataHelpWife.leaveAddress);
+    formData.append("leaveNumber", formDataHelpWife.leaveNumber);
+    formData.append("leaveDetail", formDataHelpWife.leaveDetail);
+    formData.append("wifeDayName", formDataHelpWife.wifeDayName);
+    formData.append(
+      "wifeDayDateBorn",
+      dateToISO(formDataHelpWife.wifeDayDateBorn)
+    );
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataHelpWife.leaveStartDate,
+    formDataHelpWife.leaveEndDate
+  );
+  formDataHelpWife.leaveTotal = newLeaveTotal;
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataHelpWife.leaveStartDate ?? null,
+      EndLeaveDate: formDataHelpWife.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataHelpWife.leaveTotal =
+          data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        // formDataHelpWife.leaveLast = data.totalDate
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    // console.log("data==>", props.data)
+    formDataHelpWife.leaveWrote = props.data.leaveWrote;
+    formDataHelpWife.wifeDayName = props.data.wifeDayName;
+    formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
+    formDataHelpWife.leaveStartDate = props.data.leaveStartDate;
+    formDataHelpWife.leaveEndDate = props.data.leaveEndDate;
+    formDataHelpWife.leaveTotal = props.data.leaveTotal;
+    formDataHelpWife.leaveNumber = props.data.leaveNumber;
+    formDataHelpWife.leaveDetail = props.data.leaveDetail;
+    // formDataHelpWife.leaveDocument = props.data.leaveDocument;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          outlined
+          hide-bottom-space
+          bg-color="white"
+          v-model="formDataHelpWife.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataHelpWife.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+          @update:model-value="formDataHelpWife.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveStartDateRef"
+              for="leaveStartDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataHelpWife.leaveStartDate != null
+                  ? date2Thai(formDataHelpWife.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataHelpWife.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          @update:model-value="updateLeaveTotal, fetchCheck()"
+          week-start="0"
+          :readonly="!formDataHelpWife.leaveStartDate"
+          :min-date="formDataHelpWife.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              for="leaveEndDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!formDataHelpWife.leaveStartDate"
+              class="full-width datepicker"
+              :model-value="
+                formDataHelpWife.leaveEndDate != null
+                  ? date2Thai(formDataHelpWife.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataHelpWife.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+          hide-bottom-space
+          bg-color="white"
+        />
+        <div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
+          <q-input
+            class="col-12 col-sm-12"
+            ref="wifeDayNameRef"
+            for="wifeDayNameRef"
+            dense
+            bg-color="white"
+            outlined
+            hide-bottom-space
+            v-model="formDataHelpWife.wifeDayName"
+            label="ชื่อภรรยา"
+            :readonly="!edit"
+            :rules="[(val) => !!val || `${'ชื่อภรรยา'}`]"
+          />
+        </div>
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataHelpWife.wifeDayDateBorn"
+          :locale="'th'"
+          autoApply
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="wifeDayDateBornRef"
+              for="wifeDayDateBornRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataHelpWife.wifeDayDateBorn != null
+                  ? date2Thai(formDataHelpWife.wifeDayDateBorn)
+                  : null
+              "
+              :label="`${'วันที่คลอด'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              ref="leaveNumberRef"
+              for="leaveNumberRef"
+              v-model="formDataHelpWife.leaveNumber"
+              mask="(###)-###-####"
+              unmasked-value
+              hide-bottom-space
+              bg-color="white"
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveAddressRef"
+              for="leaveAddressRef"
+              v-model="formDataHelpWife.leaveAddress"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+        <q-input
+          hide-bottom-space
+          bg-color="white"
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataHelpWife.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <q-file
+          bg-color="white"
+          ref="leaveDocumentRef"
+          v-model="formDataHelpWife.leaveDocument"
+          @added="fileUploadDoc"
+          dense
+          label="เอกสารประกอบ"
+          outlined
+          use-chips
+          multiple
+          class="q-pl-sm col-12"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+        </q-file>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in formDataHelpWife.leaveDocument"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/05_VacationForm.vue

@@ -0,0 +1,501 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from "vue";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/05_leave/interface/request/VacationForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+
+/** Use */
+const $q = useQuasar();
+const dataStore = useLeaveStore();
+const mixin = useCounterMixin();
+const router = useRouter();
+const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
+  mixin;
+const edit = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataVacation = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveRange: "ALL",
+  restDayOldTotal: "",
+  restDayCurrentTotal: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "",
+  leaveNumber: "",
+  leaveAddress: "",
+  leaveDetail: "",
+  leaveDocument: [],
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const restDayOldTotalRef = ref<object | null>(null);
+const restDayCurrentTotalRef = ref<object | null>(null);
+const leaveRangeRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const FormRef: FormRef = {
+  leaveWrote: leaveWroteRef,
+  leaveRange: leaveRangeRef,
+  restDayOldTotal: restDayOldTotalRef,
+  restDayCurrentTotal: restDayCurrentTotalRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveTotal: leaveTotalRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  leaveDetail: leaveDetailRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function onValidate() {
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataVacation.leaveDocument.length > 0) {
+    // 	const blob = formDataVacation.leaveDocument.slice(0, formDataVacation.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataVacation.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+    formData.append("leaveDocument", formDataVacation.leaveDocument);
+    formData.append("type", formDataVacation.type);
+    formData.append("leaveRange", formDataVacation.leaveRange);
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataVacation.leaveStartDate)
+    );
+    formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate));
+    formData.append("leaveWrote", formDataVacation.leaveWrote);
+    formData.append("leaveAddress", formDataVacation.leaveAddress);
+    formData.append("leaveNumber", formDataVacation.leaveNumber);
+    formData.append("leaveDetail", formDataVacation.leaveDetail);
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataVacation.leaveStartDate ?? null,
+      EndLeaveDate: formDataVacation.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataVacation.leaveTotal =
+          data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        // formDataVacation.leaveLast = data.totalDate
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function รีเซทค่า leaveStartDate เเละ leaveEndDate
+ */
+function resetDate() {
+  if (
+    formDataVacation.leaveRange === "MORNING" ||
+    formDataVacation.leaveRange === "AFTERNOON"
+  ) {
+    formDataVacation.leaveStartDate = null;
+    formDataVacation.leaveEndDate = null;
+  }
+  console.log("testnull");
+}
+
+/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
+const isReadOnly = computed(() => {
+  const conditionleaveRange =
+    formDataVacation.leaveRange === "MORNING" ||
+    formDataVacation.leaveRange === "AFTERNOON";
+  if (conditionleaveRange) {
+    formDataVacation.leaveEndDate = formDataVacation.leaveStartDate; // Set formDataVacation.leaveEndDate to null
+    formDataVacation.leaveTotal = 0.5;
+  } else {
+    formDataVacation.leaveTotal = null;
+  }
+  return conditionleaveRange;
+});
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    // console.log("data==>", props.data)
+    formDataVacation.leaveWrote = props.data.leaveWrote;
+    formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
+    formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
+    formDataVacation.leaveStartDate = props.data.leaveStartDate;
+    formDataVacation.leaveEndDate = props.data.leaveEndDate;
+    formDataVacation.leaveTotal = props.data.leaveTotal;
+    formDataVacation.leaveNumber = props.data.leaveNumber;
+    formDataVacation.leaveDetail = props.data.leaveDetail;
+    // formDataVacation.leaveDocument = props.data.leaveDocument;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          hide-bottom-space
+          bg-color="white"
+          outlined
+          v-model="formDataVacation.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+        <div class="col-12 col-md-4 col-sm-6">
+          <q-radio
+            v-model="formDataVacation.leaveRange"
+            val="ALL"
+            label="ลาทั้งวัน"
+            checked-icon="task_alt"
+          />
+          <q-radio
+            v-model="formDataVacation.leaveRange"
+            val="MORNING"
+            label="ลาครึ่งวันเช้า"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+          <q-radio
+            v-model="formDataVacation.leaveRange"
+            val="AFTERNOON"
+            label="ลาครึ่งวันบ่าย"
+            checked-icon="task_alt"
+            @update:model-value="resetDate"
+          />
+        </div>
+        <q-input
+          class="col-12 col-md-4 col-sm-6"
+          ref="restDayOldTotalRef"
+          for="restDayOldTotalRef"
+          dense
+          hide-bottom-space
+          bg-color="white"
+          readonly
+          outlined
+          v-model="dataStore.restDayTotalOld"
+          label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
+        />
+
+        <q-input
+          class="col-12 col-md-4 col-sm-6"
+          ref="restDayCurrentTotalRef"
+          for="restDayCurrentTotalRef"
+          dense
+          readonly
+          hide-bottom-space
+          bg-color="white"
+          outlined
+          v-model="dataStore.leaveRemain"
+          label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
+        />
+
+        <datepicker
+          class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataVacation.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+          @update:model-value="formDataVacation.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveStartDateRef"
+              for="leaveStartDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataVacation.leaveStartDate != null
+                  ? date2Thai(formDataVacation.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataVacation.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          @update:model-value="fetchCheck()"
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="isReadOnly"
+          :min-date="formDataVacation.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              for="leaveEndDateRef"
+              hide-bottom-space
+              bg-color="white"
+              class="full-width datepicker"
+              :readonly="isReadOnly"
+              :model-value="
+                formDataVacation.leaveEndDate != null
+                  ? date2Thai(formDataVacation.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          bg-color="white"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataVacation.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+          hide-bottom-space
+        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveNumberRef"
+              for="leaveNumberRef"
+              v-model="formDataVacation.leaveNumber"
+              mask="(###)-###-####"
+              unmasked-value
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
+              dense
+              outlined
+              hide-bottom-space
+              bg-color="white"
+              ref="leaveAddressRef"
+              for="leaveAddressRef"
+              v-model="formDataVacation.leaveAddress"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+        <q-input
+          type="textarea"
+          hide-bottom-space
+          bg-color="white"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataVacation.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <q-file
+          ref="leaveDocumentRef"
+          bg-color="white"
+          v-model="formDataVacation.leaveDocument"
+          @added="fileUploadDoc"
+          dense
+          label="เอกสารประกอบ"
+          outlined
+          use-chips
+          multiple
+          class="q-pl-sm col-12"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+        </q-file>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in formDataVacation.leaveDocument"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue

@@ -0,0 +1,671 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  calculateDurationYmd,
+  fails,
+  dateToISO,
+  success,
+  messageError,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const ordainDayLocationNumberRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+const leavebirthDateRef = ref<object | null>(null);
+const leavegovernmentDateRef = ref<object | null>(null);
+const totalLeaveRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const ordainDayOrdinationRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const ordainDayLocationAddressRef = ref<object | null>(null);
+const ordainDayBuddhistLentAddressRef = ref<object | null>(null);
+const ordainDayLocationNameRef = ref<object | null>(null);
+const ordainDayBuddhistLentNameRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataOrdination = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leavegovernmentDate: new Date(),
+  leavebirthDate: new Date(),
+  leaveStartDate: null,
+  leaveEndDate: null,
+  totalLeave: new Date(),
+  ordainDayOrdination: new Date(),
+  ordainDayLocationName: "",
+  ordainDayLocationNumber: null,
+  ordainDayLocationAddress: "",
+  ordainDayBuddhistLentName: "",
+  ordainDayBuddhistLentAddress: "",
+  ordainDayStatus: "true",
+  leaveDocument: null,
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: OrdinationForm = {
+  leaveWrote: leaveWroteRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leavebirthDate: leavebirthDateRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  totalLeave: totalLeaveRef,
+  ordainDayOrdination: ordainDayOrdinationRef,
+  ordainDayLocationName: ordainDayLocationNameRef,
+  ordainDayLocationNumber: ordainDayLocationNumberRef,
+  ordainDayLocationAddress: ordainDayLocationAddressRef,
+  ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
+  ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+function onValidate() {
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataOrdination.leaveDocument.length > 0) {
+    // 	const blob = formDataOrdination.leaveDocument.slice(0, formDataOrdination.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataOrdination.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+    formData.append("leaveDocument", formDataOrdination.leaveDocument);
+    formData.append("type", formDataOrdination.type);
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataOrdination.leaveStartDate)
+    );
+    formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate));
+    formData.append(
+      "ordainDayOrdination",
+      dateToISO(formDataOrdination.ordainDayOrdination)
+    );
+    formData.append(
+      "ordainDayLocationName",
+      formDataOrdination.ordainDayLocationName
+    );
+    formData.append(
+      "ordainDayLocationNumber",
+      formDataOrdination.ordainDayLocationNumber
+    );
+    formData.append(
+      "ordainDayLocationAddress",
+      formDataOrdination.ordainDayLocationAddress
+    );
+    formData.append(
+      "ordainDayBuddhistLentName",
+      formDataOrdination.ordainDayBuddhistLentName
+    );
+    formData.append(
+      "ordainDayBuddhistLentAddress",
+      formDataOrdination.ordainDayBuddhistLentAddress
+    );
+    formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus);
+    formData.append("leaveWrote", formDataOrdination.leaveWrote);
+    formData.append("leaveDetail", formDataOrdination.leaveDetail);
+    formData.append(
+      "leavebirthDate",
+      dateToISO(formDataOrdination.leavebirthDate)
+    );
+    formData.append(
+      "leavegovernmentDate",
+      dateToISO(formDataOrdination.leavegovernmentDate)
+    );
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataOrdination.leaveStartDate ?? null,
+      EndLeaveDate: formDataOrdination.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        // formDataOrdination.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+        formDataOrdination.leaveTotal = data.totalDate;
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataOrdination.leaveStartDate,
+    formDataOrdination.leaveEndDate
+  );
+  formDataOrdination.leaveTotal = newLeaveTotal;
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataOrdination.leaveWrote = props.data.leaveWrote;
+    formDataOrdination.leaveStartDate = props.data.leaveStartDate;
+    formDataOrdination.leaveEndDate = props.data.leaveEndDate;
+    formDataOrdination.totalLeave = props.data.leaveTotal;
+    formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
+    formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName;
+    formDataOrdination.ordainDayLocationNumber =
+      props.data.ordainDayLocationNumber;
+    formDataOrdination.ordainDayLocationAddress =
+      props.data.ordainDayLocationAddress;
+    formDataOrdination.ordainDayBuddhistLentName =
+      props.data.ordainDayBuddhistLentName;
+    formDataOrdination.ordainDayBuddhistLentAddress =
+      props.data.ordainDayBuddhistLentAddress;
+    formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
+    formDataOrdination.leaveDetail = props.data.leaveDetail;
+    // formDataOrdination.leaveDocument = props.data.leaveDocument;
+  }
+});
+</script>
+
+<!-- ฟอร์ม ลาอุปสมบท -->
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate" class="full-width">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          bg-color="white"
+          hide-bottom-space
+          v-model="formDataOrdination.leaveWrote"
+          label="เขียนที่"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataOrdination.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          @update:model-value="formDataOrdination.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              bg-color="white"
+              dense
+              ref="leaveStartDateRef"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formDataOrdination.leaveStartDate != null
+                  ? date2Thai(formDataOrdination.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataOrdination.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          @update:model-value="updateLeaveTotal, fetchCheck()"
+          :readonly="!formDataOrdination.leaveStartDate"
+          :enableTimePicker="false"
+          :min-date="formDataOrdination.leaveStartDate"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              bg-color="white"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formDataOrdination.leaveEndDate != null
+                  ? date2Thai(formDataOrdination.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :readonly="!formDataOrdination.leaveStartDate"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          bg-color="white"
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataOrdination.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+          hide-bottom-space
+        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formDataOrdination.leavegovernmentDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              readonly
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  ref="leavegovernmentDateRef"
+                  dense
+                  bg-color="white"
+                  hide-bottom-space
+                  readonly
+                  class="full-width"
+                  :model-value="
+                    formDataOrdination.leavegovernmentDate != null
+                      ? date2Thai(formDataOrdination.leavegovernmentDate)
+                      : null
+                  "
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <datepicker
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formDataOrdination.leavebirthDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              readonly
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  ref="leavebirthDateRef"
+                  dense
+                  bg-color="white"
+                  hide-bottom-space
+                  readonly
+                  class="full-width"
+                  :model-value="
+                    formDataOrdination.leavebirthDate != null
+                      ? date2Thai(formDataOrdination.leavebirthDate)
+                      : null
+                  "
+                  :label="`${'วันเดือนปีเกิด'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันเดือนปีเกิด'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+
+        <div class="q-pl-sm text-weight-bold text-dark col-12">
+          เคยบวชหรือไม่
+        </div>
+        <div class="col-12">
+          <q-radio
+            v-model="formDataOrdination.ordainDayStatus"
+            val="true"
+            label="เคยบวช"
+            checked-icon="task_alt "
+            hide-bottom-space
+          />
+          <q-radio
+            v-model="formDataOrdination.ordainDayStatus"
+            val="false"
+            label="ไม่เคยบวช"
+            checked-icon="task_alt"
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataOrdination.ordainDayOrdination"
+          :locale="'th'"
+          autoApply
+          full-width
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              ref="ordainDayOrdinationRef"
+              dense
+              bg-color="white"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formDataOrdination.ordainDayOrdination != null
+                  ? date2Thai(formDataOrdination.ordainDayOrdination)
+                  : null
+              "
+              :label="`${'วันอุปสมบท'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <q-input
+          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+          dense
+          hide-bottom-space
+          ref="ordainDayLocationNameRef"
+          bg-color="white"
+          outlined
+          full-width
+          v-model="formDataOrdination.ordainDayLocationName"
+          label="ชื่อวัด"
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+        />
+
+        <q-input
+          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+          ref="ordainDayLocationNumberRef"
+          dense
+          full-width
+          outlined
+          v-model="formDataOrdination.ordainDayLocationNumber"
+          bg-color="white"
+          mask="(###)-###-####"
+          unmasked-value
+          hide-bottom-space
+          label="หมายเลขโทรศัพท์"
+          :rules="[(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
+        />
+        <q-input
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          ref="ordainDayLocationAddressRef"
+          bg-color="white"
+          outlined
+          hide-bottom-space
+          v-model="formDataOrdination.ordainDayLocationAddress"
+          label="ที่อยู่"
+          :rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
+          type="textarea"
+        />
+
+        <div class="q-pl-sm text-weight-bold text-dark col-12">
+          สถานที่จำพรรษา
+        </div>
+        <q-input
+          class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+          dense
+          ref="ordainDayBuddhistLentNameRef"
+          bg-color="white"
+          hide-bottom-space
+          outlined
+          v-model="formDataOrdination.ordainDayBuddhistLentName"
+          label="ชื่อวัด"
+          :rules="[(val) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+        />
+
+        <q-input
+          class="col-12 cursor-pointer inputgreen"
+          dense
+          ref="ordainDayBuddhistLentAddressRef"
+          bg-color="white"
+          outlined
+          v-model="formDataOrdination.ordainDayBuddhistLentAddress"
+          label="ที่อยู่"
+          :rules="[(val) => !!val || `${'กรุณากรอกที่อยู่'}`]"
+          type="textarea"
+          hide-bottom-space
+        />
+        <q-input
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          bg-color="white"
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataOrdination.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            ref="leaveDocumentRef"
+            v-model="formDataOrdination.leaveDocument"
+            @added="fileUploadDoc"
+            dense
+            label="เอกสารประกอบ"
+            outlined
+            bg-color="white"
+            multiple
+            use-chips
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.fileName }}
+                  </q-item-label>
+
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <q-separator class="q-mt-sm" />
+
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/07_HajjForm.vue

@@ -0,0 +1,442 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const router = useRouter();
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  calculateDurationYmd,
+  fails,
+  messageError,
+  success,
+  dateToISO,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const leavegovernmentDateRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataHaji = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leavegovernmentDate: new Date(),
+  leaveStartDate: null,
+  leaveEndDate: null,
+  totalLeave: new Date(),
+  hajjDayStatus: "true",
+  leaveDocument: null,
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: HajiForm = {
+  leaveWrote: leaveWroteRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+function onValidate() {
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataHaji.leaveDocument.length > 0) {
+    // 	const blob = formDataHaji.leaveDocument.slice(0, formDataHaji.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataHaji.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+    formData.append("leaveDocument", formDataHaji.leaveDocument);
+    formData.append("type", formDataHaji.type);
+    formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate));
+    formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate));
+    formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
+    formData.append("leaveWrote", formDataHaji.leaveWrote);
+    formData.append("leaveDetail", formDataHaji.leaveDetail);
+    formData.append(
+      "leavegovernmentDate",
+      dateToISO(formDataHaji.leavegovernmentDate)
+    );
+    props.onSubmit(FormData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataHaji.leaveStartDate ?? null,
+      EndLeaveDate: formDataHaji.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        // formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+        formDataHaji.leaveTotal = data.totalDate;
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataHaji.leaveStartDate,
+    formDataHaji.leaveEndDate
+  );
+  formDataHaji.leaveTotal = newLeaveTotal;
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataHaji.leaveWrote = props.data.leaveWrote;
+    formDataHaji.leavegovernmentDate = props.data.leavegovernmentDate;
+    formDataHaji.leaveStartDate = props.data.leaveStartDate;
+    formDataHaji.leaveEndDate = props.data.leaveEndDate;
+    formDataHaji.totalLeave = props.data.totalLeave;
+    formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
+    formDataHaji.leaveDetail = props.data.leaveDetail;
+    // formDataHaji.leaveDocument = props.data.leaveDocument;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate" class="full-width">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataHaji.leaveWrote"
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          label="เขียนที่"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              v-model="formDataHaji.leaveStartDate"
+              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+              @update:model-value="formDataHaji.leaveEndDate = null"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leaveStartDateRef"
+                  bg-color="white"
+                  class="full-width datepicker"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  :label="`${'ลาตั้งแต่วันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                  :model-value="
+                    formDataHaji.leaveStartDate != null
+                      ? date2Thai(formDataHaji.leaveStartDate)
+                      : null
+                  "
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <datepicker
+              v-model="formDataHaji.leaveEndDate"
+              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+              @update:model-value="updateLeaveTotal"
+              :readonly="!formDataHaji.leaveStartDate"
+              :min-date="formDataHaji.leaveStartDate"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leaveEndDateRef"
+                  class="full-width datepicker"
+                  bg-color="white"
+                  outlined
+                  dense
+                  :readonly="!formDataHaji.leaveStartDate"
+                  hide-bottom-space
+                  :label="`${'ลาถึงวันที่'}`"
+                  @update:model-value="fetchCheck()"
+                  :model-value="
+                    formDataHaji.leaveEndDate != null
+                      ? date2Thai(formDataHaji.leaveEndDate)
+                      : null
+                  "
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <q-input
+              class="col-12 col-md-2 col-sm-6"
+              dense
+              outlined
+              bg-color="white"
+              ref="leaveTotalRef"
+              for="leaveTotalRef"
+              v-model="formDataHaji.leaveTotal"
+              label="จำนวนวันที่ลา"
+              readonly
+              hide-bottom-space
+            />
+            <datepicker
+              v-model="formDataHaji.leavegovernmentDate"
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              readonly
+              week-start="0"
+              :locale="'th'"
+              :enableTimePicker="false"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavegovernmentDateRef"
+                  bg-color="white"
+                  class="full-width"
+                  outlined
+                  dense
+                  readonly
+                  hide-bottom-space
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :model-value="
+                    formDataHaji.leavegovernmentDate != null
+                      ? date2Thai(formDataHaji.leavegovernmentDate)
+                      : null
+                  "
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+
+        <div class="q-pl-sm text-weight-bold text-dark col-12">
+          เคยไปประกอบพิธีฮัจญ์หรือไม่
+        </div>
+        <div class="col-12">
+          <q-radio
+            v-model="formDataHaji.hajjDayStatus"
+            val="true"
+            checked-icon="task_alt"
+            label="เคย"
+          />
+          <q-radio
+            v-model="formDataHaji.hajjDayStatus"
+            val="false"
+            checked-icon="task_alt"
+            label="ไม่เคยไปประกอบพิธีฮัจญ์"
+          />
+        </div>
+
+        <q-input
+          v-model="formDataHaji.leaveDetail"
+          class="col-12 q-mt-sm cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            v-model="formDataHaji.leaveDocument"
+            bg-color="white"
+            label="เอกสารประกอบ"
+            use-chips
+            @added="fileUploadDoc"
+            dense
+            outlined
+            multiple
+            hide-bottom-space
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.fileName }}
+                  </q-item-label>
+
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue

@@ -0,0 +1,493 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const router = useRouter();
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  calculateDurationYmd,
+  dateToISO,
+  success,
+  messageError,
+  fails,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+const absentDaySummonRef = ref<object | null>(null);
+const absentDayLocationRef = ref<object | null>(null);
+const absentDayRegistorDateRef = ref<object | null>(null);
+const absentDayGetInRef = ref<object | null>(null);
+const absentDayAtRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataMilitary = reactive<any>({
+  type: dataStore.typeId,
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: 0,
+  leaveDocument: null,
+  leaveWrote: "",
+  absentDaySummon: "",
+  absentDayLocation: "",
+  absentDayRegistorDate: null,
+  absentDayGetIn: "",
+  absentDayAt: "",
+  leaveDetail: "",
+});
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: MilitaryForm = {
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveWrote: leaveWroteRef,
+  absentDaySummon: absentDaySummonRef,
+  absentDayLocation: absentDayLocationRef,
+  absentDayRegistorDate: absentDayRegistorDateRef,
+  absentDayGetIn: absentDayGetInRef,
+  absentDayAt: absentDayAtRef,
+  leaveDetail: leaveDetailRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+function onValidate() {
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataMilitary.leaveDocument.length > 0) {
+    // 	const blob = formDataMilitary.leaveDocument.slice(0, formDataMilitary.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataMilitary.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+    formData.append("leaveDocument", formDataMilitary.leaveDocument);
+    formData.append("type", formDataMilitary.type);
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataMilitary.leaveStartDate)
+    );
+    formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate));
+    formData.append("absentDaySummon", formDataMilitary.absentDaySummon);
+    formData.append("absentDayLocation", formDataMilitary.absentDayLocation);
+    formData.append(
+      "absentDayRegistorDate",
+      dateToISO(formDataMilitary.absentDayRegistorDate)
+    );
+    formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn);
+    formData.append("absentDayAt", formDataMilitary.absentDayAt);
+    formData.append("leaveWrote", formDataMilitary.leaveWrote);
+    formData.append("leaveDetail", formDataMilitary.leaveDetail);
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function fetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataMilitary.leaveStartDate ?? null,
+      EndLeaveDate: formDataMilitary.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        // formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+        formDataMilitary.leaveTotal = data.totalDate;
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataMilitary.leaveStartDate,
+    formDataMilitary.leaveEndDate
+  );
+  formDataMilitary.leaveTotal = newLeaveTotal;
+  console.log("test");
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataMilitary.leaveWrote = props.data.leaveWrote;
+    formDataMilitary.leaveStartDate = props.data.leaveStartDate;
+    formDataMilitary.leaveEndDate = props.data.leaveEndDate;
+    formDataMilitary.leaveTotal = props.data.leaveTotal;
+    formDataMilitary.absentDaySummon = props.data.absentDaySummon;
+    formDataMilitary.absentDayLocation = props.data.absentDayLocation;
+    formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate;
+    formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
+    formDataMilitary.absentDayAt = props.data.absentDayAt;
+    formDataMilitary.leaveDetail = props.data.leaveDetail;
+    // formDataMilitary.leaveDocument = props.data.leaveDocument;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          outlined
+          bg-color="white"
+          hide-bottom-space
+          v-model="formDataMilitary.leaveWrote"
+          label="เขียนที่"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataMilitary.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          @update:model-value="formDataMilitary.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              bg-color="white"
+              dense
+              ref="leaveStartDateRef"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formDataMilitary.leaveStartDate != null
+                  ? date2Thai(formDataMilitary.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataMilitary.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          @update:model-value="updateLeaveTotal, fetchCheck()"
+          :readonly="!formDataMilitary.leaveStartDate"
+          :min-date="formDataMilitary.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              bg-color="white"
+              hide-bottom-space
+              :readonly="!formDataMilitary.leaveStartDate"
+              class="full-width datepicker"
+              :model-value="
+                formDataMilitary.leaveEndDate != null
+                  ? date2Thai(formDataMilitary.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          bg-color="white"
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataMilitary.leaveTotal"
+          label="จำนวนวันที่ลา"
+          readonly
+          hide-bottom-space
+        />
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              ref="absentDaySummonRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              v-model="formDataMilitary.absentDaySummon"
+              label="ได้รับหมายเรียกของ"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
+            />
+
+            <q-input
+              ref="atRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              v-model="formDataMilitary.absentDayLocation"
+              label="ที่"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกที่'}`]"
+            />
+          </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+              menu-class-name="modalfix"
+              v-model="formDataMilitary.absentDayRegistorDate"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="absentDayRegistorDateRef"
+                  bg-color="white"
+                  hide-bottom-space
+                  class="full-width datepicker"
+                  :model-value="
+                    formDataMilitary.absentDayRegistorDate != null
+                      ? date2Thai(formDataMilitary.absentDayRegistorDate)
+                      : null
+                  "
+                  :label="`${'ลงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <q-input
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              ref="absentDayGetInRef"
+              outlined
+              v-model="formDataMilitary.absentDayGetIn"
+              label="ให้เข้ารับการ"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
+            />
+
+            <q-input
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              ref="absentDayAtRef"
+              v-model="formDataMilitary.absentDayAt"
+              label="ณ ที่"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอก ณ ที่'}`]"
+            />
+          </div>
+        </div>
+
+        <q-input
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          bg-color="white"
+          outlined
+          v-model="formDataMilitary.leaveDetail"
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            v-model="formDataMilitary.leaveDocument"
+            dense
+            label="เอกสารประกอบ"
+            outlined
+            bg-color="white"
+            multiple
+            hide-bottom-space
+            use-chips
+            @added="fileUploadDoc"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.fileName }}
+                  </q-item-label>
+
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/09_StudyForm.vue

@@ -0,0 +1,646 @@
+<script setup lang="ts">
+import { reactive, ref, computed, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  calculateDurationYmd,
+  fails,
+  dateToISO,
+  success,
+  messageError,
+  arabicNumberToText,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leavebirthDateRef = ref<object | null>(null);
+const leavegovernmentDateRef = ref<object | null>(null);
+const leaveSalaryRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const studyDayScholarshipRef = ref<object | null>(null);
+const studyDayCountryRef = ref<object | null>(null);
+const studyDayUniversityNameRef = ref<object | null>(null);
+const studyDayDegreeLevelRef = ref<object | null>(null);
+const studyDaySubjectRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataStudy = reactive<any>({
+  type: dataStore.typeId, //
+  leaveWrote: "", //
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leavebirthDate: new Date(),
+  leavegovernmentDate: new Date(),
+  leaveSalary: 10000,
+  leaveSalaryText: arabicNumberToText(10000),
+  leaveNumber: "",
+  leaveAddress: "",
+  studyDayScholarship: "",
+  studyDayCountry: "",
+  studyDayUniversityName: "", //
+  studyDayDegreeLevel: "", //
+  studyDaySubject: "", //
+  leaveDocument: "", //
+  leaveDetail: "",
+  leaveTotal: "",
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: studyDaySubjectForm = {
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leavebirthDate: leavebirthDateRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leaveSalary: leaveSalaryRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  studyDayScholarship: studyDayScholarshipRef,
+  studyDayCountry: studyDayCountryRef,
+  studyDayUniversityName: studyDayUniversityNameRef,
+  studyDayDegreeLevel: studyDayDegreeLevelRef,
+  studyDaySubject: studyDaySubjectRef,
+  leaveWrote: leaveWroteRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+function onValidate() {
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataStudy.leaveDocument.length > 0) {
+    // 	const blob = formDataStudy.leaveDocument.slice(0, formDataStudy.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataStudy.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+    formData.append("leaveDocument", formDataStudy.leaveDocument);
+    formData.append("type", formDataStudy.type); //
+    formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)); //
+    formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)); //
+    formData.append("studyDaySubject", formDataStudy.studyDaySubject);
+    formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel);
+    formData.append(
+      "leavegovernmentDate",
+      dateToISO(formDataStudy.leavegovernmentDate)
+    );
+    formData.append("leavebirthDate", dateToISO(formDataStudy.leavebirthDate));
+    formData.append(
+      "studyDayUniversityName",
+      formDataStudy.studyDayUniversityName
+    );
+    formData.append("studyDayCountry", formDataStudy.studyDayCountry);
+    formData.append("leaveWrote", formDataStudy.leaveWrote); //
+    formData.append("leaveDetail", formDataStudy.leaveDetail); //
+    formData.append("studyDayScholarship", formDataStudy.studyDayScholarship);
+    formData.append("leaveAddress", formDataStudy.leaveAddress); //
+    formData.append("leaveNumber", formDataStudy.leaveNumber); //
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataStudy.leaveStartDate ?? null,
+      EndLeaveDate: formDataStudy.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataStudy.leaveTotal =
+          data.fetchCheck - data.sumDateWork - data.sumDateHoliday;
+        // formDataStudy.leaveLast = data.fetchCheck
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataStudy.leaveStartDate,
+    formDataStudy.leaveEndDate
+  );
+  formDataStudy.leaveTotal = newLeaveTotal;
+  console.log("test");
+}
+
+/**
+ * แปลงตัวเลขเงินเดือน
+ */
+const formattedleaveSalary = computed(() => {
+  return dataStore.salary !== null
+    ? dataStore.salary.toLocaleString("th-TH")
+    : "";
+});
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataMilitary.leaveWrote = props.data.leaveWrote;
+    formDataMilitary.leaveStartDate = props.data.leaveStartDate;
+    formDataMilitary.leaveEndDate = props.data.leaveEndDate;
+    formDataMilitary.leaveTotal = props.data.leaveTotal;
+    formDataMilitary.leavebirthDate = props.data.leavebirthDate;
+    formDataMilitary.leavegovernmentDate = props.data.leavegovernmentDate;
+    formDataMilitary.leaveSalary = props.data.leaveSalary;
+    formDataMilitary.leaveSalaryText = props.data.leaveSalaryText;
+    formDataMilitary.leaveNumber = props.data.leaveNumber;
+    formDataMilitary.leaveAddress = props.data.leaveAddress;
+    formDataMilitary.studyDayScholarship = props.data.studyDayScholarship;
+    formDataMilitary.studyDayCountry = props.data.studyDayCountry;
+    formDataMilitary.studyDayUniversityName = props.data.studyDayUniversityName;
+    formDataMilitary.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
+    formDataMilitary.studyDaySubject = props.data.studyDaySubject;
+    // formDataMilitary.leaveDocument = props.data.leaveDocument;
+    formDataMilitary.leaveDetail = props.data.leaveDetail;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataStudy.leaveWrote"
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          label="เขียนที่"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          v-model="formDataStudy.leaveStartDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :enableTimePicker="false"
+          :locale="'th'"
+          @update:model-value="formDataStudy.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveStartDateRef"
+              class="full-width datepicker"
+              bg-color="white"
+              outlined
+              dense
+              lazy-rules
+              hide-bottom-space
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :model-value="
+                formDataStudy.leaveStartDate != null
+                  ? date2Thai(formDataStudy.leaveStartDate)
+                  : null
+              "
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          v-model="formDataStudy.leaveEndDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :locale="'th'"
+          @update:model-value="updateLeaveTotal, FetchCheck()"
+          :readonly="!formDataStudy.leaveStartDate"
+          :enableTimePicker="false"
+          :min-date="formDataStudy.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveEndDateRef"
+              class="full-width datepicker"
+              outlined
+              dense
+              lazy-rules
+              bg-color="white"
+              hide-bottom-space
+              :label="`${'ลาถึงวันที่'}`"
+              :readonly="!formDataStudy.leaveStartDate"
+              :model-value="
+                formDataStudy.leaveEndDate != null
+                  ? date2Thai(formDataStudy.leaveEndDate)
+                  : null
+              "
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          bg-color="white"
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataStudy.leaveTotal"
+          label="มีกำหนด"
+          readonly
+          hide-bottom-space
+        />
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              v-model="formDataStudy.leavegovernmentDate"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              readonly
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavegovernmentDateRef"
+                  class="full-width"
+                  bg-color="white"
+                  outlined
+                  readonly
+                  dense
+                  hide-bottom-space
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :model-value="
+                    dataStore.dateAppoint != null
+                      ? date2Thai(dataStore.dateAppoint)
+                      : null
+                  "
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <datepicker
+              v-model="formDataStudy.leavebirthDate"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              readonly
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavebirthDateRef"
+                  class="full-width"
+                  bg-color="white"
+                  outlined
+                  dense
+                  readonly
+                  hide-bottom-space
+                  :label="`${'วันเดือนปีเกิด'}`"
+                  :model-value="
+                    dataStore.birthDate != null
+                      ? date2Thai(dataStore.birthDate)
+                      : null
+                  "
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <q-input
+              v-model="formattedleaveSalary"
+              ref="leaveSalaryRef"
+              class="col-12 col-sm-6 col-md-3"
+              bg-color="white"
+              dense
+              outlined
+              readonly
+              label="เงินเดือนปัจจุบัน"
+            />
+
+            <q-input
+              v-model="dataStore.salaryText"
+              ref="leaveSalaryRef"
+              class="col-12 col-sm-6 col-md-3"
+              bg-color="white"
+              dense
+              readonly
+              outlined
+              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
+            />
+          </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              v-model="formDataStudy.studyDayUniversityName"
+              ref="studyDayUniversityNameRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ชื่อสถานศึกษา"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
+            />
+
+            <q-input
+              v-model="formDataStudy.studyDayDegreeLevel"
+              ref="studyDayDegreeLevelRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ชั้นปริญญา"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
+            />
+
+            <q-input
+              v-model="formDataStudy.studyDaySubject"
+              ref="studyDaySubjectRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ศึกษาวิชา"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
+            />
+
+            <q-input
+              v-model="formDataStudy.studyDayCountry"
+              ref="studyDayCountryRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ประเทศ"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
+            />
+
+            <q-input
+              v-model="formDataStudy.studyDayScholarship"
+              ref="studyDayScholarshipRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ด้วยทุน"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+            />
+
+            <q-input
+              v-model="formDataStudy.leaveNumber"
+              ref="leaveNumberRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              unmasked-value
+              hide-bottom-space
+              mask="(###)-###-####"
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              v-model="formDataStudy.leaveAddress"
+              ref="leaveAddressRef"
+              class="col-12 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              hide-bottom-space
+              :rules="[
+                (val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+
+        <q-input
+          v-model="formDataStudy.leaveDetail"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            v-model="formDataStudy.leaveDocument"
+            bg-color="white"
+            dense
+            outlined
+            multiple
+            use-chips
+            @added="fileUploadDoc"
+            label="เอกสารประกอบ"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.fileName }}
+                  </q-item-label>
+
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/10_TrainForm.vue

@@ -0,0 +1,622 @@
+<script setup lang="ts">
+import { reactive, ref, computed, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useQuasar } from "quasar";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  arabicNumberToText,
+  calculateDurationYmd,
+  fails,
+  dateToISO,
+  success,
+  messageError,
+} = mixin;
+const edit = ref<boolean>(true);
+const files = ref<any>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataTrain = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leavebirthDate: new Date(),
+  leavegovernmentDate: new Date(),
+  leaveSalary: 10000,
+  leaveSalaryText: arabicNumberToText(10000),
+  leaveNumber: "",
+  leaveAddress: "",
+  studyDayScholarship: "",
+  studyDayCountry: "",
+  studyDayTrainingSubject: "",
+  studyDayTrainingName: "",
+  leaveDocument: "",
+  leaveDetail: "",
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leavebirthDateRef = ref<object | null>(null);
+const leavegovernmentDateRef = ref<object | null>(null);
+const leaveNumberRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const studyDayScholarshipRef = ref<object | null>(null);
+const studyDayCountryRef = ref<object | null>(null);
+const studyDayTrainingSubjectRef = ref<object | null>(null);
+const studyDayTrainingNameRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: TrainForm = {
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leavebirthDate: leavebirthDateRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  studyDayScholarship: studyDayScholarshipRef,
+  studyDayCountry: studyDayCountryRef,
+  studyDayTrainingSubject: studyDayTrainingSubjectRef,
+  studyDayTrainingName: studyDayTrainingNameRef,
+  leaveWrote: leaveWroteRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+function onValidate() {
+  const hasError = [];
+
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataTrain.leaveDocument.length > 0) {
+    // 	const blob = formDataTrain.leaveDocument.slice(0, formDataTrain.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataTrain.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // } //
+    formData.append("leaveDocument", formDataTrain.leaveDocument);
+    formData.append("type", formDataTrain.type); //
+    formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)); //
+    formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)); //
+    formData.append("studyDayCountry", formDataTrain.studyDayCountry);
+    formData.append(
+      "leavegovernmentDate",
+      dateToISO(formDataTrain.leavegovernmentDate)
+    );
+    formData.append("leavebirthDate", dateToISO(formDataTrain.leavebirthDate));
+    formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName);
+    formData.append(
+      "studyDayTrainingSubject",
+      formDataTrain.studyDayTrainingSubject
+    );
+    formData.append("leaveWrote", formDataTrain.leaveWrote); //
+    formData.append("leaveDetail", formDataTrain.leaveDetail); //
+    formData.append("studyDayScholarship", formDataTrain.studyDayScholarship);
+    formData.append("leaveAddress", formDataTrain.leaveAddress); //
+    formData.append("leaveNumber", formDataTrain.leaveNumber); //
+    formData.append("leaveSalaryText", formDataTrain.leaveSalaryText); //
+    formData.append("leaveSalary", formDataTrain.leaveSalary); //
+    formData.append("leaveTotal", formDataTrain.leaveTotal); //
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataTrain.leaveStartDate ?? null,
+      EndLeaveDate: formDataTrain.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        // formDataTrain.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+        // formDataTrain.leaveTotal = data.totalDate
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataTrain.leaveStartDate,
+    formDataTrain.leaveEndDate
+  );
+  formDataTrain.leaveTotal = newLeaveTotal;
+  console.log("test");
+}
+
+/**
+ * แปลงตัวเลขเงินเดือน
+ */
+const formattedSalary = computed(() => {
+  return formDataTrain.leaveSalary !== null
+    ? formDataTrain.leaveSalary.toLocaleString("th-TH")
+    : "";
+});
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataTrain.leaveWrote = props.data.leaveWrote;
+    formDataTrain.leaveStartDate = props.data.leaveStartDate;
+    formDataTrain.leaveEndDate = props.data.leaveEndDate;
+    formDataTrain.leavebirthDate = props.data.leavebirthDate;
+    formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate;
+    formDataTrain.leaveSalary = props.data.leaveSalary;
+    formDataTrain.leaveSalaryText = props.data.leaveSalaryText;
+    formDataTrain.leaveNumber = props.data.leaveNumber;
+    formDataTrain.leaveAddress = props.data.leaveAddress;
+    formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
+    formDataTrain.studyDayCountry = props.data.studyDayCountry;
+    formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
+    formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
+    formDataTrain.leaveDetail = props.data.leaveDetail;
+    // formDataTrain.leaveDocument = props.data.leaveDocument;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataTrain.leaveWrote"
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          label="เขียนที่"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          v-model="formDataTrain.leaveStartDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :enableTimePicker="false"
+          :locale="'th'"
+          @update:model-value="formDataTrain.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveStartDateRef"
+              class="full-width datepicker"
+              bg-color="white"
+              outlined
+              dense
+              lazy-rules
+              hide-bottom-space
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :model-value="
+                formDataTrain.leaveStartDate != null
+                  ? date2Thai(formDataTrain.leaveStartDate)
+                  : null
+              "
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          v-model="formDataTrain.leaveEndDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          @update:model-value="updateLeaveTotal, FetchCheck()"
+          week-start="0"
+          :readonly="!formDataTrain.leaveStartDate"
+          :locale="'th'"
+          :enableTimePicker="false"
+          :min-date="formDataTrain.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveEndDateRef"
+              class="full-width datepicker"
+              outlined
+              dense
+              lazy-rules
+              bg-color="white"
+              hide-bottom-space
+              :label="`${'ลาถึงวันที่'}`"
+              :readonly="!formDataTrain.leaveStartDate"
+              :model-value="
+                formDataTrain.leaveEndDate != null
+                  ? date2Thai(formDataTrain.leaveEndDate)
+                  : null
+              "
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          bg-color="white"
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataTrain.leaveTotal"
+          label="มีกำหนด"
+          readonly
+          hide-bottom-space
+        />
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              v-model="formDataTrain.leavegovernmentDate"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              readonly
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavegovernmentDateRef"
+                  class="full-width"
+                  outlined
+                  readonly
+                  bg-color="white"
+                  dense
+                  hide-bottom-space
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :model-value="
+                    formDataTrain.leavegovernmentDate != null
+                      ? date2Thai(formDataTrain.leavegovernmentDate)
+                      : null
+                  "
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <datepicker
+              v-model="formDataTrain.leavebirthDate"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              readonly
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavebirthDateRef"
+                  class="full-width"
+                  bg-color="white"
+                  outlined
+                  dense
+                  readonly
+                  hide-bottom-space
+                  :label="`${'วันเดือนปีเกิด'}`"
+                  :model-value="
+                    formDataTrain.leavebirthDate != null
+                      ? date2Thai(formDataTrain.leavebirthDate)
+                      : null
+                  "
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(---black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <q-input
+              v-model="formattedSalary"
+              class="col-12 col-sm-6 col-md-3"
+              bg-color="white"
+              dense
+              outlined
+              readonly
+              label="เงินเดือนปัจจุบัน"
+            />
+
+            <q-input
+              v-model="formDataTrain.leaveSalaryText"
+              class="col-12 col-sm-6 col-md-3"
+              dense
+              readonly
+              outlined
+              bg-color="white"
+              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
+            />
+          </div>
+        </div>
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              v-model="formDataTrain.studyDayTrainingSubject"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              ref="studyDayTrainingSubjectRef"
+              bg-color="white"
+              dense
+              outlined
+              label="ด้าน/หลักสูตร"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
+            />
+
+            <q-input
+              v-model="formDataTrain.studyDayTrainingName"
+              ref="studyDayTrainingNameRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ณ สถานที่"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
+            />
+
+            <q-input
+              v-model="formDataTrain.studyDayCountry"
+              ref="studyDayCountryRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              label="ประเทศ"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
+            />
+
+            <q-input
+              v-model="formDataTrain.studyDayScholarship"
+              ref="studyDayScholarshipRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ด้วยทุน"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+            />
+
+            <q-input
+              v-model="formDataTrain.leaveNumber"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              ref="leaveNumberRef"
+              dense
+              outlined
+              unmasked-value
+              hide-bottom-space
+              bg-color="white"
+              mask="(###)-###-####"
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              v-model="formDataTrain.leaveAddress"
+              ref="leaveAddressRef"
+              class="col-12 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              hide-bottom-space
+              :rules="[
+                (val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
+
+        <q-input
+          v-model="formDataTrain.leaveDetail"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            v-model="formDataTrain.leaveDocument"
+            bg-color="white"
+            dense
+            outlined
+            multiple
+            label="เอกสารประกอบ"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.fileName }}
+                  </q-item-label>
+
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue

@@ -0,0 +1,461 @@
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted } from "vue";
+import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+import genReport from "@/plugins/genreport";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } =
+  mixin;
+const edit = ref<boolean>(true);
+const router = useRouter();
+const isSave = ref<boolean>(false);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataWorkInternational = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveDetail: "",
+  leaveDocument: null,
+  leaveDraftDocument: null,
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const FormRef: FormRef = {
+  leaveWrote: leaveWroteRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveDetail: leaveDetailRef,
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const nameFileDraft = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function onValidate() {
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  // ถ้า Validate ผ่านให้บันทึกข้อมูล
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // //
+    // if (formDataWorkInternational.leaveDocument.length > 0) {
+    // 	const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataWorkInternational.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // }
+
+    if (formDataWorkInternational.leaveDocument) {
+      formData.append("leaveDocument", formDataWorkInternational.leaveDocument);
+    }
+
+    if (formDataWorkInternational.leaveDraftDocument) {
+      formData.append(
+        "leaveDraftDocument",
+        formDataWorkInternational.leaveDraftDocument
+      );
+    }
+    formData.append("type", formDataWorkInternational.type); //
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataWorkInternational.leaveStartDate)
+    ); //
+    formData.append(
+      "leaveEndDate",
+      dateToISO(formDataWorkInternational.leaveEndDate)
+    ); //
+    formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
+    formData.append("leaveDetail", formDataWorkInternational.leaveDetail); //
+    props.onSubmit(FormData);
+  }
+}
+
+//download function
+async function onClickDownloadFile(id: string, fileName: string) {
+  // showLoader();
+  await http
+    .get(config.API.leaveReport(id))
+    .then(async (res) => {
+      const data = res.data.result;
+      await genReport(data, fileName);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
+      EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataWorkInternational.leaveTotal =
+          data.totalDate - data.sumDateWork - data.sumDateHoliday;
+        // formDataWorkInternational.leaveLast = data.totalDate
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataWorkInternational.leaveWrote = props.data.leaveWrote;
+    formDataWorkInternational.leaveStartDate = new Date(
+      props.data.leaveStartDate
+    );
+    formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
+    formDataWorkInternational.leaveDetail = props.data.leaveDetail;
+    // formDataWorkInternational.leaveDocument = props.data.leaveDocument;
+    // formDataWorkInternational.leaveDraftDocument =
+    //   props.data.leaveDraftDocument;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          hide-bottom-space
+          bg-color="white"
+          for="leaveWroteRef"
+          dense
+          outlined
+          v-model="formDataWorkInternational.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataWorkInternational.leaveStartDate"
+          :locale="'th'"
+          hide-bottom-space
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+          @update:model-value="formDataWorkInternational.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveStartDateRef"
+              for="leaveStartDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataWorkInternational.leaveStartDate != null
+                  ? date2Thai(formDataWorkInternational.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataWorkInternational.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          @update:model-value="FetchCheck()"
+          week-start="0"
+          :readonly="!formDataWorkInternational.leaveStartDate"
+          :min-date="formDataWorkInternational.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              for="leaveEndDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!formDataWorkInternational.leaveStartDate"
+              class="full-width datepicker"
+              :model-value="
+                formDataWorkInternational.leaveEndDate != null
+                  ? date2Thai(formDataWorkInternational.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <!-- <q-input
+							class="col-md-3 col-sm-12"
+							dense
+							outlined
+							ref="leaveTotalRef"
+							for="leaveTotalRef"
+							type="number"
+							v-model="formDataWorkInternational.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+						/> -->
+
+        <q-input
+          hide-bottom-space
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          bg-color="white"
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataWorkInternational.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <q-file
+          ref="fileRef"
+          bg-color="white"
+          v-model="formDataWorkInternational.leaveDocument"
+          @added="fileUploadDoc"
+          dense
+          label="เอกสารประกอบ"
+          outlined
+          use-chips
+          class="q-pl-sm col-12"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+        </q-file>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in formDataWorkInternational.leaveDocument"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <div
+      v-if="
+        formDataWorkInternational.leaveWrote &&
+        formDataWorkInternational.leaveEndDate &&
+        formDataWorkInternational.leaveStartDate
+      "
+      class="q-mt-md"
+    >
+      <div style="display: flex; align-items: center">
+        <q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
+        <div class="q-pl-sm text-weight-bold text-dark">
+          ดาวน์โหลด/อัปโหลดแบบฟอร์ม
+        </div>
+      </div>
+      <q-card class="bg-grey-1 q-pa-sm" bordered>
+        <div class="row">
+          <div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
+            <div class="column q-mx-xs">
+              <div class="q-pl-sm text-weight-bold text-dark text-center">
+                ดาวน์โหลด
+              </div>
+              <q-btn
+                color="primary"
+                icon="download"
+                label="ดาวน์โหลดแบบฟอร์ม"
+                @click="
+                  onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
+                "
+              />
+            </div>
+          </div>
+          <div class="col-10 col-sm-5 col-md-4 q-my-sm">
+            <div class="column q-mx-xs">
+              <div class="q-pl-sm text-weight-bold text-dark text-center">
+                อัปโหลด
+              </div>
+              <q-file
+                v-model="formDataWorkInternational.leaveDraftDocument"
+                dense
+                label="แบบฟอร์ม"
+                outlined
+                bg-color="white"
+                accept=".pdf"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+          <!-- <div class="col-md-1 self-end q-mb-sm">
+						<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
+							><q-tooltip>อัปโหลด</q-tooltip></q-btn
+						>
+					</div> -->
+        </div>
+      </q-card>
+    </div>
+
+    <div v-if="!isSave">
+      <q-separator class="q-mt-sm" />
+      <div class="row col-12 q-pt-md">
+        <q-space />
+        <q-btn
+          id="onSubmit"
+          type="submit"
+          unelevated
+          dense
+          class="q-px-md items-center btnBlue"
+          label="บันทึก"
+          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        >
+        <q-btn
+          v-if="data"
+          id="onSubmit"
+          type="button"
+          unelevated
+          dense
+          class="q-px-md items-center q-ml-sm"
+          color="primary"
+          label="ยื่นใบลา"
+          @click="onConfirm"
+          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        >
+      </div>
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue

@@ -0,0 +1,681 @@
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from "vue";
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/05_leave/interface/request/FollowSpouseForm";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const router = useRouter();
+const {
+  dialogConfirm,
+  date2Thai,
+  arabicNumberToText,
+  calculateDurationYmd,
+  dateToISO,
+  fails,
+  success,
+  messageError,
+} = mixin;
+const edit = ref<boolean>(true);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataFollowSpouse = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "", //จำนวนวันลา
+  leaveSalaryText: 25000,
+  leaveSalary: 25000, //เงินเดือนปัจจุบัน
+  coupleDayName: "", //ชื่อคู่สมรส
+  coupleDayPosition: "", //ตำแหน่งคู่สมรส
+  coupleDayLevel: "", //ระดับคู่สมรส
+  coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
+  followHistoryCountry: "ลาว", //ประวัติการลาติดตามคู่สมรส
+  followHistoryTime: "0 วัน",
+  followHistoryStart: new Date(),
+  followHistoryEnd: new Date(),
+  leaveDetail:
+    "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
+  leaveDocument: [], //เอกสารปะกอบ
+});
+
+/** แปลงตัวแปร Salary */
+const formattleaveSalaryText = arabicNumberToText(
+  formDataFollowSpouse.leaveSalaryText
+);
+const formattSalary = computed(() => {
+  return formDataFollowSpouse.leaveSalary !== null
+    ? formDataFollowSpouse.leaveSalary.toLocaleString("th-TH")
+    : "";
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveWroteRef = ref<object | null>(null);
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveSalaryRef = ref<object | null>(null);
+const leaveTotalRef = ref<object | null>(null);
+const coupleDayNameRef = ref<object | null>(null);
+const leaveAddressRef = ref<object | null>(null);
+const leaveDetailRef = ref<object | null>(null);
+const coupleDayPositionRef = ref<object | null>(null);
+const coupleDayLevelRef = ref<object | null>(null);
+const coupleDayLevelCountryRef = ref<object | null>(null);
+const followHistoryCountryRef = ref<object | null>(null);
+const followHistoryTimeRef = ref<object | null>(null);
+const followHistoryStartRef = ref<object | null>(null);
+const followHistoryEndRef = ref<object | null>(null);
+const leaveDocumentRef = ref<object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const FormRef: FormRef = {
+  leaveWrote: leaveWroteRef, //เขียนที่***
+  leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
+  leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
+  leaveTotal: leaveTotalRef, //จำนวนวันลา
+  leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
+  coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
+  coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
+  coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
+  coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
+  followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
+  followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
+  followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
+  followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
+  leaveDetail: leaveDetailRef, //รายละเอียดการลา
+  leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
+  leaveDocument: leaveDocumentRef,
+};
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function onValidate() {
+  const hasError = [];
+  for (const key in FormRef) {
+    if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+      const property = FormRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataFollowSpouse.leaveDocument.length > 0) {
+    // 	const blob = formDataFollowSpouse.leaveDocument.slice(0, formDataFollowSpouse.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataFollowSpouse.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // } //
+    formData.append("leaveDocument", formDataFollowSpouse.leaveDocument);
+    formData.append("type", formDataFollowSpouse.type); //
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataFollowSpouse.leaveStartDate)
+    ); //
+    formData.append(
+      "leaveEndDate",
+      dateToISO(formDataFollowSpouse.leaveEndDate)
+    ); //
+    formData.append(
+      "followHistoryStart",
+      dateToISO(formDataFollowSpouse.followHistoryStart)
+    ); //
+    formData.append(
+      "followHistoryEnd",
+      dateToISO(formDataFollowSpouse.followHistoryEnd)
+    ); //
+    formData.append("leaveWrote", formDataFollowSpouse.leaveWrote); //
+    formData.append("leaveDetail", formDataFollowSpouse.leaveDetail); //
+    formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText); //
+    formData.append("leaveSalary", formDataFollowSpouse.leaveSalary); //
+    formData.append(
+      "followHistoryTime",
+      formDataFollowSpouse.followHistoryTime
+    ); //
+    formData.append(
+      "followHistoryCountry",
+      formDataFollowSpouse.followHistoryCountry
+    ); //
+    formData.append(
+      "coupleDayLevelCountry",
+      formDataFollowSpouse.coupleDayLevelCountry
+    ); //
+    formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel); //
+    formData.append(
+      "coupleDayPosition",
+      formDataFollowSpouse.coupleDayPosition
+    ); //
+    formData.append("coupleDayName", formDataFollowSpouse.coupleDayName); //
+    formData.append("leaveTotal", formDataFollowSpouse.leaveTotal); //
+    props.onSubmit(formData);
+  }
+}
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null,
+      EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        formDataFollowSpouse.leaveTotal =
+          // data.totalDate - data.sumDateWork - data.sumDateHoliday;
+          formDataFollowSpouse.leaveTotal = data.totalDate;
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function อัพเดทค่า LeaveTotal
+ */
+function updateLeaveTotal() {
+  const newLeaveTotal = calculateDurationYmd(
+    formDataFollowSpouse.leaveStartDate,
+    formDataFollowSpouse.leaveEndDate
+  );
+  formDataFollowSpouse.leaveTotal = newLeaveTotal;
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
+    formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate);
+    formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
+    formDataFollowSpouse.leaveDetail = props.data.leaveDetail;
+    formDataFollowSpouse.leaveDocument = props.data.leaveDocument;
+    formDataFollowSpouse.leaveTotal = props.data.leaveTotal;
+    formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText;
+    formDataFollowSpouse.leaveSalary = props.data.leaveSalary;
+    formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
+    formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition;
+    formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
+    formDataFollowSpouse.coupleDayLevelCountry =
+      props.data.coupleDayLevelCountry;
+    formDataFollowSpouse.followHistoryCountry = props.data.followHistoryCountry;
+    formDataFollowSpouse.followHistoryTime = props.data.followHistoryTime;
+    formDataFollowSpouse.followHistoryStart = props.data.followHistoryStart;
+    formDataFollowSpouse.followHistoryEnd = props.data.followHistoryEnd;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent.stop="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="col-12 row q-pa-sm q-col-gutter-sm">
+        <q-input
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          for="leaveWroteRef"
+          dense
+          hide-bottom-space
+          bg-color="white"
+          outlined
+          v-model="formDataFollowSpouse.leaveWrote"
+          label="เขียนที่"
+          :readonly="!edit"
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.leaveStartDate"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          :readonly="!edit"
+          @update:model-value="formDataFollowSpouse.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveStartDateRef"
+              for="leaveStartDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit"
+              class="full-width datepicker"
+              :model-value="
+                formDataFollowSpouse.leaveStartDate != null
+                  ? date2Thai(formDataFollowSpouse.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.leaveEndDate"
+          :locale="'th'"
+          autoApply
+          borderless
+          hide-bottom-space
+          :enableTimePicker="false"
+          week-start="0"
+          @update:model-value="updateLeaveTotal, FetchCheck()"
+          :readonly="!formDataFollowSpouse.leaveStartDate"
+          :min-date="formDataFollowSpouse.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="leaveEndDateRef"
+              for="leaveEndDateRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!formDataFollowSpouse.leaveStartDate"
+              class="full-width datepicker"
+              :model-value="
+                formDataFollowSpouse.leaveEndDate != null
+                  ? date2Thai(formDataFollowSpouse.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          bg-color="white"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataFollowSpouse.leaveTotal"
+          label="เป็นเวลา"
+          readonly
+          hide-bottom-space
+        />
+        <div class="col-12 col-md-6 col-sm-12">
+          <q-input
+            hide-bottom-space
+            bg-color="white"
+            class="col-12 col-sm-12"
+            ref="leaveSalaryRef"
+            for="leaveSalaryRef"
+            dense
+            outlined
+            v-model="formattSalary"
+            label="เงินเดือนปัจจุบัน"
+            readonly
+          />
+        </div>
+        <div class="col-12 col-md-6 col-sm-12">
+          <q-input
+            hide-bottom-space
+            bg-color="white"
+            class="col-12 col-sm-12"
+            ref="leaveSalaryRef"
+            for="leaveSalaryRef"
+            dense
+            outlined
+            v-model="formattleaveSalaryText"
+            label="เงินเดือนปัจจุบัน"
+            readonly
+          />
+        </div>
+
+        <div class="col-md-3 col-sm-12">
+          <q-input
+            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            hide-bottom-space
+            ref="coupleDayNameRef"
+            for="coupleDayNameRef"
+            dense
+            bg-color="white"
+            outlined
+            v-model="formDataFollowSpouse.coupleDayName"
+            label="ชื่อคู่สมรส"
+            :readonly="!edit"
+            :rules="[(val) => !!val || `${'ชื่อคู่สมรส'}`]"
+          />
+        </div>
+        <div class="col-md-3 col-sm-12">
+          <q-input
+            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            hide-bottom-space
+            ref="coupleDayPositionRef"
+            for="coupleDayPositionRef"
+            dense
+            outlined
+            bg-color="white"
+            v-model="formDataFollowSpouse.coupleDayPosition"
+            label="ตำแหน่งคู่สมรส"
+            :readonly="!edit"
+            :rules="[(val) => !!val || `${'ตำแหน่งคู่สมรส'}`]"
+          />
+        </div>
+        <div class="col-md-3 col-sm-12">
+          <q-input
+            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            ref="coupleDayLevelRef"
+            for="coupleDayLevelRef"
+            dense
+            hide-bottom-space
+            outlined
+            bg-color="white"
+            v-model="formDataFollowSpouse.coupleDayLevel"
+            label="ระดับคู่สมรส"
+            :readonly="!edit"
+            :rules="[(val) => !!val || `${'ระดับคู่สมรส'}`]"
+          />
+        </div>
+        <div class="col-md-3 col-sm-12">
+          <q-input
+            class="col-12 col-sm-12 cursor-pointer inputgreen"
+            ref="coupleDayLevelCountryRef"
+            for="coupleDayLevelCountryRef"
+            hide-bottom-space
+            dense
+            outlined
+            bg-color="white"
+            v-model="formDataFollowSpouse.coupleDayLevelCountry"
+            label="ไปปฏิบัติราชการ ณ ประเทศ"
+            :readonly="!edit"
+            :rules="[(val) => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
+          />
+        </div>
+        <div class="text-weight-bold text-dark col-12">
+          ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย
+        </div>
+        <datepicker
+          class="col-12 col-md-3 col-sm-12"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.followHistoryStart"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          readonly
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="followHistoryStartRef"
+              for="followHistoryStartRef"
+              hide-bottom-space
+              readonly
+              bg-color="white"
+              class="full-width"
+              :model-value="
+                formDataFollowSpouse.followHistoryStart != null
+                  ? date2Thai(formDataFollowSpouse.followHistoryStart)
+                  : null
+              "
+              :label="`${'ตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--black)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <datepicker
+          class="col-12 col-md-3 col-sm-12"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.followHistoryEnd"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+          readonly
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="followHistoryEndRef"
+              for="followHistoryEndRef"
+              hide-bottom-space
+              bg-color="white"
+              readonly
+              class="full-width"
+              :model-value="
+                formDataFollowSpouse.followHistoryEnd != null
+                  ? date2Thai(formDataFollowSpouse.followHistoryEnd)
+                  : null
+              "
+              :label="`${'ถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--black)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-3 col-sm-12"
+          dense
+          outlined
+          hide-bottom-space
+          bg-color="white"
+          ref="followHistoryCountryRef"
+          for="followHistoryCountryRef"
+          v-model="formDataFollowSpouse.followHistoryCountry"
+          label="ประเทศ"
+          :rules="[(val) => !!val || `${'กรุณาเลือกประเทศ'}`]"
+          readonly
+        />
+        <q-input
+          class="col-12 col-md-3 col-sm-12"
+          dense
+          outlined
+          :readonly="formDataFollowSpouse.followHistoryTime !== ''"
+          hide-bottom-space
+          bg-color="white"
+          ref="followHistoryTimeRef"
+          for="followHistoryTimeRef"
+          v-model="formDataFollowSpouse.followHistoryTime"
+          label="เป็นเวลา"
+        />
+
+        <q-input
+          hide-bottom-space
+          type="textarea"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          dense
+          bg-color="white"
+          outlined
+          ref="leaveDetailRef"
+          for="leaveDetailRef"
+          v-model="formDataFollowSpouse.leaveDetail"
+          label="รายละเอียด"
+          :readonly="!edit"
+        />
+
+        <q-file
+          ref="fileRef"
+          bg-color="white"
+          v-model="formDataFollowSpouse.leaveDocument"
+          @added="fileUploadDoc"
+          dense
+          label="เอกสารประกอบ"
+          outlined
+          use-chips
+          multiple
+          class="q-pl-sm col-12"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="primary" />
+          </template>
+        </q-file>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item
+                v-for="(file, index) in formDataFollowSpouse.leaveDocument"
+                :key="index"
+                class="q-my-xs"
+              >
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.name }}
+                  </q-item-label>
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+        ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+      >
+      <q-btn
+        v-if="data"
+        id="onSubmit"
+        type="button"
+        unelevated
+        dense
+        class="q-px-md items-center q-ml-sm"
+        color="primary"
+        label="ยื่นใบลา"
+        @click="onConfirm"
+        ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+      >
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue

@@ -0,0 +1,437 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+import genReport from "@/plugins/genreport";
+
+/** Use */
+const dataStore = useLeaveStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } =
+  mixin;
+const router = useRouter();
+const edit = ref<boolean>(true);
+const isSave = ref<boolean>(false);
+const files = ref<any>(null);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const leaveStartDateRef = ref<object | null>(null);
+const leaveEndDateRef = ref<object | null>(null);
+const leaveWroteRef = ref<object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formDataRehabilitation = reactive<any>({
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveDocument: "",
+  leaveDetail: "",
+  leaveDraftDocument: null,
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const formRef: RehabilitationForm = {
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leaveWrote: leaveWroteRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+function onValidate() {
+  const hasError = [];
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    // if (formDataRehabilitation.leaveDraftDocument.length > 0) {
+    // 	const blobDrafe = formDataRehabilitation.leaveDraftDocument.slice(0, formDataRehabilitation.leaveDraftDocument[0].size)
+    // 	const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
+    // 		type: formDataRehabilitation.leaveDraftDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDraftDocument", newFileDraft) //
+    // }
+
+    // if (formDataRehabilitation.leaveDocument.length > 0) {
+    // 	const blob = formDataRehabilitation.leaveDocument.slice(0, formDataRehabilitation.leaveDocument[0].size)
+    // 	const newFile = new File(blob, nameFile.value, {
+    // 		type: formDataRehabilitation.leaveDocument[0].type,
+    // 	})
+    // 	formData.append("leaveDocument", newFile)
+    // } //
+    formData.append(
+      "leaveDraftDocument",
+      formDataRehabilitation.leaveDraftDocument
+    );
+    formData.append("leaveDocument", formDataRehabilitation.leaveDocument);
+    formData.append("type", formDataRehabilitation.type); //
+    formData.append(
+      "leaveStartDate",
+      dateToISO(formDataRehabilitation.leaveStartDate)
+    ); //
+    formData.append(
+      "leaveEndDate",
+      dateToISO(formDataRehabilitation.leaveEndDate)
+    ); //
+    formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
+    formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
+    props.onSubmit(formData);
+  }
+}
+
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("");
+const nameFileDraft = ref<string>("");
+const fileDocDataUpload = ref<File[]>([]);
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+/**
+ * check ว่าลาได้ไหม จาก api
+ * @param formData
+ */
+const isLeave = ref<boolean>(true);
+async function FetchCheck() {
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null,
+      EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      if (data.isLeave === true) {
+        // formDataRehabilitation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
+        // formDataRehabilitation.leaveTotal = data.totalDate
+      } else {
+        fails($q, "ไม่สามารถลาได้");
+      }
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+}
+
+//download function
+async function onClickDownloadFile(id: string, fileName: string) {
+  showLoader();
+  await http
+    .get(config.API.leaveReport(id))
+    .then(async (res) => {
+      console.log(res);
+      const data = res.data.result;
+      await genReport(data, fileName);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+onMounted(() => {
+  if (props.data) {
+    formDataRehabilitation.leaveWrote = props.data.leaveWrote;
+    formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
+    formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
+    formDataRehabilitation.leaveDetail = props.data.leaveDetail;
+    // formDataRehabilitation.leaveDocument = props.data.leaveDocument;
+    // formDataRehabilitation.leaveDraftDocument =
+    //   props.data.leaveDraftDocument;
+  }
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataRehabilitation.leaveWrote"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          ref="leaveWroteRef"
+          dense
+          outlined
+          bg-color="white"
+          label="เขียนที่"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
+
+        <datepicker
+          v-model="formDataRehabilitation.leaveStartDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :enableTimePicker="false"
+          :locale="'th'"
+          @update:model-value="formDataRehabilitation.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveStartDateRef"
+              class="full-width datepicker"
+              bg-color="white"
+              outlined
+              dense
+              lazy-rules
+              hide-bottom-space
+              :model-value="
+                formDataRehabilitation.leaveStartDate != null
+                  ? date2Thai(formDataRehabilitation.leaveStartDate)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          v-model="formDataRehabilitation.leaveEndDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :locale="'th'"
+          @update:model-value="FetchCheck()"
+          :readonly="!formDataRehabilitation.leaveStartDate"
+          :enableTimePicker="false"
+          :min-date="formDataRehabilitation.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveEndDateRef"
+              class="full-width datepicker"
+              outlined
+              dense
+              lazy-rules
+              bg-color="white"
+              hide-bottom-space
+              :readonly="!formDataRehabilitation.leaveStartDate"
+              :model-value="
+                formDataRehabilitation.leaveEndDate != null
+                  ? date2Thai(formDataRehabilitation.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <q-input
+          v-model="formDataRehabilitation.leaveDetail"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+        />
+
+        <div class="col-12 col-sm-6">
+          <q-file
+            v-model="formDataRehabilitation.leaveDocument"
+            @added="fileUploadDoc"
+            use-chips
+            bg-color="white"
+            dense
+            outlined
+            multiple
+            label="เอกสารประกอบ"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 row" v-if="!edit">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              เอกสารเพิ่มเติม
+            </div>
+          </div>
+          <q-card bordered flat class="full-width">
+            <q-list separator>
+              <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+                <q-item-section>
+                  <q-item-label class="full-width ellipsis">
+                    {{ file.fileName }}
+                  </q-item-label>
+
+                  <q-item-label caption> </q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+
+    <div
+      v-if="
+        formDataRehabilitation.leaveWrote &&
+        formDataRehabilitation.leaveStartDate &&
+        formDataRehabilitation.leaveEndDate
+      "
+      class="q-mt-md"
+    >
+      <div style="display: flex; align-items: center">
+        <q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
+        <div class="q-pl-sm text-weight-bold text-dark">
+          ดาวน์โหลด/อัปโหลดแบบฟอร์ม
+        </div>
+      </div>
+      <q-card class="bg-grey-1 q-pa-sm" bordered>
+        <div class="row">
+          <div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
+            <div class="column q-mx-xs">
+              <div class="q-pl-sm text-weight-bold text-dark text-center">
+                ดาวน์โหลด
+              </div>
+              <q-btn
+                color="primary"
+                icon="download"
+                label="ดาวน์โหลดแบบฟอร์ม"
+                @click="
+                  onClickDownloadFile(
+                    '08dc05c8-4cfd-4603-81f8-92a401571717',
+                    'แบบฟอร์ม'
+                  )
+                "
+              />
+            </div>
+          </div>
+          <div class="col-10 col-sm-5 col-md-4 q-my-sm">
+            <div class="column q-mx-xs">
+              <div class="q-pl-sm text-weight-bold text-dark text-center">
+                อัปโหลด
+              </div>
+              <q-file
+                v-model="formDataRehabilitation.leaveDraftDocument"
+                use-chips
+                dense
+                label="แบบฟอร์ม"
+                outlined
+                bg-color="white"
+                multiple
+                accept="application/pdf"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+          <!-- <div class="col-md-1 self-end q-mb-sm">
+						<q-btn v-if="formDataRehabilitation.leaveDraftDocument != null" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
+							><q-tooltip>อัปโหลด</q-tooltip></q-btn
+						>
+					</div> -->
+        </div>
+      </q-card>
+    </div>
+
+    <div v-if="!isSave">
+      <q-separator class="q-mt-sm" />
+      <div class="row col-12 q-pt-md">
+        <q-space />
+        <q-btn
+          id="onSubmit"
+          type="submit"
+          unelevated
+          dense
+          class="q-px-md items-center btnBlue"
+          label="บันทึก"
+          ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
+        >
+        <q-btn
+          v-if="data"
+          id="onSubmit"
+          type="button"
+          unelevated
+          dense
+          class="q-px-md items-center q-ml-sm"
+          color="primary"
+          label="ยื่นใบลา"
+          @click="onConfirm"
+          ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
+        >
+      </div>
+    </div>
+  </form>
+</template>

src/modules/05_leave/components/FormLeave/Form.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { reactive, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+const mixin = useCounterMixin();
+const dataStore = useLeaveStore();
+const { date2Thai } = mixin;
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  model: {
+    type: String,
+    default: "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formData = reactive<FormData>({
+  dateStart: new Date(),
+  subject: "เรื่อง",
+  who: "เรียนผู้ใด",
+  requestName: "ชื่อผู้ยื่น",
+  position: "ตำแหน่ง",
+  level: "ระดับ",
+  ocRequest: "สังกัด",
+  leaveabsentDaySummon: "2",
+  leaveUse: "1",
+  leaveRemaining: "1",
+});
+
+onMounted(() => {
+  dataStore.typeLeave = "";
+});
+</script>
+
+<template>
+  <q-card bordered class="q-pa-md bg-grey-1">
+    <div class="col-12 row q-pa-sm q-col-gutter-sm">
+      <datepicker
+        class="col-12 col-sm-4"
+        menu-class-name="modalfix"
+        v-model="dataStore.dateSendLeave"
+        :locale="'th'"
+        autoApply
+        borderless
+        :enableTimePicker="false"
+        week-start="0"
+        readonly
+      >
+        <template #year="{ year }">
+          {{ year + 543 }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ parseInt(value + 543) }}
+        </template>
+        <template #trigger>
+          <q-input
+            outlined
+            dense
+            bg-color="white"
+            hide-bottom-space
+            readonly
+            class="full-width"
+            :model-value="
+              dataStore.dateSendLeave != null
+                ? date2Thai(dataStore.dateSendLeave)
+                : null
+            "
+            :label="`${'วันที่ยื่นใบลา'}`"
+            :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
+          >
+            <template v-slot:prepend>
+              <q-icon
+                name="event"
+                class="cursor-pointer inputblack"
+                style="color: var(--black)"
+              >
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+      <q-input
+        class="col-12 col-sm-4"
+        dense
+        bg-color="white"
+        outlined
+        readonly
+        v-model="dataStore.typeLeave"
+        label="เรื่อง"
+      />
+      <q-input
+        class="col-12 col-sm-4"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.dear"
+        label="เรียน"
+      />
+      <q-input
+        class="col-12 col-sm-3"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.fullName"
+        label="ชื่อผู้ยื่นขอ"
+      />
+      <q-input
+        class="col-12 col-sm-3"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.positionName"
+        label="ตำแหน่งผู้ยื่นขอ"
+      />
+      <q-input
+        class="col-12 col-sm-3"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.positionLevelName"
+        label="ระดับผู้ยื่นขอ"
+      />
+      <q-input
+        class="col-12 col-sm-3"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.organizationName"
+        label="สังกัดผู้ยื่นขอ"
+      />
+      <q-input
+        v-if="props.model === 'LV-005'"
+        class="col-12 col-sm-4"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.leaveLimit"
+        label="จำนวนสิทธิ์การลาที่ได้รับ"
+      />
+      <q-input
+        class="col-12 col-sm-4"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.leaveTotal"
+        label="จำนวนสิทธิ์การลาที่ใช้ไป"
+      />
+      <q-input
+        v-if="props.model === 'LV-005'"
+        class="col-12 col-sm-4"
+        dense
+        outlined
+        readonly
+        bg-color="white"
+        v-model="dataStore.leaveRemain"
+        label="จำนวนสิทธิ์การลาคงเหลือ"
+      />
+    </div>
+  </q-card>
+</template>

src/modules/05_leave/components/Forms/01_SickForm.vue

@@ -1,441 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, computed } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const router = useRouter()
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails, showLoader, hideLoader } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataSick = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveRange: "ALL",
-	leaveTotal: "",
-	leaveLast: null,
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveRangeRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const leaveLastRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveRange: leaveRangeRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataSick.leaveWrote = props.data.leaveWrote
-	formDataSick.leaveStartDate = props.data.leaveStartDate
-	formDataSick.leaveEndDate = props.data.leaveEndDate
-	formDataSick.contractTel = props.data.contractTel
-	formDataSick.leaveTotal = props.data.leaveTotal
-	formDataSick.leaveNumber = props.data.leaveNumber
-	formDataSick.leaveDetail = props.data.leaveDetail
-	formDataSick.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-async function fileUploadDoc(files: any) {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/**
- * function รีเซทค่า leaveStartDate เเละ leaveEndDate
- */
-function resetDate() {
-	if (formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON") {
-		formDataSick.leaveStartDate = null
-		formDataSick.leaveEndDate = null
-	}
-	console.log("testnull")
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	showLoader()
-	const formData = new FormData()
-	//   if (formDataSick.leaveDocument.length > 0) {
-	//     const blob = formDataSick.leaveDocument.slice(
-	//       0,
-	//       formDataSick.leaveDocument[0].size
-	//     );
-	//     const newFile = new File(blob, nameFile.value, {
-	//       type: formDataSick.leaveDocument[0].type,
-	//     });
-	//     formData.append("leaveDocument", newFile);
-	//   }
-
-	formData.append("leaveDocument", formDataSick.leaveDocument)
-	formData.append("type", formDataSick.type)
-	formData.append("leaveRange", formDataSick.leaveRange)
-	formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate))
-	formData.append("leaveWrote", formDataSick.leaveWrote)
-	formData.append("leaveAddress", formDataSick.leaveAddress)
-	formData.append("leaveNumber", formDataSick.leaveNumber)
-	formData.append("leaveDetail", formDataSick.leaveDetail)
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then(() => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-		.finally(() => {
-			hideLoader()
-		})
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataSick.leaveStartDate ?? null,
-			EndLeaveDate: formDataSick.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
- */
-const isReadOnly = computed(() => {
-	const conditionleaveRange = formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON"
-	if (conditionleaveRange) {
-		formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null
-		formDataSick.leaveTotal = 0.5
-	} else {
-		formDataSick.leaveTotal = null
-	}
-	return conditionleaveRange
-})
-
-function inputEdit(val: boolean) {
-	return {
-		"full-width cursor-pointer ": val,
-		"full-width cursor-pointer inputgreen": !val,
-	}
-}
-
-function resetEndDate(type: string) {
-	if (type === "day") {
-		formDataSick.EndLeaveDate === null
-	}
-}
-</script>
-
-<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="formDataSick.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<div class="col-12 col-md-4 col-sm-12">
-					<q-radio v-model="formDataSick.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
-					<q-radio v-model="formDataSick.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
-					<q-radio v-model="formDataSick.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
-				</div>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="formDataSick.leaveStartDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							:readonly="!edit"
-							@update:model-value="formDataSick.leaveEndDate = null"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="leaveStartDateRef"
-									for="leaveStartDateRef"
-									hide-bottom-space
-									:readonly="!edit"
-									bg-color="white"
-									class="full-width cursor-pointer inputgreen"
-									:model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : null"
-									:label="`${'ลาตั้งแต่วันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-									style="color: var(--q-primary)"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="formDataSick.leaveEndDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							:readonly="!formDataSick.leaveStartDate"
-							@update:model-value="FetchCheck(), isReadOnly"
-							:min-date="formDataSick.leaveStartDate"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="leaveEndDateRef"
-									for="leaveEndDateRef"
-									hide-bottom-space
-									bg-color="white"
-									:readonly="!formDataSick.leaveStartDate"
-									:class="inputEdit(isReadOnly)"
-									:model-value="formDataSick.leaveEndDate != null ? date2Thai(formDataSick.leaveEndDate) : null"
-									:label="`${'ลาถึงวันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-						<q-input
-							class="col-12 col-md-3 col-sm-6"
-							dense
-							bg-color="white"
-							outlined
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							v-model="formDataSick.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							hide-bottom-space
-						/>
-						<q-input
-							class="col-12 col-md-3 col-sm-6"
-							dense
-							outlined
-							ref="leaveLastRef"
-							for="leaveLastRef"
-							v-model="dataStore.leaveLast"
-							label="ลาครั้งสุดท้ายเมื่อวันที่"
-							readonly
-							hide-bottom-space
-							bg-color="white"
-						/>
-					</div>
-				</div>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-							dense
-							outlined
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="formDataSick.leaveNumber"
-							mask="(###)-###-####"
-							hide-bottom-space
-							bg-color="white"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
-							dense
-							outlined
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="formDataSick.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-							hide-bottom-space
-							bg-color="white"
-						/>
-					</div>
-				</div>
-				<q-input
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataSick.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-					bg-color="white"
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-file for="leaveDocumentRef" v-model="formDataSick.leaveDocument" dense label="เอกสารประกอบ" outlined use-chips bg-color="white" class="col-12 q-pl-sm col-12">
-							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
-							</template>
-						</q-file>
-					</div>
-				</div>
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in formDataSick.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/Forms/03_Birth.vue

@@ -1,391 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue"
-import { useQuasar } from "quasar"
-import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const mixin = useCounterMixin()
-const router = useRouter()
-const $q = useQuasar()
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataBirth = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "",
-	leaveLast: "",
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataBirth.leaveWrote = props.data.leaveWrote
-	formDataBirth.leaveStartDate = props.data.leaveStartDate
-	formDataBirth.leaveEndDate = props.data.leaveEndDate
-	formDataBirth.leaveTotal = props.data.leaveTotal
-	formDataBirth.leaveNumber = props.data.leaveNumber
-	formDataBirth.leaveDetail = props.data.leaveDetail
-	formDataBirth.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-async function fileUploadDoc(files: any) {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataBirth.leaveStartDate ?? null, EndLeaveDate: formDataBirth.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataBirth.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataBirth.leaveLast = data.sumDateWork
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataBirth.leaveDocument.length > 0) {
-	// 	const blob = formDataBirth.leaveDocument.slice(0, formDataBirth.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataBirth.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// }
-	formData.append("leaveDocument", formDataBirth.leaveDocument)
-	formData.append("type", formDataBirth.type)
-	formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate))
-	formData.append("leaveWrote", formDataBirth.leaveWrote)
-	formData.append("leaveAddress", formDataBirth.leaveAddress)
-	formData.append("leaveNumber", formDataBirth.leaveNumber)
-	formData.append("leaveDetail", formDataBirth.leaveDetail)
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-</script>
-
-<!-- ฟอร์มลาคลอดบุตร-->
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					outlined
-					v-model="formDataBirth.leaveWrote"
-					label="เขียนที่"
-					hide-bottom-space
-					bg-color="white"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataBirth.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="formDataBirth.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="formDataBirth.leaveStartDate != null ? date2Thai(formDataBirth.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataBirth.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					@update:model-value="FetchCheck()"
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!formDataBirth.leaveStartDate"
-					:min-date="formDataBirth.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!formDataBirth.leaveStartDate"
-							class="full-width datepicker"
-							:model-value="formDataBirth.leaveEndDate != null ? date2Thai(formDataBirth.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-3 col-sm-6"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataBirth.leaveTotal"
-					label="จำนวนวันที่ลา"
-					bg-color="white"
-					readonly
-					hide-bottom-space
-				/>
-				<q-input
-					class="col-12 col-md-3 col-sm-6"
-					dense
-					outlined
-					ref="leaveLastRef"
-					for="leaveLastRef"
-					v-model="dataStore.leaveLast"
-					label="ลาครั้งสุดท้ายเมื่อวันที่"
-					readonly
-					hide-bottom-space
-					bg-color="white"
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="formDataBirth.leaveNumber"
-							mask="(###)-###-####"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="formDataBirth.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-				<q-input
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataBirth.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file
-					for="leaveDocumentRef"
-					hide-bottom-space
-					v-model="formDataBirth.leaveDocument"
-					@added="fileUploadDoc"
-					dense
-					bg-color="white"
-					label="เอกสารประกอบ"
-					outlined
-					use-chips
-					multiple
-					class="q-pl-sm col-12"
-				>
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in formDataBirth.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue

@@ -1,447 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const mixin = useCounterMixin()
-const router = useRouter()
-const $q = useQuasar()
-const { date2Thai, calculateDurationYmd, dateToISO, dialogConfirm, fails, success, messageError } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataHelpWife = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	wifeDayName: "",
-	wifeDayDateBorn: null,
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "",
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const wifeDayNameRef = ref<object | null>(null)
-const wifeDayDateBornRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	wifeDayName: wifeDayNameRef,
-	wifeDayDateBorn: wifeDayDateBornRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataHelpWife.leaveWrote = props.data.leaveWrote
-	formDataHelpWife.wifeDayName = props.data.wifeDayName
-	formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn
-	formDataHelpWife.leaveStartDate = props.data.leaveStartDate
-	formDataHelpWife.leaveEndDate = props.data.leaveEndDate
-	formDataHelpWife.leaveTotal = props.data.leaveTotal
-	formDataHelpWife.leaveNumber = props.data.leaveNumber
-	formDataHelpWife.leaveDetail = props.data.leaveDetail
-	formDataHelpWife.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataHelpWife.leaveStartDate, formDataHelpWife.leaveEndDate)
-	formDataHelpWife.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataHelpWife.leaveStartDate ?? null, EndLeaveDate: formDataHelpWife.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataHelpWife.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataHelpWife.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataHelpWife.leaveDocument.length > 0) {
-	// 	const blob = formDataHelpWife.leaveDocument.slice(0, formDataHelpWife.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataHelpWife.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// }
-	formData.append("leaveDocument", formDataHelpWife.leaveDocument)
-	formData.append("type", formDataHelpWife.type)
-	formData.append("leaveStartDate", dateToISO(formDataHelpWife.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate))
-	formData.append("leaveWrote", formDataHelpWife.leaveWrote)
-	formData.append("leaveAddress", formDataHelpWife.leaveAddress)
-	formData.append("leaveNumber", formDataHelpWife.leaveNumber)
-	formData.append("leaveDetail", formDataHelpWife.leaveDetail)
-	formData.append("wifeDayName", formDataHelpWife.wifeDayName)
-	formData.append("wifeDayDateBorn", dateToISO(formDataHelpWife.wifeDayDateBorn))
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					outlined
-					hide-bottom-space
-					bg-color="white"
-					v-model="formDataHelpWife.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataHelpWife.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="formDataHelpWife.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="formDataHelpWife.leaveStartDate != null ? date2Thai(formDataHelpWife.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataHelpWife.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					week-start="0"
-					:readonly="!formDataHelpWife.leaveStartDate"
-					:min-date="formDataHelpWife.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!formDataHelpWife.leaveStartDate"
-							class="full-width datepicker"
-							:model-value="formDataHelpWife.leaveEndDate != null ? date2Thai(formDataHelpWife.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataHelpWife.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-					bg-color="white"
-				/>
-				<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
-					<q-input
-						class="col-12 col-sm-12"
-						ref="wifeDayNameRef"
-						for="wifeDayNameRef"
-						dense
-						bg-color="white"
-						outlined
-						hide-bottom-space
-						v-model="formDataHelpWife.wifeDayName"
-						label="ชื่อภรรยา"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
-					/>
-				</div>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataHelpWife.wifeDayDateBorn"
-					:locale="'th'"
-					autoApply
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="wifeDayDateBornRef"
-							for="wifeDayDateBornRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="formDataHelpWife.wifeDayDateBorn != null ? date2Thai(formDataHelpWife.wifeDayDateBorn) : null"
-							:label="`${'วันที่คลอด'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="formDataHelpWife.leaveNumber"
-							mask="(###)-###-####"
-							unmasked-value
-							hide-bottom-space
-							bg-color="white"
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="formDataHelpWife.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-				<q-input
-					hide-bottom-space
-					bg-color="white"
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataHelpWife.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file
-					bg-color="white"
-					ref="leaveDocumentRef"
-					v-model="formDataHelpWife.leaveDocument"
-					@added="fileUploadDoc"
-					dense
-					label="เอกสารประกอบ"
-					outlined
-					use-chips
-					multiple
-					class="q-pl-sm col-12"
-				>
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in formDataHelpWife.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/Forms/05_VacationForm.vue

@@ -1,442 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, computed } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-
-/** Use */
-const $q = useQuasar()
-const dataStore = useLeaveStore()
-const mixin = useCounterMixin()
-const router = useRouter()
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataVacation = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveRange: "ALL",
-	restDayOldTotal: "",
-	restDayCurrentTotal: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "",
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const restDayOldTotalRef = ref<object | null>(null)
-const restDayCurrentTotalRef = ref<object | null>(null)
-const leaveRangeRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveRange: leaveRangeRef,
-	restDayOldTotal: restDayOldTotalRef,
-	restDayCurrentTotal: restDayCurrentTotalRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataVacation.leaveWrote = props.data.leaveWrote
-	formDataVacation.restDayOldTotal = props.data.restDayOldTotal
-	formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal
-	formDataVacation.leaveStartDate = props.data.leaveStartDate
-	formDataVacation.leaveEndDate = props.data.leaveEndDate
-	formDataVacation.leaveTotal = props.data.leaveTotal
-	formDataVacation.leaveNumber = props.data.leaveNumber
-	formDataVacation.leaveDetail = props.data.leaveDetail
-	formDataVacation.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-
-	console.log("save")
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataVacation.leaveStartDate ?? null, EndLeaveDate: formDataVacation.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataVacation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataVacation.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataVacation.leaveDocument.length > 0) {
-	// 	const blob = formDataVacation.leaveDocument.slice(0, formDataVacation.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataVacation.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// }
-	formData.append("leaveDocument", formDataVacation.leaveDocument)
-	formData.append("type", formDataVacation.type)
-	formData.append("leaveRange", formDataVacation.leaveRange)
-	formData.append("leaveStartDate", dateToISO(formDataVacation.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate))
-	formData.append("leaveWrote", formDataVacation.leaveWrote)
-	formData.append("leaveAddress", formDataVacation.leaveAddress)
-	formData.append("leaveNumber", formDataVacation.leaveNumber)
-	formData.append("leaveDetail", formDataVacation.leaveDetail)
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function รีเซทค่า leaveStartDate เเละ leaveEndDate
- */
-function resetDate() {
-	if (formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON") {
-		formDataVacation.leaveStartDate = null
-		formDataVacation.leaveEndDate = null
-	}
-	console.log("testnull")
-}
-
-/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
-const isReadOnly = computed(() => {
-	const conditionleaveRange = formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON"
-	if (conditionleaveRange) {
-		formDataVacation.leaveEndDate = formDataVacation.leaveStartDate // Set formDataVacation.leaveEndDate to null
-		formDataVacation.leaveTotal = 0.5
-	} else {
-		formDataVacation.leaveTotal = null
-	}
-	return conditionleaveRange
-})
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="formDataVacation.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<div class="col-12 col-md-4 col-sm-6">
-					<q-radio v-model="formDataVacation.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
-					<q-radio v-model="formDataVacation.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
-					<q-radio v-model="formDataVacation.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
-				</div>
-				<q-input
-					class="col-12 col-md-4 col-sm-6"
-					ref="restDayOldTotalRef"
-					for="restDayOldTotalRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					readonly
-					outlined
-					v-model="dataStore.restDayTotalOld"
-					label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
-				/>
-
-				<q-input
-					class="col-12 col-md-4 col-sm-6"
-					ref="restDayCurrentTotalRef"
-					for="restDayCurrentTotalRef"
-					dense
-					readonly
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="dataStore.leaveRemain"
-					label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
-				/>
-
-				<datepicker
-					class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataVacation.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="formDataVacation.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="formDataVacation.leaveStartDate != null ? date2Thai(formDataVacation.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataVacation.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					@update:model-value="FetchCheck()"
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="isReadOnly"
-					:min-date="formDataVacation.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							class="full-width datepicker"
-							:readonly="isReadOnly"
-							:model-value="formDataVacation.leaveEndDate != null ? date2Thai(formDataVacation.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					bg-color="white"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataVacation.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="formDataVacation.leaveNumber"
-							mask="(###)-###-####"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="formDataVacation.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-				<q-input
-					type="textarea"
-					hide-bottom-space
-					bg-color="white"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataVacation.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file
-					ref="leaveDocumentRef"
-					bg-color="white"
-					v-model="formDataVacation.leaveDocument"
-					@added="fileUploadDoc"
-					dense
-					label="เอกสารประกอบ"
-					outlined
-					use-chips
-					multiple
-					class="q-pl-sm col-12"
-				>
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in formDataVacation.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/Forms/06_OrdinationForm.vue

@@ -1,545 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, watch } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const router = useRouter()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Array,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const ordainDayLocationNumberRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-const leavebirthDateRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const totalLeaveRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const ordainDayOrdinationRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const ordainDayLocationAddressRef = ref<object | null>(null)
-const ordainDayBuddhistLentAddressRef = ref<object | null>(null)
-const ordainDayLocationNameRef = ref<object | null>(null)
-const ordainDayBuddhistLentNameRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataOrdination = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leavegovernmentDate: new Date(),
-	leavebirthDate: new Date(),
-	leaveStartDate: null,
-	leaveEndDate: null,
-	totalLeave: new Date(),
-	ordainDayOrdination: new Date(),
-	ordainDayLocationName: "",
-	ordainDayLocationNumber: null,
-	ordainDayLocationAddress: "",
-	ordainDayBuddhistLentName: "",
-	ordainDayBuddhistLentAddress: "",
-	ordainDayStatus: "true",
-	leaveDocument: null,
-})
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: OrdinationForm = {
-	leaveWrote: leaveWroteRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leavebirthDate: leavebirthDateRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	totalLeave: totalLeaveRef,
-	ordainDayOrdination: ordainDayOrdinationRef,
-	ordainDayLocationName: ordainDayLocationNameRef,
-	ordainDayLocationNumber: ordainDayLocationNumberRef,
-	ordainDayLocationAddress: ordainDayLocationAddressRef,
-	ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
-	ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-// // Watch for changes in leaveEndDate and update leaveTotal accordingly
-// watch(formDataOrdination.leaveEndDate, async () => {
-// 	if (formDataOrdination.leaveStartDate !== undefined && formDataOrdination.leaveEndDate !== undefined) {
-// 		const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
-// 		formDataOrdination.leaveTotal = newLeaveTotal
-// 		console.log(newLeaveTotal)
-// 	}
-// 	// Update the leaveTotal value
-// 	console.log("test")
-// })
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataOrdination.leaveStartDate ?? null, EndLeaveDate: formDataOrdination.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataOrdination.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataOrdination.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataOrdination.leaveDocument.length > 0) {
-	// 	const blob = formDataOrdination.leaveDocument.slice(0, formDataOrdination.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataOrdination.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// }
-	formData.append("leaveDocument", formDataOrdination.leaveDocument)
-	formData.append("type", formDataOrdination.type)
-	formData.append("leaveStartDate", dateToISO(formDataOrdination.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate))
-	formData.append("ordainDayOrdination", dateToISO(formDataOrdination.ordainDayOrdination))
-	formData.append("ordainDayLocationName", formDataOrdination.ordainDayLocationName)
-	formData.append("ordainDayLocationNumber", formDataOrdination.ordainDayLocationNumber)
-	formData.append("ordainDayLocationAddress", formDataOrdination.ordainDayLocationAddress)
-	formData.append("ordainDayBuddhistLentName", formDataOrdination.ordainDayBuddhistLentName)
-	formData.append("ordainDayBuddhistLentAddress", formDataOrdination.ordainDayBuddhistLentAddress)
-	formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus)
-	formData.append("leaveWrote", formDataOrdination.leaveWrote)
-	formData.append("leaveDetail", formDataOrdination.leaveDetail)
-	formData.append("leavebirthDate", dateToISO(formDataOrdination.leavebirthDate))
-	formData.append("leavegovernmentDate", dateToISO(formDataOrdination.leavegovernmentDate))
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
-	formDataOrdination.leaveTotal = newLeaveTotal
-}
-</script>
-
-<!-- ฟอร์ม ลาอุปสมบท -->
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate" class="full-width">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					bg-color="white"
-					hide-bottom-space
-					v-model="formDataOrdination.leaveWrote"
-					label="เขียนที่"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataOrdination.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="formDataOrdination.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							bg-color="white"
-							dense
-							ref="leaveStartDateRef"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="formDataOrdination.leaveStartDate != null ? date2Thai(formDataOrdination.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataOrdination.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					:readonly="!formDataOrdination.leaveStartDate"
-					:enableTimePicker="false"
-					:min-date="formDataOrdination.leaveStartDate"
-					week-start="0"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							bg-color="white"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="formDataOrdination.leaveEndDate != null ? date2Thai(formDataOrdination.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!formDataOrdination.leaveStartDate"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataOrdination.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-4 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="formDataOrdination.leavegovernmentDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							readonly
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									ref="leavegovernmentDateRef"
-									dense
-									bg-color="white"
-									hide-bottom-space
-									readonly
-									class="full-width"
-									:model-value="formDataOrdination.leavegovernmentDate != null ? date2Thai(formDataOrdination.leavegovernmentDate) : null"
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							class="col-12 col-md-4 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="formDataOrdination.leavebirthDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							readonly
-							:enableTimePicker="false"
-							week-start="0"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									ref="leavebirthDateRef"
-									dense
-									bg-color="white"
-									hide-bottom-space
-									readonly
-									class="full-width"
-									:model-value="formDataOrdination.leavebirthDate != null ? date2Thai(formDataOrdination.leavebirthDate) : null"
-									:label="`${'วันเดือนปีเกิด'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกวันเดือนปีเกิด'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-					</div>
-				</div>
-
-				<div class="q-pl-sm text-weight-bold text-dark col-12">เคยบวชหรือไม่</div>
-				<div class="col-12">
-					<q-radio v-model="formDataOrdination.ordainDayStatus" val="true" label="เคยบวช" checked-icon="task_alt " hide-bottom-space />
-					<q-radio v-model="formDataOrdination.ordainDayStatus" val="false" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
-				</div>
-
-				<div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataOrdination.ordainDayOrdination"
-					:locale="'th'"
-					autoApply
-					full-width
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							ref="ordainDayOrdinationRef"
-							dense
-							bg-color="white"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="formDataOrdination.ordainDayOrdination != null ? date2Thai(formDataOrdination.ordainDayOrdination) : null"
-							:label="`${'วันอุปสมบท'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input
-					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-					dense
-					hide-bottom-space
-					ref="ordainDayLocationNameRef"
-					bg-color="white"
-					outlined
-					full-width
-					v-model="formDataOrdination.ordainDayLocationName"
-					label="ชื่อวัด"
-					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-				/>
-
-				<q-input
-					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-					ref="ordainDayLocationNumberRef"
-					dense
-					full-width
-					outlined
-					v-model="formDataOrdination.ordainDayLocationNumber"
-					bg-color="white"
-					mask="(###)-###-####"
-					unmasked-value
-					hide-bottom-space
-					label="หมายเลขโทรศัพท์"
-					:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
-				/>
-				<q-input
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					ref="ordainDayLocationAddressRef"
-					bg-color="white"
-					outlined
-					hide-bottom-space
-					v-model="formDataOrdination.ordainDayLocationAddress"
-					label="ที่อยู่"
-					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
-					type="textarea"
-				/>
-
-				<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่จำพรรษา</div>
-				<q-input
-					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-					dense
-					ref="ordainDayBuddhistLentNameRef"
-					bg-color="white"
-					hide-bottom-space
-					outlined
-					v-model="formDataOrdination.ordainDayBuddhistLentName"
-					label="ชื่อวัด"
-					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-				/>
-
-				<q-input
-					class="col-12 cursor-pointer inputgreen"
-					dense
-					ref="ordainDayBuddhistLentAddressRef"
-					bg-color="white"
-					outlined
-					v-model="formDataOrdination.ordainDayBuddhistLentAddress"
-					label="ที่อยู่"
-					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
-					type="textarea"
-					hide-bottom-space
-				/>
-				<q-input
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					bg-color="white"
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataOrdination.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<div class="col-12 col-sm-6">
-					<q-file ref="leaveDocumentRef" v-model="formDataOrdination.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined bg-color="white" multiple use-chips>
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/Forms/07_HajjForm.vue

@@ -1,354 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const router = useRouter()
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, fails, messageError, success, dateToISO } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Array,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataHaji = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leavegovernmentDate: new Date(),
-	leaveStartDate: null,
-	leaveEndDate: null,
-	totalLeave: new Date(),
-	hajjDayStatus: "true",
-	leaveDocument: null,
-})
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: HajiForm = {
-	leaveWrote: leaveWroteRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataHaji.leaveStartDate ?? null, EndLeaveDate: formDataHaji.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataHaji.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataHaji.leaveDocument.length > 0) {
-	// 	const blob = formDataHaji.leaveDocument.slice(0, formDataHaji.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataHaji.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// }
-	formData.append("leaveDocument", formDataHaji.leaveDocument)
-	formData.append("type", formDataHaji.type)
-	formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate))
-	formData.append("hajjDayStatus", formDataHaji.hajjDayStatus)
-	formData.append("leaveWrote", formDataHaji.leaveWrote)
-	formData.append("leaveDetail", formDataHaji.leaveDetail)
-	formData.append("leavegovernmentDate", dateToISO(formDataHaji.leavegovernmentDate))
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataHaji.leaveStartDate, formDataHaji.leaveEndDate)
-	formDataHaji.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate" class="full-width">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="formDataHaji.leaveWrote"
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					label="เขียนที่"
-					hide-bottom-space
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							v-model="formDataHaji.leaveStartDate"
-							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-							@update:model-value="formDataHaji.leaveEndDate = null"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leaveStartDateRef"
-									bg-color="white"
-									class="full-width datepicker"
-									outlined
-									dense
-									hide-bottom-space
-									:label="`${'ลาตั้งแต่วันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-									:model-value="formDataHaji.leaveStartDate != null ? date2Thai(formDataHaji.leaveStartDate) : null"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							v-model="formDataHaji.leaveEndDate"
-							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-							@update:model-value="updateLeaveTotal"
-							:readonly="!formDataHaji.leaveStartDate"
-							:min-date="formDataHaji.leaveStartDate"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leaveEndDateRef"
-									class="full-width datepicker"
-									bg-color="white"
-									outlined
-									dense
-									:readonly="!formDataHaji.leaveStartDate"
-									hide-bottom-space
-									:label="`${'ลาถึงวันที่'}`"
-									@update:model-value="FetchCheck()"
-									:model-value="formDataHaji.leaveEndDate != null ? date2Thai(formDataHaji.leaveEndDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<q-input
-							class="col-12 col-md-2 col-sm-6"
-							dense
-							outlined
-							bg-color="white"
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							v-model="formDataHaji.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							hide-bottom-space
-						/>
-						<datepicker
-							v-model="formDataHaji.leavegovernmentDate"
-							class="col-12 col-md-4 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							readonly
-							week-start="0"
-							:locale="'th'"
-							:enableTimePicker="false"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavegovernmentDateRef"
-									bg-color="white"
-									class="full-width"
-									outlined
-									dense
-									readonly
-									hide-bottom-space
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="formDataHaji.leavegovernmentDate != null ? date2Thai(formDataHaji.leavegovernmentDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-					</div>
-				</div>
-
-				<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจญ์หรือไม่</div>
-				<div class="col-12">
-					<q-radio v-model="formDataHaji.hajjDayStatus" val="true" checked-icon="task_alt" label="เคย" />
-					<q-radio v-model="formDataHaji.hajjDayStatus" val="false" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจญ์" />
-				</div>
-
-				<q-input v-model="formDataHaji.leaveDetail" class="col-12 q-mt-sm cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="formDataHaji.leaveDocument" bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined multiple hide-bottom-space>
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/Forms/08_MilitaryForm.vue

@@ -1,412 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const router = useRouter()
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError, fails } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-const absentDaySummonRef = ref<object | null>(null)
-const absentDayLocationRef = ref<object | null>(null)
-const absentDayRegistorDateRef = ref<object | null>(null)
-const absentDayGetInRef = ref<object | null>(null)
-const absentDayAtRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Array,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataMilitary = reactive<any>({
-	type: dataStore.typeId,
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: 0,
-	leaveDocument: null,
-	leaveWrote: "",
-	absentDaySummon: "",
-	absentDayLocation: "",
-	absentDayRegistorDate: null,
-	absentDayGetIn: "",
-	absentDayAt: "",
-	leaveDetail: "",
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: MilitaryForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveWrote: leaveWroteRef,
-	absentDaySummon: absentDaySummonRef,
-	absentDayLocation: absentDayLocationRef,
-	absentDayRegistorDate: absentDayRegistorDateRef,
-	absentDayGetIn: absentDayGetInRef,
-	absentDayAt: absentDayAtRef,
-	leaveDetail: leaveDetailRef,
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataMilitary.leaveStartDate ?? null, EndLeaveDate: formDataMilitary.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataMilitary.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataMilitary.leaveDocument.length > 0) {
-	// 	const blob = formDataMilitary.leaveDocument.slice(0, formDataMilitary.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataMilitary.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// }
-	formData.append("leaveDocument", formDataMilitary.leaveDocument)
-	formData.append("type", formDataMilitary.type)
-	formData.append("leaveStartDate", dateToISO(formDataMilitary.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate))
-	formData.append("absentDaySummon", formDataMilitary.absentDaySummon)
-	formData.append("absentDayLocation", formDataMilitary.absentDayLocation)
-	formData.append("absentDayRegistorDate", dateToISO(formDataMilitary.absentDayRegistorDate))
-	formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn)
-	formData.append("absentDayAt", formDataMilitary.absentDayAt)
-	formData.append("leaveWrote", formDataMilitary.leaveWrote)
-	formData.append("leaveDetail", formDataMilitary.leaveDetail)
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataMilitary.leaveStartDate, formDataMilitary.leaveEndDate)
-	formDataMilitary.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					bg-color="white"
-					hide-bottom-space
-					v-model="formDataMilitary.leaveWrote"
-					label="เขียนที่"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataMilitary.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="formDataMilitary.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							bg-color="white"
-							dense
-							ref="leaveStartDateRef"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="formDataMilitary.leaveStartDate != null ? date2Thai(formDataMilitary.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataMilitary.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					:readonly="!formDataMilitary.leaveStartDate"
-					:min-date="formDataMilitary.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							bg-color="white"
-							hide-bottom-space
-							:readonly="!formDataMilitary.leaveStartDate"
-							class="full-width datepicker"
-							:model-value="formDataMilitary.leaveEndDate != null ? date2Thai(formDataMilitary.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataMilitary.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							ref="absentDaySummonRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							v-model="formDataMilitary.absentDaySummon"
-							label="ได้รับหมายเรียกของ"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
-						/>
-
-						<q-input
-							ref="atRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							v-model="formDataMilitary.absentDayLocation"
-							label="ที่"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
-						/>
-					</div>
-				</div>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-							menu-class-name="modalfix"
-							v-model="formDataMilitary.absentDayRegistorDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="absentDayRegistorDateRef"
-									bg-color="white"
-									hide-bottom-space
-									class="full-width datepicker"
-									:model-value="formDataMilitary.absentDayRegistorDate != null ? date2Thai(formDataMilitary.absentDayRegistorDate) : null"
-									:label="`${'ลงวันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<q-input
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							ref="absentDayGetInRef"
-							outlined
-							v-model="formDataMilitary.absentDayGetIn"
-							label="ให้เข้ารับการ"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							ref="absentDayAtRef"
-							v-model="formDataMilitary.absentDayAt"
-							label="ณ ที่"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอก ณ ที่'}`]"
-						/>
-					</div>
-				</div>
-
-				<q-input class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" dense bg-color="white" outlined v-model="formDataMilitary.leaveDetail" type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="formDataMilitary.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space use-chips @added="fileUploadDoc">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/Forms/09_StudyForm.vue

@@ -1,528 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, computed } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const router = useRouter()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError, arabicNumberToText } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leavebirthDateRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const leaveSalaryRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const studyDayScholarshipRef = ref<object | null>(null)
-const studyDayCountryRef = ref<object | null>(null)
-const studyDayUniversityNameRef = ref<object | null>(null)
-const studyDayDegreeLevelRef = ref<object | null>(null)
-const studyDaySubjectRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Array,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataStudy = reactive<any>({
-	type: dataStore.typeId, //
-	leaveWrote: "", //
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leavebirthDate: new Date(),
-	leavegovernmentDate: new Date(),
-	leaveSalary: 10000,
-	leaveSalaryText: arabicNumberToText(10000),
-	leaveNumber: "",
-	leaveAddress: "",
-	studyDayScholarship: "",
-	studyDayCountry: "",
-	studyDayUniversityName: "", //
-	studyDayDegreeLevel: "", //
-	studyDaySubject: "", //
-	leaveDocument: "", //
-	leaveDetail: "",
-	leaveTotal: "",
-})
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: studyDaySubjectForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leavebirthDate: leavebirthDateRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leaveSalary: leaveSalaryRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	studyDayScholarship: studyDayScholarshipRef,
-	studyDayCountry: studyDayCountryRef,
-	studyDayUniversityName: studyDayUniversityNameRef,
-	studyDayDegreeLevel: studyDayDegreeLevelRef,
-	studyDaySubject: studyDaySubjectRef,
-	leaveWrote: leaveWroteRef,
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataStudy.leaveStartDate ?? null, EndLeaveDate: formDataStudy.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataStudy.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataStudy.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataStudy.leaveDocument.length > 0) {
-	// 	const blob = formDataStudy.leaveDocument.slice(0, formDataStudy.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataStudy.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// }
-	formData.append("leaveDocument", formDataStudy.leaveDocument)
-	formData.append("type", formDataStudy.type) //
-	formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)) //
-	formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)) //
-	formData.append("studyDaySubject", formDataStudy.studyDaySubject)
-	formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel)
-	formData.append("leavegovernmentDate", dateToISO(formDataStudy.leavegovernmentDate))
-	formData.append("leavebirthDate", dateToISO(formDataStudy.leavebirthDate))
-	formData.append("studyDayUniversityName", formDataStudy.studyDayUniversityName)
-	formData.append("studyDayCountry", formDataStudy.studyDayCountry)
-	formData.append("leaveWrote", formDataStudy.leaveWrote) //
-	formData.append("leaveDetail", formDataStudy.leaveDetail) //
-	formData.append("studyDayScholarship", formDataStudy.studyDayScholarship)
-	formData.append("leaveAddress", formDataStudy.leaveAddress) //
-	formData.append("leaveNumber", formDataStudy.leaveNumber) //
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataStudy.leaveStartDate, formDataStudy.leaveEndDate)
-	formDataStudy.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-
-/**
- * แปลงตัวเลขเงินเดือน
- */
-const formattedleaveSalary = computed(() => {
-	return dataStore.salary !== null ? dataStore.salary.toLocaleString("th-TH") : ""
-})
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="formDataStudy.leaveWrote"
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					label="เขียนที่"
-					hide-bottom-space
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					v-model="formDataStudy.leaveStartDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:enableTimePicker="false"
-					:locale="'th'"
-					@update:model-value="formDataStudy.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveStartDateRef"
-							class="full-width datepicker"
-							bg-color="white"
-							outlined
-							dense
-							lazy-rules
-							hide-bottom-space
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:model-value="formDataStudy.leaveStartDate != null ? date2Thai(formDataStudy.leaveStartDate) : null"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					v-model="formDataStudy.leaveEndDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:locale="'th'"
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					:readonly="!formDataStudy.leaveStartDate"
-					:enableTimePicker="false"
-					:min-date="formDataStudy.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveEndDateRef"
-							class="full-width datepicker"
-							outlined
-							dense
-							lazy-rules
-							bg-color="white"
-							hide-bottom-space
-							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!formDataStudy.leaveStartDate"
-							:model-value="formDataStudy.leaveEndDate != null ? date2Thai(formDataStudy.leaveEndDate) : null"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataStudy.leaveTotal"
-					label="มีกำหนด"
-					readonly
-					hide-bottom-space
-				/>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							v-model="formDataStudy.leavegovernmentDate"
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							readonly
-							:enableTimePicker="false"
-							:locale="'th'"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavegovernmentDateRef"
-									class="full-width"
-									bg-color="white"
-									outlined
-									readonly
-									dense
-									hide-bottom-space
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="dataStore.dateAppoint != null ? date2Thai(dataStore.dateAppoint) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							v-model="formDataStudy.leavebirthDate"
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							readonly
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavebirthDateRef"
-									class="full-width"
-									bg-color="white"
-									outlined
-									dense
-									readonly
-									hide-bottom-space
-									:label="`${'วันเดือนปีเกิด'}`"
-									:model-value="dataStore.birthDate != null ? date2Thai(dataStore.birthDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<q-input v-model="formattedleaveSalary" ref="leaveSalaryRef" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
-
-						<q-input
-							v-model="dataStore.salaryText"
-							ref="leaveSalaryRef"
-							class="col-12 col-sm-6 col-md-3"
-							bg-color="white"
-							dense
-							readonly
-							outlined
-							label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
-						/>
-					</div>
-				</div>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							v-model="formDataStudy.studyDayUniversityName"
-							ref="studyDayUniversityNameRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ชื่อสถานศึกษา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
-						/>
-
-						<q-input
-							v-model="formDataStudy.studyDayDegreeLevel"
-							ref="studyDayDegreeLevelRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ชั้นปริญญา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
-						/>
-
-						<q-input
-							v-model="formDataStudy.studyDaySubject"
-							ref="studyDaySubjectRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ศึกษาวิชา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
-						/>
-
-						<q-input
-							v-model="formDataStudy.studyDayCountry"
-							ref="studyDayCountryRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ประเทศ"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
-						/>
-
-						<q-input
-							v-model="formDataStudy.studyDayScholarship"
-							ref="studyDayScholarshipRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ด้วยทุน"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-						/>
-
-						<q-input
-							v-model="formDataStudy.leaveNumber"
-							ref="leaveNumberRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							unmasked-value
-							hide-bottom-space
-							mask="(###)-###-####"
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							v-model="formDataStudy.leaveAddress"
-							ref="leaveAddressRef"
-							class="col-12 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-
-				<q-input v-model="formDataStudy.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="formDataStudy.leaveDocument" bg-color="white" dense outlined multiple use-chips @added="fileUploadDoc" label="เอกสารประกอบ">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/Forms/10_TrainForm.vue

@@ -1,506 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, computed } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useQuasar } from "quasar"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const router = useRouter()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Array,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataTrain = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leavebirthDate: new Date(),
-	leavegovernmentDate: new Date(),
-	leaveSalary: 10000,
-	leaveSalaryText: arabicNumberToText(10000),
-	leaveNumber: "",
-	leaveAddress: "",
-	studyDayScholarship: "",
-	studyDayCountry: "",
-	studyDayTrainingSubject: "",
-	studyDayTrainingName: "",
-	leaveDocument: "",
-	leaveDetail: "",
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leavebirthDateRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const studyDayScholarshipRef = ref<object | null>(null)
-const studyDayCountryRef = ref<object | null>(null)
-const studyDayTrainingSubjectRef = ref<object | null>(null)
-const studyDayTrainingNameRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: TrainForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leavebirthDate: leavebirthDateRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	studyDayScholarship: studyDayScholarshipRef,
-	studyDayCountry: studyDayCountryRef,
-	studyDayTrainingSubject: studyDayTrainingSubjectRef,
-	studyDayTrainingName: studyDayTrainingNameRef,
-	leaveWrote: leaveWroteRef,
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataTrain.leaveStartDate ?? null, EndLeaveDate: formDataTrain.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataTrain.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataTrain.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataTrain.leaveDocument.length > 0) {
-	// 	const blob = formDataTrain.leaveDocument.slice(0, formDataTrain.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataTrain.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// } //
-	formData.append("leaveDocument", formDataTrain.leaveDocument)
-	formData.append("type", formDataTrain.type) //
-	formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)) //
-	formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)) //
-	formData.append("studyDayCountry", formDataTrain.studyDayCountry)
-	formData.append("leavegovernmentDate", dateToISO(formDataTrain.leavegovernmentDate))
-	formData.append("leavebirthDate", dateToISO(formDataTrain.leavebirthDate))
-	formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName)
-	formData.append("studyDayTrainingSubject", formDataTrain.studyDayTrainingSubject)
-	formData.append("leaveWrote", formDataTrain.leaveWrote) //
-	formData.append("leaveDetail", formDataTrain.leaveDetail) //
-	formData.append("studyDayScholarship", formDataTrain.studyDayScholarship)
-	formData.append("leaveAddress", formDataTrain.leaveAddress) //
-	formData.append("leaveNumber", formDataTrain.leaveNumber) //
-	formData.append("leaveSalaryText", formDataTrain.leaveSalaryText) //
-	formData.append("leaveSalary", formDataTrain.leaveSalary) //
-	formData.append("leaveTotal", formDataTrain.leaveTotal) //
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataTrain.leaveStartDate, formDataTrain.leaveEndDate)
-	formDataTrain.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-
-/**
- * แปลงตัวเลขเงินเดือน
- */
-const formattedSalary = computed(() => {
-	return formDataTrain.leaveSalary !== null ? formDataTrain.leaveSalary.toLocaleString("th-TH") : ""
-})
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="formDataTrain.leaveWrote"
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					label="เขียนที่"
-					hide-bottom-space
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					v-model="formDataTrain.leaveStartDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:enableTimePicker="false"
-					:locale="'th'"
-					@update:model-value="formDataTrain.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveStartDateRef"
-							class="full-width datepicker"
-							bg-color="white"
-							outlined
-							dense
-							lazy-rules
-							hide-bottom-space
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:model-value="formDataTrain.leaveStartDate != null ? date2Thai(formDataTrain.leaveStartDate) : null"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					v-model="formDataTrain.leaveEndDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					week-start="0"
-					:readonly="!formDataTrain.leaveStartDate"
-					:locale="'th'"
-					:enableTimePicker="false"
-					:min-date="formDataTrain.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveEndDateRef"
-							class="full-width datepicker"
-							outlined
-							dense
-							lazy-rules
-							bg-color="white"
-							hide-bottom-space
-							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!formDataTrain.leaveStartDate"
-							:model-value="formDataTrain.leaveEndDate != null ? date2Thai(formDataTrain.leaveEndDate) : null"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataTrain.leaveTotal"
-					label="มีกำหนด"
-					readonly
-					hide-bottom-space
-				/>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							v-model="formDataTrain.leavegovernmentDate"
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							readonly
-							:enableTimePicker="false"
-							:locale="'th'"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavegovernmentDateRef"
-									class="full-width"
-									outlined
-									readonly
-									bg-color="white"
-									dense
-									hide-bottom-space
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="formDataTrain.leavegovernmentDate != null ? date2Thai(formDataTrain.leavegovernmentDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							v-model="formDataTrain.leavebirthDate"
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							readonly
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavebirthDateRef"
-									class="full-width"
-									bg-color="white"
-									outlined
-									dense
-									readonly
-									hide-bottom-space
-									:label="`${'วันเดือนปีเกิด'}`"
-									:model-value="formDataTrain.leavebirthDate != null ? date2Thai(formDataTrain.leavebirthDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(---black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<q-input v-model="formattedSalary" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
-
-						<q-input v-model="formDataTrain.leaveSalaryText" class="col-12 col-sm-6 col-md-3" dense readonly outlined bg-color="white" label="เงินเดือนปัจจุบัน (ตัวอักษร)" />
-					</div>
-				</div>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							v-model="formDataTrain.studyDayTrainingSubject"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							ref="studyDayTrainingSubjectRef"
-							bg-color="white"
-							dense
-							outlined
-							label="ด้าน/หลักสูตร"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
-						/>
-
-						<q-input
-							v-model="formDataTrain.studyDayTrainingName"
-							ref="studyDayTrainingNameRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ณ สถานที่"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
-						/>
-
-						<q-input
-							v-model="formDataTrain.studyDayCountry"
-							ref="studyDayCountryRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							label="ประเทศ"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
-						/>
-
-						<q-input
-							v-model="formDataTrain.studyDayScholarship"
-							ref="studyDayScholarshipRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ด้วยทุน"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-						/>
-
-						<q-input
-							v-model="formDataTrain.leaveNumber"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							ref="leaveNumberRef"
-							dense
-							outlined
-							unmasked-value
-							hide-bottom-space
-							bg-color="white"
-							mask="(###)-###-####"
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							v-model="formDataTrain.leaveAddress"
-							ref="leaveAddressRef"
-							class="col-12 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-
-				<q-input v-model="formDataTrain.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="formDataTrain.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/Forms/11_WorkInternationalForm.vue

@@ -1,402 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue"
-import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-import genReport from "@/plugins/genreport"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
-const edit = ref<boolean>(true)
-const router = useRouter()
-const isSave = ref<boolean>(false)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataWorkInternational = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveDetail: "",
-	leaveDocument: [],
-	leaveDraftDocument: null,
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataWorkInternational.leaveWrote = props.data.leaveWrote
-	formDataWorkInternational.leaveStartDate = props.data.leaveStartDate
-	formDataWorkInternational.leaveEndDate = props.data.leaveEndDate
-	formDataWorkInternational.leaveDetail = props.data.leaveDetail
-	formDataWorkInternational.leaveDocument = props.data.leaveDocument
-	formDataWorkInternational.leaveDraftDocument = props.data.leaveDraftDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const nameFileDraft = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-//download function
-async function onClickDownloadFile(id: string, fileName: string) {
-	// showLoader();
-	await http
-		.get(config.API.leaveReport(id))
-		.then(async res => {
-			console.log(res)
-			const data = res.data.result
-			await genReport(data, fileName)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			// hideLoader();
-		})
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
-			EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataWorkInternational.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataWorkInternational.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// //
-	// if (formDataWorkInternational.leaveDocument.length > 0) {
-	// 	const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataWorkInternational.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// }
-	// //
-	// if (formDataWorkInternational.leaveDraftDocument.length > 0) {
-	// 	const blobDrafe = formDataWorkInternational.leaveDraftDocument.slice(0, formDataWorkInternational.leaveDraftDocument[0].size)
-	// 	const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
-	// 		type: formDataWorkInternational.leaveDraftDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDraftDocument", newFileDraft) //
-	// }
-	formData.append("leaveDocument", formDataWorkInternational.leaveDocument)
-	formData.append("leaveDraftDocument", formDataWorkInternational.leaveDraftDocument)
-	formData.append("type", formDataWorkInternational.type) //
-	formData.append("leaveStartDate", dateToISO(formDataWorkInternational.leaveStartDate)) //
-	formData.append("leaveEndDate", dateToISO(formDataWorkInternational.leaveEndDate)) //
-	formData.append("leaveWrote", formDataWorkInternational.leaveWrote) //
-	formData.append("leaveDetail", formDataWorkInternational.leaveDetail) //
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					hide-bottom-space
-					bg-color="white"
-					for="leaveWroteRef"
-					dense
-					outlined
-					v-model="formDataWorkInternational.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataWorkInternational.leaveStartDate"
-					:locale="'th'"
-					hide-bottom-space
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="formDataWorkInternational.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="formDataWorkInternational.leaveStartDate != null ? date2Thai(formDataWorkInternational.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataWorkInternational.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					@update:model-value="FetchCheck()"
-					week-start="0"
-					:readonly="!formDataWorkInternational.leaveStartDate"
-					:min-date="formDataWorkInternational.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!formDataWorkInternational.leaveStartDate"
-							class="full-width datepicker"
-							:model-value="formDataWorkInternational.leaveEndDate != null ? date2Thai(formDataWorkInternational.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<!-- <q-input
-							class="col-md-3 col-sm-12"
-							dense
-							outlined
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							type="number"
-							v-model="formDataWorkInternational.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-						/> -->
-
-				<q-input
-					hide-bottom-space
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					bg-color="white"
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataWorkInternational.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file
-					ref="fileRef"
-					bg-color="white"
-					v-model="formDataWorkInternational.leaveDocument"
-					@added="fileUploadDoc"
-					dense
-					label="เอกสารประกอบ"
-					outlined
-					use-chips
-					multiple
-					class="q-pl-sm col-12"
-				>
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in formDataWorkInternational.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<div v-if="formDataWorkInternational.leaveWrote && formDataWorkInternational.leaveEndDate && formDataWorkInternational.leaveStartDate" class="q-mt-md">
-			<div style="display: flex; align-items: center">
-				<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
-				<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
-			</div>
-			<q-card class="bg-grey-1 q-pa-sm" bordered>
-				<div class="row">
-					<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
-						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
-							<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile('08dc05c8-4cfd-4603-81f8-92a401571717', 'แบบฟอร์ม')" />
-						</div>
-					</div>
-					<div class="col-10 col-sm-5 col-md-4 q-my-sm">
-						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
-							<q-file v-model="formDataWorkInternational.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept=".pdf">
-								<template v-slot:prepend>
-									<q-icon name="attach_file" color="primary" />
-								</template>
-							</q-file>
-						</div>
-					</div>
-					<!-- <div class="col-md-1 self-end q-mb-sm">
-						<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
-							><q-tooltip>อัปโหลด</q-tooltip></q-btn
-						>
-					</div> -->
-				</div>
-			</q-card>
-		</div>
-
-		<div v-if="!isSave">
-			<q-separator class="q-mt-sm" />
-			<div class="row col-12 q-pt-md">
-				<q-space />
-				<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-			</div>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue

@@ -1,581 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, computed, onMounted } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import { useQuasar } from "quasar"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const router = useRouter()
-const { dialogConfirm, date2Thai, arabicNumberToText, calculateDurationYmd, dateToISO, fails, success, messageError } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataFollowSpouse = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "", //จำนวนวันลา
-	leaveSalaryText: 25000,
-	leaveSalary: 25000, //เงินเดือนปัจจุบัน
-	coupleDayName: "", //ชื่อคู่สมรส
-	coupleDayPosition: "", //ตำแหน่งคู่สมรส
-	coupleDayLevel: "", //ระดับคู่สมรส
-	coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
-	followHistoryCountry: "ลาว", //ประวัติการลาติดตามคู่สมรส
-	followHistoryTime: "0 วัน",
-	followHistoryStart: new Date(),
-	followHistoryEnd: new Date(),
-	leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
-	leaveDocument: [], //เอกสารปะกอบ
-})
-
-/** แปลงตัวแปร Salary */
-const formattleaveSalaryText = arabicNumberToText(formDataFollowSpouse.leaveSalaryText)
-const formattSalary = computed(() => {
-	return formDataFollowSpouse.leaveSalary !== null ? formDataFollowSpouse.leaveSalary.toLocaleString("th-TH") : ""
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveSalaryRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const coupleDayNameRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const coupleDayPositionRef = ref<object | null>(null)
-const coupleDayLevelRef = ref<object | null>(null)
-const coupleDayLevelCountryRef = ref<object | null>(null)
-const followHistoryCountryRef = ref<object | null>(null)
-const followHistoryTimeRef = ref<object | null>(null)
-const followHistoryStartRef = ref<object | null>(null)
-const followHistoryEndRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef, //เขียนที่***
-	leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
-	leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
-	leaveTotal: leaveTotalRef, //จำนวนวันลา
-	leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
-	coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
-	coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
-	coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
-	coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
-	followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
-	followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
-	followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
-	followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
-	leaveDetail: leaveDetailRef, //รายละเอียดการลา
-	leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataFollowSpouse.leaveWrote = props.data.leaveWrote
-	formDataFollowSpouse.leaveStartDate = props.data.leaveStartDate
-	formDataFollowSpouse.leaveEndDate = props.data.leaveEndDate
-	formDataFollowSpouse.leaveTotal = props.data.leaveTotal
-	formDataFollowSpouse.leaveDetail = props.data.leaveDetail
-	formDataFollowSpouse.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null, EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataFollowSpouse.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataFollowSpouse.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataFollowSpouse.leaveDocument.length > 0) {
-	// 	const blob = formDataFollowSpouse.leaveDocument.slice(0, formDataFollowSpouse.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataFollowSpouse.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// } //
-	formData.append("leaveDocument", formDataFollowSpouse.leaveDocument)
-	formData.append("type", formDataFollowSpouse.type) //
-	formData.append("leaveStartDate", dateToISO(formDataFollowSpouse.leaveStartDate)) //
-	formData.append("leaveEndDate", dateToISO(formDataFollowSpouse.leaveEndDate)) //
-	formData.append("followHistoryStart", dateToISO(formDataFollowSpouse.followHistoryStart)) //
-	formData.append("followHistoryEnd", dateToISO(formDataFollowSpouse.followHistoryEnd)) //
-	formData.append("leaveWrote", formDataFollowSpouse.leaveWrote) //
-	formData.append("leaveDetail", formDataFollowSpouse.leaveDetail) //
-	formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText) //
-	formData.append("leaveSalary", formDataFollowSpouse.leaveSalary) //
-	formData.append("followHistoryTime", formDataFollowSpouse.followHistoryTime) //
-	formData.append("followHistoryCountry", formDataFollowSpouse.followHistoryCountry) //
-	formData.append("coupleDayLevelCountry", formDataFollowSpouse.coupleDayLevelCountry) //
-	formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel) //
-	formData.append("coupleDayPosition", formDataFollowSpouse.coupleDayPosition) //
-	formData.append("coupleDayName", formDataFollowSpouse.coupleDayName) //
-	formData.append("leaveTotal", formDataFollowSpouse.leaveTotal) //
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataFollowSpouse.leaveStartDate, formDataFollowSpouse.leaveEndDate)
-	formDataFollowSpouse.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="formDataFollowSpouse.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataFollowSpouse.leaveStartDate"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="formDataFollowSpouse.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="formDataFollowSpouse.leaveStartDate != null ? date2Thai(formDataFollowSpouse.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataFollowSpouse.leaveEndDate"
-					:locale="'th'"
-					autoApply
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					:readonly="!formDataFollowSpouse.leaveStartDate"
-					:min-date="formDataFollowSpouse.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!formDataFollowSpouse.leaveStartDate"
-							class="full-width datepicker"
-							:model-value="formDataFollowSpouse.leaveEndDate != null ? date2Thai(formDataFollowSpouse.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					bg-color="white"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataFollowSpouse.leaveTotal"
-					label="เป็นเวลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="col-12 col-md-6 col-sm-12">
-					<q-input
-						hide-bottom-space
-						bg-color="white"
-						class="col-12 col-sm-12"
-						ref="leaveSalaryRef"
-						for="leaveSalaryRef"
-						dense
-						outlined
-						v-model="formattSalary"
-						label="เงินเดือนปัจจุบัน"
-						readonly
-					/>
-				</div>
-				<div class="col-12 col-md-6 col-sm-12">
-					<q-input
-						hide-bottom-space
-						bg-color="white"
-						class="col-12 col-sm-12"
-						ref="leaveSalaryRef"
-						for="leaveSalaryRef"
-						dense
-						outlined
-						v-model="formattleaveSalaryText"
-						label="เงินเดือนปัจจุบัน"
-						readonly
-					/>
-				</div>
-
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						hide-bottom-space
-						ref="coupleDayNameRef"
-						for="coupleDayNameRef"
-						dense
-						bg-color="white"
-						outlined
-						v-model="formDataFollowSpouse.coupleDayName"
-						label="ชื่อคู่สมรส"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
-					/>
-				</div>
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						hide-bottom-space
-						ref="coupleDayPositionRef"
-						for="coupleDayPositionRef"
-						dense
-						outlined
-						bg-color="white"
-						v-model="formDataFollowSpouse.coupleDayPosition"
-						label="ตำแหน่งคู่สมรส"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
-					/>
-				</div>
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						ref="coupleDayLevelRef"
-						for="coupleDayLevelRef"
-						dense
-						hide-bottom-space
-						outlined
-						bg-color="white"
-						v-model="formDataFollowSpouse.coupleDayLevel"
-						label="ระดับคู่สมรส"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
-					/>
-				</div>
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						ref="coupleDayLevelCountryRef"
-						for="coupleDayLevelCountryRef"
-						hide-bottom-space
-						dense
-						outlined
-						bg-color="white"
-						v-model="formDataFollowSpouse.coupleDayLevelCountry"
-						label="ไปปฏิบัติราชการ ณ ประเทศ"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
-					/>
-				</div>
-				<div class="text-weight-bold text-dark col-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
-				<datepicker
-					class="col-12 col-md-3 col-sm-12"
-					menu-class-name="modalfix"
-					v-model="formDataFollowSpouse.followHistoryStart"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					readonly
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="followHistoryStartRef"
-							for="followHistoryStartRef"
-							hide-bottom-space
-							readonly
-							bg-color="white"
-							class="full-width"
-							:model-value="formDataFollowSpouse.followHistoryStart != null ? date2Thai(formDataFollowSpouse.followHistoryStart) : null"
-							:label="`${'ตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<datepicker
-					class="col-12 col-md-3 col-sm-12"
-					menu-class-name="modalfix"
-					v-model="formDataFollowSpouse.followHistoryEnd"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					readonly
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="followHistoryEndRef"
-							for="followHistoryEndRef"
-							hide-bottom-space
-							bg-color="white"
-							readonly
-							class="full-width"
-							:model-value="formDataFollowSpouse.followHistoryEnd != null ? date2Thai(formDataFollowSpouse.followHistoryEnd) : null"
-							:label="`${'ถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-3 col-sm-12"
-					dense
-					outlined
-					hide-bottom-space
-					bg-color="white"
-					ref="followHistoryCountryRef"
-					for="followHistoryCountryRef"
-					v-model="formDataFollowSpouse.followHistoryCountry"
-					label="ประเทศ"
-					:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
-					readonly
-				/>
-				<q-input
-					class="col-12 col-md-3 col-sm-12"
-					dense
-					outlined
-					:readonly="formDataFollowSpouse.followHistoryTime !== ''"
-					hide-bottom-space
-					bg-color="white"
-					ref="followHistoryTimeRef"
-					for="followHistoryTimeRef"
-					v-model="formDataFollowSpouse.followHistoryTime"
-					label="เป็นเวลา"
-				/>
-
-				<q-input
-					hide-bottom-space
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					bg-color="white"
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="formDataFollowSpouse.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file
-					ref="fileRef"
-					bg-color="white"
-					v-model="formDataFollowSpouse.leaveDocument"
-					@added="fileUploadDoc"
-					dense
-					label="เอกสารประกอบ"
-					outlined
-					use-chips
-					multiple
-					class="q-pl-sm col-12"
-				>
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in formDataFollowSpouse.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/Forms/13_RehabilitationForm.vue

@@ -1,381 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-import genReport from "@/plugins/genreport"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
-const router = useRouter()
-const edit = ref<boolean>(true)
-const isSave = ref<boolean>(false)
-const files = ref<any>(null)
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Array,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataRehabilitation = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveDocument: "",
-	leaveDetail: "",
-	leaveDraftDocument: null,
-})
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: RehabilitationForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveWrote: leaveWroteRef,
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const nameFileDraft = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null, EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataRehabilitation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataRehabilitation.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-//download function
-async function onClickDownloadFile(id: string, fileName: string) {
-	// showLoader();
-	await http
-		.get(config.API.leaveReport(id))
-		.then(async res => {
-			console.log(res)
-			const data = res.data.result
-			await genReport(data, fileName)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			// hideLoader();
-		})
-}
-
-// //download function
-// async function onClickUpload() {
-// 	// showLoader();
-// 	const data = {
-// 		template: "leave16",
-// 		reportName: "docx-report",
-// 		data: {
-// 			leaveWrote: "",
-// 			dateSendLeave: "",
-// 			leaveTypeName: "",
-// 			dear: "",
-// 			fullname: "",
-// 			fullnameEng: "",
-// 			positionName: "",
-// 			positionLeaveName: "",
-// 			organizationName: "",
-// 			leaveDateStart: "",
-// 			leaveDateEnd: "",
-// 		},
-// 	}
-// 	await http
-// 		.post(config.API.leaveReport())
-// 		.then(async res => {
-// 			console.log(res)
-// 			const data = res.data.result
-// 			await genReport(data, "รายงาน")
-// 		})
-// 		.catch(err => {
-// 			messageError($q, err)
-// 		})
-// 		.finally(() => {
-// 			// hideLoader();
-// 		})
-// }
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataRehabilitation.leaveDraftDocument.length > 0) {
-	// 	const blobDrafe = formDataRehabilitation.leaveDraftDocument.slice(0, formDataRehabilitation.leaveDraftDocument[0].size)
-	// 	const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
-	// 		type: formDataRehabilitation.leaveDraftDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDraftDocument", newFileDraft) //
-	// }
-
-	// if (formDataRehabilitation.leaveDocument.length > 0) {
-	// 	const blob = formDataRehabilitation.leaveDocument.slice(0, formDataRehabilitation.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataRehabilitation.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// } //
-	formData.append("leaveDraftDocument", formDataRehabilitation.leaveDraftDocument)
-	formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
-	formData.append("type", formDataRehabilitation.type) //
-	formData.append("leaveStartDate", dateToISO(formDataRehabilitation.leaveStartDate)) //
-	formData.append("leaveEndDate", dateToISO(formDataRehabilitation.leaveEndDate)) //
-	formData.append("leaveWrote", formDataRehabilitation.leaveWrote) //
-	formData.append("leaveDetail", formDataRehabilitation.leaveDetail) //
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="formDataRehabilitation.leaveWrote"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					dense
-					outlined
-					bg-color="white"
-					label="เขียนที่"
-					hide-bottom-space
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					v-model="formDataRehabilitation.leaveStartDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:enableTimePicker="false"
-					:locale="'th'"
-					@update:model-value="formDataRehabilitation.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveStartDateRef"
-							class="full-width datepicker"
-							bg-color="white"
-							outlined
-							dense
-							lazy-rules
-							hide-bottom-space
-							:model-value="formDataRehabilitation.leaveStartDate != null ? date2Thai(formDataRehabilitation.leaveStartDate) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					v-model="formDataRehabilitation.leaveEndDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:locale="'th'"
-					@update:model-value="FetchCheck()"
-					:readonly="!formDataRehabilitation.leaveStartDate"
-					:enableTimePicker="false"
-					:min-date="formDataRehabilitation.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveEndDateRef"
-							class="full-width datepicker"
-							outlined
-							dense
-							lazy-rules
-							bg-color="white"
-							hide-bottom-space
-							:readonly="!formDataRehabilitation.leaveStartDate"
-							:model-value="formDataRehabilitation.leaveEndDate != null ? date2Thai(formDataRehabilitation.leaveEndDate) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input v-model="formDataRehabilitation.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="formDataRehabilitation.leaveDocument" @added="fileUploadDoc" use-chips bg-color="white" dense outlined multiple label="เอกสารประกอบ">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<div v-if="formDataRehabilitation.leaveWrote && formDataRehabilitation.leaveStartDate && formDataRehabilitation.leaveEndDate" class="q-mt-md">
-			<div style="display: flex; align-items: center">
-				<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
-				<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
-			</div>
-			<q-card class="bg-grey-1 q-pa-sm" bordered>
-				<div class="row">
-					<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
-						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
-							<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile('08dc05c8-4cfd-4603-81f8-92a401571717', 'แบบฟอร์ม')" />
-						</div>
-					</div>
-					<div class="col-10 col-sm-5 col-md-4 q-my-sm">
-						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
-							<q-file v-model="formDataRehabilitation.leaveDraftDocument" use-chips dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept="application/pdf">
-								<template v-slot:prepend>
-									<q-icon name="attach_file" color="primary" />
-								</template>
-							</q-file>
-						</div>
-					</div>
-					<!-- <div class="col-md-1 self-end q-mb-sm">
-						<q-btn v-if="formDataRehabilitation.leaveDraftDocument != null" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
-							><q-tooltip>อัปโหลด</q-tooltip></q-btn
-						>
-					</div> -->
-				</div>
-			</q-card>
-		</div>
-
-		<div v-if="!isSave">
-			<q-separator class="q-mt-sm" />
-			<div class="row col-12 q-pt-md">
-				<q-space />
-				<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-			</div>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/Forms/Form.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, onMounted } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const dataStore = useLeaveStore()
-const { date2Thai, success, messageError } = mixin
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	model: {
-		type: String,
-		default: "",
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<FormData>({
-	dateStart: new Date(),
-	subject: "เรื่อง",
-	who: "เรียนผู้ใด",
-	requestName: "ชื่อผู้ยื่น",
-	position: "ตำแหน่ง",
-	level: "ระดับ",
-	ocRequest: "สังกัด",
-	leaveabsentDaySummon: "2",
-	leaveUse: "1",
-	leaveRemaining: "1",
-})
-
-onMounted(async () => {
-	// await FetchProfile()
-})
-</script>
-<template>
-	<q-card bordered class="q-pa-md bg-grey-1">
-		<div class="col-12 row q-pa-sm q-col-gutter-sm">
-			<datepicker class="col-12 col-sm-4" menu-class-name="modalfix" v-model="formData.dateStart" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0" readonly>
-				<template #year="{ year }">
-					{{ year + 543 }}
-				</template>
-				<template #year-overlay-value="{ value }">
-					{{ parseInt(value + 543) }}
-				</template>
-				<template #trigger>
-					<q-input
-						outlined
-						dense
-						bg-color="white"
-						hide-bottom-space
-						readonly
-						class="full-width"
-						:model-value="dataStore.dateSendLeave != null ? date2Thai(dataStore.dateSendLeave) : null"
-						:label="`${'วันที่ยื่นใบลา'}`"
-						:rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
-					>
-						<template v-slot:prepend>
-							<q-icon name="event" class="cursor-pointer inputblack" style="color: var(--black)"> </q-icon>
-						</template>
-					</q-input>
-				</template>
-			</datepicker>
-			<q-input class="col-12 col-sm-4" dense bg-color="white" outlined readonly v-model="dataStore.typeLeave" label="เรื่อง" />
-			<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.dear" label="เรียน" />
-			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.fullName" label="ชื่อผู้ยื่นขอ" />
-			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.positionName" label="ตำแหน่งผู้ยื่นขอ" />
-			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.positionLevelName" label="ระดับผู้ยื่นขอ" />
-			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.organizationName" label="สังกัดผู้ยื่นขอ" />
-			<q-input v-if="props.model === 'LV-005'" class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveLimit" label="จำนวนสิทธิ์การลาที่ได้รับ" />
-			<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveTotal" label="จำนวนสิทธิ์การลาที่ใช้ไป" />
-			<q-input v-if="props.model === 'LV-005'" class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveRemain" label="จำนวนสิทธิ์การลาคงเหลือ" />
-		</div>
-	</q-card>
-</template>

src/modules/05_leave/components/ListView.vue

@@ -176,6 +176,13 @@ onMounted(async () => {
         <q-td key="status" :props="props">
           <div class="col-12 row items-center">
             <div @click="onClickView(props.row.id, props.row.status)">
+              <q-icon
+                v-if="props.row.status == 'DRAFT'"
+                size="10px"
+                color="light-grey"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
               <q-icon
                 v-if="props.row.status == 'APPROVE'"
                 size="10px"
@@ -217,6 +224,11 @@ onMounted(async () => {
             <q-space />
 
             <q-btn
+              v-if="
+                props.row.status != 'DELETE' &&
+                props.row.status != 'REJECT' &&
+                props.row.status != 'CANCEL'
+              "
               flat
               icon="mdi-dots-vertical"
               color="grey-8"
@@ -228,11 +240,6 @@ onMounted(async () => {
               <q-menu>
                 <q-list>
                   <q-item
-                    v-if="
-                      props.row.status != 'DELETE' &&
-                      props.row.status != 'REJECT' &&
-                      props.row.status != 'CANCEL' 
-                    "
                     clickable
                     v-close-popup
                     @click="onClickView(props.row.id, 'CANCEL')"

src/modules/05_leave/components/Table.vue

@@ -91,6 +91,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
   updatePagination(currentPage.value, pagination.value.rowsPerPage);
 });
 </script>
+
 <template>
   <div class="q-py-sm row">
     <q-card bordered flat class="q-py-sm q-pl-sm col-12 row bg-grey-1 shadow-0">

src/modules/05_leave/components/formEdit/Form.vue

@@ -1,142 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, onMounted } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const dataStore = useLeaveStore()
-const { date2Thai, success, messageError } = mixin
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	model: {
-		type: String,
-		default: "",
-	},
-	leaveTypeId: {
-		type: String,
-		default: "",
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	data: {
-		type: Object,
-		required: true,
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-// const formData = reactive<FormData>({
-// 	dateStart: new Date(),
-// 	subject: "เรื่อง",
-// 	who: "เรียนผู้ใด",
-// 	requestName: "ชื่อผู้ยื่น",
-// 	position: "ตำแหน่ง",
-// 	level: "ระดับ",
-// 	ocRequest: "สังกัด",
-// 	leaveabsentDaySummon: "2",
-// 	leaveUse: "1",
-// 	leaveRemaining: "1",
-// })
-/**
- *ตัวแปร profile ที่จะส่งออก
- */
-const dateSendLeave = ref<Date>() //วันที่ยื่นใบลา
-const leaveTypeName = ref<string>("") //Name ประเภทการลา
-const dear = ref<string>("") //เรียน
-const fullName = ref<string>("") //คำนำหน้า ชื่อ นามสกุล ผู้ยื่นขอ
-const positionName = ref<string>("") //ตำแหน่งผู้ยื่นขอ
-const positionLevelName = ref<string>("") //ระดับผู้ยื่นขอ
-const organizationName = ref<string>("") //สังกัดผู้ยื่นขอ
-const leaveLimit = ref<number>(0) //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
-const leaveTotal = ref<number>(0) //ลาไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
-const leaveRemain = ref<number>(0) //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน(ภายในปีนั้น)
-const restDayTotalOld = ref<number>(0) //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา
-const birthDate = ref<Date>() //วันเกิด
-const dateAppoint = ref<Date>() //วันที่เข้ารับราชการ
-const salary = ref<number>(0) //เงินเดือนปัจจุบัน
-const salaryText = ref<string>("") //เงินเดือนปัจจุบัน(ภาษาไทย)
-const leaveLast = ref<any>()
-const restDayCurrentTotal = ref<string>("")
-//ดึงข้อมูล profile จาก API
-async function fetchProfile() {
-	console.log(props.leaveTypeId)
-
-	await http
-		.post(config.API.leaveProfile(), { type: props.leaveTypeId })
-		.then((res: any) => {
-			const data = res.data.result
-			dateSendLeave.value = data.dateSendLeave
-			leaveTypeName.value = data.leaveTypeName
-			dear.value = data.dear
-			fullName.value = data.fullName
-			positionName.value = data.positionName
-			positionLevelName.value = data.positionLevelName
-			organizationName.value = data.organizationName
-			leaveLimit.value = data.leaveLimit
-			leaveTotal.value = data.leaveTotal
-			leaveRemain.value = data.leaveRemain
-			restDayTotalOld.value = data.restDayTotalOld
-			birthDate.value = data.birthDate
-			dateAppoint.value = data.dateAppoint
-			salary.value = data.salary
-			salaryText.value = data.salaryText
-			leaveLast.value = date2Thai(data.leaveLast) !== "0001-01-01T00:00:00" ? date2Thai(data.leaveLast) : "-"
-			restDayCurrentTotal.value = data.restDayCurrentTotal
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-onMounted(async () => {
-	await setTimeout(() => fetchProfile(), 500)
-})
-</script>
-<template>
-	<q-card bordered class="q-pa-md bg-grey-1">
-		<div class="col-12 row q-pa-sm q-col-gutter-sm">
-			<datepicker class="col-12 col-sm-4" menu-class-name="modalfix" v-model="dateSendLeave" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0" readonly>
-				<template #year="{ year }">
-					{{ year + 543 }}
-				</template>
-				<template #year-overlay-value="{ value }">
-					{{ parseInt(value + 543) }}
-				</template>
-				<template #trigger>
-					<q-input
-						outlined
-						dense
-						bg-color="white"
-						hide-bottom-space
-						readonly
-						class="full-width"
-						:model-value="dateSendLeave != null ? date2Thai(dateSendLeave) : null"
-						:label="`${'วันที่ยื่นใบลา'}`"
-						:rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
-					>
-						<template v-slot:prepend>
-							<q-icon name="event" class="cursor-pointer inputblack" style="color: var(--black)"> </q-icon>
-						</template>
-					</q-input>
-				</template>
-			</datepicker>
-			<q-input class="col-12 col-sm-4" dense bg-color="white" outlined readonly v-model="leaveTypeName" label="เรื่อง" />
-			<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dear" label="เรียน" />
-			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="fullName" label="ชื่อผู้ยื่นขอ" />
-			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="positionName" label="ตำแหน่งผู้ยื่นขอ" />
-			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="positionLevelName" label="ระดับผู้ยื่นขอ" />
-			<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="organizationName" label="สังกัดผู้ยื่นขอ" />
-			<q-input v-if="leaveTypeName === 'ลาพักผ่อน'" class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="leaveLimit" label="จำนวนสิทธิ์การลาที่ได้รับ" />
-			<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="leaveTotal" label="จำนวนสิทธิ์การลาที่ใช้ไป" />
-			<q-input v-if="leaveTypeName === 'ลาพักผ่อน'" class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="leaveRemain" label="จำนวนสิทธิ์การลาคงเหลือ" />
-		</div>
-	</q-card>
-</template>

src/modules/05_leave/components/formEdit/formEdit_Birth.vue

@@ -1,391 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue"
-import { useQuasar } from "quasar"
-import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const mixin = useCounterMixin()
-const router = useRouter()
-const $q = useQuasar()
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataBirth = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "",
-	leaveLast: "",
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataBirth.leaveWrote = props.data.leaveWrote
-	formDataBirth.leaveStartDate = props.data.leaveStartDate
-	formDataBirth.leaveEndDate = props.data.leaveEndDate
-	formDataBirth.leaveTotal = props.data.leaveTotal
-	formDataBirth.leaveNumber = props.data.leaveNumber
-	formDataBirth.leaveDetail = props.data.leaveDetail
-	formDataBirth.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-async function fileUploadDoc(files: any) {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataBirth.leaveStartDate ?? null, EndLeaveDate: formDataBirth.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataBirth.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataBirth.leaveLast = data.sumDateWork
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataBirth.leaveDocument.length > 0) {
-	// 	const blob = formDataBirth.leaveDocument.slice(0, formDataBirth.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataBirth.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// }
-	formData.append("leaveDocument", formDataBirth.leaveDocument)
-	formData.append("type", formDataBirth.type)
-	formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate))
-	formData.append("leaveWrote", formDataBirth.leaveWrote)
-	formData.append("leaveAddress", formDataBirth.leaveAddress)
-	formData.append("leaveNumber", formDataBirth.leaveNumber)
-	formData.append("leaveDetail", formDataBirth.leaveDetail)
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-</script>
-
-<!-- ฟอร์มลาคลอดบุตร-->
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					outlined
-					v-model="props.data.leaveWrote"
-					label="เขียนที่"
-					hide-bottom-space
-					bg-color="white"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateStart"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="props.data.leaveDateEnd = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateEnd"
-					:locale="'th'"
-					autoApply
-					@update:model-value="FetchCheck()"
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!props.data.leaveDateStart"
-					:min-date="props.data.leaveDateStart"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!props.data.leaveDateStart"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-3 col-sm-6"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="props.data.leaveTotal"
-					label="จำนวนวันที่ลา"
-					bg-color="white"
-					readonly
-					hide-bottom-space
-				/>
-				<q-input
-					class="col-12 col-md-3 col-sm-6"
-					dense
-					outlined
-					ref="leaveLastRef"
-					for="leaveLastRef"
-					v-model="dataStore.leaveLast"
-					label="ลาครั้งสุดท้ายเมื่อวันที่"
-					readonly
-					hide-bottom-space
-					bg-color="white"
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="props.data.leaveNumber"
-							mask="(###)-###-####"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="props.data.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-				<q-input
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="props.data.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file
-					for="leaveDocumentRef"
-					hide-bottom-space
-					v-model="props.data.leaveDocument"
-					@added="fileUploadDoc"
-					dense
-					bg-color="white"
-					label="เอกสารประกอบ"
-					outlined
-					use-chips
-					multiple
-					class="q-pl-sm col-12"
-				>
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/formEdit/formEdit_FollowSpouse.vue

@@ -1,570 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, computed, onMounted } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import { useQuasar } from "quasar"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const router = useRouter()
-const { dialogConfirm, date2Thai, arabicNumberToText, calculateDurationYmd, dateToISO, fails, success, messageError } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataFollowSpouse = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "", //จำนวนวันลา
-	leaveSalaryText: 25000,
-	leaveSalary: 25000, //เงินเดือนปัจจุบัน
-	coupleDayName: "", //ชื่อคู่สมรส
-	coupleDayPosition: "", //ตำแหน่งคู่สมรส
-	coupleDayLevel: "", //ระดับคู่สมรส
-	coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
-	followHistoryCountry: "ลาว", //ประวัติการลาติดตามคู่สมรส
-	followHistoryTime: "0 วัน",
-	followHistoryStart: new Date(),
-	followHistoryEnd: new Date(),
-	leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
-	leaveDocument: [], //เอกสารปะกอบ
-})
-
-/** แปลงตัวแปร Salary */
-const formattleaveSalaryText = arabicNumberToText(props.data.leaveSalaryText)
-const formattSalary = computed(() => {
-	return props.data.leaveSalary !== null ? props.data.leaveSalary.toLocaleString("th-TH") : ""
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveSalaryRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const coupleDayNameRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const coupleDayPositionRef = ref<object | null>(null)
-const coupleDayLevelRef = ref<object | null>(null)
-const coupleDayLevelCountryRef = ref<object | null>(null)
-const followHistoryCountryRef = ref<object | null>(null)
-const followHistoryTimeRef = ref<object | null>(null)
-const followHistoryStartRef = ref<object | null>(null)
-const followHistoryEndRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef, //เขียนที่***
-	leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
-	leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
-	leaveTotal: leaveTotalRef, //จำนวนวันลา
-	leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
-	coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
-	coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
-	coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
-	coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
-	followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
-	followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
-	followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
-	followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
-	leaveDetail: leaveDetailRef, //รายละเอียดการลา
-	leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataFollowSpouse.leaveWrote = props.data.leaveWrote
-	formDataFollowSpouse.leaveStartDate = props.data.leaveStartDate
-	formDataFollowSpouse.leaveEndDate = props.data.leaveEndDate
-	formDataFollowSpouse.leaveTotal = props.data.leaveTotal
-	formDataFollowSpouse.leaveDetail = props.data.leaveDetail
-	formDataFollowSpouse.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null, EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataFollowSpouse.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataFollowSpouse.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataFollowSpouse.leaveDocument.length > 0) {
-	// 	const blob = formDataFollowSpouse.leaveDocument.slice(0, formDataFollowSpouse.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataFollowSpouse.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// } //
-	formData.append("leaveDocument", formDataFollowSpouse.leaveDocument)
-	formData.append("type", formDataFollowSpouse.type) //
-	formData.append("leaveStartDate", dateToISO(formDataFollowSpouse.leaveStartDate)) //
-	formData.append("leaveEndDate", dateToISO(formDataFollowSpouse.leaveEndDate)) //
-	formData.append("followHistoryStart", dateToISO(formDataFollowSpouse.followHistoryStart)) //
-	formData.append("followHistoryEnd", dateToISO(formDataFollowSpouse.followHistoryEnd)) //
-	formData.append("leaveWrote", formDataFollowSpouse.leaveWrote) //
-	formData.append("leaveDetail", formDataFollowSpouse.leaveDetail) //
-	formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText) //
-	formData.append("leaveSalary", formDataFollowSpouse.leaveSalary) //
-	formData.append("followHistoryTime", formDataFollowSpouse.followHistoryTime) //
-	formData.append("followHistoryCountry", formDataFollowSpouse.followHistoryCountry) //
-	formData.append("coupleDayLevelCountry", formDataFollowSpouse.coupleDayLevelCountry) //
-	formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel) //
-	formData.append("coupleDayPosition", formDataFollowSpouse.coupleDayPosition) //
-	formData.append("coupleDayName", formDataFollowSpouse.coupleDayName) //
-	formData.append("leaveTotal", formDataFollowSpouse.leaveTotal) //
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataFollowSpouse.leaveStartDate, formDataFollowSpouse.leaveEndDate)
-	formDataFollowSpouse.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="props.data.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateStart"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="props.data.leaveDateEnd = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateEnd"
-					:locale="'th'"
-					autoApply
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					:readonly="!props.data.leaveDateStart"
-					:min-date="props.data.leaveDateStart"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!props.data.leaveDateStart"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					bg-color="white"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="props.data.leaveTotal"
-					label="เป็นเวลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="col-12 col-md-6 col-sm-12">
-					<q-input
-						hide-bottom-space
-						bg-color="white"
-						class="col-12 col-sm-12"
-						ref="leaveSalaryRef"
-						for="leaveSalaryRef"
-						dense
-						outlined
-						v-model="formattSalary"
-						label="เงินเดือนปัจจุบัน"
-						readonly
-					/>
-				</div>
-				<div class="col-12 col-md-6 col-sm-12">
-					<q-input
-						hide-bottom-space
-						bg-color="white"
-						class="col-12 col-sm-12"
-						ref="leaveSalaryRef"
-						for="leaveSalaryRef"
-						dense
-						outlined
-						v-model="formattleaveSalaryText"
-						label="เงินเดือนปัจจุบัน"
-						readonly
-					/>
-				</div>
-
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						hide-bottom-space
-						ref="coupleDayNameRef"
-						for="coupleDayNameRef"
-						dense
-						bg-color="white"
-						outlined
-						v-model="props.data.coupleDayName"
-						label="ชื่อคู่สมรส"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
-					/>
-				</div>
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						hide-bottom-space
-						ref="coupleDayPositionRef"
-						for="coupleDayPositionRef"
-						dense
-						outlined
-						bg-color="white"
-						v-model="props.data.coupleDayPosition"
-						label="ตำแหน่งคู่สมรส"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
-					/>
-				</div>
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						ref="coupleDayLevelRef"
-						for="coupleDayLevelRef"
-						dense
-						hide-bottom-space
-						outlined
-						bg-color="white"
-						v-model="props.data.coupleDayLevel"
-						label="ระดับคู่สมรส"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
-					/>
-				</div>
-				<div class="col-md-3 col-sm-12">
-					<q-input
-						class="col-12 col-sm-12 cursor-pointer inputgreen"
-						ref="coupleDayLevelCountryRef"
-						for="coupleDayLevelCountryRef"
-						hide-bottom-space
-						dense
-						outlined
-						bg-color="white"
-						v-model="props.data.coupleDayLevelCountry"
-						label="ไปปฏิบัติราชการ ณ ประเทศ"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
-					/>
-				</div>
-				<div class="text-weight-bold text-dark col-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
-				<datepicker
-					class="col-12 col-md-3 col-sm-12"
-					menu-class-name="modalfix"
-					v-model="props.data.followHistoryStart"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					readonly
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="followHistoryStartRef"
-							for="followHistoryStartRef"
-							hide-bottom-space
-							readonly
-							bg-color="white"
-							class="full-width"
-							:model-value="props.data.followHistoryStart != null ? date2Thai(props.data.followHistoryStart) : null"
-							:label="`${'ตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<datepicker
-					class="col-12 col-md-3 col-sm-12"
-					menu-class-name="modalfix"
-					v-model="props.data.followHistoryEnd"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					readonly
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="followHistoryEndRef"
-							for="followHistoryEndRef"
-							hide-bottom-space
-							bg-color="white"
-							readonly
-							class="full-width"
-							:model-value="props.data.followHistoryEnd != null ? date2Thai(props.data.followHistoryEnd) : null"
-							:label="`${'ถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-3 col-sm-12"
-					dense
-					outlined
-					hide-bottom-space
-					bg-color="white"
-					ref="followHistoryCountryRef"
-					for="followHistoryCountryRef"
-					v-model="props.data.followHistoryCountry"
-					label="ประเทศ"
-					:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
-					readonly
-				/>
-				<q-input
-					class="col-12 col-md-3 col-sm-12"
-					dense
-					outlined
-					:readonly="props.data.followHistoryTime !== ''"
-					hide-bottom-space
-					bg-color="white"
-					ref="followHistoryTimeRef"
-					for="followHistoryTimeRef"
-					v-model="props.data.followHistoryTime"
-					label="เป็นเวลา"
-				/>
-
-				<q-input
-					hide-bottom-space
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					bg-color="white"
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="props.data.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file ref="fileRef" bg-color="white" v-model="props.data.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/formEdit/formEdit_Hajj.vue

@@ -1,354 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const router = useRouter()
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, fails, messageError, success, dateToISO } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataHaji = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leavegovernmentDate: new Date(),
-	leaveStartDate: null,
-	leaveEndDate: null,
-	totalLeave: new Date(),
-	hajjDayStatus: "true",
-	leaveDocument: null,
-})
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: HajiForm = {
-	leaveWrote: leaveWroteRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataHaji.leaveStartDate ?? null, EndLeaveDate: formDataHaji.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataHaji.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataHaji.leaveDocument.length > 0) {
-	// 	const blob = formDataHaji.leaveDocument.slice(0, formDataHaji.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataHaji.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// }
-	formData.append("leaveDocument", formDataHaji.leaveDocument)
-	formData.append("type", formDataHaji.type)
-	formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate))
-	formData.append("hajjDayStatus", formDataHaji.hajjDayStatus)
-	formData.append("leaveWrote", formDataHaji.leaveWrote)
-	formData.append("leaveDetail", formDataHaji.leaveDetail)
-	formData.append("leavegovernmentDate", dateToISO(formDataHaji.leavegovernmentDate))
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(props.data.leaveStartDate, props.data.leaveEndDate)
-	props.data.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate" class="full-width">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="props.data.leaveWrote"
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					label="เขียนที่"
-					hide-bottom-space
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							v-model="props.data.leaveDateStart"
-							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-							@update:model-value="props.data.leaveDateEnd = null"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leaveStartDateRef"
-									bg-color="white"
-									class="full-width datepicker"
-									outlined
-									dense
-									hide-bottom-space
-									:label="`${'ลาตั้งแต่วันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-									:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							v-model="props.data.leaveDateEnd"
-							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-							@update:model-value="updateLeaveTotal"
-							:readonly="!props.data.leaveDateStart"
-							:min-date="props.data.leaveDateStart"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leaveEndDateRef"
-									class="full-width datepicker"
-									bg-color="white"
-									outlined
-									dense
-									:readonly="!props.data.leaveDateStart"
-									hide-bottom-space
-									:label="`${'ลาถึงวันที่'}`"
-									@update:model-value="FetchCheck()"
-									:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<q-input
-							class="col-12 col-md-2 col-sm-6"
-							dense
-							outlined
-							bg-color="white"
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							v-model="props.data.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							hide-bottom-space
-						/>
-						<datepicker
-							v-model="props.data.leavegovernmentDate"
-							class="col-12 col-md-4 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							readonly
-							week-start="0"
-							:locale="'th'"
-							:enableTimePicker="false"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavegovernmentDateRef"
-									bg-color="white"
-									class="full-width"
-									outlined
-									dense
-									readonly
-									hide-bottom-space
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="props.data.leavegovernmentDate != null ? date2Thai(props.data.leavegovernmentDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-					</div>
-				</div>
-
-				<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจญ์หรือไม่</div>
-				<div class="col-12">
-					<q-radio v-model="props.data.hajjDayStatus" val="true" checked-icon="task_alt" label="เคย" />
-					<q-radio v-model="props.data.hajjDayStatus" val="false" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจญ์" />
-				</div>
-
-				<q-input v-model="props.data.leaveDetail" class="col-12 q-mt-sm cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="props.data.leaveDocument" bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined multiple hide-bottom-space>
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/formEdit/formEdit_HelpWifeBirth.vue

@@ -1,436 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const mixin = useCounterMixin()
-const router = useRouter()
-const $q = useQuasar()
-const { date2Thai, calculateDurationYmd, dateToISO, dialogConfirm, fails, success, messageError } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataHelpWife = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	wifeDayName: "",
-	wifeDayDateBorn: null,
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "",
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const wifeDayNameRef = ref<object | null>(null)
-const wifeDayDateBornRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	wifeDayName: wifeDayNameRef,
-	wifeDayDateBorn: wifeDayDateBornRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataHelpWife.leaveWrote = props.data.leaveWrote
-	formDataHelpWife.wifeDayName = props.data.wifeDayName
-	formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn
-	formDataHelpWife.leaveStartDate = props.data.leaveStartDate
-	formDataHelpWife.leaveEndDate = props.data.leaveEndDate
-	formDataHelpWife.leaveTotal = props.data.leaveTotal
-	formDataHelpWife.leaveNumber = props.data.leaveNumber
-	formDataHelpWife.leaveDetail = props.data.leaveDetail
-	formDataHelpWife.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataHelpWife.leaveStartDate, formDataHelpWife.leaveEndDate)
-	formDataHelpWife.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataHelpWife.leaveStartDate ?? null, EndLeaveDate: formDataHelpWife.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataHelpWife.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataHelpWife.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataHelpWife.leaveDocument.length > 0) {
-	// 	const blob = formDataHelpWife.leaveDocument.slice(0, formDataHelpWife.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataHelpWife.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// }
-	formData.append("leaveDocument", formDataHelpWife.leaveDocument)
-	formData.append("type", formDataHelpWife.type)
-	formData.append("leaveStartDate", dateToISO(formDataHelpWife.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate))
-	formData.append("leaveWrote", formDataHelpWife.leaveWrote)
-	formData.append("leaveAddress", formDataHelpWife.leaveAddress)
-	formData.append("leaveNumber", formDataHelpWife.leaveNumber)
-	formData.append("leaveDetail", formDataHelpWife.leaveDetail)
-	formData.append("wifeDayName", formDataHelpWife.wifeDayName)
-	formData.append("wifeDayDateBorn", dateToISO(formDataHelpWife.wifeDayDateBorn))
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					outlined
-					hide-bottom-space
-					bg-color="white"
-					v-model="props.data.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateStart"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="props.data.leaveDateEnd = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateEnd"
-					:locale="'th'"
-					autoApply
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					week-start="0"
-					:readonly="!props.data.leaveDateStart"
-					:min-date="props.data.leaveDateStart"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!props.data.leaveDateStart"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="props.data.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-					bg-color="white"
-				/>
-				<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
-					<q-input
-						class="col-12 col-sm-12"
-						ref="wifeDayNameRef"
-						for="wifeDayNameRef"
-						dense
-						bg-color="white"
-						outlined
-						hide-bottom-space
-						v-model="props.data.wifeDayName"
-						label="ชื่อภรรยา"
-						:readonly="!edit"
-						:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
-					/>
-				</div>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.wifeDayDateBorn"
-					:locale="'th'"
-					autoApply
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="wifeDayDateBornRef"
-							for="wifeDayDateBornRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="props.data.wifeDayDateBorn != null ? date2Thai(props.data.wifeDayDateBorn) : null"
-							:label="`${'วันที่คลอด'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="props.data.leaveNumber"
-							mask="(###)-###-####"
-							unmasked-value
-							hide-bottom-space
-							bg-color="white"
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="props.data.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-				<q-input
-					hide-bottom-space
-					bg-color="white"
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="props.data.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file bg-color="white" ref="leaveDocumentRef" v-model="props.data.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/formEdit/formEdit_Military.vue

@@ -1,412 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const router = useRouter()
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError, fails } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-const absentDaySummonRef = ref<object | null>(null)
-const absentDayLocationRef = ref<object | null>(null)
-const absentDayRegistorDateRef = ref<object | null>(null)
-const absentDayGetInRef = ref<object | null>(null)
-const absentDayAtRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataMilitary = reactive<any>({
-	type: dataStore.typeId,
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: 0,
-	leaveDocument: null,
-	leaveWrote: "",
-	absentDaySummon: "",
-	absentDayLocation: "",
-	absentDayRegistorDate: null,
-	absentDayGetIn: "",
-	absentDayAt: "",
-	leaveDetail: "",
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: MilitaryForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveWrote: leaveWroteRef,
-	absentDaySummon: absentDaySummonRef,
-	absentDayLocation: absentDayLocationRef,
-	absentDayRegistorDate: absentDayRegistorDateRef,
-	absentDayGetIn: absentDayGetInRef,
-	absentDayAt: absentDayAtRef,
-	leaveDetail: leaveDetailRef,
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataMilitary.leaveStartDate ?? null, EndLeaveDate: formDataMilitary.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataMilitary.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataMilitary.leaveDocument.length > 0) {
-	// 	const blob = formDataMilitary.leaveDocument.slice(0, formDataMilitary.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataMilitary.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// }
-	formData.append("leaveDocument", formDataMilitary.leaveDocument)
-	formData.append("type", formDataMilitary.type)
-	formData.append("leaveStartDate", dateToISO(formDataMilitary.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate))
-	formData.append("absentDaySummon", formDataMilitary.absentDaySummon)
-	formData.append("absentDayLocation", formDataMilitary.absentDayLocation)
-	formData.append("absentDayRegistorDate", dateToISO(formDataMilitary.absentDayRegistorDate))
-	formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn)
-	formData.append("absentDayAt", formDataMilitary.absentDayAt)
-	formData.append("leaveWrote", formDataMilitary.leaveWrote)
-	formData.append("leaveDetail", formDataMilitary.leaveDetail)
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(props.data.leaveDateStart, props.data.leaveDateEnd)
-	props.data.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					bg-color="white"
-					hide-bottom-space
-					v-model="props.data.leaveWrote"
-					label="เขียนที่"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateStart"
-					:locale="'th'"
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="props.data.leaveDateEnd = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							bg-color="white"
-							dense
-							ref="leaveStartDateRef"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateEnd"
-					:locale="'th'"
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					:readonly="!props.data.leaveDateStart"
-					:min-date="props.data.leaveDateStart"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							bg-color="white"
-							hide-bottom-space
-							:readonly="!props.data.leaveDateStart"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="props.data.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							ref="absentDaySummonRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							v-model="props.data.absentDaySummon"
-							label="ได้รับหมายเรียกของ"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
-						/>
-
-						<q-input
-							ref="atRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							v-model="props.data.absentDayLocation"
-							label="ที่"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
-						/>
-					</div>
-				</div>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-							menu-class-name="modalfix"
-							v-model="props.data.absentDayRegistorDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="absentDayRegistorDateRef"
-									bg-color="white"
-									hide-bottom-space
-									class="full-width datepicker"
-									:model-value="props.data.absentDayRegistorDate != null ? date2Thai(props.data.absentDayRegistorDate) : null"
-									:label="`${'ลงวันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<q-input
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							ref="absentDayGetInRef"
-							outlined
-							v-model="props.data.absentDayGetIn"
-							label="ให้เข้ารับการ"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							ref="absentDayAtRef"
-							v-model="props.data.absentDayAt"
-							label="ณ ที่"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอก ณ ที่'}`]"
-						/>
-					</div>
-				</div>
-
-				<q-input class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" dense bg-color="white" outlined v-model="props.data.leaveDetail" type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="props.data.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space use-chips @added="fileUploadDoc">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/formEdit/formEdit_Ordinationvue.vue

@@ -1,545 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, watch } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const router = useRouter()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const ordainDayLocationNumberRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-const leavebirthDateRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const totalLeaveRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const ordainDayOrdinationRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const ordainDayLocationAddressRef = ref<object | null>(null)
-const ordainDayBuddhistLentAddressRef = ref<object | null>(null)
-const ordainDayLocationNameRef = ref<object | null>(null)
-const ordainDayBuddhistLentNameRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataOrdination = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leavegovernmentDate: new Date(),
-	leavebirthDate: new Date(),
-	leaveStartDate: null,
-	leaveEndDate: null,
-	totalLeave: new Date(),
-	ordainDayOrdination: new Date(),
-	ordainDayLocationName: "",
-	ordainDayLocationNumber: null,
-	ordainDayLocationAddress: "",
-	ordainDayBuddhistLentName: "",
-	ordainDayBuddhistLentAddress: "",
-	ordainDayStatus: "true",
-	leaveDocument: null,
-})
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: OrdinationForm = {
-	leaveWrote: leaveWroteRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leavebirthDate: leavebirthDateRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	totalLeave: totalLeaveRef,
-	ordainDayOrdination: ordainDayOrdinationRef,
-	ordainDayLocationName: ordainDayLocationNameRef,
-	ordainDayLocationNumber: ordainDayLocationNumberRef,
-	ordainDayLocationAddress: ordainDayLocationAddressRef,
-	ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
-	ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-// // Watch for changes in leaveEndDate and update leaveTotal accordingly
-// watch(formDataOrdination.leaveEndDate, async () => {
-// 	if (formDataOrdination.leaveStartDate !== undefined && formDataOrdination.leaveEndDate !== undefined) {
-// 		const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
-// 		formDataOrdination.leaveTotal = newLeaveTotal
-// 		console.log(newLeaveTotal)
-// 	}
-// 	// Update the leaveTotal value
-// 	console.log("test")
-// })
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataOrdination.leaveStartDate ?? null, EndLeaveDate: formDataOrdination.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataOrdination.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataOrdination.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataOrdination.leaveDocument.length > 0) {
-	// 	const blob = formDataOrdination.leaveDocument.slice(0, formDataOrdination.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataOrdination.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// }
-	formData.append("leaveDocument", formDataOrdination.leaveDocument)
-	formData.append("type", formDataOrdination.type)
-	formData.append("leaveStartDate", dateToISO(formDataOrdination.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate))
-	formData.append("ordainDayOrdination", dateToISO(formDataOrdination.ordainDayOrdination))
-	formData.append("ordainDayLocationName", formDataOrdination.ordainDayLocationName)
-	formData.append("ordainDayLocationNumber", formDataOrdination.ordainDayLocationNumber)
-	formData.append("ordainDayLocationAddress", formDataOrdination.ordainDayLocationAddress)
-	formData.append("ordainDayBuddhistLentName", formDataOrdination.ordainDayBuddhistLentName)
-	formData.append("ordainDayBuddhistLentAddress", formDataOrdination.ordainDayBuddhistLentAddress)
-	formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus)
-	formData.append("leaveWrote", formDataOrdination.leaveWrote)
-	formData.append("leaveDetail", formDataOrdination.leaveDetail)
-	formData.append("leavebirthDate", dateToISO(formDataOrdination.leavebirthDate))
-	formData.append("leavegovernmentDate", dateToISO(formDataOrdination.leavegovernmentDate))
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
-	formDataOrdination.leaveTotal = newLeaveTotal
-}
-</script>
-
-<!-- ฟอร์ม ลาอุปสมบท -->
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate" class="full-width">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					bg-color="white"
-					hide-bottom-space
-					v-model="props.data.leaveWrote"
-					label="เขียนที่"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateStart"
-					:locale="'th'"
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					@update:model-value="props.data.leaveDateEnd = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							bg-color="white"
-							dense
-							ref="leaveStartDateRef"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateEnd"
-					:locale="'th'"
-					autoApply
-					borderless
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					:readonly="!props.data.leaveDateStart"
-					:enableTimePicker="false"
-					:min-date="props.data.leaveDateStart"
-					week-start="0"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							bg-color="white"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!props.data.leaveDateStart"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="props.data.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-4 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="props.data.leavegovernmentDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							readonly
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									ref="leavegovernmentDateRef"
-									dense
-									bg-color="white"
-									hide-bottom-space
-									readonly
-									class="full-width"
-									:model-value="props.data.leavegovernmentDate != null ? date2Thai(props.data.leavegovernmentDate) : null"
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							class="col-12 col-md-4 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="props.data.leavebirthDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							readonly
-							:enableTimePicker="false"
-							week-start="0"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									ref="leavebirthDateRef"
-									dense
-									bg-color="white"
-									hide-bottom-space
-									readonly
-									class="full-width"
-									:model-value="props.data.leavebirthDate != null ? date2Thai(props.data.leavebirthDate) : null"
-									:label="`${'วันเดือนปีเกิด'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกวันเดือนปีเกิด'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-					</div>
-				</div>
-
-				<div class="q-pl-sm text-weight-bold text-dark col-12">เคยบวชหรือไม่</div>
-				<div class="col-12">
-					<q-radio v-model="props.data.ordainDayStatus" val="true" label="เคยบวช" checked-icon="task_alt " hide-bottom-space />
-					<q-radio v-model="props.data.ordainDayStatus" val="false" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
-				</div>
-
-				<div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
-				<datepicker
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.ordainDayOrdination"
-					:locale="'th'"
-					autoApply
-					full-width
-					borderless
-					hide-bottom-space
-					:enableTimePicker="false"
-					week-start="0"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							ref="ordainDayOrdinationRef"
-							dense
-							bg-color="white"
-							hide-bottom-space
-							class="full-width datepicker"
-							:model-value="props.data.ordainDayOrdination != null ? date2Thai(props.data.ordainDayOrdination) : null"
-							:label="`${'วันอุปสมบท'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input
-					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-					dense
-					hide-bottom-space
-					ref="ordainDayLocationNameRef"
-					bg-color="white"
-					outlined
-					full-width
-					v-model="props.data.ordainDayLocationName"
-					label="ชื่อวัด"
-					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-				/>
-
-				<q-input
-					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-					ref="ordainDayLocationNumberRef"
-					dense
-					full-width
-					outlined
-					v-model="props.data.ordainDayLocationNumber"
-					bg-color="white"
-					mask="(###)-###-####"
-					unmasked-value
-					hide-bottom-space
-					label="หมายเลขโทรศัพท์"
-					:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
-				/>
-				<q-input
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					ref="ordainDayLocationAddressRef"
-					bg-color="white"
-					outlined
-					hide-bottom-space
-					v-model="props.data.ordainDayLocationAddress"
-					label="ที่อยู่"
-					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
-					type="textarea"
-				/>
-
-				<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่จำพรรษา</div>
-				<q-input
-					class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-					dense
-					ref="ordainDayBuddhistLentNameRef"
-					bg-color="white"
-					hide-bottom-space
-					outlined
-					v-model="props.data.ordainDayBuddhistLentName"
-					label="ชื่อวัด"
-					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-				/>
-
-				<q-input
-					class="col-12 cursor-pointer inputgreen"
-					dense
-					ref="ordainDayBuddhistLentAddressRef"
-					bg-color="white"
-					outlined
-					v-model="props.data.ordainDayBuddhistLentAddress"
-					label="ที่อยู่"
-					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
-					type="textarea"
-					hide-bottom-space
-				/>
-				<q-input
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					bg-color="white"
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="props.data.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<div class="col-12 col-sm-6">
-					<q-file ref="leaveDocumentRef" v-model="props.data.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined bg-color="white" multiple use-chips>
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/formEdit/formEdit_Rehabilitation.vue

@@ -1,338 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-import genReport from "@/plugins/genreport"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
-const router = useRouter()
-const edit = ref<boolean>(true)
-const isSave = ref<boolean>(false)
-const files = ref<any>(null)
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		required: true,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	leaveId: {
-		type: String,
-		require: true,
-	},
-})
-
-// /** ข้อมูล v-model ของฟอร์ม */
-// const formDataRehabilitation = reactive<any>({
-// 	type: dataStore.typeId,
-// 	leaveWrote: "",
-// 	leaveStartDate: null,
-// 	leaveEndDate: null,
-// 	leaveDocument: "",
-// 	leaveDetail: "",
-// 	leaveDraftDocument: null,
-// })
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: RehabilitationForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveWrote: leaveWroteRef,
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const nameFileDraft = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			// await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: props.data.leaveTypeId ?? null, StartLeaveDate: props.data.leaveDateStart ?? null, EndLeaveDate: props.data.leaveDateEnd ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				props.data.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-console.log(props.leaveId)
-
-//download function
-async function onClickDownloadFile(id: string, fileName: string) {
-	// showLoader();
-	await http
-		.get(config.API.leaveReport(id))
-		.then(async res => {
-			console.log(res)
-			const data = res.data.result
-			await genReport(data, fileName)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			// hideLoader();
-		})
-}
-
-// /**
-//  * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
-//  */
-// async function saveFormData() {
-// 	const formData = new FormData()
-// 	formData.append("leaveDraftDocument", formDataRehabilitation.leaveDraftDocument)
-// 	formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
-// 	formData.append("type", formDataRehabilitation.type) //
-// 	formData.append("leaveStartDate", dateToISO(formDataRehabilitation.leaveStartDate)) //
-// 	formData.append("leaveEndDate", dateToISO(formDataRehabilitation.leaveEndDate)) //
-// 	formData.append("leaveWrote", formDataRehabilitation.leaveWrote) //
-// 	formData.append("leaveDetail", formDataRehabilitation.leaveDetail) //
-
-// 	await http
-// 		.post(config.API.leaveUser(), formData)
-// 		.then((res: any) => {
-// 			success($q, "บันทึกสำเร็จ")
-
-// 			router.push(`/leave`)
-// 		})
-// 		.catch((e: any) => {
-// 			messageError($q, e)
-// 		})
-// }
-</script>
-
-<template>
-	<form @submit.prevent="onValidate">
-		<div style="display: flex; align-items: center">
-			<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
-			<div class="q-pl-sm text-weight-bold text-dark header">แก้ไขข้อมูล</div>
-		</div>
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="props.data.leaveWrote"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					dense
-					outlined
-					bg-color="white"
-					label="เขียนที่"
-					hide-bottom-space
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<datepicker
-					v-model="props.data.leaveDateStart"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:enableTimePicker="false"
-					:locale="'th'"
-					@update:model-value="props.data.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveStartDateRef"
-							class="full-width datepicker"
-							bg-color="white"
-							outlined
-							dense
-							lazy-rules
-							hide-bottom-space
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					v-model="props.data.leaveDateEnd"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:locale="'th'"
-					@update:model-value="FetchCheck()"
-					:readonly="!props.data.leaveDateStart"
-					:enableTimePicker="false"
-					:min-date="props.data.leaveDateStart"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveEndDateRef"
-							class="full-width datepicker"
-							outlined
-							dense
-							lazy-rules
-							bg-color="white"
-							hide-bottom-space
-							:readonly="!props.data.leaveDateEnd"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input v-model="props.data.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="props.data.leaveDocument" @added="fileUploadDoc" use-chips bg-color="white" dense outlined multiple label="เอกสารประกอบ">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<div class="q-mt-md">
-			<div style="display: flex; align-items: center">
-				<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-				<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
-			</div>
-			<q-card class="bg-grey-1 q-pa-sm" bordered>
-				<div class="row">
-					<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
-						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
-							<q-btn
-								color="primary"
-								icon="download"
-								label="ดาวน์โหลดแบบฟอร์ม"
-								@click="onClickDownloadFile('08dc01fd-51b0-4fbc-8447-ecad084a15b8', 'ฟอร์มการลาไปฟื้นฟูสมรรถภาพด้านอาชีพ')"
-							/>
-						</div>
-					</div>
-					<div class="col-10 col-sm-5 col-md-4 q-my-sm">
-						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
-							<q-file v-model="props.data.leaveDraftDocument" use-chips dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept="application/pdf">
-								<template v-slot:prepend>
-									<q-icon name="attach_file" color="primary" />
-								</template>
-							</q-file>
-						</div>
-					</div>
-					<div class="col-md-1 self-end q-mb-sm">
-						<q-btn v-if="props.data.leaveDraftDocument != ''" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
-					</div>
-				</div>
-			</q-card>
-		</div>
-
-		<div v-if="!isSave">
-			<q-separator class="q-mt-sm" />
-			<div class="row col-12 q-pt-md">
-				<q-space />
-				<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-			</div>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/formEdit/formEdit_Sick.vue

@@ -1,445 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, computed } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const router = useRouter()
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails, showLoader, hideLoader } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	leaveId: {
-		type: String,
-		require: true,
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataSick = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveRange: "ALL",
-	leaveTotal: "",
-	leaveLast: null,
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveRangeRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const leaveLastRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveRange: leaveRangeRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataSick.leaveWrote = props.data.leaveWrote
-	formDataSick.leaveStartDate = props.data.leaveStartDate
-	formDataSick.leaveEndDate = props.data.leaveEndDate
-	formDataSick.contractTel = props.data.contractTel
-	formDataSick.leaveTotal = props.data.leaveTotal
-	formDataSick.leaveNumber = props.data.leaveNumber
-	formDataSick.leaveDetail = props.data.leaveDetail
-	formDataSick.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-async function fileUploadDoc(files: any) {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/**
- * function รีเซทค่า leaveStartDate เเละ leaveEndDate
- */
-function resetDate() {
-	if (formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON") {
-		formDataSick.leaveStartDate = null
-		formDataSick.leaveEndDate = null
-	}
-	console.log("testnull")
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	showLoader()
-	const formData = new FormData()
-	//   if (formDataSick.leaveDocument.length > 0) {
-	//     const blob = formDataSick.leaveDocument.slice(
-	//       0,
-	//       formDataSick.leaveDocument[0].size
-	//     );
-	//     const newFile = new File(blob, nameFile.value, {
-	//       type: formDataSick.leaveDocument[0].type,
-	//     });
-	//     formData.append("leaveDocument", newFile);
-	//   }
-
-	formData.append("leaveDocument", formDataSick.leaveDocument)
-	formData.append("type", formDataSick.type)
-	formData.append("leaveRange", formDataSick.leaveRange)
-	formData.append("leaveStartDate", dateToISO(formDataSick.leaveDateStart))
-	formData.append("leaveEndDate", dateToISO(formDataSick.leaveDateEnd))
-	formData.append("leaveWrote", formDataSick.leaveWrote)
-	formData.append("leaveAddress", formDataSick.leaveAddress)
-	formData.append("leaveNumber", formDataSick.leaveNumber)
-	formData.append("leaveDetail", formDataSick.leaveDetail)
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then(() => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-		.finally(() => {
-			hideLoader()
-		})
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: props.data.leaveTypeId ?? null,
-			StartLeaveDate: formDataSick.leaveDateStart ?? null,
-			EndLeaveDate: formDataSick.leaveDateEnd ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
- */
-const isReadOnly = computed(() => {
-	const conditionleaveRange = formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON"
-	if (conditionleaveRange) {
-		formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null
-		formDataSick.leaveTotal = 0.5
-	} else {
-		formDataSick.leaveTotal = null
-	}
-	return conditionleaveRange
-})
-
-function inputEdit(val: boolean) {
-	return {
-		"full-width cursor-pointer ": val,
-		"full-width cursor-pointer inputgreen": !val,
-	}
-}
-
-function resetEndDate(type: string) {
-	if (type === "day") {
-		formDataSick.EndLeaveDate === null
-	}
-}
-</script>
-
-<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล{{ dataStore.leaveLast }}</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="props.data.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<div class="col-12 col-md-4 col-sm-12">
-					<q-radio v-model="props.data.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
-					<q-radio v-model="props.data.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
-					<q-radio v-model="props.data.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
-				</div>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="props.data.leaveDateStart"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							:readonly="!edit"
-							@update:model-value="props.data.leaveEndDate = null"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="leaveStartDateRef"
-									for="leaveStartDateRef"
-									hide-bottom-space
-									:readonly="!edit"
-									bg-color="white"
-									class="full-width cursor-pointer inputgreen"
-									:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-									:label="`${'ลาตั้งแต่วันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-									style="color: var(--q-primary)"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="props.data.leaveDateEnd"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							:readonly="!props.data.leaveDateStart"
-							@update:model-value="FetchCheck(), isReadOnly"
-							:min-date="props.data.leaveDateStart"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="leaveEndDateRef"
-									for="leaveEndDateRef"
-									hide-bottom-space
-									bg-color="white"
-									:readonly="!props.data.leaveDateStart"
-									:class="inputEdit(isReadOnly)"
-									:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-									:label="`${'ลาถึงวันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-						<q-input
-							class="col-12 col-md-3 col-sm-6"
-							dense
-							bg-color="white"
-							outlined
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							v-model="props.data.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							hide-bottom-space
-						/>
-						<q-input
-							class="col-12 col-md-3 col-sm-6"
-							dense
-							outlined
-							ref="leaveLastRef"
-							for="leaveLastRef"
-							v-model="dataStore.leaveLast"
-							label="ลาครั้งสุดท้ายเมื่อวันที่"
-							readonly
-							hide-bottom-space
-							bg-color="white"
-						/>
-					</div>
-				</div>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-							dense
-							outlined
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="props.data.leaveNumber"
-							mask="(###)-###-####"
-							hide-bottom-space
-							bg-color="white"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
-							dense
-							outlined
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="props.data.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-							hide-bottom-space
-							bg-color="white"
-						/>
-					</div>
-				</div>
-				<q-input
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="props.data.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-					bg-color="white"
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-file for="leaveDocumentRef" v-model="props.data.leaveDocument" dense label="เอกสารประกอบ" outlined use-chips bg-color="white" class="col-12 q-pl-sm col-12">
-							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
-							</template>
-						</q-file>
-					</div>
-				</div>
-				<div class="col-12 col-sm-6 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/formEdit/formEdit_Study.vue

@@ -1,528 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, computed } from "vue"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const router = useRouter()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError, arabicNumberToText } = mixin
-const edit = ref<boolean>(true)
-const files = ref<any>(null)
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leavebirthDateRef = ref<object | null>(null)
-const leavegovernmentDateRef = ref<object | null>(null)
-const leaveSalaryRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const studyDayScholarshipRef = ref<object | null>(null)
-const studyDayCountryRef = ref<object | null>(null)
-const studyDayUniversityNameRef = ref<object | null>(null)
-const studyDayDegreeLevelRef = ref<object | null>(null)
-const studyDaySubjectRef = ref<object | null>(null)
-const leaveWroteRef = ref<object | null>(null)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataStudy = reactive<any>({
-	type: dataStore.typeId, //
-	leaveWrote: "", //
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leavebirthDate: new Date(),
-	leavegovernmentDate: new Date(),
-	leaveSalary: 10000,
-	leaveSalaryText: arabicNumberToText(10000),
-	leaveNumber: "",
-	leaveAddress: "",
-	studyDayScholarship: "",
-	studyDayCountry: "",
-	studyDayUniversityName: "", //
-	studyDayDegreeLevel: "", //
-	studyDaySubject: "", //
-	leaveDocument: "", //
-	leaveDetail: "",
-	leaveTotal: "",
-})
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const formRef: studyDaySubjectForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leavebirthDate: leavebirthDateRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leaveSalary: leaveSalaryRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	studyDayScholarship: studyDayScholarshipRef,
-	studyDayCountry: studyDayCountryRef,
-	studyDayUniversityName: studyDayUniversityNameRef,
-	studyDayDegreeLevel: studyDayDegreeLevelRef,
-	studyDaySubject: studyDaySubjectRef,
-	leaveWrote: leaveWroteRef,
-}
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
-function onValidate() {
-	const hasError = []
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataStudy.leaveStartDate ?? null, EndLeaveDate: formDataStudy.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataStudy.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataStudy.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataStudy.leaveDocument.length > 0) {
-	// 	const blob = formDataStudy.leaveDocument.slice(0, formDataStudy.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataStudy.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// }
-	formData.append("leaveDocument", formDataStudy.leaveDocument)
-	formData.append("type", formDataStudy.type) //
-	formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)) //
-	formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)) //
-	formData.append("studyDaySubject", formDataStudy.studyDaySubject)
-	formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel)
-	formData.append("leavegovernmentDate", dateToISO(formDataStudy.leavegovernmentDate))
-	formData.append("leavebirthDate", dateToISO(formDataStudy.leavebirthDate))
-	formData.append("studyDayUniversityName", formDataStudy.studyDayUniversityName)
-	formData.append("studyDayCountry", formDataStudy.studyDayCountry)
-	formData.append("leaveWrote", formDataStudy.leaveWrote) //
-	formData.append("leaveDetail", formDataStudy.leaveDetail) //
-	formData.append("studyDayScholarship", formDataStudy.studyDayScholarship)
-	formData.append("leaveAddress", formDataStudy.leaveAddress) //
-	formData.append("leaveNumber", formDataStudy.leaveNumber) //
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function อัพเดทค่า LeaveTotal
- */
-function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formDataStudy.leaveStartDate, formDataStudy.leaveEndDate)
-	formDataStudy.leaveTotal = newLeaveTotal
-	console.log("test")
-}
-
-/**
- * แปลงตัวเลขเงินเดือน
- */
-const formattedleaveSalary = computed(() => {
-	return dataStore.salary !== null ? dataStore.salary.toLocaleString("th-TH") : ""
-})
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="props.data.leaveWrote"
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					label="เขียนที่"
-					hide-bottom-space
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					v-model="props.data.leaveDateStart"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:enableTimePicker="false"
-					:locale="'th'"
-					@update:model-value="props.data.leaveDateEnd = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveStartDateRef"
-							class="full-width datepicker"
-							bg-color="white"
-							outlined
-							dense
-							lazy-rules
-							hide-bottom-space
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					v-model="props.data.leaveDateEnd"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:locale="'th'"
-					@update:model-value="updateLeaveTotal, FetchCheck()"
-					:readonly="!props.data.leaveDateStart"
-					:enableTimePicker="false"
-					:min-date="props.data.leaveDateStart"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveEndDateRef"
-							class="full-width datepicker"
-							outlined
-							dense
-							lazy-rules
-							bg-color="white"
-							hide-bottom-space
-							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!props.data.leaveDateStart"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					bg-color="white"
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="props.data.leaveTotal"
-					label="มีกำหนด"
-					readonly
-					hide-bottom-space
-				/>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							v-model="props.data.leavegovernmentDate"
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							readonly
-							:enableTimePicker="false"
-							:locale="'th'"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavegovernmentDateRef"
-									class="full-width"
-									bg-color="white"
-									outlined
-									readonly
-									dense
-									hide-bottom-space
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="dataStore.dateAppoint != null ? date2Thai(dataStore.dateAppoint) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<datepicker
-							v-model="props.data.leavebirthDate"
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							readonly
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavebirthDateRef"
-									class="full-width"
-									bg-color="white"
-									outlined
-									dense
-									readonly
-									hide-bottom-space
-									:label="`${'วันเดือนปีเกิด'}`"
-									:model-value="dataStore.birthDate != null ? date2Thai(dataStore.birthDate) : null"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--black)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<q-input v-model="formattedleaveSalary" ref="leaveSalaryRef" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
-
-						<q-input
-							v-model="dataStore.salaryText"
-							ref="leaveSalaryRef"
-							class="col-12 col-sm-6 col-md-3"
-							bg-color="white"
-							dense
-							readonly
-							outlined
-							label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
-						/>
-					</div>
-				</div>
-
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							v-model="props.data.studyDayUniversityName"
-							ref="studyDayUniversityNameRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ชื่อสถานศึกษา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
-						/>
-
-						<q-input
-							v-model="props.data.studyDayDegreeLevel"
-							ref="studyDayDegreeLevelRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ชั้นปริญญา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
-						/>
-
-						<q-input
-							v-model="props.data.studyDaySubject"
-							ref="studyDaySubjectRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ศึกษาวิชา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
-						/>
-
-						<q-input
-							v-model="props.data.studyDayCountry"
-							ref="studyDayCountryRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ประเทศ"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
-						/>
-
-						<q-input
-							v-model="props.data.studyDayScholarship"
-							ref="studyDayScholarshipRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ด้วยทุน"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-						/>
-
-						<q-input
-							v-model="props.data.leaveNumber"
-							ref="leaveNumberRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							unmasked-value
-							hide-bottom-space
-							mask="(###)-###-####"
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							v-model="props.data.leaveAddress"
-							ref="leaveAddressRef"
-							class="col-12 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							hide-bottom-space
-							:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-
-				<q-input v-model="props.data.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
-
-				<div class="col-12 col-sm-6">
-					<q-file v-model="props.data.leaveDocument" bg-color="white" dense outlined multiple use-chips @added="fileUploadDoc" label="เอกสารประกอบ">
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-				</div>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.fileName }}
-									</q-item-label>
-
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/formEdit/formEdit_Vacation.vue

@@ -1,431 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, computed } from "vue"
-import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useQuasar } from "quasar"
-import { useRouter } from "vue-router"
-
-/** Use */
-const $q = useQuasar()
-const dataStore = useLeaveStore()
-const mixin = useCounterMixin()
-const router = useRouter()
-const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
-const edit = ref<boolean>(true)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataVacation = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveRange: "ALL",
-	restDayOldTotal: "",
-	restDayCurrentTotal: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "",
-	leaveNumber: "",
-	leaveAddress: "",
-	leaveDetail: "",
-	leaveDocument: [],
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const restDayOldTotalRef = ref<object | null>(null)
-const restDayCurrentTotalRef = ref<object | null>(null)
-const leaveRangeRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveTotalRef = ref<object | null>(null)
-const leaveNumberRef = ref<object | null>(null)
-const leaveAddressRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveRange: leaveRangeRef,
-	restDayOldTotal: restDayOldTotalRef,
-	restDayCurrentTotal: restDayCurrentTotalRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveTotal: leaveTotalRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataVacation.leaveWrote = props.data.leaveWrote
-	formDataVacation.restDayOldTotal = props.data.restDayOldTotal
-	formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal
-	formDataVacation.leaveStartDate = props.data.leaveStartDate
-	formDataVacation.leaveEndDate = props.data.leaveEndDate
-	formDataVacation.leaveTotal = props.data.leaveTotal
-	formDataVacation.leaveNumber = props.data.leaveNumber
-	formDataVacation.leaveDetail = props.data.leaveDetail
-	formDataVacation.leaveDocument = props.data.leaveDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-
-	console.log("save")
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataVacation.leaveStartDate ?? null, EndLeaveDate: formDataVacation.leaveEndDate ?? null })
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataVacation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataVacation.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// if (formDataVacation.leaveDocument.length > 0) {
-	// 	const blob = formDataVacation.leaveDocument.slice(0, formDataVacation.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataVacation.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// }
-	formData.append("leaveDocument", formDataVacation.leaveDocument)
-	formData.append("type", formDataVacation.type)
-	formData.append("leaveRange", formDataVacation.leaveRange)
-	formData.append("leaveStartDate", dateToISO(formDataVacation.leaveStartDate))
-	formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate))
-	formData.append("leaveWrote", formDataVacation.leaveWrote)
-	formData.append("leaveAddress", formDataVacation.leaveAddress)
-	formData.append("leaveNumber", formDataVacation.leaveNumber)
-	formData.append("leaveDetail", formDataVacation.leaveDetail)
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * function รีเซทค่า leaveStartDate เเละ leaveEndDate
- */
-function resetDate() {
-	if (formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON") {
-		formDataVacation.leaveStartDate = null
-		formDataVacation.leaveEndDate = null
-	}
-	console.log("testnull")
-}
-
-/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
-const isReadOnly = computed(() => {
-	const conditionleaveRange = formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON"
-	if (conditionleaveRange) {
-		formDataVacation.leaveEndDate = formDataVacation.leaveStartDate // Set formDataVacation.leaveEndDate to null
-		formDataVacation.leaveTotal = 0.5
-	} else {
-		formDataVacation.leaveTotal = null
-	}
-	return conditionleaveRange
-})
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					for="leaveWroteRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="props.data.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-				<div class="col-12 col-md-4 col-sm-6">
-					<q-radio v-model="props.data.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
-					<q-radio v-model="props.data.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
-					<q-radio v-model="props.data.leaveRange" val="AFTERNOON" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
-				</div>
-				<q-input
-					class="col-12 col-md-4 col-sm-6"
-					ref="restDayOldTotalRef"
-					for="restDayOldTotalRef"
-					dense
-					hide-bottom-space
-					bg-color="white"
-					readonly
-					outlined
-					v-model="dataStore.restDayTotalOld"
-					label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
-				/>
-
-				<q-input
-					class="col-12 col-md-4 col-sm-6"
-					ref="restDayCurrentTotalRef"
-					for="restDayCurrentTotalRef"
-					dense
-					readonly
-					hide-bottom-space
-					bg-color="white"
-					outlined
-					v-model="dataStore.leaveRemain"
-					label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
-				/>
-
-				<datepicker
-					class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateStart"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="props.data.leaveDateEnd = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateEnd"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					@update:model-value="FetchCheck()"
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="isReadOnly"
-					:min-date="props.data.leaveDateStart"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							class="full-width datepicker"
-							:readonly="isReadOnly"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					bg-color="white"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="props.data.leaveTotal"
-					label="จำนวนวันที่ลา"
-					readonly
-					hide-bottom-space
-				/>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveNumberRef"
-							for="leaveNumberRef"
-							v-model="props.data.leaveNumber"
-							mask="(###)-###-####"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
-							dense
-							outlined
-							hide-bottom-space
-							bg-color="white"
-							ref="leaveAddressRef"
-							for="leaveAddressRef"
-							v-model="props.data.leaveAddress"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-					</div>
-				</div>
-				<q-input
-					type="textarea"
-					hide-bottom-space
-					bg-color="white"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="props.data.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file ref="leaveDocumentRef" bg-color="white" v-model="props.data.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in props.data.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<q-separator class="q-mt-sm" />
-		<div class="row col-12 q-pt-md">
-			<q-space />
-			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-		</div>
-	</form>
-</template>

src/modules/05_leave/components/formEdit/formEdit_WorkInternational.vue

@@ -1,407 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue"
-import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
-import { useLeaveStore } from "@/modules/05_leave/store"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import { useRouter } from "vue-router"
-import genReport from "@/plugins/genreport"
-
-/** Use */
-const dataStore = useLeaveStore()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
-const edit = ref<boolean>(true)
-const router = useRouter()
-const isSave = ref<boolean>(false)
-
-/** รับ props มาจากหน้าหลัก */
-const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-})
-
-/** ข้อมูล v-model ของฟอร์ม */
-const formDataWorkInternational = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveDetail: "",
-	leaveDocument: [],
-	leaveDraftDocument: null,
-})
-
-/** ตัวแปร ref สำหรับแสดง validate */
-const leaveWroteRef = ref<object | null>(null)
-const leaveStartDateRef = ref<object | null>(null)
-const leaveEndDateRef = ref<object | null>(null)
-const leaveDetailRef = ref<object | null>(null)
-const leaveDocumentRef = ref<object | null>(null)
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const FormRef: FormRef = {
-	leaveWrote: leaveWroteRef,
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leaveDetail: leaveDetailRef,
-	leaveDocument: leaveDocumentRef,
-}
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-watch(props.data, async () => {
-	// console.log("data==>", props.data)
-	formDataWorkInternational.leaveWrote = props.data.leaveWrote
-	formDataWorkInternational.leaveStartDate = props.data.leaveStartDate
-	formDataWorkInternational.leaveEndDate = props.data.leaveEndDate
-	formDataWorkInternational.leaveDetail = props.data.leaveDetail
-	formDataWorkInternational.leaveDocument = props.data.leaveDocument
-	formDataWorkInternational.leaveDraftDocument = props.data.leaveDraftDocument
-})
-
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("")
-const nameFileDraft = ref<string>("")
-const fileDocDataUpload = ref<File[]>([])
-const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file)
-	})
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function onValidate() {
-	const hasError = []
-	for (const key in FormRef) {
-		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
-			const property = FormRef[key]
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate()
-				hasError.push(isValid)
-			}
-		}
-	}
-	if (hasError.every(result => result === true)) {
-		onSubmit()
-	}
-}
-
-/** ฟังก์ชั่น บันทึก */
-const onSubmit = async () => {
-	dialogConfirm(
-		$q,
-		async () => {
-			await saveFormData()
-		},
-		"ยืนยันการยื่นใบลา",
-		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
-	)
-}
-
-//download function
-async function onClickDownloadFile(id: string, fileName: string) {
-	// showLoader();
-	await http
-		.get(config.API.leaveReport(id))
-		.then(async res => {
-			console.log(res)
-			const data = res.data.result
-			await genReport(data, fileName)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			// hideLoader();
-		})
-}
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true)
-async function FetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
-			EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result
-			isLeave.value = data.isLeave
-			if (data.isLeave === true) {
-				formDataWorkInternational.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
-				// formDataWorkInternational.leaveLast = data.totalDate
-			} else {
-				fails($q, "ไม่สามารถลาได้")
-			}
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
- */
-async function saveFormData() {
-	const formData = new FormData()
-	// //
-	// if (formDataWorkInternational.leaveDocument.length > 0) {
-	// 	const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size)
-	// 	const newFile = new File(blob, nameFile.value, {
-	// 		type: formDataWorkInternational.leaveDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDocument", newFile)
-	// }
-	// //
-	// if (formDataWorkInternational.leaveDraftDocument.length > 0) {
-	// 	const blobDrafe = formDataWorkInternational.leaveDraftDocument.slice(0, formDataWorkInternational.leaveDraftDocument[0].size)
-	// 	const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
-	// 		type: formDataWorkInternational.leaveDraftDocument[0].type,
-	// 	})
-	// 	formData.append("leaveDraftDocument", newFileDraft) //
-	// }
-	formData.append("leaveDocument", formDataWorkInternational.leaveDocument)
-	formData.append("leaveDraftDocument", formDataWorkInternational.leaveDraftDocument)
-	formData.append("type", formDataWorkInternational.type) //
-	formData.append("leaveStartDate", dateToISO(formDataWorkInternational.leaveStartDate)) //
-	formData.append("leaveEndDate", dateToISO(formDataWorkInternational.leaveEndDate)) //
-	formData.append("leaveWrote", formDataWorkInternational.leaveWrote) //
-	formData.append("leaveDetail", formDataWorkInternational.leaveDetail) //
-
-	await http
-		.post(config.API.leaveUser(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-			router.push(`/leave`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-</script>
-
-<template>
-	<div style="display: flex; align-items: center">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-	</div>
-	<form @submit.prevent.stop="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="col-12 row q-pa-sm q-col-gutter-sm">
-				<q-input
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					ref="leaveWroteRef"
-					hide-bottom-space
-					bg-color="white"
-					for="leaveWroteRef"
-					dense
-					outlined
-					v-model="props.data.leaveWrote"
-					label="เขียนที่"
-					:readonly="!edit"
-					:rules="[val => !!val || `${'เขียนที่'}`]"
-				/>
-
-				<datepicker
-					class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateStart"
-					:locale="'th'"
-					hide-bottom-space
-					autoApply
-					borderless
-					:enableTimePicker="false"
-					week-start="0"
-					:readonly="!edit"
-					@update:model-value="formDataWorkInternational.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveStartDateRef"
-							for="leaveStartDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateStart != null ? date2Thai(props.data.leaveDateStart) : null"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-
-				<datepicker
-					class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					v-model="props.data.leaveDateEnd"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					@update:model-value="FetchCheck()"
-					week-start="0"
-					:readonly="!props.data.leaveDateStart"
-					:min-date="props.data.leaveDateStart"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="leaveEndDateRef"
-							for="leaveEndDateRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!props.data.leaveDateStart"
-							class="full-width datepicker"
-							:model-value="props.data.leaveDateEnd != null ? date2Thai(props.data.leaveDateEnd) : null"
-							:label="`${'ลาถึงวันที่'}`"
-							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
-				<!-- <q-input
-							class="col-md-3 col-sm-12"
-							dense
-							outlined
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							type="number"
-							v-model="formDataWorkInternational.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-						/> -->
-
-				<q-input
-					hide-bottom-space
-					type="textarea"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					dense
-					bg-color="white"
-					outlined
-					ref="leaveDetailRef"
-					for="leaveDetailRef"
-					v-model="props.data.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit"
-				/>
-
-				<q-file
-					ref="fileRef"
-					bg-color="white"
-					v-model="formDataWorkInternational.leaveDocument"
-					@added="fileUploadDoc"
-					dense
-					label="เอกสารประกอบ"
-					outlined
-					use-chips
-					multiple
-					class="q-pl-sm col-12"
-				>
-					<template v-slot:prepend>
-						<q-icon name="attach_file" color="primary" />
-					</template>
-				</q-file>
-
-				<div class="col-12 row" v-if="!edit">
-					<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-						<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-					</div>
-					<q-card bordered flat class="full-width">
-						<q-list separator>
-							<q-item v-for="(file, index) in formDataWorkInternational.leaveDocument" :key="index" class="q-my-xs">
-								<q-item-section>
-									<q-item-label class="full-width ellipsis">
-										{{ file.name }}
-									</q-item-label>
-									<q-item-label caption> </q-item-label>
-								</q-item-section>
-							</q-item>
-						</q-list>
-					</q-card>
-				</div>
-			</div>
-		</q-card>
-
-		<div class="q-mt-md">
-			<div style="display: flex; align-items: center">
-				<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
-				<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
-			</div>
-			<q-card class="bg-grey-1 q-pa-sm" bordered>
-				<div class="row">
-					<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
-						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด{{ formDataWorkInternational.typeId }}</div>
-							<q-btn
-								color="primary"
-								icon="download"
-								label="ดาวน์โหลดแบบฟอร์ม"
-								@click="onClickDownloadFile('08dc01fd-51b0-4fbc-8447-ecad084a15b8', 'ฟอร์มการลาไปฟื้นฟูสมรรถภาพด้านอาชีพ')"
-							/>
-						</div>
-					</div>
-					<div class="col-10 col-sm-5 col-md-4 q-my-sm">
-						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
-							<q-file v-model="formDataWorkInternational.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept=".pdf">
-								<template v-slot:prepend>
-									<q-icon name="attach_file" color="primary" />
-								</template>
-							</q-file>
-						</div>
-					</div>
-					<div class="col-md-1 self-end q-mb-sm">
-						<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
-							><q-tooltip>อัปโหลด</q-tooltip></q-btn
-						>
-					</div>
-				</div>
-			</q-card>
-		</div>
-
-		<div v-if="!isSave">
-			<q-separator class="q-mt-sm" />
-			<div class="row col-12 q-pt-md">
-				<q-space />
-				<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn>
-			</div>
-		</div>
-	</form>
-</template>