From b0780c535a1da3ff8acd731a28d710c70579ba81 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Tue, 13 Aug 2024 10:53:07 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=9F?=
 =?UTF-8?q?=E0=B8=A5=E0=B9=8C=20=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87?=
 =?UTF-8?q?=E0=B9=84=E0=B8=A1=E0=B9=88=E0=B8=AB=E0=B8=B2=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FormLeave/12_FollowSpouseForm.vue         | 1425 ++++++++---------
 1 file changed, 712 insertions(+), 713 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index 227a859..1348584 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted, watch } from "vue";
 import type {
-	FormData,
-	FormRef,
+  FormData,
+  FormRef,
 } from "@/modules/05_leave/interface/request/FollowSpouseForm";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
@@ -17,59 +17,59 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const router = useRouter();
 const {
-	dialogRemove,
-	date2Thai,
-	arabicNumberToText,
-	calculateDurationYmd,
-	dateToISO,
-	fails,
-	success,
-	messageError,
+  dialogRemove,
+  date2Thai,
+  arabicNumberToText,
+  calculateDurationYmd,
+  dateToISO,
+  fails,
+  success,
+  messageError,
 } = mixin;
 const edit = ref<boolean>(true);
 const leaveId = ref<any>("");
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-	data: {
-		type: Object,
-		default: null,
-	},
-	onSubmit: {
-		type: Function,
-		default: () => "",
-	},
-	onConfirm: {
-		type: Function,
-		default: () => "",
-	},
-	clickDelete: {
-		type: Function,
-		default: () => "",
-	},
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  onConfirm: {
+    type: Function,
+    default: () => "",
+  },
+  clickDelete: {
+    type: Function,
+    default: () => "",
+  },
 });
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formDataFollowSpouse = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leaveTotal: "", //จำนวนวันลา
-	leaveTotalDay: "", //จำนวนวันลา
-	leaveSalaryText: "",
-	leaveSalary: 0, //เงินเดือนปัจจุบัน
-	coupleDayName: "", //ชื่อคู่สมรส
-	coupleDayPosition: "", //ตำแหน่งคู่สมรส
-	coupleDayLevel: "", //ระดับคู่สมรส
-	coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
-	coupleDayCountryHistory: "", //ประวัติการลาติดตามคู่สมรส
-	coupleDayTotalHistory: null,
-	coupleDayStartDateHistory: null,
-	coupleDayEndDateHistory: null,
-	leaveDetail:
-		"ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
-	leaveDocument: [], //เอกสารปะกอบ
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leaveTotal: "", //จำนวนวันลา
+  leaveTotalDay: "", //จำนวนวันลา
+  leaveSalaryText: "",
+  leaveSalary: 0, //เงินเดือนปัจจุบัน
+  coupleDayName: "", //ชื่อคู่สมรส
+  coupleDayPosition: "", //ตำแหน่งคู่สมรส
+  coupleDayLevel: "", //ระดับคู่สมรส
+  coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
+  coupleDayCountryHistory: "", //ประวัติการลาติดตามคู่สมรส
+  coupleDayTotalHistory: null,
+  coupleDayStartDateHistory: null,
+  coupleDayEndDateHistory: null,
+  leaveDetail:
+    "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
+  leaveDocument: [], //เอกสารปะกอบ
 });
 
 /** ตัวแปร ref สำหรับแสดง validate */
