From 5b8a0aa7def460cd3e731ce4a0906680dccb8e98 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 5 Feb 2024 16:56:36 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2=E0=B9=84=E0=B8=9B=E0=B8=A8=E0=B8=B6=E0=B8=81=E0=B8=A9?=
 =?UTF-8?q?=E0=B8=B2=20=E0=B8=9D=E0=B8=B6=E0=B8=81=E0=B8=AD=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=A1=20=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=88=E0=B8=B1=E0=B8=A2=20=E0=B8=AB=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD=E0=B8=94=E0=B8=B9=E0=B8=87=E0=B8=B2=E0=B8=99?=
 =?UTF-8?q?=20=20=E0=B8=A7=E0=B8=B1=E0=B8=99=E0=B8=97=E0=B8=B5=E0=B9=88=20?=
 =?UTF-8?q?,=20=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=94?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/FormLeave/10_TrainForm.vue     | 1230 ++++++++---------
 1 file changed, 615 insertions(+), 615 deletions(-)

diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index ef6a3b4..0441e79 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -14,14 +14,14 @@ const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
 const {
-	date2Thai,
-	dialogRemove,
-	arabicNumberToText,
-	calculateDurationYmd,
-	fails,
-	dateToISO,
-	success,
-	messageError,
+  date2Thai,
+  dialogRemove,
+  arabicNumberToText,
+  calculateDurationYmd,
+  fails,
+  dateToISO,
+  success,
+  messageError,
 } = mixin;
 const edit = ref<boolean>(true);
 const files = ref<any>(null);
@@ -29,44 +29,44 @@ 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 formDataTrain = reactive<any>({
-	type: dataStore.typeId,
-	leaveWrote: "",
-	leaveStartDate: null,
-	leaveEndDate: null,
-	leavebirthDate: new Date(),
-	leavegovernmentDate: new Date(),
-	leaveSalary: 10000,
-	leaveSalaryText: arabicNumberToText(10000),
-	leaveNumber: "",
-	leaveAddress: "",
-	studyDayScholarship: "",
-	studyDayCountry: "",
-	studyDayTrainingSubject: "",
-	studyDayTrainingName: "",
-	leaveDocument: [],
-	leaveDetail: "",
-	leaveTotal: "", //จำนวนวันลา
-	leaveTotalDay: "", //จำนวนวันลา
+  type: dataStore.typeId,
+  leaveWrote: "",
+  leaveStartDate: null,
+  leaveEndDate: null,
+  leavebirthDate: new Date(),
+  leavegovernmentDate: new Date(),
+  leaveSalary: 10000,
+  leaveSalaryText: arabicNumberToText(10000),
+  leaveNumber: "",
+  leaveAddress: "",
+  studyDayScholarship: "",
+  studyDayCountry: "",
+  studyDayTrainingSubject: "",
+  studyDayTrainingName: "",
+  leaveDocument: [],
+  leaveDetail: "",
+  leaveTotal: "", //จำนวนวันลา
+  leaveTotalDay: "", //จำนวนวันลา
 });
 
 /** ตัวแปร ref สำหรับแสดง validate */
@@ -84,79 +84,79 @@ const leaveWroteRef = ref<object | null>(null);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: TrainForm = {
-	leaveStartDate: leaveStartDateRef,
-	leaveEndDate: leaveEndDateRef,
-	leavebirthDate: leavebirthDateRef,
-	leavegovernmentDate: leavegovernmentDateRef,
-	leaveNumber: leaveNumberRef,
-	leaveAddress: leaveAddressRef,
-	studyDayScholarship: studyDayScholarshipRef,
-	studyDayCountry: studyDayCountryRef,
-	studyDayTrainingSubject: studyDayTrainingSubjectRef,
-	studyDayTrainingName: studyDayTrainingNameRef,
-	leaveWrote: leaveWroteRef,
+  leaveStartDate: leaveStartDateRef,
+  leaveEndDate: leaveEndDateRef,
+  leavebirthDate: leavebirthDateRef,
+  leavegovernmentDate: leavegovernmentDateRef,
+  leaveNumber: leaveNumberRef,
+  leaveAddress: leaveAddressRef,
+  studyDayScholarship: studyDayScholarshipRef,
+  studyDayCountry: studyDayCountryRef,
+  studyDayTrainingSubject: studyDayTrainingSubjectRef,
+  studyDayTrainingName: studyDayTrainingNameRef,
+  leaveWrote: leaveWroteRef,
 };
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
 const nameFile = ref<string>("");
 const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
