From d177859908452b57aa89adcaf7ed861372d1fc41 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Wed, 8 Nov 2023 12:58:20 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=AD=E0=B8=B1=E0=B8=9E=E0=B9=80=E0=B8=94?=
 =?UTF-8?q?=E0=B8=97=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/componenst/Forms/01_SickForm.vue | 370 ++++++++++--------
 .../componenst/Forms/04_HelpWifeBirthForm.vue | 326 ++++++++++++++-
 .../componenst/Forms/05_VacationForm.vue      | 316 +++++++++++++--
 .../interface/request/HelpWifeForm.ts         |  31 ++
 .../05_leave/interface/request/SickForm.ts    |  17 +-
 .../interface/request/VacationForm.ts         |  31 ++
 src/modules/05_leave/views/SampleForm.vue     | 109 +++---
 7 files changed, 947 insertions(+), 253 deletions(-)
 create mode 100644 src/modules/05_leave/interface/request/HelpWifeForm.ts
 create mode 100644 src/modules/05_leave/interface/request/VacationForm.ts

diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
index ed5ecad..fdbc713 100644
--- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue"
-import type { FormData } from "../../interface/request/SickForm"
+import type { FormData, FormRef } from "../../interface/request/SickForm"
 import { useCounterMixin } from "@/stores/mixin"
 
 const mixin = useCounterMixin()
