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] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=94=E0=B8=95=E0=B8=B2=E0=B8=A1=E0=B8=84=E0=B8=B9?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AA=E0=B8=A1=E0=B8=A3=E0=B8=AA=E0=B8=A2=E0=B9=88?=
 =?UTF-8?q?=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 //เอกสารปะกอบ