From 809216c6d8c7dcc7593576b143feacd3c41946a0 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Tue, 7 Nov 2023 19:46:08 +0700
Subject: [PATCH 1/8] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20modal=20sickform?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/componenst/Forms/01_SickForm.vue | 390 +++++++++---------
 1 file changed, 190 insertions(+), 200 deletions(-)

diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
index 382a2d6..ed5ecad 100644
--- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
@@ -1,20 +1,54 @@
 <script setup lang="ts">
-import { ref } from "vue";
-
-const edit = ref<boolean>(true);
-const halfDay = ref<string>("day");
+import { ref, reactive, watch } from "vue"
+import type { FormData } from "../../interface/request/SickForm"
+import { useCounterMixin } from "@/stores/mixin"
 
+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: Array,
+		default: null,
+	},
+})
+// ข้อมูลทั้งก้อน form
+const formData = reactive<FormData>({
+	leaveNo: "",
+	startLeaveDate: null,
+	endLeaveDate: null,
+	contractTel: "",
+	leaveTotal: "",
+	leaveContactTel: "",
+	leaveContactLocation: "",
+	leaveDetail: "",
+	file: null,
+})
+
+watch(props.data, async () => {
+	// console.log("data==>", props.data)
+	formData.leaveNo = props.data.leaveNo
+	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)
+	})
+}
 </script>
 
 <template>
-  <div>
-    <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
+	<div>
+		<!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
     <ul>
       <li>เขียนที่</li>
       <li>ลาตั้งแต่วันที่</li>
@@ -32,202 +66,158 @@ const props = defineProps({
       (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
     </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 || `${'เขียนที่'}`]" />
 
-        <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="Writeat"
-              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>
 
-            <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="dateLeaveStart"
-              :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="
-                    dateLeaveStart != null ? date2Thai(dateLeaveStart) : 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 || `${'กรุณากรอกจำนวนวัน'}`]"
+						/>
 
-            <datepicker
-              class="col-md-3 col-sm-12"
-              menu-class-name="modalfix"
-              v-model="dateLeaveEnd"
-              :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="
-                    dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : 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="dateTotal"
-              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-3"
-              dense
-              outlined
-              v-model="tel"
-              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
-              class="col-md-9 col-sm-12"
-              dense
-              outlined
-              v-model="locationAbsence"
-              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-input
-              type="textarea"
-              class="col-md-12 col-sm-12"
-              dense
-              outlined
-              v-model="detail"
-              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>
 
-            <q-file
-              v-model="files"
-              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 in files" :key="file.key" class="q-my-xs">
-                    <q-item-section>
-                      <q-item-label class="full-width ellipsis">
-                        {{ file.fileName }}
-                      </q-item-label>
-
-                      <q-item-label caption> </q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-card>
-            </div>
-          </div>
-        </q-card>
-      </div>
+						<div class="col-12 row" v-if="!edit">
+							<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+								<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+							</div>
+							<q-card bordered flat class="full-width">
+								<q-list separator>
+									<q-item v-for="file in 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>
+						</div>
+					</div>
+				</q-card>
+			</div>
+		</div>
+	</div>
 </template>

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 2/8] =?UTF-8?q?=E0=B8=AD=E0=B8=B1=E0=B8=9E=E0=B9=80?=
 =?UTF-8?q?=E0=B8=94=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>

From 89810f47badcfd93554539ca6cc2eb5ea58747d5 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Wed, 8 Nov 2023 15:14:36 +0700
Subject: [PATCH 3/8] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20followSpouseForm?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/componenst/Forms/01_SickForm.vue |   2 +-
 .../componenst/Forms/12_FollowSpouseForm.vue  | 350 ++++++++++++++++--
 .../interface/request/FollowSpouseForm.ts     |  33 ++
 src/modules/05_leave/views/SampleForm.vue     |   4 +-
 4 files changed, 362 insertions(+), 27 deletions(-)
 create mode 100644 src/modules/05_leave/interface/request/FollowSpouseForm.ts

diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
index fdbc713..e6f7c68 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, FormRef } from "../../interface/request/SickForm"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
 import { useCounterMixin } from "@/stores/mixin"
 
 const mixin = useCounterMixin()
diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index 4cb78cf..ab92d65 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@@ -1,32 +1,332 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref, reactive, watch } from "vue"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
+import { useCounterMixin } from "@/stores/mixin"
 
