From e10f0a9d98511602912c588dc04fa1ede73d18fe Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Fri, 10 Nov 2023 11:43:30 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=20=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_leave/componenst/Forms/01_SickForm.vue | 328 ++++++-----
 .../componenst/Forms/04_HelpWifeBirthForm.vue | 407 +++++++-------
 .../componenst/Forms/05_VacationForm.vue      | 357 ++++++------
 .../Forms/11_WorkInternationalForm.vue        | 234 ++++----
 .../componenst/Forms/12_FollowSpouseForm.vue  | 527 +++++++++---------
 5 files changed, 897 insertions(+), 956 deletions(-)

diff --git a/src/modules/05_leave/componenst/Forms/01_SickForm.vue b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
index 84f9850..72f8a4e 100644
--- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
@@ -100,184 +100,180 @@ function onValidate() {
 
 <!-- ฟอร์มลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
 <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">
-		<div>
-			<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 || `${'เขียนที่'}`]"
-							/>
+		<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="formData.halfDay" val="day" label="ลาทั้งวัน" />
-								<q-radio v-model="formData.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" />
-								<q-radio v-model="formData.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" />
-							</div>
+				<div class="col-md-4 col-sm-12">
+					<q-radio v-model="formData.halfDay" val="day" label="ลาทั้งวัน" />
+					<q-radio v-model="formData.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" />
+					<q-radio v-model="formData.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
-										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.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-2 col-sm-12"
-								dense
-								outlined
-								ref="leaveTotalRef"
-								for="leaveTotalRef"
-								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="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-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
+					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-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>
+				<q-file
+					ref="fileRef"
+					for="fileRef"
+					v-model="formData.file"
+					@added="fileUploadDoc"
+					dense
+					label="เอกสารประกอบ"
+					outlined
+					use-chips
+					multiple
+					class="q-pl-sm col-12"
+					:rules="[val => !!val || `${'กรุณาเลือกไฟล์'}`]"
+				>
+					<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 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-separator class="q-mt-sm" />
 
diff --git a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
index 47e07b9..f7e354e 100644
--- a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
@@ -104,9 +104,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>
 		<!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร
     <ul>
       <li>เขียนที่</li>
@@ -123,224 +123,209 @@ function onValidate() {
     <p>
       *หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
     </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-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-4 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
-							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="wifeNameRef"
-								for="wifeNameRef"
-								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"
+							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 #year="{ year }">
-								{{ year + 543 }}
-							</template>
-							<template #year-overlay-value="{ value }">
-								{{ parseInt(value + 543) }}
-							</template>
-							<template #trigger>
-								<q-input
-									outlined
-									dense
-									ref="brithDateRef"
-									for="brithDateRef"
-									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="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
-							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-12">
 							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
 							</template>
-						</q-file>
+						</q-input>
+					</template>
+				</datepicker>
 
-						<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>
+				<datepicker
+					class="col-md-4 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-4 col-sm-12"
+					dense
+					outlined
+					ref="leaveTotalRef"
+					for="leaveTotalRef"
+					type="number"
+					v-model="formData.leaveTotal"
+					label="จำนวนวันที่ลา"
+					readonly
+					:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+				/>
+				<div class="col-md-4 col-sm-12">
+					<q-input
+						class="col-12 col-sm-12"
+						ref="wifeNameRef"
+						for="wifeNameRef"
+						dense
+						outlined
+						v-model="formData.wifeName"
+						label="ชื่อภรรยา"
+						:readonly="!edit"
+						:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
+					/>
+				</div>
+
+				<datepicker
+					class="col-md-4 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="brithDateRef"
+							for="brithDateRef"
+							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>
+
+				<q-input
+					class="col-4"
+					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 ref="fileRef" 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>
+					<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-separator class="q-mt-sm" />
 		<div class="row col-12 q-pt-md">
 			<q-space />
diff --git a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
index 8431017..7ed0542 100644
--- a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
@@ -120,201 +120,188 @@ function onValidate() {
 			<li>เอกสารประกอบ</li>
 		</ul>
 	</div> -->
+	<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 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-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="lastYearVacationRef"
+						for="lastYearVacationRef"
+						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="currentVacationRef"
+						for="currentVacationRef"
+						dense
+						readonly
+						outlined
+						v-model="formData.currentVacation"
+						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
-							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="lastYearVacationRef"
-								for="lastYearVacationRef"
-								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="currentVacationRef"
-								for="currentVacationRef"
-								dense
-								readonly
-								outlined
-								v-model="formData.currentVacation"
-								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"
+							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 #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
-							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-12">
 							<template v-slot:prepend>
-								<q-icon name="attach_file" color="primary" />
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
 							</template>
-						</q-file>
+						</q-input>
+					</template>
+				</datepicker>
 
-						<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>
+				<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 ref="fileRef" 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>
+					<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-separator class="q-mt-sm" />
 		<div class="row col-12 q-pt-md">
 			<q-space />
diff --git a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
index 8ed9d9c..22337da 100644
--- a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
@@ -9,7 +9,7 @@ const mixin = useCounterMixin()
 const { date2Thai, dialogConfirm } = mixin
 const edit = ref<boolean>(true)
 const filesUpload = ref<any>(null)
-const isSave = ref<boolean>(true)
+const isSave = ref<boolean>(false)
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -79,7 +79,7 @@ function onValidate() {
 		}
 	}
 	if (hasError.every(result => result === true)) {
-		props.onSubmit()
+		onSubmit()
 	}
 }
 