@@ -9,9 +9,13 @@ const edit = ref<boolean>(true)
 const halfDay = ref<string>("day")
 const props = defineProps({
 	data: {
-		type: Array,
+		type: Object,
 		default: null,
 	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
 })
 // ข้อมูลทั้งก้อน form
 const formData = reactive<FormData>({
@@ -23,9 +27,31 @@ const formData = reactive<FormData>({
 	leaveContactTel: "",
 	leaveContactLocation: "",
 	leaveDetail: "",
-	file: null,
+	file: [],
 })
 
+const leaveNoRef = ref<object | null>(null)
+const startLeaveDateRef = ref<object | null>(null)
+const endLeaveDateRef = ref<object | null>(null)
+const contractTelRef = ref<object | null>(null)
+const leaveTotalRef = ref<object | null>(null)
+const leaveContactTelRef = ref<object | null>(null)
+const leaveContactLocationRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
+const fileRef = ref<object | null>(null)
+
+const FormRef: FormRef = {
+	leaveNo: leaveNoRef,
+	startLeaveDate: startLeaveDateRef,
+	endLeaveDate: endLeaveDateRef,
+	contractTel: contractTelRef,
+	leaveTotal: leaveTotalRef,
+	leaveContactTel: leaveContactTelRef,
+	leaveContactLocation: leaveContactLocationRef,
+	leaveDetail: leaveDetailRef,
+	file: fileRef,
+}
+
 watch(props.data, async () => {
 	// console.log("data==>", props.data)
 	formData.leaveNo = props.data.leaveNo
@@ -44,11 +70,28 @@ const fileUploadDoc = async (files: 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)) {
+		props.onSubmit()
+	}
+}
 </script>
 
 <template>
-	<div>
-		<!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
+	<form @submit.prevent.stop="onValidate">
+		<div>
+			<!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
     <ul>
       <li>เขียนที่</li>
       <li>ลาตั้งแต่วันที่</li>
@@ -66,158 +109,179 @@ const fileUploadDoc = async (files: any) => {
       (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
     </p> -->
 
-		<div class="col-12 row q-col-gutter-md q-pa-md">
-			<div class="col-xs-12 col-sm-12">
-				<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" dense outlined v-model="formData.leaveNo" label="เขียนที่" :readonly="!edit" :rules="[val => !!val || `${'เขียนที่'}`]" />
+			<div class="col-12 row q-col-gutter-md q-pa-md">
+				<div class="col-xs-12 col-sm-12">
+					<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"
+								ref="leaveNoRef"
+								for="leaveNoRef"
+								dense
+								outlined
+								v-model="formData.leaveNo"
+								label="เขียนที่"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'เขียนที่'}`]"
+							/>
 
-						<div class="col-md-4 col-sm-12">
-							<q-radio v-model="halfDay" val="day" label="ลาทั้งวัน" />
-							<q-radio v-model="halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" />
-							<q-radio v-model="halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" />
-						</div>
-
-						<datepicker
-							class="col-md-3 col-sm-12"
-							menu-class-name="modalfix"
-							v-model="formData.startLeaveDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							:readonly="!edit"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									hide-bottom-space
-									:readonly="!edit"
-									class="full-width datepicker"
-									:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : 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-md-3 col-sm-12"
-							menu-class-name="modalfix"
-							v-model="formData.endLeaveDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
-							:readonly="!edit"
-						>
-							<template #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									hide-bottom-space
-									:readonly="!edit"
-									class="full-width datepicker"
-									:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
-									:label="`${'ลาถึงวันที่'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-						<q-input
-							class="col-md-2 col-sm-12"
-							dense
-							outlined
-							type="number"
-							v-model="formData.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-						/>
-
-						<q-input
-							class="col-3"
-							dense
-							outlined
-							v-model="formData.leaveContactTel"
-							mask="(###)-###-####"
-							unmasked-value
-							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
-						/>
-
-						<q-input
-							class="col-md-9 col-sm-12"
-							dense
-							outlined
-							v-model="formData.leaveContactLocation"
-							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
-						/>
-
-						<q-input
-							type="textarea"
-							class="col-md-12 col-sm-12"
-							dense
-							outlined
-							v-model="formData.leaveDetail"
-							label="รายละเอียด"
-							:readonly="!edit"
-							:rules="[val => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-						/>
-
-						<q-file v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-6">
-							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
-							</template>
-						</q-file>
-
-						<div class="col-12 row" v-if="!edit">
-							<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-								<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+							<div class="col-md-4 col-sm-12">
+								<q-radio v-model="halfDay" val="day" label="ลาทั้งวัน" />
+								<q-radio v-model="halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" />
+								<q-radio v-model="halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" />
 							</div>
-							<q-card bordered flat class="full-width">
-								<q-list separator>
-									<q-item v-for="file in formData.file" :key="file.key" class="q-my-xs">
-										<q-item-section>
-											<q-item-label class="full-width ellipsis">
-												{{ file.fileName }}
-											</q-item-label>
 
-											<q-item-label caption> </q-item-label>
-										</q-item-section>
-									</q-item>
-								</q-list>
-							</q-card>
+							<datepicker
+								class="col-md-3 col-sm-12"
+								menu-class-name="modalfix"
+								v-model="formData.startLeaveDate"
+								:locale="'th'"
+								autoApply
+								borderless
+								:enableTimePicker="false"
+								week-start="0"
+								:readonly="!edit"
+							>
+								<template #year="{ year }">
+									{{ year + 543 }}
+								</template>
+								<template #year-overlay-value="{ value }">
+									{{ parseInt(value + 543) }}
+								</template>
+								<template #trigger>
+									<q-input
+										outlined
+										dense
+										ref="startLeaveDateNoRef"
+										for="startLeaveDateNoRef"
+										hide-bottom-space
+										:readonly="!edit"
+										class="full-width datepicker"
+										:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : 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-md-3 col-sm-12"
+								menu-class-name="modalfix"
+								v-model="formData.endLeaveDate"
+								:locale="'th'"
+								autoApply
+								borderless
+								:enableTimePicker="false"
+								week-start="0"
+								:readonly="!edit"
+							>
+								<template #year="{ year }">
+									{{ year + 543 }}
+								</template>
+								<template #year-overlay-value="{ value }">
+									{{ parseInt(value + 543) }}
+								</template>
+								<template #trigger>
+									<q-input
+										outlined
+										dense
+										ref="endLeaveDateRef"
+										for="endLeaveDateRef"
+										hide-bottom-space
+										:readonly="!edit"
+										class="full-width datepicker"
+										:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
+										:label="`${'ลาถึงวันที่'}`"
+										:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+									>
+										<template v-slot:prepend>
+											<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+										</template>
+									</q-input>
+								</template>
+							</datepicker>
+							<q-input
+								class="col-md-2 col-sm-12"
+								dense
+								outlined
+								ref="leaveTotalRef"
+								for="leaveTotalRef"
+								type="number"
+								v-model="formData.leaveTotal"
+								label="จำนวนวันที่ลา"
+								readonly
+								:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+							/>
+
+							<q-input
+								class="col-3"
+								dense
+								outlined
+								ref="leaveContactTelRef"
+								for="leaveContactTelRef"
+								v-model="formData.leaveContactTel"
+								mask="(###)-###-####"
+								unmasked-value
+								label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+							/>
+
+							<q-input
+								class="col-md-9 col-sm-12"
+								dense
+								outlined
+								ref="leaveContactLocationRef"
+								for="leaveContactLocationRef"
+								v-model="formData.leaveContactLocation"
+								label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+							/>
+
+							<q-input
+								type="textarea"
+								class="col-md-12 col-sm-12"
+								dense
+								outlined
+								ref="leaveDetailRef"
+								for="leaveDetailRef"
+								v-model="formData.leaveDetail"
+								label="รายละเอียด"
+								:readonly="!edit"
+							/>
+
+							<q-file v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-6">
+								<template v-slot:prepend>
+									<q-icon name="attach_file" color="primary" />
+								</template>
+							</q-file>
+
+							<div class="col-12 row" v-if="!edit">
+								<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+									<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+								</div>
+								<q-card bordered flat class="full-width">
+									<q-list separator>
+										<q-item v-for="(file, index) in formData.file" :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>
-					</div>
-				</q-card>
+					</q-card>
+				</div>
 			</div>
 		</div>
-	</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
index 963cc5e..8a87e37 100644
--- a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
@@ -1,18 +1,104 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref, reactive, watch } from "vue"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
+import { useCounterMixin } from "@/stores/mixin"
 
-const edit = ref<boolean>(false)
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+const edit = ref<boolean>(true)
+const halfDay = ref<string>("day")
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+})
+// ข้อมูลทั้งก้อน form
+const formData = reactive<FormData>({
+	leaveNo: "",
+	wifeName: "",
+	brithDate: null,
+	startLeaveDate: null,
+	endLeaveDate: null,
+	contractTel: "",
+	leaveTotal: "",
+	leaveContactTel: "",
+	leaveContactLocation: "",
+	leaveDetail: "",
+	file: [],
+})
+
+const leaveNoRef = ref<object | null>(null)
+const wifeNameRef = ref<object | null>(null)
+const brithDateRef = ref<object | null>(null)
+const startLeaveDateRef = ref<object | null>(null)
+const endLeaveDateRef = ref<object | null>(null)
+const contractTelRef = ref<object | null>(null)
+const leaveTotalRef = ref<object | null>(null)
+const leaveContactTelRef = ref<object | null>(null)
+const leaveContactLocationRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
+const fileRef = ref<object | null>(null)
+
+const FormRef: FormRef = {
+	leaveNo: leaveNoRef,
+	wifeName: wifeNameRef,
+	brithDate: brithDateRef,
+	startLeaveDate: startLeaveDateRef,
+	endLeaveDate: endLeaveDateRef,
+	contractTel: contractTelRef,
+	leaveTotal: leaveTotalRef,
+	leaveContactTel: leaveContactTelRef,
+	leaveContactLocation: leaveContactLocationRef,
+	leaveDetail: leaveDetailRef,
+	file: fileRef,
+}
+
+watch(props.data, async () => {
+	// console.log("data==>", props.data)
+	formData.leaveNo = props.data.leaveNo
+	formData.wifeName = props.data.wifeName
+	formData.brithDate = props.data.brithDate
+	formData.startLeaveDate = props.data.startLeaveDate
+	formData.endLeaveDate = props.data.endLeaveDate
+	formData.contractTel = props.data.contractTel
+	formData.leaveTotal = props.data.leaveTotal
+	formData.leaveContactTel = props.data.leaveContactTel
+	formData.leaveDetail = props.data.leaveDetail
+	formData.file = props.data.file
+})
+const fileDocDataUpload = ref<File[]>([])
+
+const fileUploadDoc = async (files: any) => {
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
+
+function onValidate() {
+	const hasError = []
+	for (const key in FormRef) {
+		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+			const property = FormRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		props.onSubmit()
+	}
+}
 </script>
 
 <template>
-  <div>
-    ลาไปช่วยเหลือภริยาที่คลอดบุตร
+	<form @submit.prevent.stop="onValidate">
+		<!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร
     <ul>
       <li>เขียนที่</li>
       <li>ชื่อภรรยา</li>
@@ -27,6 +113,224 @@ const props = defineProps({
     </ul>
     <p>
       *หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
-    </p>
-  </div>
+    </p> -->
+		<div class="col-12 row q-col-gutter-md q-pa-md">
+			<div class="col-xs-12 col-sm-12">
+				<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"
+							ref="leaveNoRef"
+							for="leaveNoRef"
+							dense
+							outlined
+							v-model="formData.leaveNo"
+							label="เขียนที่"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'เขียนที่'}`]"
+						/>
+
+						<div class="col-md-3 col-sm-12">
+							<q-input
+								class="col-12 col-sm-12"
+								ref="leaveNoRef"
+								for="leaveNoRef"
+								dense
+								outlined
+								v-model="formData.wifeName"
+								label="ชื่อภรรยา"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
+							/>
+						</div>
+
+						<datepicker
+							class="col-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.brithDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+							:readonly="!edit"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									ref="startLeaveDateNoRef"
+									for="startLeaveDateNoRef"
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.brithDate != null ? date2Thai(formData.brithDate) : 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-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.startLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+							:readonly="!edit"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									ref="startLeaveDateNoRef"
+									for="startLeaveDateNoRef"
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : 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-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.endLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+							:readonly="!edit"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									ref="endLeaveDateRef"
+									for="endLeaveDateRef"
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
+									:label="`${'ลาถึงวันที่'}`"
+									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
+						<q-input
+							class="col-md-3 col-sm-12"
+							dense
+							outlined
+							ref="leaveTotalRef"
+							for="leaveTotalRef"
+							type="number"
+							v-model="formData.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+						/>
+
+						<q-input
+							class="col-9"
+							dense
+							outlined
+							ref="leaveContactTelRef"
+							for="leaveContactTelRef"
+							v-model="formData.leaveContactTel"
+							mask="(###)-###-####"
+							unmasked-value
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
+
+						<q-input
+							class="col-md-12 col-sm-12"
+							dense
+							outlined
+							ref="leaveContactLocationRef"
+							for="leaveContactLocationRef"
+							v-model="formData.leaveContactLocation"
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+						/>
+
+						<q-input
+							type="textarea"
+							class="col-md-12 col-sm-12"
+							dense
+							outlined
+							ref="leaveDetailRef"
+							for="leaveDetailRef"
+							v-model="formData.leaveDetail"
+							label="รายละเอียด"
+							:readonly="!edit"
+						/>
+
+						<q-file v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-6">
+							<template v-slot:prepend>
+								<q-icon name="attach_file" color="primary" />
+							</template>
+						</q-file>
+
+						<div class="col-12 row" v-if="!edit">
+							<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+								<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+							</div>
+							<q-card bordered flat class="full-width">
+								<q-list separator>
+									<q-item v-for="(file, index) in formData.file" :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>
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
index cb40641..88b3860 100644
--- a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
@@ -1,29 +1,301 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref, reactive, watch } from "vue"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
+import { useCounterMixin } from "@/stores/mixin"
 
-const edit = ref<boolean>(false)
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+const edit = ref<boolean>(true)
+const halfDay = ref<string>("day")
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+})
+// ข้อมูลทั้งก้อน form
+const formData = reactive<FormData>({
+	leaveNo: "",
+	lastYearVacation: "",
+	currentVacation: "",
+	startLeaveDate: null,
+	endLeaveDate: null,
+	contractTel: "",
+	leaveTotal: "",
+	leaveContactTel: "",
+	leaveContactLocation: "",
+	leaveDetail: "",
+	file: [],
+})
+
+const leaveNoRef = ref<object | null>(null)
+const lastYearVacationRef = ref<object | null>(null)
+const currentVacationRef = ref<object | null>(null)
+const startLeaveDateRef = ref<object | null>(null)
+const endLeaveDateRef = ref<object | null>(null)
+const contractTelRef = ref<object | null>(null)
+const leaveTotalRef = ref<object | null>(null)
+const leaveContactTelRef = ref<object | null>(null)
+const leaveContactLocationRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
+const fileRef = ref<object | null>(null)
+
+const FormRef: FormRef = {
+	leaveNo: leaveNoRef,
+	lastYearVacation: lastYearVacationRef,
+	currentVacation: currentVacationRef,
+	startLeaveDate: startLeaveDateRef,
+	endLeaveDate: endLeaveDateRef,
+	contractTel: contractTelRef,
+	leaveTotal: leaveTotalRef,
+	leaveContactTel: leaveContactTelRef,
+	leaveContactLocation: leaveContactLocationRef,
+	leaveDetail: leaveDetailRef,
+	file: fileRef,
+}
+
+watch(props.data, async () => {
+	// console.log("data==>", props.data)
+	formData.leaveNo = props.data.leaveNo
+	formData.lastYearVacation = props.data.lastYearVacation
+	formData.currentVacation = props.data.currentVacation
+	formData.startLeaveDate = props.data.startLeaveDate
+	formData.endLeaveDate = props.data.endLeaveDate
+	formData.contractTel = props.data.contractTel
+	formData.leaveTotal = props.data.leaveTotal
+	formData.leaveContactTel = props.data.leaveContactTel
+	formData.leaveDetail = props.data.leaveDetail
+	formData.file = props.data.file
+})
+const fileDocDataUpload = ref<File[]>([])
+
+const fileUploadDoc = async (files: any) => {
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
+
+function onValidate() {
+	const hasError = []
+	for (const key in FormRef) {
+		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+			const property = FormRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		props.onSubmit()
+	}
+}
 </script>
 
 <template>
-  <div>
-    ลาพักผ่อน
-    <ul>
-      <li>จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา (Auto)</li>
-      <li>จำนวนวันลาพักผ่อนประจำปีปัจจุบัน (Auto)</li>
-      <li>ลาตั้งแต่วันที่</li>
-      <li>ลาถึงวันที่</li>
-      <li>จำนวนวันที่ลา (frontend คำนวนให้ Auto)</li>
-      <li>ตัวเลือกให้ลาครึ่งวันเช้า หรือครึ่งวันบ่ายได้</li>
-      <li>ที่อยู่ที่ติดต่อได้ระหว่างลา (textarea)</li>
-      <li>หมายเลขโทรศัพท์</li>
-      <li>รายละเอียด (ไม่บังคับกรอก)</li>
-      <li>เอกสารประกอบ</li>
-    </ul>
-  </div>
+	<form @submit.prevent.stop="onValidate">
+		<!-- <div>
+		ลาพักผ่อน
+		<ul>
+			<li>เขียนที่</li>
+			<li>จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา (Auto)</li>
+			<li>จำนวนวันลาพักผ่อนประจำปีปัจจุบัน (Auto)</li>
+			<li>ลาตั้งแต่วันที่</li>
+			<li>ลาถึงวันที่</li>
+			<li>จำนวนวันที่ลา (frontend คำนวนให้ Auto)</li>
+			<li>ตัวเลือกให้ลาครึ่งวันเช้า หรือครึ่งวันบ่ายได้</li>
+			<li>ที่อยู่ที่ติดต่อได้ระหว่างลา (textarea)</li>
+			<li>หมายเลขโทรศัพท์</li>
+			<li>รายละเอียด (ไม่บังคับกรอก)</li>
+			<li>เอกสารประกอบ</li>
+		</ul>
+	</div> -->
+		<div class="col-12 row q-col-gutter-md q-pa-md">
+			<div class="col-xs-12 col-sm-12">
+				<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"
+							ref="leaveNoRef"
+							for="leaveNoRef"
+							dense
+							outlined
+							v-model="formData.leaveNo"
+							label="เขียนที่"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'เขียนที่'}`]"
+						/>
+
+						<div class="col-md-6 col-sm-12">
+							<q-input
+								class="col-12 col-sm-12"
+								ref="leaveNoRef"
+								for="leaveNoRef"
+								dense
+								readonly
+								outlined
+								v-model="formData.lastYearVacation"
+								label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
+							/>
+						</div>
+						<div class="col-md-6 col-sm-12">
+							<q-input class="col-12 col-sm-12" ref="leaveNoRef" for="leaveNoRef" dense readonly outlined v-model="formData.lastYearVacation" label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน" />
+						</div>
+
+						<datepicker
+							class="col-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.startLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+							:readonly="!edit"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									ref="startLeaveDateNoRef"
+									for="startLeaveDateNoRef"
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : 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-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.endLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+							:readonly="!edit"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									ref="endLeaveDateRef"
+									for="endLeaveDateRef"
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
+									:label="`${'ลาถึงวันที่'}`"
+									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
+						<q-input
+							class="col-md-3 col-sm-12"
+							dense
+							outlined
+							ref="leaveTotalRef"
+							for="leaveTotalRef"
+							type="number"
+							v-model="formData.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+						/>
+
+						<q-input
+							class="col-3"
+							dense
+							outlined
+							ref="leaveContactTelRef"
+							for="leaveContactTelRef"
+							v-model="formData.leaveContactTel"
+							mask="(###)-###-####"
+							unmasked-value
+							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+						/>
+
+						<q-input
+							class="col-md-12 col-sm-12"
+							dense
+							outlined
+							ref="leaveContactLocationRef"
+							for="leaveContactLocationRef"
+							v-model="formData.leaveContactLocation"
+							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
+						/>
+
+						<q-input
+							type="textarea"
+							class="col-md-12 col-sm-12"
+							dense
+							outlined
+							ref="leaveDetailRef"
+							for="leaveDetailRef"
+							v-model="formData.leaveDetail"
+							label="รายละเอียด"
+							:readonly="!edit"
+						/>
+
+						<q-file v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-6">
+							<template v-slot:prepend>
+								<q-icon name="attach_file" color="primary" />
+							</template>
+						</q-file>
+
+						<div class="col-12 row" v-if="!edit">
+							<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+								<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+							</div>
+							<q-card bordered flat class="full-width">
+								<q-list separator>
+									<q-item v-for="(file, index) in formData.file" :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>
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/interface/request/HelpWifeForm.ts b/src/modules/05_leave/interface/request/HelpWifeForm.ts
new file mode 100644
index 0000000..c0f9282
--- /dev/null
+++ b/src/modules/05_leave/interface/request/HelpWifeForm.ts
@@ -0,0 +1,31 @@
+interface FormData {
+	leaveNo: string //เขียนที่***
+	wifeName: string //ชื่อภรรยา
+	brithDate: Date | null //วันที่คลอด
+	startLeaveDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: Date | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: string //จำนวนวันลา
+	contractTel: string //หมายเลขโทรศัพท์ที่ติดต่อได้
+	leaveContactTel: string //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: string //รายละเอียดการลา
+	leaveContactLocation: string //สถานที่ติดต่อขณะลา
+	file: File[] | null //เอกสารปะกอบ
+	[key: string]: any
+}
+
+interface FormRef {
+	leaveNo: object | null //เขียนที่***
+	startLeaveDate: object | null //*วัน เดือน ปีเริ่มต้นลา
+	wifeName: object | null //ชื่อภรรยา
+	brithDate: object | null //วันที่คลอด
+	endLeaveDate: object | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: object | null //จำนวนวันลา
+	contractTel: object | null //หมายเลขโทรศัพท์ที่ติดต่อได้
+	leaveContactTel: object | null //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: object | null //รายละเอียดการลา
+	leaveContactLocation: object | null //สถานที่ติดต่อขณะลา
+	file: object | null //เอกสารปะกอบ
+	[key: string]: any
+}
+
+export type { FormData, FormRef }
diff --git a/src/modules/05_leave/interface/request/SickForm.ts b/src/modules/05_leave/interface/request/SickForm.ts
index 02783eb..56b9b51 100644
--- a/src/modules/05_leave/interface/request/SickForm.ts
+++ b/src/modules/05_leave/interface/request/SickForm.ts
@@ -7,8 +7,21 @@ interface FormData {
 	leaveContactTel: string //หมายเลขที่ติดต่อขณะลา
 	leaveDetail: string //รายละเอียดการลา
 	leaveContactLocation: string //สถานที่ติดต่อขณะลา
-	file: File | null //เอกสารปะกอบ
+	file: File[] | null //เอกสารปะกอบ
 	[key: string]: any
 }
 
-export type { FormData }
+interface FormRef {
+	leaveNo: object | null //เขียนที่***
+	startLeaveDate: object | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: object | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: object | null //จำนวนวันลา
+	contractTel: object | null //หมายเลขโทรศัพท์ที่ติดต่อได้
+	leaveContactTel: object | null //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: object | null //รายละเอียดการลา
+	leaveContactLocation: object | null //สถานที่ติดต่อขณะลา
+	file: object | null //เอกสารปะกอบ
+	[key: string]: any
+}
+
+export type { FormData, FormRef }
diff --git a/src/modules/05_leave/interface/request/VacationForm.ts b/src/modules/05_leave/interface/request/VacationForm.ts
new file mode 100644
index 0000000..119d4ca
--- /dev/null
+++ b/src/modules/05_leave/interface/request/VacationForm.ts
@@ -0,0 +1,31 @@
+interface FormData {
+	leaveNo: string //เขียนที่***
+	lastYearVacation: string //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา
+	currentVacation: string //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน
+	startLeaveDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: Date | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: string //จำนวนวันลา
+	contractTel: string //หมายเลขโทรศัพท์ที่ติดต่อได้
+	leaveContactTel: string //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: string //รายละเอียดการลา
+	leaveContactLocation: string //สถานที่ติดต่อขณะลา
+	file: File[] | null //เอกสารปะกอบ
+	[key: string]: any
+}
+
+interface FormRef {
+	leaveNo: object | null //เขียนที่***
+	startLeaveDate: object | null //*วัน เดือน ปีเริ่มต้นลา
+	lastYearVacation: object | null //ชื่อภรรยา
+	currentVacation: object | null //วันที่คลอด
+	endLeaveDate: object | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: object | null //จำนวนวันลา
+	contractTel: object | null //หมายเลขโทรศัพท์ที่ติดต่อได้
+	leaveContactTel: object | null //หมายเลขที่ติดต่อขณะลา
+	leaveDetail: object | null //รายละเอียดการลา
+	leaveContactLocation: object | null //สถานที่ติดต่อขณะลา
+	file: object | null //เอกสารปะกอบ
+	[key: string]: any
+}
+
+export type { FormData, FormRef }
diff --git a/src/modules/05_leave/views/SampleForm.vue b/src/modules/05_leave/views/SampleForm.vue
index 5950011..c1bf7d2 100644
--- a/src/modules/05_leave/views/SampleForm.vue
+++ b/src/modules/05_leave/views/SampleForm.vue
@@ -1,81 +1,60 @@
 <script setup lang="ts">
-import { reactive, ref, watch } from "vue";
+import { reactive, ref, watch } from "vue"
 
-import SickForm from "@/modules/05_leave/componenst/Forms/01_SickForm.vue";
-import HelpWifeBirthForm from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue";
+import SickForm from "@/modules/05_leave/componenst/Forms/01_SickForm.vue"
+import HelpWifeBirthForm from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue"
+import VacationForm from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue"
 
-const type = ref<number>(0);
+const type = ref<number>(0)
 const typeOption = reactive([
-  { id: 0, name: "" },
-  { id: 1, name: "ลาป่วย" },
-  { id: 2, name: "ลากิจ" },
-  { id: 3, name: "ลาคลอด" },
-  { id: 4, name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
-]);
+	{ id: 0, name: "" },
+	{ id: 1, name: "ลาป่วย" },
+	{ id: 2, name: "ลากิจ" },
+	{ id: 3, name: "ลาคลอด" },
+	{ id: 4, name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
+	{ id: 5, name: "ลาพักผ่อน" },
+])
 
 async function onSubmit() {
-
+	console.log("testOnsub")
 }
 
 watch(
-  () => type.value,
-  () => {
-    // save store
-    console.log("ประเภทการลา===>", type.value);
-  }
-);
+	() => type.value,
+	() => {
+		// save store
+		console.log("ประเภทการลา===>", type.value)
+	}
+)
 </script>
 
 <template>
-  <div class="col-12 row justify-center">
-    <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
-        <q-btn
-          icon="mdi-arrow-left"
-          unelevated
-          round
-          dense
-          flat
-          color="primary"
-          class="q-mr-sm"
-        />
-        <div>ยื่นใบลา</div>
-      </div>
+	<div class="col-12 row justify-center">
+		<div class="col-xs-12 col-sm-12 col-md-11">
+			<div class="toptitle text-white col-12 row items-center">
+				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
+				<div>ยื่นใบลา</div>
+			</div>
 
-      <q-card bordered>
-        <form>
-          <div class="col-12 row q-col-gutter-md q-pa-md">
-            <div class="col-xs-12 col-sm-12">
-              <q-select
-                filled
-                v-model="type"
-                :options="typeOption"
-                label="ประเภทการลา"
-                option-value="id"
-                option-label="name"
-                map-options
-                emit-value
-              />
+			<q-card bordered>
+				<form>
+					<div class="col-12 row q-col-gutter-md q-pa-md">
+						<div class="col-xs-12 col-sm-12">
+							<q-select filled v-model="type" :options="typeOption" label="ประเภทการลา" option-value="id" option-label="name" map-options emit-value />
 
-              <SickForm v-if="type == 1 || type == 2 || type == 3" />
-              <HelpWifeBirthForm v-if="type == 4" />
-            </div>
-          </div>
+							<SickForm v-if="type == 1 || type == 2 || type == 3" />
+							<HelpWifeBirthForm v-if="type == 4" />
+							<VacationForm v-if="type == 5" />
+						</div>
+					</div>
 
-          <q-separator />
-          <div class="row col-12 q-pa-md">
-            <q-space />
-            <q-btn
-              id="submitForm"
-              unelevated
-              dense
-              class="q-px-md items-center btnBlue"
-              label="บันทึก"
-              @click="onSubmit"
-            />
-          </div>
-        </form>
-      </q-card>
-    </div>
-  </div>
+					<q-separator />
+					<div class="row col-12 q-pa-md">
+						<q-space />
+						<q-btn id="submitForm" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" @click="onSubmit" />
+					</div>
+				</form>
+			</q-card>
+		</div>
+	</div>
 </template>