แก้ไข เพิ่ม workInternationalForm

2023-11-09 12:23:37 +07:00 · 2023-11-09 12:23:37 +07:00 · 1552da5d4c
commit 1552da5d4c
parent f5d71abaab
7 changed files with 285 additions and 24 deletions
--- a/src/modules/05_leave/componenst/Forms/01_SickForm.vue
+++ b/src/modules/05_leave/componenst/Forms/01_SickForm.vue
@ -154,8 +154,8 @@ function onValidate() {
 									<q-input
 										outlined
 										dense
-										ref="startLeaveDateNoRef"
-										for="startLeaveDateNoRef"
+										ref="startLeaveDateRef"
+										for="startLeaveDateRef"
 										hide-bottom-space
 										:readonly="!edit"
 										class="full-width datepicker"
@ -285,5 +285,10 @@ function onValidate() {
 				</div>
 			</div>
 		</div>
+		<q-separator class="q-mt-sm" />
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
+		</div>
 	</form>
 </template>
--- a/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
@ -335,4 +335,9 @@ function onValidate() {
 			</div>
 		</div>
 	</form>
+	<q-separator class="q-mt-sm" />
+	<div class="row col-12 q-pt-md">
+		<q-space />
+		<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
+	</div>
 </template>
--- a/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
+++ b/src/modules/05_leave/componenst/Forms/05_VacationForm.vue
@ -97,10 +97,7 @@ function onValidate() {
 </script>

 <template>
-	<form @submit.prevent.stop="onValidate">
-		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-		<!-- <div>
+	<!-- <div>
 		ลาพักผ่อน
 		<ul>
 			<li>เขียนที่</li>
@ -116,6 +113,9 @@ function onValidate() {
 			<li>เอกสารประกอบ</li>
 		</ul>
 	</div> -->
+	<form @submit.prevent.stop="onValidate">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
 		<div class="col-12 row q-col-gutter-md q-pa-md">
 			<div class="col-xs-12 col-sm-12">
 				<q-card bordered class="q-pa-md bg-grey-1">
@ -135,8 +135,8 @@ function onValidate() {
 						<div class="col-md-6 col-sm-12">
 							<q-input
 								class="col-12 col-sm-12"
-								ref="leaveNoRef"
-								for="leaveNoRef"
+								ref="lastYearVacationRef"
+								for="lastYearVacationRef"
 								dense
 								readonly
 								outlined
@ -145,7 +145,16 @@ function onValidate() {
 							/>
 						</div>
 						<div class="col-md-6 col-sm-12">
-							<q-input class="col-12 col-sm-12" ref="leaveNoRef" for="leaveNoRef" dense readonly outlined v-model="formData.lastYearVacation" label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน" />
+							<q-input
+								class="col-12 col-sm-12"
+								ref="currentVacationRef"
+								for="currentVacationRef"
+								dense
+								readonly
+								outlined
+								v-model="formData.currentVacation"
+								label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
+							/>
 						</div>

 						<datepicker
@ -169,8 +178,8 @@ function onValidate() {
 								<q-input
 									outlined
 									dense
-									ref="startLeaveDateNoRef"
-									for="startLeaveDateNoRef"
+									ref="startLeaveDateRef"
+									for="startLeaveDateRef"
 									hide-bottom-space
 									:readonly="!edit"
 									class="full-width datepicker"
@ -299,5 +308,10 @@ function onValidate() {
 				</q-card>
 			</div>
 		</div>
+		<q-separator class="q-mt-sm" />
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
+		</div>
 	</form>
 </template>
--- a/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
@ -1,19 +1,80 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive, watch } from "vue"
+import type { FormData, FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
+import { useCounterMixin } from "@/stores/mixin"

-const edit = ref<boolean>(false);
+const mixin = useCounterMixin()
+const { date2Thai } = mixin
+const edit = ref<boolean>(true)
+const halfDay = ref<string>("day")
 const props = defineProps({
-  data: {
-    type: Array,
-    default: null,
-  },
-});
+	data: {
+		type: Object,
+		default: null,
+	},
+	onSubmit: {
+		type: Function,
+		default: () => "",
+	},
+})
+// ข้อมูลทั้งก้อน form
+const formData = reactive<FormData>({
+	leaveNo: "",
+	startLeaveDate: null,
+	endLeaveDate: null,
+	leaveDetail: "",
+	file: [],
+})
+
+const leaveNoRef = ref<object | null>(null)
+const startLeaveDateRef = ref<object | null>(null)
+const endLeaveDateRef = ref<object | null>(null)
+const leaveDetailRef = ref<object | null>(null)
+const fileRef = ref<object | null>(null)
+
+const FormRef: FormRef = {
+	leaveNo: leaveNoRef,
+	startLeaveDate: startLeaveDateRef,
+	endLeaveDate: endLeaveDateRef,
+	leaveDetail: leaveDetailRef,
+	file: fileRef,
+}
+
+watch(props.data, async () => {
+	// console.log("data==>", props.data)
+	formData.leaveNo = props.data.leaveNo
+	formData.startLeaveDate = props.data.startLeaveDate
+	formData.endLeaveDate = props.data.endLeaveDate
+	formData.leaveDetail = props.data.leaveDetail
+	formData.file = props.data.file
+})
+const fileDocDataUpload = ref<File[]>([])
+
+const fileUploadDoc = async (files: any) => {
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
+
+function onValidate() {
+	const hasError = []
+	for (const key in FormRef) {
+		if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
+			const property = FormRef[key]
+			if (property.value && typeof property.value.validate === "function") {
+				const isValid = property.value.validate()
+				hasError.push(isValid)
+			}
+		}
+	}
+	if (hasError.every(result => result === true)) {
+		props.onSubmit()
+	}
+}
 </script>

 <template>
-  <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-  <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  <div>
+	<!-- <div>
    ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
    <ul>
      <li>เขียนที่</li>
@ -30,5 +91,155 @@ const props = defineProps({
      รายละเอียดฟิลด์ในหัวข้อนี้มีเยอะ หลังจากกดบันทึกแล้วแสดงเอกสาร docx ให้ดาวน์โหลด เพื่อกรอก
      และเพิ่มให้อัพโหหลดเอกสารกลับเข้ามาในระบบ
    </p>
-  </div>
+  </div> -->
+	<form @submit.prevent.stop="onValidate">
+		<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
+		<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
+		<div class="col-12 row q-col-gutter-md q-pa-md">
+			<div class="col-xs-12 col-sm-12">
+				<q-card bordered class="q-pa-md bg-grey-1">
+					<div class="col-12 row q-pa-sm q-col-gutter-sm">
+						<q-input
+							class="col-12 col-sm-12"
+							ref="leaveNoRef"
+							for="leaveNoRef"
+							dense
+							outlined
+							v-model="formData.leaveNo"
+							label="เขียนที่"
+							:readonly="!edit"
+							:rules="[val => !!val || `${'เขียนที่'}`]"
+						/>
+
+						<datepicker
+							class="col-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.startLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+							:readonly="!edit"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									ref="startLeaveDateRef"
+									for="startLeaveDateRef"
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.startLeaveDate != null ? date2Thai(formData.startLeaveDate) : null"
+									:label="`${'ลาตั้งแต่วันที่'}`"
+									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
+
+						<datepicker
+							class="col-md-3 col-sm-12"
+							menu-class-name="modalfix"
+							v-model="formData.endLeaveDate"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+							:readonly="!edit"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									ref="endLeaveDateRef"
+									for="endLeaveDateRef"
+									hide-bottom-space
+									:readonly="!edit"
+									class="full-width datepicker"
+									:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
+									:label="`${'ลาถึงวันที่'}`"
+									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+								>
+									<template v-slot:prepend>
+										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
+									</template>
+								</q-input>
+							</template>
+						</datepicker>
+						<!-- <q-input
+							class="col-md-3 col-sm-12"
+							dense
+							outlined
+							ref="leaveTotalRef"
+							for="leaveTotalRef"
+							type="number"
+							v-model="formData.leaveTotal"
+							label="จำนวนวันที่ลา"
+							readonly
+							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+						/> -->
+
+						<q-input
+							type="textarea"
+							class="col-md-12 col-sm-12"
+							dense
+							outlined
+							ref="leaveDetailRef"
+							for="leaveDetailRef"
+							v-model="formData.leaveDetail"
+							label="รายละเอียด"
+							:readonly="!edit"
+						/>
+
+						<q-file v-model="formData.file" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
+							<template v-slot:prepend>
+								<q-icon name="attach_file" color="primary" />
+							</template>
+						</q-file>
+
+						<div class="col-12 row" v-if="!edit">
+							<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+								<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
+							</div>
+							<q-card bordered flat class="full-width">
+								<q-list separator>
+									<q-item v-for="(file, index) in formData.file" :key="index" class="q-my-xs">
+										<q-item-section>
+											<q-item-label class="full-width ellipsis">
+												{{ file.name }}
+											</q-item-label>
+											<q-item-label caption> </q-item-label>
+										</q-item-section>
+									</q-item>
+								</q-list>
+							</q-card>
+						</div>
+					</div>
+				</q-card>
+			</div>
+		</div>
+		<q-separator class="q-mt-sm" />
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
+		</div>
+	</form>
 </template>
--- a/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
@ -172,8 +172,8 @@ function onValidate() {
 								<q-input
 									outlined
 									dense
-									ref="startLeaveDateNoRef"
-									for="startLeaveDateNoRef"
+									ref="startLeaveDateRef"
+									for="startLeaveDateRef"
 									hide-bottom-space
 									:readonly="!edit"
 									class="full-width datepicker"
@ -406,5 +406,10 @@ function onValidate() {
 				</q-card>
 			</div>
 		</div>
+		<q-separator class="q-mt-sm" />
+		<div class="row col-12 q-pt-md">
+			<q-space />
+			<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" />
+		</div>
 	</form>
 </template>
--- a/src/modules/05_leave/interface/request/WorkInternationalForm.ts
+++ b/src/modules/05_leave/interface/request/WorkInternationalForm.ts
@ -0,0 +1,18 @@
+interface FormData {
+	leaveNo: string //เขียนที่***
+	startLeaveDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: Date | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveDetail: string //รายละเอียดการลา
+	file: File[] | null //เอกสารปะกอบ
+}
+
+interface FormRef {
+	leaveNo: object | null //เขียนที่***
+	startLeaveDate: object | null //*วัน เดือน ปีเริ่มต้นลา
+	endLeaveDate: object | null //*วัน เดือน ปีสิ้นสุดลา
+	leaveDetail: object | null //รายละเอียดการลา
+	file: object | null //เอกสารปะกอบ
+	[key: string]: any
+}
+
+export type { FormData, FormRef }
--- a/src/modules/05_leave/views/SampleForm.vue
+++ b/src/modules/05_leave/views/SampleForm.vue
@ -5,6 +5,7 @@ import SickForm from "@/modules/05_leave/componenst/Forms/01_SickForm.vue"
 import HelpWifeBirthForm from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue"
 import VacationForm from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue"
 import FollowSpouseForm from "@/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue"
+import WorkInternationalForm from "@/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue"
 const type = ref<number>(0)
 const typeOption = reactive([
 	{ id: 0, name: "" },
@ -14,6 +15,7 @@ const typeOption = reactive([
 	{ id: 4, name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
 	{ id: 5, name: "ลาพักผ่อน" },
 	{ id: 6, name: "ลาติดตามคู่สมรส" },
+	{ id: 7, name: "ลาไปปฏิบัติงานในองค์การระหว่างประเทศ" },
 ])

 async function onSubmit() {
@ -47,6 +49,7 @@ watch(
 							<HelpWifeBirthForm v-if="type == 4" />
 							<VacationForm v-if="type == 5" />
 							<FollowSpouseForm v-if="type == 6" />
+							<WorkInternationalForm v-if="type == 7" />
 						</div>
 					</div>