@@ -120,99 +120,97 @@ function onSubmit() {
       และเพิ่มให้อัพโหหลดเอกสารกลับเข้ามาในระบบ
     </p>
   </div> -->
+	<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 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-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
-							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"
+							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 #year="{ year }">
-								{{ year + 543 }}
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
 							</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>
+						</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"
+				<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 #year="{ year }">
-								{{ year + 543 }}
+							<template v-slot:prepend>
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
 							</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
+						</q-input>
+					</template>
+				</datepicker>
+				<!-- <q-input
 							class="col-md-3 col-sm-12"
 							dense
 							outlined
@@ -225,48 +223,37 @@ function onSubmit() {
 							: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-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>
+				<q-file ref="fileRef" 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 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>
+					<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>
+
 		<div v-if="isSave" class="q-mt-md">
 			<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
-			<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัพโหลดแบบฟอร์ม</div>
+			<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
 			<q-card class="bg-grey-1 q-pa-sm" bordered>
 				<div class="row">
 					<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
@@ -277,8 +264,8 @@ function onSubmit() {
 					</div>
 					<div class="col-10 col-sm-5 col-md-4 q-my-sm">
 						<div class="column q-mx-xs">
-							<div class="q-pl-sm text-weight-bold text-dark text-center">อัพโหลด</div>
-							<q-file v-model="filesUpload" dense label="แบบฟอร์ม" outlined bg-color="white" multiple>
+							<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
+							<q-file v-model="filesUpload" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept=".pdf">
 								<template v-slot:prepend>
 									<q-icon name="attach_file" color="primary" />
 								</template>
@@ -291,6 +278,7 @@ function onSubmit() {
 				</div>
 			</q-card>
 		</div>
+
 		<div v-if="!isSave">
 			<q-separator class="q-mt-sm" />
 			<div class="row col-12 q-pt-md">
diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index cb2d860..ad08452 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@@ -143,287 +143,272 @@ function onValidate() {
 			<li>เอกสารประกอบ</li>
 		</ul>
 	</div> -->
+	<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 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-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-4 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
-							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="formattSalary" label="เงินเดือนปัจจุบัน" readonly />
-						</div>
-						<div class="col-md-4 col-sm-12">
-							<q-input class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalaryText" label="เงินเดือนปัจจุบัน" readonly />
-						</div>
-
-						<datepicker
-							class="col-md-2 col-sm-12"
-							menu-class-name="modalfix"
-							v-model="formData.startLeaveDate"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
+							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 #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-2 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-4 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-4 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-2 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>
-						<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-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"
-							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" />
+								<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
 							</template>
-						</q-file>
+						</q-input>
+					</template>
+				</datepicker>
 
-						<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>
+				<datepicker
+					class="col-md-4 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-4 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="salaryRef" for="salaryRef" dense outlined v-model="formattSalary" label="เงินเดือนปัจจุบัน" readonly />
+				</div>
+				<div class="col-md-6 col-sm-12">
+					<q-input class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalaryText" label="เงินเดือนปัจจุบัน" readonly />
+				</div>
+
+				<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>
+				<div class="col-12 row q-pa-sm q-col-gutter-sm">
+					<div class="col-md-12 col-sm-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
+					<datepicker
+						class="col-md-3 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-3 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>
+					<q-input class="col-md-3 col-sm-12" dense outlined ref="followHistoryRef" for="followHistoryRef" v-model="formData.followHistoryCountry" label="ประเทศ" />
+					<q-input class="col-md-3 col-sm-12" dense outlined ref="followHistoryRef" for="followHistoryRef" v-model="formData.followHistoryTime" label="เป็นเวลา" />
+				</div>
+
+				<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 ref="fileRef" 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>
+					<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-separator class="q-mt-sm" />
 		<div class="row col-12 q-pt-md">
 			<q-space />