@@ -92,95 +92,95 @@ 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, //ไปปฏิบัติราชการ ณ ประเทศ
-	coupleDayCountryHistory: coupleDayCountryHistoryRef, //ประวัติการลาติดตามคู่สมรส
-	coupleDayEndDateHistory: coupleDayEndDateHistoryRef, //ประวัติการลาติดตามคู่สมรส
-	coupleDayTotalHistory: coupleDayTotalHistoryRef, //ประวัติการลาติดตามคู่สมรส
-	coupleDayStartDateHistory: coupleDayStartDateHistoryRef, //ประวัติการลาติดตามคู่สมรส
-	leaveDetail: leaveDetailRef, //รายละเอียดการลา
-	leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
-	leaveDocument: leaveDocumentRef,
+  leaveWrote: leaveWroteRef, //เขียนที่***
+  leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
+  leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
+  leaveTotal: leaveTotalRef, //จำนวนวันลา
+  leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
+  coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
+  coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
+  coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
+  coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
+  coupleDayCountryHistory: coupleDayCountryHistoryRef, //ประวัติการลาติดตามคู่สมรส
+  coupleDayEndDateHistory: coupleDayEndDateHistoryRef, //ประวัติการลาติดตามคู่สมรส
+  coupleDayTotalHistory: coupleDayTotalHistoryRef, //ประวัติการลาติดตามคู่สมรส
+  coupleDayStartDateHistory: coupleDayStartDateHistoryRef, //ประวัติการลาติดตามคู่สมรส
+  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);
-	});
+  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) {
-			formDataFollowSpouse.leaveDocument.forEach((file: File) => {
-				formData.append("leaveDocument", file);
-			});
-		}
-		// formData.append("leaveDocument", formDataFollowSpouse.leaveDocument);
-		formData.append("type", formDataFollowSpouse.type); //
-		formData.append(
-			"leaveStartDate",
-			dateToISO(new Date(formDataFollowSpouse.leaveStartDate))
-		); //
-		formData.append(
-			"leaveEndDate",
-			dateToISO(new Date(formDataFollowSpouse.leaveEndDate))
-		); //
-		formData.append(
-			"coupleDayStartDateHistory",
-			dateToISO(new Date(formDataFollowSpouse.coupleDayStartDateHistory))
-		); //
-		formData.append(
-			"coupleDayEndDateHistory",
-			dateToISO(new Date(formDataFollowSpouse.coupleDayEndDateHistory))
-		); //
-		formData.append("leaveWrote", formDataFollowSpouse.leaveWrote); //
-		formData.append("leaveDetail", formDataFollowSpouse.leaveDetail); //
-		formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText); //
-		formData.append("leaveSalary", formDataFollowSpouse.leaveSalary); //
-		formData.append(
-			"coupleDayTotalHistory",
-			formDataFollowSpouse.coupleDayTotalHistory
-		); //
-		formData.append(
-			"coupleDayCountryHistory",
-			formDataFollowSpouse.coupleDayCountryHistory
-		); //
-		formData.append(
-			"coupleDayLevelCountry",
-			formDataFollowSpouse.coupleDayLevelCountry
-		); //
-		formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel); //
-		formData.append(
-			"coupleDayPosition",
-			formDataFollowSpouse.coupleDayPosition
-		); //
-		formData.append("coupleDayName", formDataFollowSpouse.coupleDayName); //
-		formData.append("leaveTotal", formDataFollowSpouse.leaveTotalDay); //
-		props.onSubmit(formData, isLeave.value);
-	}
+  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) {
+      formDataFollowSpouse.leaveDocument.forEach((file: File) => {
+        formData.append("leaveDocument", file);
+      });
+    }
+    // formData.append("leaveDocument", formDataFollowSpouse.leaveDocument);
+    formData.append("type", formDataFollowSpouse.type); //
+    formData.append(
+      "leaveStartDate",
+      dateToISO(new Date(formDataFollowSpouse.leaveStartDate))
+    ); //
+    formData.append(
+      "leaveEndDate",
+      dateToISO(new Date(formDataFollowSpouse.leaveEndDate))
+    ); //
+    formData.append(
+      "coupleDayStartDateHistory",
+      dateToISO(new Date(formDataFollowSpouse.coupleDayStartDateHistory))
+    ); //
+    formData.append(
+      "coupleDayEndDateHistory",
+      dateToISO(new Date(formDataFollowSpouse.coupleDayEndDateHistory))
+    ); //
+    formData.append("leaveWrote", formDataFollowSpouse.leaveWrote); //
+    formData.append("leaveDetail", formDataFollowSpouse.leaveDetail); //
+    formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText); //
+    formData.append("leaveSalary", formDataFollowSpouse.leaveSalary); //
+    formData.append(
+      "coupleDayTotalHistory",
+      formDataFollowSpouse.coupleDayTotalHistory
+    ); //
+    formData.append(
+      "coupleDayCountryHistory",
+      formDataFollowSpouse.coupleDayCountryHistory
+    ); //
+    formData.append(
+      "coupleDayLevelCountry",
+      formDataFollowSpouse.coupleDayLevelCountry
+    ); //
+    formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel); //
+    formData.append(
+      "coupleDayPosition",
+      formDataFollowSpouse.coupleDayPosition
+    ); //
+    formData.append("coupleDayName", formDataFollowSpouse.coupleDayName); //
+    formData.append("leaveTotal", formDataFollowSpouse.leaveTotalDay); //
+    props.onSubmit(formData, isLeave.value);
+  }
 }
 
 /**
@@ -189,634 +189,633 @@ function onValidate() {
  */
 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;