-const edit = ref<boolean>(false)
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+const edit = ref<boolean>(true)
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+})
+// ข้อมูลทั้งก้อน form
+const formData = reactive<FormData>({
+	leaveNo: "",
+	startLeaveDate: null,
+	endLeaveDate: null,
+	leaveTotal: "", //จำนวนวันลา
+	salary: "", //เงินเดือนปัจจุบัน
+	spouseName: "", //ชื่อคู่สมรส
+	spousePosition: "", //ตำแหน่งคู่สมรส
+	spouseLevel: "", //ระดับคู่สมรส
+	dutyCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
+	followHistory: "", //ประวัติการลาติดตามคู่สมรส
+	leaveDetail: "", //รายละเอียดการลา
+	file: [], //เอกสารปะกอบ
+})
+
+const leaveNoRef = ref<object | null>(null)
+const startLeaveDateRef = ref<object | null>(null)
+const endLeaveDateRef = ref<object | null>(null)
+const salaryRef = ref<object | null>(null)
+const leaveTotalRef = ref<object | null>(null)
+const spouseNameRef = ref<object | null>(null)
+const leaveContactLocationRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
+const spousePositionRef = ref<object | null>(null)
+const spouseLevelRef = ref<object | null>(null)
+const dutyCountryRef = ref<object | null>(null)
+const followHistoryRef = ref<object | null>(null)
+const fileRef = ref<object | null>(null)
+
+const FormRef: FormRef = {
+	leaveNo: leaveNoRef, //เขียนที่***
+	startLeaveDate: startLeaveDateRef, //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: endLeaveDateRef, //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: leaveTotalRef, //จำนวนวันลา
+	salary: salaryRef, //เงินเดือนปัจจุบัน
+	spouseName: spouseNameRef, //หมายเลขที่ติดต่อขณะลา
+	spousePosition: spousePositionRef, //ตำแหน่งคู่สมรส
+	spouseLevel: spouseLevelRef, //ระดับคู่สมรส
+	dutyCountry: dutyCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
+	followHistory: followHistoryRef, //ประวัติการลาติดตามคู่สมรส
+	leaveDetail: leaveDetailRef, //รายละเอียดการลา
+	leaveContactLocation: leaveContactLocationRef, //สถานที่ติดต่อขณะลา
+	file: fileRef,
+}
+
+watch(props.data, async () => {
+	// console.log("data==>", props.data)
+	formData.leaveNo = props.data.leaveNo
+	formData.startLeaveDate = props.data.startLeaveDate
+	formData.endLeaveDate = props.data.endLeaveDate
+	formData.leaveTotal = props.data.leaveTotal
+	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>ลาตั้งแต่วันที่</li>
-      <li>ลาถึงวันที่</li>
-      <li>มีกำหนด กี่ปี กี่เดือน กี่วัน (คำนวนจากทาง frontend Auto)</li>
-      <li>วันเดือนปีเกิด (Auto)</li>
-      <li>วันที่เข้ารับราชการ (Auto)</li>
-      <li>เงินเดือนปัจจุบัน (Auto)</li>
-      <li>เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ</li>
-      <li>กรณีลาไปศึกษาต่อ มีฟิลด์เพิ่มคือ ศึกษาวิชา, ขั้นปริญญา, ชื่อสถานศึกษา, ประเทศ, ด้วยทุน</li>
-      <li>กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน มีฟิลด์เพิ่มคือ ด้าน/หลักสูตร, ณ สถานที่, ประเทศ, ด้วยทุน</li>
-      <li>ที่อยู่ที่ติดต่อได้ระหว่างลา</li>
-      <li>หมายเลขโทรศัพท์</li>
-      <li>รายละเอียด (ไม่บังคับกรอก)</li>
-      <li>เอกสารประกอบ</li>
-    </ul>
-  </div>
+	<!-- <div>
+		ลาติดตามคู่สมรส
+		<ul>
+			<li>เขียนที่</li>
+			<li>ลาตั้งแต่วันที่</li>
+			<li>ลาถึงวันที่</li>
+			<li>มีกำหนด กี่ปี กี่เดือน กี่วัน (คำนวนจากทาง frontend Auto)</li>
+			<li>เงินเดือนปัจจุบัน (Auto)</li>
+			<li>เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน) ใช้ฟังก์ชั่นแปลงเลขเป็นข้อความ</li>
+			<li>ชื่อคู่สมรส</li>
+			<li>ตำแหน่งคู่สมรส</li>
+			<li>ระดับคู่สมรส</li>
+			<li>ไปปฏิบัติราชการ ณ ประเทศ</li>
+			<li>ระดับคู่สมรส</li>
+			<li>
+				ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย ประกอบด้วย ประเทศ, เป็นเวลา กี่ปี กี่เดือน กี่วัน, ตั้งแต่วันที่, ถึงวันที่ (ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน
+				กี่วัน ข้อมูลมาจาก API (Auto))
+			</li>
+			<li>รายละเอียด (ไม่บังคับกรอก)</li>
+			<li>เอกสารประกอบ</li>
+		</ul>
+	</div> -->
+	<form @submit.prevent.stop="onValidate">
+		<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-input class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formData.salary" label="เงินเดือนปัจจุบัน" readonly />
+						</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-2 col-sm-12"
+							dense
+							outlined
+							ref="leaveTotalRef"
+							for="leaveTotalRef"
+							type="number"
+							v-model="formData.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+						/>
+						<div class="col-md-3 col-sm-12">
+							<q-input
+								class="col-12 col-sm-12"
+								ref="spouseNameRef"
+								for="spouseNameRef"
+								dense
+								outlined
+								v-model="formData.spouseName"
+								label="ชื่อคู่สมรส"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
+							/>
+						</div>
+						<div class="col-md-3 col-sm-12">
+							<q-input
+								class="col-12 col-sm-12"
+								ref="spousePositionRef"
+								for="spousePositionRef"
+								dense
+								outlined
+								v-model="formData.spousePosition"
+								label="ตำแหน่งคู่สมรส"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
+							/>
+						</div>
+						<div class="col-md-3 col-sm-12">
+							<q-input
+								class="col-12 col-sm-12"
+								ref="spouseLevelRef"
+								for="spouseLevelRef"
+								dense
+								outlined
+								v-model="formData.spouseLevel"
+								label="ระดับคู่สมรส"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
+							/>
+						</div>
+						<div class="col-md-3 col-sm-12">
+							<q-input
+								class="col-12 col-sm-12"
+								ref="dutyCountryRef"
+								for="dutyCountryRef"
+								dense
+								outlined
+								v-model="formData.dutyCountry"
+								label="ไปปฏิบัติราชการ ณ ประเทศ"
+								:readonly="!edit"
+								:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
+							/>
+						</div>
+
+						<q-input
+							class="col-md-9 col-sm-12"
+							dense
+							outlined
+							ref="followHistoryRef"
+							for="followHistoryRef"
+							v-model="formData.followHistory"
+							label="ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย"
+							readonly
+						/>
+
+						<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/FollowSpouseForm.ts b/src/modules/05_leave/interface/request/FollowSpouseForm.ts
new file mode 100644
index 0000000..e66761a
--- /dev/null
+++ b/src/modules/05_leave/interface/request/FollowSpouseForm.ts
@@ -0,0 +1,33 @@
+interface FormData {
+	leaveNo: string //เขียนที่***
+	startLeaveDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: Date | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: string //จำนวนวันลา
+	salary: string //เงินเดือนปัจจุบัน
+	spouseName: string //ชื่อคู่สมรส
+	spousePosition: string //ตำแหน่งคู่สมรส
+	spouseLevel: string //ระดับคู่สมรส
+	dutyCountry: string //ไปปฏิบัติราชการ ณ ประเทศ
+	followHistory: string //ประวัติการลาติดตามคู่สมรส
+	leaveDetail: string //รายละเอียดการลา
+	file: File[] | null //เอกสารปะกอบ
+}
+
+interface FormRef {
+	leaveNo: object | null //เขียนที่***
+	startLeaveDate: object | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: object | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveTotal: object | null //จำนวนวันลา
+	salary: object | null //เงินเดือนปัจจุบัน
+	spouseName: object | null //หมายเลขที่ติดต่อขณะลา
+	spousePosition: object | null //ตำแหน่งคู่สมรส
+	spouseLevel: object | null //ระดับคู่สมรส
+	dutyCountry: object | null //ไปปฏิบัติราชการ ณ ประเทศ
+	followHistory: 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 c1bf7d2..02f56ba 100644
--- a/src/modules/05_leave/views/SampleForm.vue
+++ b/src/modules/05_leave/views/SampleForm.vue
@@ -4,7 +4,7 @@ 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 VacationForm from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue"
-
+import FollowSpouseForm from "@/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue"
 const type = ref<number>(0)
 const typeOption = reactive([
 	{ id: 0, name: "" },
@@ -13,6 +13,7 @@ const typeOption = reactive([
 	{ id: 3, name: "ลาคลอด" },
 	{ id: 4, name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
 	{ id: 5, name: "ลาพักผ่อน" },
+	{ id: 6, name: "ลาติดตามคู่สมรส" },
 ])
 
 async function onSubmit() {
@@ -45,6 +46,7 @@ watch(
 							<SickForm v-if="type == 1 || type == 2 || type == 3" />
 							<HelpWifeBirthForm v-if="type == 4" />
 							<VacationForm v-if="type == 5" />
+							<FollowSpouseForm v-if="type == 6" />
 						</div>
 					</div>
 

From 906c0ba3ce92aea88ad59831e6561d5378fd1ab4 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Wed, 8 Nov 2023 17:36:46 +0700
Subject: [PATCH 4/8] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=E0=B8=94=E0=B8=95=E0=B8=B2=E0=B8=A1=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B9=E0=B9=88=E0=B8=AA=E0=B8=A1=E0=B8=A3=E0=B8=AA=E0=B8=A2?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../componenst/Forms/12_FollowSpouseForm.vue  | 102 +++++++++++++++---
 .../interface/request/FollowSpouseForm.ts     |  10 +-
 2 files changed, 97 insertions(+), 15 deletions(-)

diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index ab92d65..aca653f 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@@ -27,7 +27,10 @@ const formData = reactive<FormData>({
 	spousePosition: "", //ตำแหน่งคู่สมรส
 	spouseLevel: "", //ระดับคู่สมรส
 	dutyCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
-	followHistory: "", //ประวัติการลาติดตามคู่สมรส
+	followHistoryCountry: "", //ประวัติการลาติดตามคู่สมรส
+	followHistoryTime: "",
+	followHistoryStart: null,
+	followHistoryEnd: null,
 	leaveDetail: "", //รายละเอียดการลา
 	file: [], //เอกสารปะกอบ
 })
@@ -43,7 +46,10 @@ const leaveDetailRef = ref<object | null>(null)
 const spousePositionRef = ref<object | null>(null)
 const spouseLevelRef = ref<object | null>(null)
 const dutyCountryRef = ref<object | null>(null)
-const followHistoryRef = ref<object | null>(null)
+const followHistoryCountryRef = ref<object | null>(null)
+const followHistoryTimeRef = ref<object | null>(null)
+const followHistoryStartRef = ref<object | null>(null)
+const followHistoryEndRef = ref<object | null>(null)
 const fileRef = ref<object | null>(null)
 
 const FormRef: FormRef = {
@@ -56,7 +62,10 @@ const FormRef: FormRef = {
 	spousePosition: spousePositionRef, //ตำแหน่งคู่สมรส
 	spouseLevel: spouseLevelRef, //ระดับคู่สมรส
 	dutyCountry: dutyCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
-	followHistory: followHistoryRef, //ประวัติการลาติดตามคู่สมรส
+	followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
+	followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
+	followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
+	followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
 	leaveDetail: leaveDetailRef, //รายละเอียดการลา
 	leaveContactLocation: leaveContactLocationRef, //สถานที่ติดต่อขณะลา
 	file: fileRef,
@@ -277,17 +286,84 @@ function onValidate() {
 								:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
 							/>
 						</div>
+						<div class="col-12 row q-pa-sm q-col-gutter-sm">
+							<div class="col-md-12 col-sm-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
 
-						<q-input
-							class="col-md-9 col-sm-12"
-							dense
-							outlined
-							ref="followHistoryRef"
-							for="followHistoryRef"
-							v-model="formData.followHistory"
-							label="ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย"
-							readonly
-						/>
+							<q-input class="col-md-4 col-sm-12" dense outlined ref="followHistoryRef" for="followHistoryRef" v-model="formData.followHistoryCountry" label="ประเทศ" readonly />
+							<q-input class="col-md-4 col-sm-12" dense outlined ref="followHistoryRef" for="followHistoryRef" v-model="formData.followHistoryTime" label="เป็นเวลา" readonly />
+							<datepicker
+								class="col-md-2 col-sm-12"
+								menu-class-name="modalfix"
+								v-model="formData.followHistoryStart"
+								: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="followHistoryStartRef"
+										for="followHistoryStartRef"
+										hide-bottom-space
+										:readonly="!edit"
+										class="full-width datepicker"
+										:model-value="formData.followHistoryStart != null ? date2Thai(formData.followHistoryStart) : 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-2 col-sm-12"
+								menu-class-name="modalfix"
+								v-model="formData.followHistoryEnd"
+								: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="followHistoryEndRef"
+										for="followHistoryEndRef"
+										hide-bottom-space
+										:readonly="!edit"
+										class="full-width datepicker"
+										:model-value="formData.followHistoryEnd != null ? date2Thai(formData.followHistoryEnd) : 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>
 
 						<q-input
 							type="textarea"
diff --git a/src/modules/05_leave/interface/request/FollowSpouseForm.ts b/src/modules/05_leave/interface/request/FollowSpouseForm.ts
index e66761a..7da04b5 100644
--- a/src/modules/05_leave/interface/request/FollowSpouseForm.ts
+++ b/src/modules/05_leave/interface/request/FollowSpouseForm.ts
@@ -8,7 +8,10 @@ interface FormData {
 	spousePosition: string //ตำแหน่งคู่สมรส
 	spouseLevel: string //ระดับคู่สมรส
 	dutyCountry: string //ไปปฏิบัติราชการ ณ ประเทศ
-	followHistory: string //ประวัติการลาติดตามคู่สมรส
+	followHistoryCountry: string //ประวัติการลาติดตามคู่สมรสประเทศ
+	followHistoryTime: string //ประวัติการลาติดตามคู่สมรสประเทศ
+	followHistoryStart: Date | null //ประวัติการลาติดตามคู่สมรสประเทศ
+	followHistoryEnd: Date | null //ประวัติการลาติดตามคู่สมรสประเทศ
 	leaveDetail: string //รายละเอียดการลา
 	file: File[] | null //เอกสารปะกอบ
 }
@@ -23,7 +26,10 @@ interface FormRef {
 	spousePosition: object | null //ตำแหน่งคู่สมรส
 	spouseLevel: object | null //ระดับคู่สมรส
 	dutyCountry: object | null //ไปปฏิบัติราชการ ณ ประเทศ
-	followHistory: object | null //ประวัติการลาติดตามคู่สมรส
+	followHistoryCountry: object | null //ประวัติการลาติดตามคู่สมรสประเทศ
+	followHistoryTime: object | null //ประวัติการลาติดตามคู่สมรสประเทศ
+	followHistoryStart: object | null //ประวัติการลาติดตามคู่สมรสประเทศ
+	followHistoryEnd: object | null //ประวัติการลาติดตามคู่สมรสประเทศ
 	leaveDetail: object | null //รายละเอียดการลา
 	leaveContactLocation: object | null //สถานที่ติดต่อขณะลา
 	file: object | null //เอกสารปะกอบ

From 3373e91e0692f87da8f12fd3ff72f42ed7bb30ca Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Wed, 8 Nov 2023 20:46:18 +0700
Subject: [PATCH 5/8] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20=E0=B8=81=E0=B8=A3=E0=B8=AD=E0=B8=81=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/componenst/Forms/01_SickForm.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
index e6f7c68..ee082ab 100644
--- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
@@ -91,6 +91,8 @@ function onValidate() {
 <template>
 	<form @submit.prevent.stop="onValidate">
 		<div>
+			<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+			<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
 			<!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
     <ul>
       <li>เขียนที่</li>

From ef96dd30a5f50794096b5752f4d4eb77b44c7a67 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Wed, 8 Nov 2023 20:53:38 +0700
Subject: [PATCH 6/8] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=81=E0=B8=A3=E0=B8=AD=E0=B8=81=E0=B8=82=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/componenst/Forms/04_HelpWifeBirthForm.vue        | 2 ++
 src/modules/05_leave/componenst/Forms/05_VacationForm.vue     | 4 ++--
 src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue | 2 ++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
index 8a87e37..e0ab2ca 100644
--- a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
@@ -98,6 +98,8 @@ function onValidate() {
 
 <template>
 	<form @submit.prevent.stop="onValidate">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
 		<!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร
     <ul>
       <li>เขียนที่</li>
diff --git a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
index 2f0e47d..4b8fe57 100644
--- a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
@@ -97,9 +97,9 @@ function onValidate() {
 </script>
 
 <template>
-	<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-	<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
 	<form @submit.prevent.stop="onValidate">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
 		<!-- <div>
 		ลาพักผ่อน
 		<ul>
diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index aca653f..22d6e85 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@@ -129,6 +129,8 @@ function onValidate() {
 		</ul>
 	</div> -->
 	<form @submit.prevent.stop="onValidate">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</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">

From f5d71abaab063864b64d9db3a4e4234b872e76b4 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 9 Nov 2023 10:58:56 +0700
Subject: [PATCH 7/8] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20formattSalary?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/componenst/Forms/01_SickForm.vue  |  2 +-
 .../05_leave/componenst/Forms/04_HelpWifeBirthForm.vue |  2 +-
 .../05_leave/componenst/Forms/05_VacationForm.vue      |  2 +-
 .../05_leave/componenst/Forms/12_FollowSpouseForm.vue  | 10 +++++-----
 .../05_leave/interface/request/FollowSpouseForm.ts     |  2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
index ee082ab..8576621 100644
--- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
@@ -257,7 +257,7 @@ function onValidate() {
 								:readonly="!edit"
 							/>
 
-							<q-file v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-6">
+							<q-file v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
 								<template v-slot:prepend>
 									<q-icon name="attach_file" color="primary" />
 								</template>
diff --git a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
index e0ab2ca..3fec118 100644
--- a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
@@ -307,7 +307,7 @@ function onValidate() {
 							:readonly="!edit"
 						/>
 
-						<q-file v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-6">
+						<q-file v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
 							<template v-slot:prepend>
 								<q-icon name="attach_file" color="primary" />
 							</template>
diff --git a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
index 4b8fe57..e220a2a 100644
--- a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
@@ -272,7 +272,7 @@ function onValidate() {
 							:readonly="!edit"
 						/>
 
-						<q-file v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-6">
+						<q-file v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
 							<template v-slot:prepend>
 								<q-icon name="attach_file" color="primary" />
 							</template>
diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index 22d6e85..185f6f6 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@@ -4,7 +4,7 @@ import type { FormData, FormRef } from "@/modules/05_leave/interface/request/Fol
 import { useCounterMixin } from "@/stores/mixin"
 
 const mixin = useCounterMixin()
-const { date2Thai } = mixin
+const { date2Thai, arabicNumberToText } = mixin
 const edit = ref<boolean>(true)
 const props = defineProps({
 	data: {
@@ -22,7 +22,7 @@ const formData = reactive<FormData>({
 	startLeaveDate: null,
 	endLeaveDate: null,
 	leaveTotal: "", //จำนวนวันลา
-	salary: "", //เงินเดือนปัจจุบัน
+	salary: 0, //เงินเดือนปัจจุบัน
 	spouseName: "", //ชื่อคู่สมรส
 	spousePosition: "", //ตำแหน่งคู่สมรส
 	spouseLevel: "", //ระดับคู่สมรส
@@ -34,7 +34,7 @@ const formData = reactive<FormData>({
 	leaveDetail: "", //รายละเอียดการลา
 	file: [], //เอกสารปะกอบ
 })
-
+const formattSalary = arabicNumberToText(formData.salary)
 const leaveNoRef = ref<object | null>(null)
 const startLeaveDateRef = ref<object | null>(null)
 const endLeaveDateRef = ref<object | null>(null)
@@ -148,7 +148,7 @@ function onValidate() {
 						/>
 
 						<div class="col-md-4 col-sm-12">
-							<q-input class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formData.salary" label="เงินเดือนปัจจุบัน" readonly />
+							<q-input class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalary" label="เงินเดือนปัจจุบัน" readonly />
 						</div>
 
 						<datepicker
@@ -379,7 +379,7 @@ function onValidate() {
 							:readonly="!edit"
 						/>
 
-						<q-file v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-6">
+						<q-file v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
 							<template v-slot:prepend>
 								<q-icon name="attach_file" color="primary" />
 							</template>
diff --git a/src/modules/05_leave/interface/request/FollowSpouseForm.ts b/src/modules/05_leave/interface/request/FollowSpouseForm.ts
index 7da04b5..403a597 100644
--- a/src/modules/05_leave/interface/request/FollowSpouseForm.ts
+++ b/src/modules/05_leave/interface/request/FollowSpouseForm.ts
@@ -3,7 +3,7 @@ interface FormData {
 	startLeaveDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
 	endLeaveDate: Date | null //*วัน เดือน ปีสิ้นสุดลา
 	leaveTotal: string //จำนวนวันลา
-	salary: string //เงินเดือนปัจจุบัน
+	salary: number //เงินเดือนปัจจุบัน
 	spouseName: string //ชื่อคู่สมรส
 	spousePosition: string //ตำแหน่งคู่สมรส
 	spouseLevel: string //ระดับคู่สมรส

From 1552da5d4c6cd5aaa2c9f99fc65d4c63950af0cf Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 9 Nov 2023 12:23:37 +0700
Subject: [PATCH 8/8] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=20wor?=
 =?UTF-8?q?kInternationalForm?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/componenst/Forms/01_SickForm.vue |   9 +-
 .../componenst/Forms/04_HelpWifeBirthForm.vue |   5 +
 .../componenst/Forms/05_VacationForm.vue      |  32 ++-
 .../Forms/11_WorkInternationalForm.vue        | 233 +++++++++++++++++-
 .../componenst/Forms/12_FollowSpouseForm.vue  |   9 +-
 .../request/WorkInternationalForm.ts          |  18 ++
 src/modules/05_leave/views/SampleForm.vue     |   3 +
 7 files changed, 285 insertions(+), 24 deletions(-)
 create mode 100644 src/modules/05_leave/interface/request/WorkInternationalForm.ts

diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
index 8576621..eade6b9 100644
--- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
@@ -154,8 +154,8 @@ function onValidate() {
 									<q-input
 										outlined
 										dense
-										ref="startLeaveDateNoRef"
-										for="startLeaveDateNoRef"
+										ref="startLeaveDateRef"
+										for="startLeaveDateRef"
 										hide-bottom-space
 										:readonly="!edit"
 										class="full-width datepicker"
@@ -285,5 +285,10 @@ function onValidate() {
 				</div>
 			</div>
 		</div>
+		<q-separator class="q-mt-sm" />
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
+		</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 3fec118..6f1bf8b 100644
--- a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
@@ -335,4 +335,9 @@ function onValidate() {
 			</div>
 		</div>
 	</form>
+	<q-separator class="q-mt-sm" />
+	<div class="row col-12 q-pt-md">
+		<q-space />
+		<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
+	</div>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
index e220a2a..5cd5f2c 100644
--- a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
@@ -97,10 +97,7 @@ function onValidate() {
 </script>
 
 <template>
-	<form @submit.prevent.stop="onValidate">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-		<!-- <div>
+	<!-- <div>
 		ลาพักผ่อน
 		<ul>
 			<li>เขียนที่</li>
@@ -116,6 +113,9 @@ function onValidate() {
 			<li>เอกสารประกอบ</li>
 		</ul>
 	</div> -->
+	<form @submit.prevent.stop="onValidate">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</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">
@@ -135,8 +135,8 @@ function onValidate() {
 						<div class="col-md-6 col-sm-12">
 							<q-input
 								class="col-12 col-sm-12"
-								ref="leaveNoRef"
-								for="leaveNoRef"
+								ref="lastYearVacationRef"
+								for="lastYearVacationRef"
 								dense
 								readonly
 								outlined
@@ -145,7 +145,16 @@ function onValidate() {
 							/>
 						</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="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน" />
+							<q-input
+								class="col-12 col-sm-12"
+								ref="currentVacationRef"
+								for="currentVacationRef"
+								dense
+								readonly
+								outlined
+								v-model="formData.currentVacation"
+								label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
+							/>
 						</div>
 
 						<datepicker
@@ -169,8 +178,8 @@ function onValidate() {
 								<q-input
 									outlined
 									dense
-									ref="startLeaveDateNoRef"
-									for="startLeaveDateNoRef"
+									ref="startLeaveDateRef"
+									for="startLeaveDateRef"
 									hide-bottom-space
 									:readonly="!edit"
 									class="full-width datepicker"
@@ -299,5 +308,10 @@ function onValidate() {
 				</q-card>
 			</div>
 		</div>
+		<q-separator class="q-mt-sm" />
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
+		</div>
 	</form>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
index 5f21384..d7ebd63 100644
--- a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
@@ -1,19 +1,80 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive, watch } from "vue"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
+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: "",
+	startLeaveDate: null,
+	endLeaveDate: null,
+	leaveDetail: "",
+	file: [],
+})
+
+const leaveNoRef = ref<object | null>(null)
+const startLeaveDateRef = ref<object | null>(null)
+const endLeaveDateRef = 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,
+	leaveDetail: leaveDetailRef,
+	file: fileRef,
+}
+
+watch(props.data, async () => {
+	// console.log("data==>", props.data)
+	formData.leaveNo = props.data.leaveNo
+	formData.startLeaveDate = props.data.startLeaveDate
+	formData.endLeaveDate = props.data.endLeaveDate
+	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>
-  <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-  <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  <div>
+	<!-- <div>
     ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
     <ul>
       <li>เขียนที่</li>
@@ -30,5 +91,155 @@ const props = defineProps({
       รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะ หลังจากกดบันทึกแล้วแสดงเอกสาร docx ให้ดาวน์โหลด เพื่อกรอก
       และเพิ่มให้อัพโหหลดเอกสารกลับเข้ามาในระบบ
     </p>
-  </div>
+  </div> -->
+	<form @submit.prevent.stop="onValidate">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</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 || `${'เขียนที่'}`]"
+						/>
+
+						<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="startLeaveDateRef"
+									for="startLeaveDateRef"
+									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
+							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-12">
+							<template v-slot:prepend>
+								<q-icon name="attach_file" color="primary" />
+							</template>
+						</q-file>
+
+						<div class="col-12 row" v-if="!edit">
+							<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+								<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+							</div>
+							<q-card bordered flat class="full-width">
+								<q-list separator>
+									<q-item v-for="(file, index) in 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>
+		<q-separator class="q-mt-sm" />
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
+		</div>
+	</form>
 </template>
diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index 185f6f6..f242f3f 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@@ -172,8 +172,8 @@ function onValidate() {
 								<q-input
 									outlined
 									dense
-									ref="startLeaveDateNoRef"
-									for="startLeaveDateNoRef"
+									ref="startLeaveDateRef"
+									for="startLeaveDateRef"
 									hide-bottom-space
 									:readonly="!edit"
 									class="full-width datepicker"
@@ -406,5 +406,10 @@ function onValidate() {
 				</q-card>
 			</div>
 		</div>
+		<q-separator class="q-mt-sm" />
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
+		</div>
 	</form>
 </template>
diff --git a/src/modules/05_leave/interface/request/WorkInternationalForm.ts b/src/modules/05_leave/interface/request/WorkInternationalForm.ts
new file mode 100644
index 0000000..3b7952a
--- /dev/null
+++ b/src/modules/05_leave/interface/request/WorkInternationalForm.ts
@@ -0,0 +1,18 @@
+interface FormData {
+	leaveNo: string //เขียนที่***
+	startLeaveDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: Date | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveDetail: string //รายละเอียดการลา
+	file: File[] | null //เอกสารปะกอบ
+}
+
+interface FormRef {
+	leaveNo: object | null //เขียนที่***
+	startLeaveDate: object | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: object | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveDetail: 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 02f56ba..92b1bcc 100644
--- a/src/modules/05_leave/views/SampleForm.vue
+++ b/src/modules/05_leave/views/SampleForm.vue
@@ -5,6 +5,7 @@ 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"
 import FollowSpouseForm from "@/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue"
+import WorkInternationalForm from "@/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue"
 const type = ref<number>(0)
 const typeOption = reactive([
 	{ id: 0, name: "" },
@@ -14,6 +15,7 @@ const typeOption = reactive([
 	{ id: 4, name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
 	{ id: 5, name: "ลาพักผ่อน" },
 	{ id: 6, name: "ลาติดตามคู่สมรส" },
+	{ id: 7, name: "ลาไปปฏิบัติงานในองค์การระหว่างประเทศ" },
 ])
 
 async function onSubmit() {
@@ -47,6 +49,7 @@ watch(
 							<HelpWifeBirthForm v-if="type == 4" />
 							<VacationForm v-if="type == 5" />
 							<FollowSpouseForm v-if="type == 6" />
+							<WorkInternationalForm v-if="type == 7" />
 						</div>
 					</div>