-	files.forEach((file: any) => {
-		fileDocDataUpload.value.push(file);
-	});
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
 };
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
-	const hasError = [];
+  const hasError = [];
 
-	for (const key in formRef) {
-		if (Object.prototype.hasOwnProperty.call(formRef, key)) {
-			const property = formRef[key];
-			if (property.value && typeof property.value.validate === "function") {
-				const isValid = property.value.validate();
-				hasError.push(isValid);
-			}
-		}
-	}
-	if (hasError.every((result) => result === true)) {
-		const formData = new FormData();
-		if (formDataTrain.leaveDocument) {
-			formDataTrain.leaveDocument.forEach((file: File) => {
-				formData.append("leaveDocument", file);
-			});
-		}
-		// formData.append("leaveDocument", formDataTrain.leaveDocument);
-		formData.append("type", formDataTrain.type); //
-		formData.append(
-			"leaveStartDate",
-			dateToISO(new Date(formDataTrain.leaveStartDate))
-		); //
-		formData.append(
-			"leaveEndDate",
-			dateToISO(new Date(formDataTrain.leaveEndDate))
-		); //
-		formData.append("studyDayCountry", formDataTrain.studyDayCountry);
-		// formData.append(
-		//   "leavegovernmentDate",
-		//   dateToISO(formDataTrain.leavegovernmentDate)
-		// );
-		// formData.append("leavebirthDate", dateToISO(new Date(formDataTrain.leavebirthDate)));
-		formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName);
-		formData.append(
-			"studyDayTrainingSubject",
-			formDataTrain.studyDayTrainingSubject
-		);
-		formData.append("leaveWrote", formDataTrain.leaveWrote); //
-		formData.append("leaveDetail", formDataTrain.leaveDetail); //
-		formData.append("studyDayScholarship", formDataTrain.studyDayScholarship);
-		formData.append("leaveAddress", formDataTrain.leaveAddress); //
-		formData.append("leaveNumber", formDataTrain.leaveNumber); //
-		formData.append("leaveSalaryText", formDataTrain.leaveSalaryText); //
-		formData.append("leaveSalary", formDataTrain.leaveSalary); //
-		formData.append("leaveTotal", formDataTrain.leaveTotalDay); //
-		props.onSubmit(formData, isLeave.value);
-	}
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    const formData = new FormData();
+    if (formDataTrain.leaveDocument) {
+      formDataTrain.leaveDocument.forEach((file: File) => {
+        formData.append("leaveDocument", file);
+      });
+    }
+    // formData.append("leaveDocument", formDataTrain.leaveDocument);
+    formData.append("type", formDataTrain.type); //
+    formData.append(
+      "leaveStartDate",
+      dateToISO(new Date(formDataTrain.leaveStartDate))
+    ); //
+    formData.append(
+      "leaveEndDate",
+      dateToISO(new Date(formDataTrain.leaveEndDate))
+    ); //
+    formData.append("studyDayCountry", formDataTrain.studyDayCountry);
+    // formData.append(
+    //   "leavegovernmentDate",
+    //   dateToISO(formDataTrain.leavegovernmentDate)
+    // );
+    // formData.append("leavebirthDate", dateToISO(new Date(formDataTrain.leavebirthDate)));
+    formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName);
+    formData.append(
+      "studyDayTrainingSubject",
+      formDataTrain.studyDayTrainingSubject
+    );
+    formData.append("leaveWrote", formDataTrain.leaveWrote); //
+    formData.append("leaveDetail", formDataTrain.leaveDetail); //
+    formData.append("studyDayScholarship", formDataTrain.studyDayScholarship);
+    formData.append("leaveAddress", formDataTrain.leaveAddress); //
+    formData.append("leaveNumber", formDataTrain.leaveNumber); //
+    formData.append("leaveSalaryText", formDataTrain.leaveSalaryText); //
+    formData.append("leaveSalary", formDataTrain.leaveSalary); //
+    formData.append("leaveTotal", formDataTrain.leaveTotalDay); //
+    props.onSubmit(formData, isLeave.value);
+  }
 }
 
 /**
@@ -166,562 +166,562 @@ function onValidate() {
 
 const isLeave = ref<boolean>(true);
 async function fetchCheck() {
-	await http
-		.post(config.API.leaveCheck(), {
-			type: dataStore.typeId ?? null,
-			StartLeaveDate: formDataTrain.leaveStartDate ?? null,
-			EndLeaveDate: formDataTrain.leaveEndDate ?? null,
-		})
-		.then((res: any) => {
-			const data = res.data.result;
-			isLeave.value = data.isLeave;
-			formDataTrain.leaveTotalDay = data.totalDate;
-		})
-		.catch((e: any) => {
-			messageError($q, e);
-		});
+  await http
+    .post(config.API.leaveCheck(), {
+      type: dataStore.typeId ?? null,
+      StartLeaveDate: formDataTrain.leaveStartDate ?? null,
+      EndLeaveDate: formDataTrain.leaveEndDate ?? null,
+    })
+    .then((res: any) => {
+      const data = res.data.result;
+      isLeave.value = data.isLeave;
+      formDataTrain.leaveTotalDay = data.totalDate;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
 }
 
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(
-		formDataTrain.leaveStartDate,
-		formDataTrain.leaveEndDate
-	);
-	formDataTrain.leaveTotal = newLeaveTotal;
+  const newLeaveTotal = calculateDurationYmd(
+    formDataTrain.leaveStartDate,
+    formDataTrain.leaveEndDate
+  );
+  formDataTrain.leaveTotal = newLeaveTotal;
 }
 
 /**
  * แปลงตัวเลขเงินเดือน
  */
 const formattedSalary = computed(() => {
-	return formDataTrain.leaveSalary !== null
-		? formDataTrain.leaveSalary.toLocaleString("th-TH")
-		: "";
+  return formDataTrain.leaveSalary !== null
+    ? formDataTrain.leaveSalary.toLocaleString("th-TH")
+    : "";
 });
 
 /** แจ้งเมื่อวันลาไม่ถูกต้อง */
 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) {
-		formDataTrain.leaveWrote = props.data.leaveWrote;
-		formDataTrain.leaveStartDate = props.data.leaveStartDate;
-		formDataTrain.leaveEndDate = props.data.leaveEndDate;
-		formDataTrain.leaveTotal = props.data.leaveTotal;
-		formDataTrain.leavebirthDate = props.data.leavebirthDate;
-		formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate;
-		formDataTrain.leaveSalary = props.data.leaveSalary;
-		formDataTrain.leaveSalaryText = props.data.leaveSalaryText;
-		formDataTrain.leaveNumber = props.data.leaveNumber;
-		formDataTrain.leaveAddress = props.data.leaveAddress;
-		formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
-		formDataTrain.studyDayCountry = props.data.studyDayCountry;
-		formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
-		formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
-		formDataTrain.leaveDetail = props.data.leaveDetail;
-		formDataTrain.leaveDocument = [];
-		const leaveTotal = await calculateDurationYmd(
-			props.data.leaveStartDate,
-			props.data.leaveEndDate
-		);
-		formDataTrain.leaveTotal = leaveTotal;
-		leaveDocumentList.value = props.data.leaveDocument;
-		statusCheck.value = props.data.status;
-	}
+  if (props.data) {
+    formDataTrain.leaveWrote = props.data.leaveWrote;
+    formDataTrain.leaveStartDate = props.data.leaveStartDate;
+    formDataTrain.leaveEndDate = props.data.leaveEndDate;
+    formDataTrain.leaveTotal = props.data.leaveTotal;
+    formDataTrain.leavebirthDate = props.data.leavebirthDate;
+    formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate;
+    formDataTrain.leaveSalary = props.data.leaveSalary;
+    formDataTrain.leaveSalaryText = props.data.leaveSalaryText;
+    formDataTrain.leaveNumber = props.data.leaveNumber;
+    formDataTrain.leaveAddress = props.data.leaveAddress;
+    formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
+    formDataTrain.studyDayCountry = props.data.studyDayCountry;
+    formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
+    formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
+    formDataTrain.leaveDetail = props.data.leaveDetail;
+    formDataTrain.leaveDocument = [];
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    formDataTrain.leaveTotal = leaveTotal;
+    leaveDocumentList.value = props.data.leaveDocument;
+    statusCheck.value = props.data.status;
+  }
 });
 
 /**Hook */
 onMounted(async () => {
-	if (props.data) {
-		formDataTrain.leaveWrote = props.data.leaveWrote;
-		formDataTrain.leaveStartDate = props.data.leaveStartDate;
-		formDataTrain.leaveEndDate = props.data.leaveEndDate;
-		formDataTrain.leaveTotal = props.data.leaveTotal;
-		formDataTrain.leavebirthDate = props.data.leavebirthDate;
-		formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate;
-		formDataTrain.leaveSalary = props.data.leaveSalary;
-		formDataTrain.leaveSalaryText = props.data.leaveSalaryText;
-		formDataTrain.leaveNumber = props.data.leaveNumber;
-		formDataTrain.leaveAddress = props.data.leaveAddress;
-		formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
-		formDataTrain.studyDayCountry = props.data.studyDayCountry;
-		formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
-		formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
-		formDataTrain.leaveDetail = props.data.leaveDetail;
-		// formDataTrain.leaveDocument = props.data.leaveDocument;
-		const leaveTotal = await calculateDurationYmd(
-			props.data.leaveStartDate,
-			props.data.leaveEndDate
-		);
-		formDataTrain.leaveTotal = leaveTotal;
-		leaveDocumentList.value = props.data.leaveDocument;
-		statusCheck.value = props.data.status;
-		leaveId.value = props.data.id;
-	}
+  if (props.data) {
+    formDataTrain.leaveWrote = props.data.leaveWrote;
+    formDataTrain.leaveStartDate = props.data.leaveStartDate;
+    formDataTrain.leaveEndDate = props.data.leaveEndDate;
+    formDataTrain.leaveTotal = props.data.leaveTotal;
+    formDataTrain.leavebirthDate = props.data.leavebirthDate;
+    formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate;
+    formDataTrain.leaveSalary = props.data.leaveSalary;
+    formDataTrain.leaveSalaryText = props.data.leaveSalaryText;
+    formDataTrain.leaveNumber = props.data.leaveNumber;
+    formDataTrain.leaveAddress = props.data.leaveAddress;
+    formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
+    formDataTrain.studyDayCountry = props.data.studyDayCountry;
+    formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
+    formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
+    formDataTrain.leaveDetail = props.data.leaveDetail;
+    // formDataTrain.leaveDocument = props.data.leaveDocument;
+    const leaveTotal = await calculateDurationYmd(
+      props.data.leaveStartDate,
+      props.data.leaveEndDate
+    );
+    formDataTrain.leaveTotal = leaveTotal;
+    leaveDocumentList.value = props.data.leaveDocument;
+    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="onValidate">
-		<q-card bordered class="q-pa-md bg-grey-1">
-			<div class="row q-pa-sm q-col-gutter-sm">
-				<q-input
-					v-model="formDataTrain.leaveWrote"
-					ref="leaveWroteRef"
-					class="col-12 col-sm-12 cursor-pointer inputgreen"
-					bg-color="white"
-					dense
-					outlined
-					label="เขียนที่"
-					:readonly="!edit || statusCheck === 'NEW'"
-					hide-bottom-space
-					:rules="[(val) => !!val || `${'เขียนที่'}`]"
-				/>
+  <div style="display: flex; align-items: center">
+    <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+    <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+  </div>
+  <form @submit.prevent="onValidate">
+    <q-card bordered class="q-pa-md bg-grey-1">
+      <div class="row q-pa-sm q-col-gutter-sm">
+        <q-input
+          v-model="formDataTrain.leaveWrote"
+          ref="leaveWroteRef"
+          class="col-12 col-sm-12 cursor-pointer inputgreen"
+          bg-color="white"
+          dense
+          outlined
+          label="เขียนที่"
+          :readonly="!edit || statusCheck === 'NEW'"
+          hide-bottom-space
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        />
 
-				<datepicker
-					v-model="formDataTrain.leaveStartDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					week-start="0"
-					:enableTimePicker="false"
-					:locale="'th'"
-					:readonly="!edit || statusCheck === 'NEW'"
-					@update:model-value="formDataTrain.leaveEndDate = null"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveStartDateRef"
-							class="full-width datepicker"
-							bg-color="white"
-							outlined
-							dense
-							lazy-rules
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							:label="`${'ลาตั้งแต่วันที่'}`"
-							:model-value="
-								formDataTrain.leaveStartDate != null
-									? date2Thai(formDataTrain.leaveStartDate)
-									: null
-							"
-							:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-						>
-							<template v-slot:prepend>
-								<q-icon
-									name="event"
-									class="cursor-pointer"
-									style="color: var(--q-primary)"
-								>
-								</q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <datepicker
+          v-model="formDataTrain.leaveStartDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          week-start="0"
+          :enableTimePicker="false"
+          :locale="'th'"
+          :readonly="!edit || statusCheck === 'NEW'"
+          @update:model-value="formDataTrain.leaveEndDate = null"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveStartDateRef"
+              class="full-width datepicker"
+              bg-color="white"
+              outlined
+              dense
+              lazy-rules
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :model-value="
+                formDataTrain.leaveStartDate != null
+                  ? date2Thai(formDataTrain.leaveStartDate)
+                  : null
+              "
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<datepicker
-					v-model="formDataTrain.leaveEndDate"
-					class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
-					menu-class-name="modalfix"
-					autoApply
-					borderless
-					@update:model-value="updateLeaveTotal(), fetchCheck()"
-					week-start="0"
-					:readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
-					:locale="'th'"
-					:enableTimePicker="false"
-					:min-date="formDataTrain.leaveStartDate"
-				>
-					<template #year="{ year }">
-						{{ year + 543 }}
-					</template>
-					<template #year-overlay-value="{ value }">
-						{{ parseInt(value + 543) }}
-					</template>
-					<template #trigger>
-						<q-input
-							ref="leaveEndDateRef"
-							class="full-width datepicker"
-							outlined
-							dense
-							lazy-rules
-							bg-color="white"
-							hide-bottom-space
-							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
-							:model-value="
-								formDataTrain.leaveEndDate != null
-									? date2Thai(formDataTrain.leaveEndDate)
-									: null
-							"
-						>
-							<template v-slot:prepend>
-								<q-icon
-									name="event"
-									class="cursor-pointer"
-									style="color: var(--q-primary)"
-								>
-								</q-icon>
-							</template>
-						</q-input>
-					</template>
-				</datepicker>
+        <datepicker
+          v-model="formDataTrain.leaveEndDate"
+          class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
+          menu-class-name="modalfix"
+          autoApply
+          borderless
+          @update:model-value="updateLeaveTotal(), fetchCheck()"
+          week-start="0"
+          :readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
+          :locale="'th'"
+          :enableTimePicker="false"
+          :min-date="formDataTrain.leaveStartDate"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              ref="leaveEndDateRef"
+              class="full-width datepicker"
+              outlined
+              dense
+              lazy-rules
+              bg-color="white"
+              hide-bottom-space
+              :label="`${'ลาถึงวันที่'}`"
+              :readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
+              :model-value="
+                formDataTrain.leaveEndDate != null
+                  ? date2Thai(formDataTrain.leaveEndDate)
+                  : null
+              "
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
 
-				<q-input
-					class="col-12 col-md-2 col-sm-6"
-					dense
-					outlined
-					ref="leaveTotalRef"
-					for="leaveTotalRef"
-					v-model="formDataTrain.leaveTotal"
-					label="มีกำหนด"
-					readonly
-					:bottom-slots="!isLeave ? true : false"
-					:color="!isLeave ? 'red' : 'black'"
-					:bg-color="!isLeave ? 'red-2' : 'white'"
-					:border-color="!isLeave ? 'red' : 'gray'"
-					:input-class="!isLeave ? dateEndInputStyle : ''"
-				>
-					<template v-slot:hint>
-						<span style="color: red">
-							{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
-						</span>
-					</template>
-				</q-input>
+        <q-input
+          class="col-12 col-md-2 col-sm-6"
+          dense
+          outlined
+          ref="leaveTotalRef"
+          for="leaveTotalRef"
+          v-model="formDataTrain.leaveTotal"
+          label="มีกำหนด"
+          readonly
+          :bottom-slots="!isLeave ? true : false"
+          :color="!isLeave ? 'red' : 'black'"
+          :bg-color="!isLeave ? 'red-2' : 'white'"
+          :border-color="!isLeave ? 'red' : 'gray'"
+          :input-class="!isLeave ? dateEndInputStyle : ''"
+        >
+          <template v-slot:hint>
+            <span style="color: red">
+              {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
+            </span>
+          </template>
+        </q-input>
 
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							v-model="formDataTrain.leavegovernmentDate"
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							week-start="0"
-							readonly
-							:enableTimePicker="false"
-							:locale="'th'"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavegovernmentDateRef"
-									class="full-width"
-									outlined
-									readonly
-									bg-color="white"
-									dense
-									hide-bottom-space
-									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="
-										formDataTrain.leavegovernmentDate != null
-											? date2Thai(formDataTrain.leavegovernmentDate)
-											: null
-									"
-									:rules="[
-										(val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
-									]"
-								>
-									<template v-slot:prepend>
-										<q-icon
-											name="event"
-											class="cursor-pointer"
-											style="color: var(--black)"
-										>
-										</q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              v-model="formDataTrain.leavegovernmentDate"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              week-start="0"
+              readonly
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavegovernmentDateRef"
+                  class="full-width"
+                  outlined
+                  readonly
+                  bg-color="white"
+                  dense
+                  hide-bottom-space
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :model-value="
+				  dataStore.dateAppoint != null
+                      ? date2Thai(dataStore.dateAppoint)
+                      : null
+                  "
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
 
-						<datepicker
-							v-model="formDataTrain.leavebirthDate"
-							class="col-12 col-md-3 col-sm-6"
-							menu-class-name="modalfix"
-							autoApply
-							borderless
-							readonly
-							week-start="0"
-							:enableTimePicker="false"
-							:locale="'th'"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									ref="leavebirthDateRef"
-									class="full-width"
-									bg-color="white"
-									outlined
-									dense
-									readonly
-									hide-bottom-space
-									:label="`${'วันเดือนปีเกิด'}`"
-									:model-value="
-										formDataTrain.leavebirthDate != null
-											? date2Thai(formDataTrain.leavebirthDate)
-											: null
-									"
-									:rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon
-											name="event"
-											class="cursor-pointer"
-											style="color: var(---black)"
-										>
-										</q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
+            <datepicker
+              v-model="formDataTrain.leavebirthDate"
+              class="col-12 col-md-3 col-sm-6"
+              menu-class-name="modalfix"
+              autoApply
+              borderless
+              readonly
+              week-start="0"
+              :enableTimePicker="false"
+              :locale="'th'"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="leavebirthDateRef"
+                  class="full-width"
+                  bg-color="white"
+                  outlined
+                  dense
+                  readonly
+                  hide-bottom-space
+                  :label="`${'วันเดือนปีเกิด'}`"
+                  :model-value="
+				  dataStore.birthDate != null
+                      ? date2Thai(dataStore.birthDate)
+                      : null
+                  "
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(---black)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
 
-						<q-input
-							v-model="formattedSalary"
-							class="col-12 col-sm-6 col-md-3"
-							bg-color="white"
-							dense
-							outlined
-							readonly
-							label="เงินเดือนปัจจุบัน"
-						/>
+            <q-input
+              v-model="dataStore.salary"
+              class="col-12 col-sm-6 col-md-3"
+              bg-color="white"
+              dense
+              outlined
+              readonly
+              label="เงินเดือนปัจจุบัน"
+            />
 
-						<q-input
-							v-model="formDataTrain.leaveSalaryText"
-							class="col-12 col-sm-6 col-md-3"
-							dense
-							readonly
-							outlined
-							bg-color="white"
-							label="เงินเดือนปัจจุบัน (ตัวอักษร)"
-						/>
-					</div>
-				</div>
+            <q-input
+              v-model="dataStore.salaryText"
+              class="col-12 col-sm-6 col-md-3"
+              dense
+              readonly
+              outlined
+              bg-color="white"
+              label="เงินเดือนปัจจุบัน (ตัวอักษร)"
+            />
+          </div>
+        </div>
 
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<q-input
-							v-model="formDataTrain.studyDayTrainingSubject"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							ref="studyDayTrainingSubjectRef"
-							bg-color="white"
-							dense
-							outlined
-							label="ด้าน/หลักสูตร"
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[(val) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
-						/>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              v-model="formDataTrain.studyDayTrainingSubject"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              ref="studyDayTrainingSubjectRef"
+              bg-color="white"
+              dense
+              outlined
+              label="ด้าน/หลักสูตร"
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[(val) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
+            />
 
-						<q-input
-							v-model="formDataTrain.studyDayTrainingName"
-							ref="studyDayTrainingNameRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ณ สถานที่"
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[(val) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
-						/>
+            <q-input
+              v-model="formDataTrain.studyDayTrainingName"
+              ref="studyDayTrainingNameRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ณ สถานที่"
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[(val) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
+            />
 
-						<q-input
-							v-model="formDataTrain.studyDayCountry"
-							ref="studyDayCountryRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							dense
-							bg-color="white"
-							outlined
-							label="ประเทศ"
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
-						/>
+            <q-input
+              v-model="formDataTrain.studyDayCountry"
+              ref="studyDayCountryRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              dense
+              bg-color="white"
+              outlined
+              label="ประเทศ"
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[(val) => !!val || `${'กรุณากรอกประเทศ'}`]"
+            />
 
-						<q-input
-							v-model="formDataTrain.studyDayScholarship"
-							ref="studyDayScholarshipRef"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ด้วยทุน"
-							hide-bottom-space
-							:readonly="!edit || statusCheck === 'NEW'"
-							:rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
-						/>
+            <q-input
+              v-model="formDataTrain.studyDayScholarship"
+              ref="studyDayScholarshipRef"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ด้วยทุน"
+              hide-bottom-space
+              :readonly="!edit || statusCheck === 'NEW'"
+              :rules="[(val) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
+            />
 
-						<q-input
-							v-model="formDataTrain.leaveNumber"
-							class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
-							ref="leaveNumberRef"
-							dense
-							outlined
-							unmasked-value
-							hide-bottom-space
-							bg-color="white"
-							mask="(###)-###-####"
-							:readonly="!edit || statusCheck === 'NEW'"
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:rules="[
-								(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
-							]"
-						/>
+            <q-input
+              v-model="formDataTrain.leaveNumber"
+              class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
+              ref="leaveNumberRef"
+              dense
+              outlined
+              unmasked-value
+              hide-bottom-space
+              bg-color="white"
+              mask="(###)-###-####"
+              :readonly="!edit || statusCheck === 'NEW'"
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
 
-						<q-input
-							v-model="formDataTrain.leaveAddress"
-							ref="leaveAddressRef"
-							class="col-12 cursor-pointer inputgreen"
-							bg-color="white"
-							dense
-							outlined
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit || statusCheck === 'NEW'"
-							hide-bottom-space
-							:rules="[
-								(val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
-							]"
-						/>
-					</div>
-				</div>
+            <q-input
+              v-model="formDataTrain.leaveAddress"
+              ref="leaveAddressRef"
+              class="col-12 cursor-pointer inputgreen"
+              bg-color="white"
+              dense
+              outlined
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit || statusCheck === 'NEW'"
+              hide-bottom-space
+              :rules="[
+                (val) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+          </div>
+        </div>
 
-				<q-input
-					v-model="formDataTrain.leaveDetail"
-					class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
-					:readonly="!edit || statusCheck === 'NEW'"
-					bg-color="white"
-					dense
-					outlined
-					type="textarea"
-					label="รายละเอียด"
-				/>
+        <q-input
+          v-model="formDataTrain.leaveDetail"
+          class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
+          :readonly="!edit || statusCheck === 'NEW'"
+          bg-color="white"
+          dense
+          outlined
+          type="textarea"
+          label="รายละเอียด"
+        />
 
-				<div class="col-12" v-if="statusCheck != 'NEW'">
-					<q-file
-						v-model="formDataTrain.leaveDocument"
-						bg-color="white"
-						multiple
-						dense
-						outlined
-						use-chips
-						label="เอกสารประกอบ"
-					>
-						<template v-slot:prepend>
-							<q-icon name="attach_file" color="primary" />
-						</template>
-					</q-file>
-					<div class="col-12 q-mt-sm" 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>
-			</div>
-		</q-card>
+        <div class="col-12" v-if="statusCheck != 'NEW'">
+          <q-file
+            v-model="formDataTrain.leaveDocument"
+            bg-color="white"
+            multiple
+            dense
+            outlined
+            use-chips
+            label="เอกสารประกอบ"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+          <div class="col-12 q-mt-sm" 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>
+      </div>
+    </q-card>
 
-		<q-separator class="q-mt-sm" />
+    <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>
+    <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>