-			formDataFollowSpouse.leaveTotalDay = data.totalDate;
-		})
-		.catch((e: any) => {
-			messageError($q, e);
-		});
+  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;
+      formDataFollowSpouse.leaveTotalDay = data.totalDate;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-	fetchCheck();
+  fetchCheck();
 
-	const newLeaveTotal = calculateDurationYmd(
-		formDataFollowSpouse.leaveStartDate,
-		formDataFollowSpouse.leaveEndDate
-	);
-	formDataFollowSpouse.leaveTotal = newLeaveTotal;
+  const newLeaveTotal = calculateDurationYmd(
+    formDataFollowSpouse.leaveStartDate,
+    formDataFollowSpouse.leaveEndDate
+  );
+  formDataFollowSpouse.leaveTotal = newLeaveTotal;
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveHistoryTotal() {
-	const newLeaveTotal = calculateDurationYmd(
-		formDataFollowSpouse.coupleDayStartDateHistory,
-		formDataFollowSpouse.coupleDayEndDateHistory
-	);
-	formDataFollowSpouse.coupleDayTotalHistory = newLeaveTotal;
+  const newLeaveTotal = calculateDurationYmd(
+    formDataFollowSpouse.coupleDayStartDateHistory,
+    formDataFollowSpouse.coupleDayEndDateHistory
+  );
+  formDataFollowSpouse.coupleDayTotalHistory = newLeaveTotal;
 }
 
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
 const dateEndInputStyle = computed(() => {
-	return !isLeave.value ? "input-alert" : "";
+  return !isLeave.value ? "input-alert" : "";
 });
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const statusCheck = ref<any>("");
 watch(props.data, async () => {
-	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.coupleDayCountryHistory =
-			props.data.coupleDayCountryHistory;
-		formDataFollowSpouse.coupleDayTotalHistory =
-			props.data.coupleDayTotalHistory;
-		formDataFollowSpouse.coupleDayStartDateHistory =
-			props.data.coupleDayStartDateHistory;
-		formDataFollowSpouse.coupleDayEndDateHistory =
-			props.data.coupleDayEndDateHistory;
-		leaveDocumentList.value = props.data.leaveDocument;
+  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.coupleDayCountryHistory =
+      props.data.coupleDayCountryHistory;
+    formDataFollowSpouse.coupleDayTotalHistory =
+      props.data.coupleDayTotalHistory;
+    formDataFollowSpouse.coupleDayStartDateHistory =
+      props.data.coupleDayStartDateHistory;
+    formDataFollowSpouse.coupleDayEndDateHistory =
+      props.data.coupleDayEndDateHistory;
+    leaveDocumentList.value = props.data.leaveDocument;
 
-		const leaveTotal = await calculateDurationYmd(
-			props.data.leaveStartDate,
-			props.data.leaveEndDate
-		);
-		formDataFollowSpouse.leaveTotal = leaveTotal;
-		const coupleDayTotalHistory = await calculateDurationYmd(
-			props.data.coupleDayStartDateHistory,
-			props.data.coupleDayEndDateHistory
-		);
-		formDataFollowSpouse.coupleDayTotalHistory = coupleDayTotalHistory;
-		statusCheck.value = props.data.status;
-		formDataFollowSpouse.leaveDocument = [];
-	}
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    formDataFollowSpouse.leaveTotal = leaveTotal;
+    const coupleDayTotalHistory = await calculateDurationYmd(
+      props.data.coupleDayStartDateHistory,
+      props.data.coupleDayEndDateHistory
+    );
+    formDataFollowSpouse.coupleDayTotalHistory = coupleDayTotalHistory;
+    statusCheck.value = props.data.status;
+    formDataFollowSpouse.leaveDocument = [];
+  }
 });
 
 /**Hook */
 onMounted(async () => {
-	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.coupleDayCountryHistory =
-			props.data.coupleDayCountryHistory;
-		formDataFollowSpouse.coupleDayTotalHistory =
-			props.data.coupleDayTotalHistory;
-		formDataFollowSpouse.coupleDayStartDateHistory =
-			props.data.coupleDayStartDateHistory;
-		formDataFollowSpouse.coupleDayEndDateHistory =
-			props.data.coupleDayEndDateHistory;
-		leaveDocumentList.value = props.data.leaveDocument;
+  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.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.coupleDayCountryHistory =
+      props.data.coupleDayCountryHistory;
+    formDataFollowSpouse.coupleDayTotalHistory =
+      props.data.coupleDayTotalHistory;
+    formDataFollowSpouse.coupleDayStartDateHistory =
+      props.data.coupleDayStartDateHistory;
+    formDataFollowSpouse.coupleDayEndDateHistory =
+      props.data.coupleDayEndDateHistory;
+    leaveDocumentList.value = props.data.leaveDocument;
 
-		const leaveTotal = await calculateDurationYmd(
-			props.data.leaveStartDate,
-			props.data.leaveEndDate
-		);
-		formDataFollowSpouse.leaveTotal = leaveTotal;
-		const coupleDayTotalHistory = await calculateDurationYmd(
-			props.data.coupleDayStartDateHistory,
-			props.data.coupleDayEndDateHistory
-		);
-		formDataFollowSpouse.coupleDayTotalHistory = coupleDayTotalHistory;
-		statusCheck.value = props.data.status;
-		leaveId.value = props.data.id;
-	}
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    formDataFollowSpouse.leaveTotal = leaveTotal;
+    const coupleDayTotalHistory = await calculateDurationYmd(
+      props.data.coupleDayStartDateHistory,
+      props.data.coupleDayEndDateHistory
+    );
+    formDataFollowSpouse.coupleDayTotalHistory = coupleDayTotalHistory;
+    statusCheck.value = props.data.status;
+    leaveId.value = props.data.id;
+  }
 });
 </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 || statusCheck === 'NEW'"
