From f8a95f61faa8197f8fa4edf72a429bb2d1a0b81b Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 16 Nov 2023 15:16:16 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=20ui=20form=20=E0=B8=81=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

---
 .../componenst/Forms/06_OrdinationForm.vue    | 132 ++++++------
 .../componenst/Forms/08_MilitaryForm.vue      |   2 +-
 .../componenst/Forms/09_StudyForm.vue         |   2 +-
 .../componenst/Forms/10_TrainForm.vue         |   2 +-
 .../Forms/11_WorkInternationalForm.vue        |   6 +-
 .../componenst/Forms/12_FollowSpouseForm.vue  | 196 +++++++++---------
 .../Forms/13_RehabilitationForm.vue           |   8 +-
 7 files changed, 175 insertions(+), 173 deletions(-)

diff --git a/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue b/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
index fdbc59d..13ab6e8 100644
--- a/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
@@ -257,82 +257,82 @@ function onSubmit() {
 
 				<div class="q-pl-sm text-weight-bold text-dark col-12">เคยบวชหรือไม่</div>
 				<div class="col-12">
-					<q-radio v-model="formData.monk" val="ever" label="เคยบวช" checked-icon="task_alt" />
-					<q-radio v-model="formData.monk" val="never" label="ไม่เคยบวช" checked-icon="task_alt" />
+					<q-radio v-model="formData.monk" val="ever" label="เคยบวช" checked-icon="task_alt " hide-bottom-space />
+					<q-radio v-model="formData.monk" val="never" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
 				</div>
 
-				<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่บวช</div>
-				<div class="full-width">
-					<div class="q-col-gutter-sm row">
-						<datepicker
-							class="col-12 col-md-4 col-sm-6"
-							menu-class-name="modalfix"
-							v-model="formData.dateOrdination"
-							:locale="'th'"
-							autoApply
-							borderless
-							:enableTimePicker="false"
-							week-start="0"
+				<div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
+				<datepicker
+					class="col-12 col-md-4 col-sm-6"
+					menu-class-name="modalfix"
+					v-model="formData.dateOrdination"
+					:locale="'th'"
+					autoApply
+					full-width
+					borderless
+					hide-bottom-space
+					:enableTimePicker="false"
+					week-start="0"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							outlined
+							ref="dateOrdinationRef"
+							dense
+							bg-color="white"
+							hide-bottom-space
+							class="full-width datepicker"
+							:model-value="formData.dateOrdination != null ? date2Thai(formData.dateOrdination) : 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
-									ref="dateOrdinationRef"
-									dense
-									bg-color="white"
-									hide-bottom-space
-									class="full-width datepicker"
-									:model-value="formData.dateOrdination != null ? date2Thai(formData.dateOrdination) : null"
-									:label="`${'วันอุปสมบท'}`"
-									:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
-								>
-									<template v-slot:prepend>
-										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
-									</template>
-								</q-input>
-							</template>
-						</datepicker>
-
-						<q-input
-							class="col-12 col-sm-6 col-md-4"
-							dense
-							hide-bottom-space
-							ref="measureLocationNameRef"
-							bg-color="white"
-							outlined
-							v-model="formData.measureLocationName"
-							label="ชื่อวัด"
-							:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
-						/>
-
-						<q-input
-							class="col-12 col-sm-6 col-md-4"
-							ref="telRef"
-							dense
-							outlined
-							v-model="formData.tel"
-							bg-color="white"
-							mask="(###)-###-####"
-							unmasked-value
-							hide-bottom-space
-							label="หมายเลขโทรศัพท์"
-							:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
-						/>
-					</div>
-				</div>
+						</q-input>
+					</template>
+				</datepicker>
 
 				<q-input
-					class="col-12 q-mt-sm"
+					class="col-12 col-sm-6 col-md-4"
+					dense
+					hide-bottom-space
+					ref="measureLocationNameRef"
+					bg-color="white"
+					outlined
+					full-width
+					v-model="formData.measureLocationName"
+					label="ชื่อวัด"
+					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
+				/>
+
+				<q-input
+					class="col-12 col-sm-6 col-md-4"
+					ref="telRef"
+					dense
+					full-width
+					outlined
+					v-model="formData.tel"
+					bg-color="white"
+					mask="(###)-###-####"
+					unmasked-value
+					hide-bottom-space
+					label="หมายเลขโทรศัพท์"
+					:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
+				/>
+				<q-input
+					class="col-12 col-md-12 col-sm-12"
 					dense
 					ref="addressMeasureRef"
 					bg-color="white"
 					outlined
+					hide-bottom-space
 					v-model="formData.addressMeasure"
 					label="ที่อยู่"
 					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
diff --git a/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue b/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
index b9036c5..53c7149 100644
--- a/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
+++ b/src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
@@ -247,7 +247,7 @@ function onSubmit() {
 					</div>
 				</div>
 
-				<q-input class="col-12 q-mt-sm" dense bg-color="white" outlined v-model="formData.info" type="textarea" label="รายละเอียด" />
+				<q-input class="col-12 col-md-12 col-sm-12" dense bg-color="white" outlined v-model="formData.info" type="textarea" label="รายละเอียด" />
 
 				<div class="col-12 col-sm-6">
 					<q-file v-model="formData.file" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space>
diff --git a/src/modules/05_leave/componenst/Forms/09_StudyForm.vue b/src/modules/05_leave/componenst/Forms/09_StudyForm.vue
index 88b3ea6..1f82a77 100644
--- a/src/modules/05_leave/componenst/Forms/09_StudyForm.vue
+++ b/src/modules/05_leave/componenst/Forms/09_StudyForm.vue
@@ -389,7 +389,7 @@ const formattedSalary = computed(() => {
 					</div>
 				</div>
 
-				<q-input v-model="formData.info" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
+				<q-input v-model="formData.info" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
 
 				<div class="col-12 col-sm-6">
 					<q-file v-model="formData.file" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
diff --git a/src/modules/05_leave/componenst/Forms/10_TrainForm.vue b/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
index ad05f93..5f399de 100644
--- a/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
+++ b/src/modules/05_leave/componenst/Forms/10_TrainForm.vue
@@ -360,7 +360,7 @@ const formattedSalary = computed(() => {
 					</div>
 				</div>
 
-				<q-input v-model="formData.info" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
+				<q-input v-model="formData.info" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
 
 				<div class="col-12 col-sm-6">
 					<q-file v-model="formData.file" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
diff --git a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
index 3b53fc1..c712fba 100644
--- a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
@@ -269,8 +269,10 @@ function onSubmit() {
 		</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 style="display: flex; align-items: center">
+				<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
+				<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
+			</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">
diff --git a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
index 5163a2e..7890ab4 100644
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@@ -313,105 +313,103 @@ 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>
-					<datepicker
-						class="col-12 col-md-3 col-sm-12"
-						menu-class-name="modalfix"
-						v-model="formData.followHistoryStart"
-						:locale="'th'"
-						autoApply
-						hide-bottom-space
-						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-12 col-md-3 col-sm-12"
-						menu-class-name="modalfix"
-						v-model="formData.followHistoryEnd"
-						:locale="'th'"
-						autoApply
-						hide-bottom-space
-						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-12 col-md-3 col-sm-12"
-						dense
-						outlined
-						hide-bottom-space
-						ref="followHistoryCountryRef"
-						for="followHistoryCountryRef"
-						v-model="formData.followHistoryCountry"
-						label="ประเทศ"
-						:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
-					/>
-					<q-input
-						class="col-12 col-md-3 col-sm-12"
-						dense
-						outlined
-						hide-bottom-space
-						ref="followHistoryTimeRef"
-						for="followHistoryTimeRef"
-						v-model="formData.followHistoryTime"
-						label="เป็นเวลา"
-						:rules="[val => !!val || `${'กรุณาเลือกเวลา'}`]"
-					/>
-				</div>
+				<div class="text-weight-bold text-dark col-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
+				<datepicker
+					class="col-12 col-md-3 col-sm-12"
+					menu-class-name="modalfix"
+					v-model="formData.followHistoryStart"
+					:locale="'th'"
+					autoApply
+					hide-bottom-space
+					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-12 col-md-3 col-sm-12"
+					menu-class-name="modalfix"
+					v-model="formData.followHistoryEnd"
+					:locale="'th'"
+					autoApply
+					hide-bottom-space
+					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-12 col-md-3 col-sm-12"
+					dense
+					outlined
+					hide-bottom-space
+					ref="followHistoryCountryRef"
+					for="followHistoryCountryRef"
+					v-model="formData.followHistoryCountry"
+					label="ประเทศ"
+					:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
+				/>
+				<q-input
+					class="col-12 col-md-3 col-sm-12"
+					dense
+					outlined
+					hide-bottom-space
+					ref="followHistoryTimeRef"
+					for="followHistoryTimeRef"
+					v-model="formData.followHistoryTime"
+					label="เป็นเวลา"
+					:rules="[val => !!val || `${'กรุณาเลือกเวลา'}`]"
+				/>
 
 				<q-input
 					hide-bottom-space
diff --git a/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue b/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
index 8d0cb68..c7339a2 100644
--- a/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
@@ -171,7 +171,7 @@ function upLoadFile() {
 					</template>
 				</datepicker>
 
-				<q-input v-model="formData.info" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
+				<q-input v-model="formData.info" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
 
 				<div class="col-12 col-sm-6">
 					<q-file v-model="formData.file" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
@@ -203,8 +203,10 @@ function upLoadFile() {
 		</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 style="display: flex; align-items: center">
+				<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
+				<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
+			</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">