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] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=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>