From 14217fd9af2765d6937f0c552d13a4eb8ec343d3 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Mon, 8 Jan 2024 14:00:57 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87?=
 =?UTF-8?q?=E0=B8=9C=E0=B8=A5=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/components/DialogDetail.vue      | 879 ++++++++----------
 .../formLeaveToWorkInternational.vue          |  96 +-
 .../components/formDetail/formSpouse.vue      | 189 ++--
 .../components/formDetail/formStudy.vue       | 179 ++--
 .../formVocationalRehabilitation.vue          |  96 +-
 .../05_leave/interface/response/leave.ts      |   4 +-
 6 files changed, 656 insertions(+), 787 deletions(-)

diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 46cc9da..76b9922 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -1,270 +1,242 @@
 <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, calculateDurationYmd } = 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: "", //จำนวนวันลา
+	leaveWrote: "", //เขียนที่
+	leaveAddress: "", //สถานที่ติดต่อขณะลา
+	leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: "", //รายละเอียดการลา
+	leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
+	leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
+	leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+	leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+	leaveTotal: "", //จำนวนวันที่ลา(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 = calculateDurationYmd(data.leaveStartDate, data.leaveEndDate)
+			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 = calculateDurationYmd(data.leaveStartDate, data.leaveEndDate)
+			formData.leaveTotal = data.leaveTotal
+			formData.leavebirthDate = data.leaveBirthDate && date2Thai(data.leaveBirthDate)
+			formData.leavegovernmentDate = data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate)
+			formData.leaveSalary = data.leaveSalary ? data.leaveSalary.toLocaleString("th-TH") : "-"
+			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, formData.ordainDayLocationName, formData.studyDayTrainingSubject)
+		})
+		.catch(err => {
+			props.onClickClose?.()
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+		})
 }
 
 /**
@@ -272,34 +244,40 @@ async function fetchDataDetail(id: string) {
  * @param leaveTypeId  ประเภทการลา
  * @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";
-    }
-  }
+function checkLeaveType(leaveTypeId: string, leaveTypeName: string, ordainDayLocationName: string, studyDayTrainingSubject: string) {
+	console.log(leaveTypeName)
+	console.log(leaveTypeId)
+	console.log(ordainDayLocationName)
+
+	if (props.leaveType) {
+		const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId)
+		const type = filtertype.code
+		console.log(type)
+
+		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" && ordainDayLocationName === "") {
+			checkForm.value = "FormHajj"
+		} else if (type === "LV-006") {
+			checkForm.value = "FormUpasom"
+		} else if (type === "LV-007") {
+			checkForm.value = "FormCheckSelect"
+		} else if (type === "LV-008" && studyDayTrainingSubject === "") {
+			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"
+		}
+	}
 }
 
 /**
@@ -307,260 +285,177 @@ 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-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>
+				<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>
diff --git a/src/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue b/src/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue
index fee371c..7bf9065 100644
--- a/src/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue
+++ b/src/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue
@@ -1,54 +1,52 @@
 <script setup lang="ts">
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
-});
+	data: {
+		type: Object,
+		required: true,
+	},
+})
 </script>
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">{{ props.data.leaveDetail }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col" v-if="props.data.leaveDocument">
-          <q-btn
-            :href="props.data.leaveDocument"
-            target="_blank"
-            outline
-            color="blue"
-            label="ดาวน์โหลด"
-            size="12px"
-          >
-            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-          >
-        </div>
-        <div class="col" v-else>-</div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">{{ props.data.leaveDetail }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารประกอบ</div>
+				<div class="col" v-if="props.data.leaveDocument">
+					<q-btn :href="props.data.leaveDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
+				</div>
+				<div class="col" v-else>-</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแบบฟอร์ม</div>
+				<div class="col" v-if="props.data.leaveDraftDocument">
+					<q-btn :href="props.data.leaveDraftDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
+				</div>
+				<div class="col" v-else>-</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
diff --git a/src/modules/05_leave/components/formDetail/formSpouse.vue b/src/modules/05_leave/components/formDetail/formSpouse.vue
index e2d7d8e..e652a3c 100644
--- a/src/modules/05_leave/components/formDetail/formSpouse.vue
+++ b/src/modules/05_leave/components/formDetail/formSpouse.vue
@@ -1,105 +1,94 @@
 <script setup lang="ts">
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
-});
+	data: {
+		type: Object,
+		required: true,
+	},
+})
 </script>
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">{{ props.data.leaveCount }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันเดือนปีเกิด</div>
-        <div class="col">{{ props.data.leavebirthDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
-        <div class="col">{{ props.data.leavegovernmentDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
-        <div class="col">
-          {{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ชื่อคู่สมรส</div>
-        <div class="col">{{ props.data.coupleDayName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ตำแหน่งคู่สมรส</div>
-        <div class="col">{{ props.data.coupleDayPosition }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ไปปฏิบัติราชการ ณ ประเทศ</div>
-        <div class="col">{{ props.data.coupleDayLevelCountry }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
-      </div>
-      <div class="row q-mt-xs">
-        <div class="col text-grey-8">
-          <div class="q-ml-md" style="list-style-type: circle">
-            <li>ประเทศ</li>
-            <li>จำนวนวัน</li>
-            <li>ตั้งแต่วันที่</li>
-            <li>ถึงวันที่</li>
-            <li>ลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย</li>
-          </div>
-        </div>
-        <div class="col">
-          <div>{{ props.data.coupleDayCountryHistory }}</div>
-          <div>{{ props.data.coupleDayTotalHistory }}</div>
-          <div>{{ props.data.coupleDayStartDateHistory }}</div>
-          <div>{{ props.data.coupleDayEndDateHistory }}</div>
-          <div>{{ props.data.coupleDaySumTotalHistory }}</div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">{{ props.data.leaveDetail }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col" v-if="props.data.leaveDocument">
-          <q-btn
-            :href="props.data.leaveDocument"
-            target="_blank"
-            outline
-            color="blue"
-            label="ดาวน์โหลด"
-            size="12px"
-          >
-            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-          >
-        </div>
-        <div class="col" v-else>-</div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">{{ props.data.leaveCount }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันเดือนปีเกิด</div>
+				<div class="col">{{ props.data.leavebirthDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
+				<div class="col">{{ props.data.leavegovernmentDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
+				<div class="col">{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ชื่อคู่สมรส</div>
+				<div class="col">{{ props.data.coupleDayName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ตำแหน่งคู่สมรส</div>
+				<div class="col">{{ props.data.coupleDayPosition }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ไปปฏิบัติราชการ ณ ประเทศ</div>
+				<div class="col">{{ props.data.coupleDayLevelCountry }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
+			</div>
+			<div class="row q-mt-xs">
+				<div class="col text-grey-8">
+					<div class="q-ml-md" style="list-style-type: circle">
+						<li>ประเทศ</li>
+						<li>จำนวนวัน</li>
+						<li>ตั้งแต่วันที่</li>
+						<li>ถึงวันที่</li>
+						<li>ลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย</li>
+					</div>
+				</div>
+				<div class="col">
+					<div>{{ props.data.coupleDayCountryHistory }}</div>
+					<div>{{ props.data.coupleDayTotalHistory }}</div>
+					<div>{{ props.data.coupleDayStartDateHistory }}</div>
+					<div>{{ props.data.coupleDayEndDateHistory }}</div>
+					<div>{{ props.data.coupleDaySumTotalHistory }}</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">{{ props.data.leaveDetail }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col" v-if="props.data.leaveDocument">
+					<q-btn :href="props.data.leaveDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
+				</div>
+				<div class="col" v-else>-</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
diff --git a/src/modules/05_leave/components/formDetail/formStudy.vue b/src/modules/05_leave/components/formDetail/formStudy.vue
index d2073f6..d80fc1a 100644
--- a/src/modules/05_leave/components/formDetail/formStudy.vue
+++ b/src/modules/05_leave/components/formDetail/formStudy.vue
@@ -1,103 +1,92 @@
 <script setup lang="ts">
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
-});
+	data: {
+		type: Object,
+		required: true,
+	},
+})
 </script>
 
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">จำนวนวันที่ลา</div>
-        <div class="col">{{ props.data.leaveCount }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันเดือนปีเกิด</div>
-        <div class="col">{{ props.data.leavebirthDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
-        <div class="col">{{ props.data.leavegovernmentDate }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
-        <div class="col">
-          {{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
-        </div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ศึกษาวิชา</div>
-        <div class="col">{{ props.data.studyDaySubject }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ขั้นปริญญา</div>
-        <div class="col">{{ props.data.studyDayDegreeLevel }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ชื่อสถานศึกษา</div>
-        <div class="col">{{ props.data.studyDayUniversityName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ประเทศ</div>
-        <div class="col">{{ props.data.studyDayCountry }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ด้วยทุน</div>
-        <div class="col">{{ props.data.studyDayScholarship }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
-        <div class="col">{{ props.data.leaveNumber }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
-        <div class="col">{{ props.data.leaveAddress }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">{{ props.data.leaveDetail }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col" v-if="props.data.leaveDocument">
-          <q-btn
-            :href="props.data.leaveDocument"
-            target="_blank"
-            outline
-            color="blue"
-            label="ดาวน์โหลด"
-            size="12px"
-          >
-            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-          >
-        </div>
-        <div class="col" v-else>-</div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">จำนวนวันที่ลา</div>
+				<div class="col">{{ props.data.leaveCount }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันเดือนปีเกิด</div>
+				<div class="col">{{ props.data.leavebirthDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
+				<div class="col">{{ props.data.leavegovernmentDate }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
+				<div class="col">{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ศึกษาวิชา</div>
+				<div class="col">{{ props.data.studyDaySubject }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ขั้นปริญญา</div>
+				<div class="col">{{ props.data.studyDayDegreeLevel }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ชื่อสถานศึกษา</div>
+				<div class="col">{{ props.data.studyDayUniversityName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ประเทศ</div>
+				<div class="col">{{ props.data.studyDayCountry }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ด้วยทุน</div>
+				<div class="col">{{ props.data.studyDayScholarship }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+				<div class="col">{{ props.data.leaveNumber }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+				<div class="col">{{ props.data.leaveAddress }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">{{ props.data.leaveDetail }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแนบ</div>
+				<div class="col" v-if="props.data.leaveDocument">
+					<q-btn :href="props.data.leaveDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
+				</div>
+				<div class="col" v-else>-</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue b/src/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue
index fee371c..7bf9065 100644
--- a/src/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue
+++ b/src/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue
@@ -1,54 +1,52 @@
 <script setup lang="ts">
 const props = defineProps({
-  data: {
-    type: Object,
-    required: true,
-  },
-});
+	data: {
+		type: Object,
+		required: true,
+	},
+})
 </script>
 <template>
-  <q-card-section>
-    <div class="q-pa-md q-gutter-md">
-      <div class="row">
-        <div class="col text-grey-8">วันที่ยื่นใบลา</div>
-        <div class="col">{{ props.data.dateSendLeave }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เรื่อง</div>
-        <div class="col">{{ props.data.leaveTypeName }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เขียนที่</div>
-        <div class="col">{{ props.data.leaveWrote }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
-        <div class="col">{{ props.data.leaveDateStart }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">ลาถึงวันที่</div>
-        <div class="col">{{ props.data.leaveDateEnd }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">รายละเอียด</div>
-        <div class="col">{{ props.data.leaveDetail }}</div>
-      </div>
-      <div class="row">
-        <div class="col text-grey-8">เอกสารแนบ</div>
-        <div class="col" v-if="props.data.leaveDocument">
-          <q-btn
-            :href="props.data.leaveDocument"
-            target="_blank"
-            outline
-            color="blue"
-            label="ดาวน์โหลด"
-            size="12px"
-          >
-            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-          >
-        </div>
-        <div class="col" v-else>-</div>
-      </div>
-    </div>
-  </q-card-section>
+	<q-card-section>
+		<div class="q-pa-md q-gutter-md">
+			<div class="row">
+				<div class="col text-grey-8">วันที่ยื่นใบลา</div>
+				<div class="col">{{ props.data.dateSendLeave }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เรื่อง</div>
+				<div class="col">{{ props.data.leaveTypeName }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เขียนที่</div>
+				<div class="col">{{ props.data.leaveWrote }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+				<div class="col">{{ props.data.leaveDateStart }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">ลาถึงวันที่</div>
+				<div class="col">{{ props.data.leaveDateEnd }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">รายละเอียด</div>
+				<div class="col">{{ props.data.leaveDetail }}</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารประกอบ</div>
+				<div class="col" v-if="props.data.leaveDocument">
+					<q-btn :href="props.data.leaveDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
+				</div>
+				<div class="col" v-else>-</div>
+			</div>
+			<div class="row">
+				<div class="col text-grey-8">เอกสารแบบฟอร์ม</div>
+				<div class="col" v-if="props.data.leaveDraftDocument">
+					<q-btn :href="props.data.leaveDraftDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
+				</div>
+				<div class="col" v-else>-</div>
+			</div>
+		</div>
+	</q-card-section>
 </template>
diff --git a/src/modules/05_leave/interface/response/leave.ts b/src/modules/05_leave/interface/response/leave.ts
index a361889..7649691 100644
--- a/src/modules/05_leave/interface/response/leave.ts
+++ b/src/modules/05_leave/interface/response/leave.ts
@@ -27,7 +27,7 @@ interface FremDetail {
 	status: string //สถานะการของลา
 	leaveDateStart: Date //วันเริ่มการลา
 	leaveDateEnd: Date //วันสิ้นสุดการลา
-	leaveCount: number //จำนวนวันลา
+	leaveCount: string //จำนวนวันลา
 	leaveWrote: string //เขียนที่
 	leaveAddress: string //สถานที่ติดต่อขณะลา
 	leaveNumber: string //หมายเลขที่ติดต่อขณะลา
@@ -36,7 +36,7 @@ interface FremDetail {
 	leaveDraftDocument: string //อัปโหลดแบบฟอร์มการลา
 	leaveLastStart: Date //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
 	leaveLastEnd: Date //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-	leaveTotal: number //จำนวนวันที่ลา(Auto)
+	leaveTotal: string //จำนวนวันที่ลา(Auto)
 	leavebirthDate: Date //วันเดือนปีเกิด(Auto)
 	leavegovernmentDate: Date //วันที่เข้ารับราชการ(Auto)
 	leaveSalary: number //เงินเดือนปัจจุบัน(Auto)