-					: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 || statusCheck === 'NEW'"
-					@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 || statusCheck === 'NEW'"
-							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>
+  <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 || statusCheck === 'NEW'"
+          :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 || statusCheck === 'NEW'"
+          @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 || statusCheck === 'NEW'"
+              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 || statusCheck === 'NEW'
-					"
-					: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 || statusCheck === 'NEW'
-							"
-							class="full-width datepicker"
-							:model-value="
-								formDataFollowSpouse.leaveEndDate != null
-									? date2Thai(formDataFollowSpouse.leaveEndDate)
-									: null
-							"
-							:label="`${'ลาถึงวันที่'}`"
-						>
-							<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
-					:bottom-slots="!isLeave ? true : false"
-					:color="!isLeave ? 'red' : 'black'"
-					:bg-color="!isLeave ? 'red-2' : 'white'"
-					:border-color="!isLeave ? 'red' : 'gray'"
-					:input-class="!isLeave ? dateEndInputStyle : ''"
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataFollowSpouse.leaveTotal"
-					label="เป็นเวลา"
-					readonly
-				>
-					<template v-slot:hint>
-						<span style="color: red">
-							{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
-						</span>
-					</template>
-				</q-input>
+        <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 || statusCheck === 'NEW'
+          "
+          :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 || statusCheck === 'NEW'
+              "
+              class="full-width datepicker"
+              :model-value="
+                formDataFollowSpouse.leaveEndDate != null
+                  ? date2Thai(formDataFollowSpouse.leaveEndDate)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+            >
+              <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
+          :bottom-slots="!isLeave ? true : false"
+          :color="!isLeave ? 'red' : 'black'"
+          :bg-color="!isLeave ? 'red-2' : 'white'"
+          :border-color="!isLeave ? 'red' : 'gray'"
+          :input-class="!isLeave ? dateEndInputStyle : ''"
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataFollowSpouse.leaveTotal"
+          label="เป็นเวลา"
+          readonly
+        >
+          <template v-slot:hint>
+            <span style="color: red">
+              {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
+            </span>
+          </template>
+        </q-input>
 
-				<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="dataStore.salary"
-						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="dataStore.salaryText"
-						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="dataStore.salary"
+            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="dataStore.salaryText"
+            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 || statusCheck === 'NEW'"
-						: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 || statusCheck === 'NEW'"
-						: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 || statusCheck === 'NEW'"
-						: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 || statusCheck === 'NEW'"
-						:rules="[(val) => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
-					/>
-				</div>
-				<div class="text-weight-bold text-dark col-12">
-					ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย
-				</div>
-				<datepicker
-					class="col-12 col-md-3 col-sm-12 inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataFollowSpouse.coupleDayStartDateHistory"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:readonly="!edit || statusCheck === 'NEW'"
-					: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="coupleDayStartDateHistoryRef"
-							for="coupleDayStartDateHistoryRef"
-							hide-bottom-space
-							bg-color="white"
-							class="full-width"
-							:readonly="!edit || statusCheck === 'NEW'"
-							:model-value="
-								formDataFollowSpouse.coupleDayStartDateHistory != null
-									? date2Thai(formDataFollowSpouse.coupleDayStartDateHistory)
-									: 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 inputgreen"
-					menu-class-name="modalfix"
-					v-model="formDataFollowSpouse.coupleDayEndDateHistory"
-					:locale="'th'"
-					autoApply
-					hide-bottom-space
-					borderless
-					:enableTimePicker="false"
-					:readonly="!edit || statusCheck === 'NEW'"
-					week-start="0"
-					@update:model-value="updateLeaveHistoryTotal()"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							outlined
-							dense
-							ref="coupleDayEndDateHistoryRef"
-							for="coupleDayEndDateHistoryRef"
-							hide-bottom-space
-							bg-color="white"
-							:readonly="!edit || statusCheck === 'NEW'"
-							class="full-width"
-							:model-value="
-								formDataFollowSpouse.coupleDayEndDateHistory != null
-									? date2Thai(formDataFollowSpouse.coupleDayEndDateHistory)
-									: 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="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 || statusCheck === 'NEW'"
+            :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 || statusCheck === 'NEW'"
+            :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 || statusCheck === 'NEW'"
+            :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 || statusCheck === 'NEW'"
+            :rules="[(val) => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
+          />
+        </div>
+        <div class="text-weight-bold text-dark col-12">
+          ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย
+        </div>
+        <datepicker
+          class="col-12 col-md-3 col-sm-12 inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.coupleDayStartDateHistory"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :readonly="!edit || statusCheck === 'NEW'"
+          :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="coupleDayStartDateHistoryRef"
+              for="coupleDayStartDateHistoryRef"
+              hide-bottom-space
+              bg-color="white"
+              class="full-width"
+              :readonly="!edit || statusCheck === 'NEW'"
+              :model-value="
+                formDataFollowSpouse.coupleDayStartDateHistory != null
+                  ? date2Thai(formDataFollowSpouse.coupleDayStartDateHistory)
+                  : 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 inputgreen"
+          menu-class-name="modalfix"
+          v-model="formDataFollowSpouse.coupleDayEndDateHistory"
+          :locale="'th'"
+          autoApply
+          hide-bottom-space
+          borderless
+          :enableTimePicker="false"
+          :readonly="!edit || statusCheck === 'NEW'"
+          week-start="0"
+          @update:model-value="updateLeaveHistoryTotal()"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="coupleDayEndDateHistoryRef"
+              for="coupleDayEndDateHistoryRef"
+              hide-bottom-space
+              bg-color="white"
+              :readonly="!edit || statusCheck === 'NEW'"
+              class="full-width"
+              :model-value="
+                formDataFollowSpouse.coupleDayEndDateHistory != null
+                  ? date2Thai(formDataFollowSpouse.coupleDayEndDateHistory)
+                  : 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-12"
-					dense
-					outlined
-					readonly
-					hide-bottom-space
-					bg-color="white"
-					ref="coupleDayTotalHistoryRef"
-					for="coupleDayTotalHistoryRef"
-					v-model="formDataFollowSpouse.coupleDayTotalHistory"
-					label="เป็นเวลา"
-				/>
+        <q-input
+          class="col-12 col-md-3 col-sm-12"
+          dense
+          outlined
+          readonly
+          hide-bottom-space
+          bg-color="white"
+          ref="coupleDayTotalHistoryRef"
+          for="coupleDayTotalHistoryRef"
+          v-model="formDataFollowSpouse.coupleDayTotalHistory"
+          label="เป็นเวลา"
+        />
 
-				<q-input
-					class="col-12 col-md-3 col-sm-12"
-					dense
-					outlined
-					hide-bottom-space
-					bg-color="white"
-					ref="coupleDayCountryHistoryRef"
-					for="coupleDayCountryHistoryRef"
-					v-model="formDataFollowSpouse.coupleDayCountryHistory"
-					label="ประเทศ"
-					:readonly="!edit || statusCheck === 'NEW'"
-					:rules="[(val) => !!val || `${'กรุณาเลือกประเทศ'}`]"
-				/>
+        <q-input
+          class="col-12 col-md-3 col-sm-12"
+          dense
+          outlined
+          hide-bottom-space
+          bg-color="white"
+          ref="coupleDayCountryHistoryRef"
+          for="coupleDayCountryHistoryRef"
+          v-model="formDataFollowSpouse.coupleDayCountryHistory"
+          label="ประเทศ"
+          :readonly="!edit || statusCheck === 'NEW'"
+          :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="formDataFollowSpouse.leaveDetail"
-					label="รายละเอียด"
-					:readonly="!edit || statusCheck === 'NEW'"
-				/>
-				<div class="full-width" v-if="statusCheck != 'NEW'">
-					<div class="q-col-gutter-sm row">
-						<!-- multiple -->
-						<q-file
-							ref="fileRef"
-							bg-color="white"
-							v-model="formDataFollowSpouse.leaveDocument"
-							multiple
-							@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>
-				</div>
-				<div class="col-12" v-if="data">
-					<div class="col-12 col-md-12 col-sm-12">
-						<q-card>
-							<q-list
-								separator
-								v-if="leaveDocumentList && leaveDocumentList.length > 0"
-							>
-								<q-item
-									v-for="(document, index) in leaveDocumentList"
-									:key="index"
-									class="q-my-xs"
-								>
-									<q-item-section>
-										<q-item-label class="row items-baseline">
-											<div class="col">
-												{{ "เอกสารแนบที่ " + (index + 1) }}
-											</div>
-											<div>
-												<q-btn
-													:href="document.path"
-													target="_blank"
-													outline
-													flat
-													dense
-													color="blue"
-													icon="mdi-download"
-													size="12px"
-													class="q-mr-md"
-												>
-													<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-												</q-btn>
-											</div>
-											<div>
-												<q-btn
-													@click="clickDelete(leaveId, document.docId)"
-													target="_blank"
-													outline
-													color="red"
-													flat
-													dense
-													icon="delete"
-													size="12px"
-												>
-													<q-tooltip>ลบไฟล์</q-tooltip>
-												</q-btn>
-											</div>
-										</q-item-label>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-				</div>
+        <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 || statusCheck === 'NEW'"
+        />
+        <div class="full-width" v-if="statusCheck != 'NEW'">
+          <div class="q-col-gutter-sm row">
+            <!-- multiple -->
+            <q-file
+              ref="fileRef"
+              bg-color="white"
+              v-model="formDataFollowSpouse.leaveDocument"
+              multiple
+              @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>
+        </div>
+        <div class="col-12" v-if="data">
+          <div class="col-12 col-md-12 col-sm-12">
+            <q-card>
+              <q-list
+                separator
+                v-if="leaveDocumentList && leaveDocumentList.length > 0"
+              >
+                <q-item
+                  v-for="(document, index) in leaveDocumentList"
+                  :key="index"
+                  class="q-my-xs"
+                >
+                  <q-item-section>
+                    <q-item-label class="row items-baseline">
+                      <div class="col">
+                        {{ "เอกสารแนบที่ " + (index + 1) }}
+                      </div>
+                      <div>
+                        <q-btn
+                          :href="document.path"
+                          target="_blank"
+                          outline
+                          flat
+                          dense
+                          color="blue"
+                          icon="mdi-download"
+                          size="12px"
+                          class="q-mr-md"
+                        >
+                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                        </q-btn>
+                      </div>
+                      <div>
+                        <q-btn
+                          @click="clickDelete(leaveId, document.docId)"
+                          target="_blank"
+                          outline
+                          color="red"
+                          flat
+                          dense
+                          icon="delete"
+                          size="12px"
+                        >
+                          <q-tooltip>ลบไฟล์</q-tooltip>
+                        </q-btn>
+                      </div>
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </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 leaveDocumentList"
-								: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="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 leaveDocumentList"
+                :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
-				v-if="!props.data || props.data.status == 'DRAFT'"
-				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 && statusCheck != 'NEW'"
-				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>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        v-if="!props.data || props.data.status == 'DRAFT'"
+        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 && statusCheck != 'NEW'"
+        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>