ต่อ api เพิ่ม form การลา

src/api/leave/api.leave.ts

@@ -21,4 +21,5 @@ export default {
 	leaveUser: () => `${leave}/user`,
 	leaveUserId: (id: string) => `${leave}/user/${id}`,
 	leaveProfile: () => `${leave}/user/profile`,
+	leaveCheck: () => `${leave}/user/check`,
 }

src/modules/05_leave/componenst/Forms/01_SickForm.vue

@@ -1,12 +1,18 @@
 <script setup lang="ts">
 import { ref, reactive, watch, computed } from "vue"
-import { useQuasar } from "quasar"
 import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
 import { useCounterMixin } from "@/stores/mixin"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useQuasar } from "quasar"
+import { useRouter } from "vue-router"
 
+const dataStore = useLeaveStore()
 const $q = useQuasar()
 const mixin = useCounterMixin()
-const { date2Thai, calculateDurationYmd, dialogConfirm } = mixin
+const router = useRouter()
+const { date2Thai, dateToISO, dialogConfirm, success, messageError } = mixin
 const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
@@ -22,7 +28,8 @@ const props = defineProps({
 })
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<any>({
+const formDataSick = reactive<any>({
+	type: dataStore.typeId,
 	leaveWrote: "",
 	leaveStartDate: null,
 	leaveEndDate: null,
@@ -63,17 +70,18 @@ const FormRef: FormRef = {
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, async () => {
 	// console.log("data==>", props.data)
-	formData.leaveWrote = props.data.leaveWrote
+	formDataSick.leaveWrote = props.data.leaveWrote
-	formData.leaveStartDate = props.data.leaveStartDate
+	formDataSick.leaveStartDate = props.data.leaveStartDate
-	formData.leaveEndDate = props.data.leaveEndDate
+	formDataSick.leaveEndDate = props.data.leaveEndDate
-	formData.contractTel = props.data.contractTel
+	formDataSick.contractTel = props.data.contractTel
-	formData.leaveTotal = props.data.leaveTotal
+	formDataSick.leaveTotal = props.data.leaveTotal
-	formData.leaveNumber = props.data.leaveNumber
+	formDataSick.leaveNumber = props.data.leaveNumber
-	formData.leaveDetail = props.data.leaveDetail
+	formDataSick.leaveDetail = props.data.leaveDetail
-	formData.leaveDocument = props.data.leaveDocument
+	formDataSick.leaveDocument = props.data.leaveDocument
 })
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("")
 const fileDocDataUpload = ref<File[]>([])
 async function fileUploadDoc(files: any) {
 	files.forEach((file: any) => {
@@ -85,9 +93,9 @@ async function fileUploadDoc(files: any) {
  * function รีเซทค่า leaveStartDate เเละ leaveEndDate
  */
 function resetDate() {
-	if (formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon") {
+	if (formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon") {
-		formData.leaveStartDate = null
+		formDataSick.leaveStartDate = null
-		formData.leaveEndDate = null
+		formDataSick.leaveEndDate = null
 	}
 	console.log("testnull")
 }
@@ -105,17 +113,58 @@ function onValidate() {
 		}
 	}
 	if (hasError.every(result => result === true)) {
-		props.onSubmit(formData)
+		onSubmit()
 	}
 }
 
+/** ฟังก์ชั่น บันทึก */
+const onSubmit = async () => {
+	dialogConfirm(
+		$q,
+		async () => {
+			await saveFormData()
+		},
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
+	)
+
+	console.log("save")
+}
+
+async function saveFormData() {
+	const formData = new FormData()
+	const blob = formDataSick.leaveDocument.slice(0, formDataSick.leaveDocument[0].size)
+	const newFile = new File(blob, nameFile.value, {
+		type: formDataSick.leaveDocument[0].type,
+	})
+	formData.append("leaveDocument", newFile)
+	formData.append("type", formDataSick.type)
+	formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate))
+	formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate))
+	formData.append("leaveWrote", formDataSick.leaveWrote)
+	formData.append("leaveAddress", formDataSick.leaveAddress)
+	formData.append("leaveNumber", formDataSick.leaveNumber)
+	formData.append("leaveDetail", formDataSick.leaveDetail)
+	formData.append("leaveTotal", formDataSick.leaveTotal)
+	formData.append("leaveLast", formDataSick.leaveLast)
+	await http
+		.post(config.API.leaveUser(), formData)
+		.then((res: any) => {
+			success($q, "บันทึกสำเร็จ")
+			router.push(`/leave`)
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
+}
+
 const isReadOnly = computed(() => {
-	const conditionHalfDay = formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon"
+	const conditionHalfDay = formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon"
 	if (conditionHalfDay) {
-		formData.leaveEndDate = formData.leaveStartDate // Set formData.leaveEndDate to null
+		formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null
-		formData.leaveTotal = "0.5 วัน "
+		formDataSick.leaveTotal = "0.5 วัน "
 	} else {
-		formData.leaveTotal = null
+		formDataSick.leaveTotal = null
 	}
 	return conditionHalfDay
 })
@@ -138,23 +187,23 @@ const isReadOnly = computed(() => {
 					hide-bottom-space
 					bg-color="white"
 					outlined
-					v-model="formData.leaveWrote"
+					v-model="formDataSick.leaveWrote"
 					label="เขียนที่"
 					:readonly="!edit"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 
 				<div class="col-12 col-md-4 col-sm-12">
-					<q-radio v-model="formData.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
+					<q-radio v-model="formDataSick.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
-					<q-radio v-model="formData.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
+					<q-radio v-model="formDataSick.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
-					<q-radio v-model="formData.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
+					<q-radio v-model="formDataSick.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
 				</div>
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<datepicker
 							class="col-12 col-md-3 col-sm-6"
 							menu-class-name="modalfix"
-							v-model="formData.leaveStartDate"
+							v-model="formDataSick.leaveStartDate"
 							:locale="'th'"
 							autoApply
 							borderless
@@ -178,7 +227,7 @@ const isReadOnly = computed(() => {
 									:readonly="!edit"
 									bg-color="white"
 									class="full-width datepicker"
-									:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
+									:model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : null"
 									:label="`${'ลาตั้งแต่วันที่'}`"
 									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
 								>
@@ -192,14 +241,14 @@ const isReadOnly = computed(() => {
 						<datepicker
 							class="col-12 col-md-3 col-sm-6"
 							menu-class-name="modalfix"
-							v-model="formData.leaveEndDate"
+							v-model="formDataSick.leaveEndDate"
 							:locale="'th'"
 							autoApply
 							borderless
 							:enableTimePicker="false"
 							week-start="0"
 							:readonly="isReadOnly"
-							:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+							:min-date="formDataSick.leaveStartDate ? new Date(formDataSick.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
 						>
 							<template #year="{ year }">
 								{{ year + 543 }}
@@ -217,7 +266,7 @@ const isReadOnly = computed(() => {
 									bg-color="white"
 									:readonly="isReadOnly"
 									class="full-width datepicker"
-									:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
+									:model-value="formDataSick.leaveEndDate != null ? date2Thai(formDataSick.leaveEndDate) : null"
 									:label="`${'ลาถึงวันที่'}`"
 									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 								>
@@ -234,7 +283,7 @@ const isReadOnly = computed(() => {
 							outlined
 							ref="leaveTotalRef"
 							for="leaveTotalRef"
-							v-model="formData.leaveTotal"
+							v-model="formDataSick.leaveTotal"
 							label="จำนวนวันที่ลา"
 							readonly
 							hide-bottom-space
@@ -245,7 +294,7 @@ const isReadOnly = computed(() => {
 							outlined
 							ref="leaveLastRef"
 							for="leaveLastRef"
-							v-model="formData.leaveLast"
+							v-model="formDataSick.leaveLast"
 							label="ลาครั้งสุดท้ายเมื่อวันที่"
 							readonly
 							hide-bottom-space
@@ -261,7 +310,7 @@ const isReadOnly = computed(() => {
 							outlined
 							ref="leaveNumberRef"
 							for="leaveNumberRef"
-							v-model="formData.leaveNumber"
+							v-model="formDataSick.leaveNumber"
 							mask="(###)-###-####"
 							hide-bottom-space
 							bg-color="white"
@@ -277,7 +326,7 @@ const isReadOnly = computed(() => {
 							outlined
 							ref="leaveAddressRef"
 							for="leaveAddressRef"
-							v-model="formData.leaveAddress"
+							v-model="formDataSick.leaveAddress"
 							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
 							:readonly="!edit"
 							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
@@ -293,7 +342,7 @@ const isReadOnly = computed(() => {
 					outlined
 					ref="leaveDetailRef"
 					for="leaveDetailRef"
-					v-model="formData.leaveDetail"
+					v-model="formDataSick.leaveDetail"
 					label="รายละเอียด"
 					:readonly="!edit"
 					bg-color="white"
@@ -303,7 +352,7 @@ const isReadOnly = computed(() => {
 						<q-file
 							ref="leaveDocumentRef"
 							for="leaveDocumentRef"
-							v-model="formData.leaveDocument"
+							v-model="formDataSick.leaveDocument"
 							@added="fileUploadDoc"
 							dense
 							label="เอกสารประกอบ"
@@ -326,7 +375,7 @@ const isReadOnly = computed(() => {
 					</div>
 					<q-card bordered flat class="full-width">
 						<q-list separator>
-							<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
+							<q-item v-for="(file, index) in formDataSick.leaveDocument" :key="index" class="q-my-xs">
 								<q-item-section>
 									<q-item-label class="full-width ellipsis">
 										{{ file.name }}

src/modules/05_leave/componenst/Forms/03_Birth.vue

@@ -1,10 +1,18 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue"
+import { useQuasar } from "quasar"
 import type { FormData, FormRef } from "@/modules/05_leave/interface/request/BirthForm"
 import { useCounterMixin } from "@/stores/mixin"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
 
+const dataStore = useLeaveStore()
 const mixin = useCounterMixin()
-const { date2Thai, calculateDurationYmd } = mixin
+const router = useRouter()
+const $q = useQuasar()
+const { date2Thai, dateToISO, dialogConfirm, success, messageError } = mixin
 const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
@@ -20,7 +28,8 @@ const props = defineProps({
 })
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<any>({
+const formDataBirth = reactive<any>({
+	type: dataStore.typeId,
 	leaveWrote: "",
 	leaveStartDate: null,
 	leaveEndDate: null,
@@ -57,16 +66,17 @@ const FormRef: FormRef = {
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, async () => {
 	// console.log("data==>", props.data)
-	formData.leaveWrote = props.data.leaveWrote
+	formDataBirth.leaveWrote = props.data.leaveWrote
-	formData.leaveStartDate = props.data.leaveStartDate
+	formDataBirth.leaveStartDate = props.data.leaveStartDate
-	formData.leaveEndDate = props.data.leaveEndDate
+	formDataBirth.leaveEndDate = props.data.leaveEndDate
-	formData.leaveTotal = props.data.leaveTotal
+	formDataBirth.leaveTotal = props.data.leaveTotal
-	formData.leaveNumber = props.data.leaveNumber
+	formDataBirth.leaveNumber = props.data.leaveNumber
-	formData.leaveDetail = props.data.leaveDetail
+	formDataBirth.leaveDetail = props.data.leaveDetail
-	formData.leaveDocument = props.data.leaveDocument
+	formDataBirth.leaveDocument = props.data.leaveDocument
 })
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("")
 const fileDocDataUpload = ref<File[]>([])
 async function fileUploadDoc(files: any) {
 	files.forEach((file: any) => {
@@ -87,9 +97,51 @@ function onValidate() {
 		}
 	}
 	if (hasError.every(result => result === true)) {
-		props.onSubmit(formData)
+		onSubmit()
 	}
 }
+
+/** ฟังก์ชั่น บันทึก */
+const onSubmit = async () => {
+	dialogConfirm(
+		$q,
+		async () => {
+			await saveFormData()
+		},
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
+	)
+
+	console.log("save")
+}
+
+async function saveFormData() {
+	const formData = new FormData()
+	const blob = formDataBirth.leaveDocument.slice(0, formDataBirth.leaveDocument[0].size)
+	const newFile = new File(blob, nameFile.value, {
+		type: formDataBirth.leaveDocument[0].type,
+	})
+	formData.append("leaveDocument", newFile)
+	formData.append("type", formDataBirth.type)
+	formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate))
+	formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate))
+	formData.append("leaveWrote", formDataBirth.leaveWrote)
+	formData.append("leaveAddress", formDataBirth.leaveAddress)
+	formData.append("leaveNumber", formDataBirth.leaveNumber)
+	formData.append("leaveDetail", formDataBirth.leaveDetail)
+	formData.append("leaveLast", formDataBirth.leaveLast)
+	formData.append("leaveTotal", formDataBirth.leaveTotal)
+
+	await http
+		.post(config.API.leaveUser(), formData)
+		.then((res: any) => {
+			success($q, "บันทึกสำเร็จ")
+			router.push(`/leave`)
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
+}
 </script>
 
 <!-- ฟอร์มลาคลอดบุตร-->
@@ -107,7 +159,7 @@ function onValidate() {
 					for="leaveWroteRef"
 					dense
 					outlined
-					v-model="formData.leaveWrote"
+					v-model="formDataBirth.leaveWrote"
 					label="เขียนที่"
 					hide-bottom-space
 					bg-color="white"
@@ -118,7 +170,7 @@ function onValidate() {
 				<datepicker
 					class="col-12 col-md-3 col-sm-12"
 					menu-class-name="modalfix"
-					v-model="formData.leaveStartDate"
+					v-model="formDataBirth.leaveStartDate"
 					:locale="'th'"
 					autoApply
 					hide-bottom-space
@@ -143,7 +195,7 @@ function onValidate() {
 							bg-color="white"
 							:readonly="!edit"
 							class="full-width datepicker"
-							:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
+							:model-value="formDataBirth.leaveStartDate != null ? date2Thai(formDataBirth.leaveStartDate) : null"
 							:label="`${'ลาตั้งแต่วันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
 						>
@@ -157,15 +209,15 @@ function onValidate() {
 				<datepicker
 					class="col-12 col-md-3 col-sm-12"
 					menu-class-name="modalfix"
-					v-model="formData.leaveEndDate"
+					v-model="formDataBirth.leaveEndDate"
 					:locale="'th'"
 					autoApply
 					borderless
 					hide-bottom-space
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="!formData.leaveStartDate"
+					:readonly="!formDataBirth.leaveStartDate"
-					:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataBirth.leaveStartDate ? new Date(formDataBirth.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -181,9 +233,9 @@ function onValidate() {
 							for="leaveEndDateRef"
 							hide-bottom-space
 							bg-color="white"
-							:readonly="!formData.leaveStartDate"
+							:readonly="!formDataBirth.leaveStartDate"
 							class="full-width datepicker"
-							:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
+							:model-value="formDataBirth.leaveEndDate != null ? date2Thai(formDataBirth.leaveEndDate) : null"
 							:label="`${'ลาถึงวันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 						>
@@ -199,7 +251,7 @@ function onValidate() {
 					outlined
 					ref="leaveTotalRef"
 					for="leaveTotalRef"
-					v-model="formData.leaveTotal"
+					v-model="formDataBirth.leaveTotal"
 					label="จำนวนวันที่ลา"
 					bg-color="white"
 					readonly
@@ -211,7 +263,7 @@ function onValidate() {
 					outlined
 					ref="leaveLastRef"
 					for="leaveLastRef"
-					v-model="formData.leaveLast"
+					v-model="formDataBirth.leaveLast"
 					label="ลาครั้งสุดท้ายเมื่อวันที่"
 					readonly
 					hide-bottom-space
@@ -227,7 +279,7 @@ function onValidate() {
 							bg-color="white"
 							ref="leaveNumberRef"
 							for="leaveNumberRef"
-							v-model="formData.leaveNumber"
+							v-model="formDataBirth.leaveNumber"
 							mask="(###)-###-####"
 							unmasked-value
 							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
@@ -243,7 +295,7 @@ function onValidate() {
 							bg-color="white"
 							ref="leaveAddressRef"
 							for="leaveAddressRef"
-							v-model="formData.leaveAddress"
+							v-model="formDataBirth.leaveAddress"
 							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
 							:readonly="!edit"
 							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
@@ -258,7 +310,7 @@ function onValidate() {
 					bg-color="white"
 					ref="leaveDetailRef"
 					for="leaveDetailRef"
-					v-model="formData.leaveDetail"
+					v-model="formDataBirth.leaveDetail"
 					label="รายละเอียด"
 					:readonly="!edit"
 				/>
@@ -267,7 +319,7 @@ function onValidate() {
 					ref="leaveDocumentRef"
 					for="leaveDocumentRef"
 					hide-bottom-space
-					v-model="formData.leaveDocument"
+					v-model="formDataBirth.leaveDocument"
 					@added="fileUploadDoc"
 					dense
 					bg-color="white"
@@ -289,7 +341,7 @@ function onValidate() {
 					</div>
 					<q-card bordered flat class="full-width">
 						<q-list separator>
-							<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
+							<q-item v-for="(file, index) in formDataBirth.leaveDocument" :key="index" class="q-my-xs">
 								<q-item-section>
 									<q-item-label class="full-width ellipsis">
 										{{ file.name }}

src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue

@@ -2,9 +2,17 @@
 import { ref, reactive, watch } from "vue"
 import type { FormData, FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
 import { useCounterMixin } from "@/stores/mixin"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useQuasar } from "quasar"
+import { useRouter } from "vue-router"
 
+const dataStore = useLeaveStore()
 const mixin = useCounterMixin()
-const { date2Thai, calculateDurationYmd } = mixin
+const router = useRouter()
+const $q = useQuasar()
+const { date2Thai, calculateDurationYmd, dateToISO, dialogConfirm, success, messageError } = mixin
 const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
@@ -20,13 +28,13 @@ const props = defineProps({
 })
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<any>({
+const formDataHelpWife = reactive<any>({
+	type: dataStore.typeId,
 	leaveWrote: "",
 	wifeDayName: "",
 	wifeDayDateBorn: null,
 	leaveStartDate: null,
 	leaveEndDate: null,
-	contractTel: "",
 	leaveTotal: "",
 	leaveNumber: "",
 	leaveAddress: "",
@@ -40,7 +48,6 @@ const wifeDayNameRef = ref<object | null>(null)
 const wifeDayDateBornRef = ref<object | null>(null)
 const leaveStartDateRef = ref<object | null>(null)
 const leaveEndDateRef = ref<object | null>(null)
-const contractTelRef = ref<object | null>(null)
 const leaveTotalRef = ref<object | null>(null)
 const leaveNumberRef = ref<object | null>(null)
 const leaveAddressRef = ref<object | null>(null)
@@ -64,18 +71,19 @@ const FormRef: FormRef = {
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, async () => {
 	// console.log("data==>", props.data)
-	formData.leaveWrote = props.data.leaveWrote
+	formDataHelpWife.leaveWrote = props.data.leaveWrote
-	formData.wifeDayName = props.data.wifeDayName
+	formDataHelpWife.wifeDayName = props.data.wifeDayName
-	formData.wifeDayDateBorn = props.data.wifeDayDateBorn
+	formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn
-	formData.leaveStartDate = props.data.leaveStartDate
+	formDataHelpWife.leaveStartDate = props.data.leaveStartDate
-	formData.leaveEndDate = props.data.leaveEndDate
+	formDataHelpWife.leaveEndDate = props.data.leaveEndDate
-	formData.leaveTotal = props.data.leaveTotal
+	formDataHelpWife.leaveTotal = props.data.leaveTotal
-	formData.leaveNumber = props.data.leaveNumber
+	formDataHelpWife.leaveNumber = props.data.leaveNumber
-	formData.leaveDetail = props.data.leaveDetail
+	formDataHelpWife.leaveDetail = props.data.leaveDetail
-	formData.leaveDocument = props.data.leaveDocument
+	formDataHelpWife.leaveDocument = props.data.leaveDocument
 })
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("")
 const fileDocDataUpload = ref<File[]>([])
 const fileUploadDoc = async (files: any) => {
 	files.forEach((file: any) => {
@@ -96,7 +104,7 @@ function onValidate() {
 		}
 	}
 	if (hasError.every(result => result === true)) {
-		props.onSubmit(formData)
+		onSubmit()
 	}
 }
 
@@ -104,10 +112,53 @@ function onValidate() {
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
+	const newLeaveTotal = calculateDurationYmd(formDataHelpWife.leaveStartDate, formDataHelpWife.leaveEndDate)
-	formData.leaveTotal = newLeaveTotal
+	formDataHelpWife.leaveTotal = newLeaveTotal
 	console.log("test")
 }
+
+/** ฟังก์ชั่น บันทึก */
+const onSubmit = async () => {
+	dialogConfirm(
+		$q,
+		async () => {
+			await saveFormData()
+		},
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
+	)
+
+	console.log("save")
+}
+
+async function saveFormData() {
+	const formData = new FormData()
+
+	const blob = formDataHelpWife.leaveDocument.slice(0, formDataHelpWife.leaveDocument[0].size)
+	const newFile = new File(blob, nameFile.value, {
+		type: formDataHelpWife.leaveDocument[0].type,
+	})
+	formData.append("leaveDocument", newFile)
+	formData.append("type", formDataHelpWife.type)
+	formData.append("leaveStartDate", dateToISO(formDataHelpWife.leaveStartDate))
+	formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate))
+	formData.append("leaveWrote", formDataHelpWife.leaveWrote)
+	formData.append("leaveAddress", formDataHelpWife.leaveAddress)
+	formData.append("leaveNumber", formDataHelpWife.leaveNumber)
+	formData.append("leaveDetail", formDataHelpWife.leaveDetail)
+	formData.append("leaveTotal", formDataHelpWife.leaveTotal)
+	formData.append("wifeDayName", formDataHelpWife.wifeDayName)
+	formData.append("wifeDayDateBorn", dateToISO(formDataHelpWife.wifeDayDateBorn))
+	await http
+		.post(config.API.leaveUser(), formData)
+		.then((res: any) => {
+			success($q, "บันทึกสำเร็จ")
+			router.push(`/leave`)
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
+}
 </script>
 
 <template>
@@ -142,7 +193,7 @@ function updateLeaveTotal() {
 					outlined
 					hide-bottom-space
 					bg-color="white"
-					v-model="formData.leaveWrote"
+					v-model="formDataHelpWife.leaveWrote"
 					label="เขียนที่"
 					:readonly="!edit"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
@@ -150,7 +201,7 @@ function updateLeaveTotal() {
 				<datepicker
 					class="col-12 col-md-4 col-sm-12"
 					menu-class-name="modalfix"
-					v-model="formData.leaveStartDate"
+					v-model="formDataHelpWife.leaveStartDate"
 					:locale="'th'"
 					autoApply
 					hide-bottom-space
@@ -175,7 +226,7 @@ function updateLeaveTotal() {
 							bg-color="white"
 							:readonly="!edit"
 							class="full-width datepicker"
-							:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
+							:model-value="formDataHelpWife.leaveStartDate != null ? date2Thai(formDataHelpWife.leaveStartDate) : null"
 							:label="`${'ลาตั้งแต่วันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
 						>
@@ -189,7 +240,7 @@ function updateLeaveTotal() {
 				<datepicker
 					class="col-12 col-md-4 col-sm-12"
 					menu-class-name="modalfix"
-					v-model="formData.leaveEndDate"
+					v-model="formDataHelpWife.leaveEndDate"
 					:locale="'th'"
 					autoApply
 					borderless
@@ -197,8 +248,8 @@ function updateLeaveTotal() {
 					:enableTimePicker="false"
 					@update:model-value="updateLeaveTotal"
 					week-start="0"
-					:readonly="!formData.leaveStartDate"
+					:readonly="!formDataHelpWife.leaveStartDate"
-					:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataHelpWife.leaveStartDate ? new Date(formDataHelpWife.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -214,9 +265,9 @@ function updateLeaveTotal() {
 							for="leaveEndDateRef"
 							hide-bottom-space
 							bg-color="white"
-							:readonly="!formData.leaveStartDate"
+							:readonly="!formDataHelpWife.leaveStartDate"
 							class="full-width datepicker"
-							:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
+							:model-value="formDataHelpWife.leaveEndDate != null ? date2Thai(formDataHelpWife.leaveEndDate) : null"
 							:label="`${'ลาถึงวันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 						>
@@ -232,7 +283,7 @@ function updateLeaveTotal() {
 					outlined
 					ref="leaveTotalRef"
 					for="leaveTotalRef"
-					v-model="formData.leaveTotal"
+					v-model="formDataHelpWife.leaveTotal"
 					label="จำนวนวันที่ลา"
 					readonly
 					hide-bottom-space
@@ -247,7 +298,7 @@ function updateLeaveTotal() {
 						bg-color="white"
 						outlined
 						hide-bottom-space
-						v-model="formData.wifeDayName"
+						v-model="formDataHelpWife.wifeDayName"
 						label="ชื่อภรรยา"
 						:readonly="!edit"
 						:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
@@ -257,7 +308,7 @@ function updateLeaveTotal() {
 				<datepicker
 					class="col-12 col-md-4 col-sm-12"
 					menu-class-name="modalfix"
-					v-model="formData.wifeDayDateBorn"
+					v-model="formDataHelpWife.wifeDayDateBorn"
 					:locale="'th'"
 					autoApply
 					borderless
@@ -282,7 +333,7 @@ function updateLeaveTotal() {
 							bg-color="white"
 							:readonly="!edit"
 							class="full-width datepicker"
-							:model-value="formData.wifeDayDateBorn != null ? date2Thai(formData.wifeDayDateBorn) : null"
+							:model-value="formDataHelpWife.wifeDayDateBorn != null ? date2Thai(formDataHelpWife.wifeDayDateBorn) : null"
 							:label="`${'วันที่คลอด'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
 						>
@@ -300,7 +351,7 @@ function updateLeaveTotal() {
 							outlined
 							ref="leaveNumberRef"
 							for="leaveNumberRef"
-							v-model="formData.leaveNumber"
+							v-model="formDataHelpWife.leaveNumber"
 							mask="(###)-###-####"
 							unmasked-value
 							hide-bottom-space
@@ -318,7 +369,7 @@ function updateLeaveTotal() {
 							bg-color="white"
 							ref="leaveAddressRef"
 							for="leaveAddressRef"
-							v-model="formData.leaveAddress"
+							v-model="formDataHelpWife.leaveAddress"
 							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
 							:readonly="!edit"
 							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
@@ -334,12 +385,23 @@ function updateLeaveTotal() {
 					outlined
 					ref="leaveDetailRef"
 					for="leaveDetailRef"
-					v-model="formData.leaveDetail"
+					v-model="formDataHelpWife.leaveDetail"
 					label="รายละเอียด"
 					:readonly="!edit"
 				/>
 
-				<q-file bg-color="white" ref="leaveDocumentRef" v-model="formData.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
+				<q-file
+					bg-color="white"
+					ref="leaveDocumentRef"
+					v-model="formDataHelpWife.leaveDocument"
+					@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>
@@ -351,7 +413,7 @@ function updateLeaveTotal() {
 					</div>
 					<q-card bordered flat class="full-width">
 						<q-list separator>
-							<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
+							<q-item v-for="(file, index) in formDataHelpWife.leaveDocument" :key="index" class="q-my-xs">
 								<q-item-section>
 									<q-item-label class="full-width ellipsis">
 										{{ file.name }}

src/modules/05_leave/componenst/Forms/05_VacationForm.vue

@@ -2,9 +2,17 @@
 import { ref, reactive, watch, computed } from "vue"
 import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
 import { useCounterMixin } from "@/stores/mixin"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useQuasar } from "quasar"
+import { useRouter } from "vue-router"
 
+const $q = useQuasar()
+const dataStore = useLeaveStore()
 const mixin = useCounterMixin()
-const { date2Thai, calculateDurationYmd } = mixin
+const router = useRouter()
+const { date2Thai, dateToISO, dialogConfirm, success, messageError } = mixin
 const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
@@ -20,14 +28,14 @@ const props = defineProps({
 })
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<any>({
+const formDataVacation = reactive<any>({
+	type: dataStore.typeId,
 	leaveWrote: "",
 	halfDay: "day",
 	restDayOldTotal: "",
 	restDayCurrentTotal: "",
 	leaveStartDate: null,
 	leaveEndDate: null,
-	contractTel: "",
 	leaveTotal: "",
 	leaveNumber: "",
 	leaveAddress: "",
@@ -42,7 +50,6 @@ const restDayCurrentTotalRef = ref<object | null>(null)
 const halfDayRef = ref<object | null>(null)
 const leaveStartDateRef = ref<object | null>(null)
 const leaveEndDateRef = ref<object | null>(null)
-const contractTelRef = ref<object | null>(null)
 const leaveTotalRef = ref<object | null>(null)
 const leaveNumberRef = ref<object | null>(null)
 const leaveAddressRef = ref<object | null>(null)
@@ -57,7 +64,6 @@ const FormRef: FormRef = {
 	restDayCurrentTotal: restDayCurrentTotalRef,
 	leaveStartDate: leaveStartDateRef,
 	leaveEndDate: leaveEndDateRef,
-	contractTel: contractTelRef,
 	leaveTotal: leaveTotalRef,
 	leaveNumber: leaveNumberRef,
 	leaveAddress: leaveAddressRef,
@@ -68,19 +74,19 @@ const FormRef: FormRef = {
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, async () => {
 	// console.log("data==>", props.data)
-	formData.leaveWrote = props.data.leaveWrote
+	formDataVacation.leaveWrote = props.data.leaveWrote
-	formData.restDayOldTotal = props.data.restDayOldTotal
+	formDataVacation.restDayOldTotal = props.data.restDayOldTotal
-	formData.restDayCurrentTotal = props.data.restDayCurrentTotal
+	formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal
-	formData.leaveStartDate = props.data.leaveStartDate
+	formDataVacation.leaveStartDate = props.data.leaveStartDate
-	formData.leaveEndDate = props.data.leaveEndDate
+	formDataVacation.leaveEndDate = props.data.leaveEndDate
-	formData.contractTel = props.data.contractTel
+	formDataVacation.leaveTotal = props.data.leaveTotal
-	formData.leaveTotal = props.data.leaveTotal
+	formDataVacation.leaveNumber = props.data.leaveNumber
-	formData.leaveNumber = props.data.leaveNumber
+	formDataVacation.leaveDetail = props.data.leaveDetail
-	formData.leaveDetail = props.data.leaveDetail
+	formDataVacation.leaveDocument = props.data.leaveDocument
-	formData.leaveDocument = props.data.leaveDocument
 })
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("")
 const fileDocDataUpload = ref<File[]>([])
 const fileUploadDoc = async (files: any) => {
 	files.forEach((file: any) => {
@@ -101,28 +107,71 @@ function onValidate() {
 		}
 	}
 	if (hasError.every(result => result === true)) {
-		props.onSubmit(formData)
+		onSubmit()
 	}
 }
 
+/** ฟังก์ชั่น บันทึก */
+const onSubmit = async () => {
+	dialogConfirm(
+		$q,
+		async () => {
+			await saveFormData()
+		},
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
+	)
+
+	console.log("save")
+}
+
+async function saveFormData() {
+	const formData = new FormData()
+
+	const blob = formDataVacation.leaveDocument.slice(0, formDataVacation.leaveDocument[0].size)
+	const newFile = new File(blob, nameFile.value, {
+		type: formDataVacation.leaveDocument[0].type,
+	})
+	formData.append("leaveDocument", newFile)
+	formData.append("type", formDataVacation.type)
+	formData.append("leaveStartDate", dateToISO(formDataVacation.leaveStartDate))
+	formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate))
+	formData.append("leaveWrote", formDataVacation.leaveWrote)
+	formData.append("leaveAddress", formDataVacation.leaveAddress)
+	formData.append("leaveNumber", formDataVacation.leaveNumber)
+	formData.append("leaveDetail", formDataVacation.leaveDetail)
+	formData.append("restDayOldTotal", formDataVacation.restDayOldTotal)
+	formData.append("restDayCurrentTotal", formDataVacation.restDayCurrentTotal)
+	formData.append("leaveTotal", formDataVacation.leaveTotal)
+	await http
+		.post(config.API.leaveUser(), formData)
+		.then((res: any) => {
+			success($q, "บันทึกสำเร็จ")
+			router.push(`/leave`)
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
+}
+
 /**
  * function รีเซทค่า leaveStartDate เเละ leaveEndDate
  */
 function resetDate() {
-	if (formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon") {
+	if (formDataVacation.halfDay === "half_day_morning" || formDataVacation.halfDay === "half_day_afternoon") {
-		formData.leaveStartDate = null
+		formDataVacation.leaveStartDate = null
-		formData.leaveEndDate = null
+		formDataVacation.leaveEndDate = null
 	}
 	console.log("testnull")
 }
 
 const isReadOnly = computed(() => {
-	const conditionHalfDay = formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon"
+	const conditionHalfDay = formDataVacation.halfDay === "half_day_morning" || formDataVacation.halfDay === "half_day_afternoon"
 	if (conditionHalfDay) {
-		formData.leaveEndDate = formData.leaveStartDate // Set formData.leaveEndDate to null
+		formDataVacation.leaveEndDate = formDataVacation.leaveStartDate // Set formDataVacation.leaveEndDate to null
-		formData.leaveTotal = "0.5 วัน "
+		formDataVacation.leaveTotal = "0.5 วัน "
 	} else {
-		formData.leaveTotal = null
+		formDataVacation.leaveTotal = null
 	}
 	return conditionHalfDay
 })
@@ -144,15 +193,15 @@ const isReadOnly = computed(() => {
 					hide-bottom-space
 					bg-color="white"
 					outlined
-					v-model="formData.leaveWrote"
+					v-model="formDataVacation.leaveWrote"
 					label="เขียนที่"
 					:readonly="!edit"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 				<div class="col-12 col-md-4 col-sm-6">
-					<q-radio v-model="formData.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
+					<q-radio v-model="formDataVacation.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
-					<q-radio v-model="formData.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
+					<q-radio v-model="formDataVacation.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
-					<q-radio v-model="formData.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
+					<q-radio v-model="formDataVacation.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
 				</div>
 				<q-input
 					class="col-12 col-md-4 col-sm-6"
@@ -163,7 +212,7 @@ const isReadOnly = computed(() => {
 					bg-color="white"
 					readonly
 					outlined
-					v-model="formData.restDayOldTotal"
+					v-model="formDataVacation.restDayOldTotal"
 					label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
 				/>
 
@@ -176,14 +225,14 @@ const isReadOnly = computed(() => {
 					hide-bottom-space
 					bg-color="white"
 					outlined
-					v-model="formData.restDayCurrentTotal"
+					v-model="formDataVacation.restDayCurrentTotal"
 					label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
 				/>
 
 				<datepicker
 					class="col-12 col-md-3 col-sm-6"
 					menu-class-name="modalfix"
-					v-model="formData.leaveStartDate"
+					v-model="formDataVacation.leaveStartDate"
 					:locale="'th'"
 					autoApply
 					hide-bottom-space
@@ -208,7 +257,7 @@ const isReadOnly = computed(() => {
 							bg-color="white"
 							:readonly="!edit"
 							class="full-width datepicker"
-							:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
+							:model-value="formDataVacation.leaveStartDate != null ? date2Thai(formDataVacation.leaveStartDate) : null"
 							:label="`${'ลาตั้งแต่วันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
 						>
@@ -222,7 +271,7 @@ const isReadOnly = computed(() => {
 				<datepicker
 					class="col-12 col-md-3 col-sm-6"
 					menu-class-name="modalfix"
-					v-model="formData.leaveEndDate"
+					v-model="formDataVacation.leaveEndDate"
 					:locale="'th'"
 					autoApply
 					hide-bottom-space
@@ -230,7 +279,7 @@ const isReadOnly = computed(() => {
 					:enableTimePicker="false"
 					week-start="0"
 					:readonly="isReadOnly"
-					:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataVacation.leaveStartDate ? new Date(formDataVacation.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -248,7 +297,7 @@ const isReadOnly = computed(() => {
 							bg-color="white"
 							class="full-width datepicker"
 							:readonly="isReadOnly"
-							:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
+							:model-value="formDataVacation.leaveEndDate != null ? date2Thai(formDataVacation.leaveEndDate) : null"
 							:label="`${'ลาถึงวันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 						>
@@ -265,7 +314,7 @@ const isReadOnly = computed(() => {
 					outlined
 					ref="leaveTotalRef"
 					for="leaveTotalRef"
-					v-model="formData.leaveTotal"
+					v-model="formDataVacation.leaveTotal"
 					label="จำนวนวันที่ลา"
 					readonly
 					hide-bottom-space
@@ -280,7 +329,7 @@ const isReadOnly = computed(() => {
 							bg-color="white"
 							ref="leaveNumberRef"
 							for="leaveNumberRef"
-							v-model="formData.leaveNumber"
+							v-model="formDataVacation.leaveNumber"
 							mask="(###)-###-####"
 							unmasked-value
 							label="หมายเลขโทรศัพท์ที่ติดต่อได้"
@@ -296,7 +345,7 @@ const isReadOnly = computed(() => {
 							bg-color="white"
 							ref="leaveAddressRef"
 							for="leaveAddressRef"
-							v-model="formData.leaveAddress"
+							v-model="formDataVacation.leaveAddress"
 							label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
 							:readonly="!edit"
 							:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
@@ -312,12 +361,23 @@ const isReadOnly = computed(() => {
 					outlined
 					ref="leaveDetailRef"
 					for="leaveDetailRef"
-					v-model="formData.leaveDetail"
+					v-model="formDataVacation.leaveDetail"
 					label="รายละเอียด"
 					:readonly="!edit"
 				/>
 
-				<q-file ref="leaveDocumentRef" bg-color="white" v-model="formData.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
+				<q-file
+					ref="leaveDocumentRef"
+					bg-color="white"
+					v-model="formDataVacation.leaveDocument"
+					@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>
@@ -329,7 +389,7 @@ const isReadOnly = computed(() => {
 					</div>
 					<q-card bordered flat class="full-width">
 						<q-list separator>
-							<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
+							<q-item v-for="(file, index) in formDataVacation.leaveDocument" :key="index" class="q-my-xs">
 								<q-item-section>
 									<q-item-label class="full-width ellipsis">
 										{{ file.name }}

src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue

@@ -3,10 +3,14 @@ import { reactive, ref, watch } from "vue"
 import { useCounterMixin } from "@/stores/mixin"
 import { useQuasar } from "quasar"
 import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
 
+const dataStore = useLeaveStore()
 const $q = useQuasar()
 const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin
+const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError } = mixin
 
 const edit = ref<boolean>(true)
 const files = ref<any>(null)
@@ -26,8 +30,8 @@ const props = defineProps({
 /** ตัวแปร ref สำหรับแสดง validate */
 const ordainDayLocationNumberRef = ref<object | null>(null)
 const leaveWroteRef = ref<object | null>(null)
-const birthdayRef = ref<object | null>(null)
+const leavebirthDateRef = ref<object | null>(null)
-const governmentRef = ref<object | null>(null)
+const leavegovernmentDateRef = ref<object | null>(null)
 const totalLeaveRef = ref<object | null>(null)
 const leaveEndDateRef = ref<object | null>(null)
 const ordainDayOrdinationRef = ref<object | null>(null)
@@ -39,10 +43,11 @@ const ordainDayBuddhistLentNameRef = ref<object | null>(null)
 const leaveDocumentRef = ref<object | null>(null)
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<any>({
+const formDataOrdination = reactive<any>({
+	type: dataStore.typeId,
 	leaveWrote: "",
-	government: new Date(),
+	leavegovernmentDate: new Date(),
-	birthday: new Date(),
+	leavebirthDate: new Date(),
 	leaveStartDate: null,
 	leaveEndDate: null,
 	totalLeave: new Date(),
@@ -52,15 +57,15 @@ const formData = reactive<any>({
 	ordainDayLocationAddress: "",
 	ordainDayBuddhistLentName: "",
 	ordainDayBuddhistLentAddress: "",
-	monk: "never",
+	ordainDayStatus: "true",
 	leaveDocument: null,
 })
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: OrdinationForm = {
 	leaveWrote: leaveWroteRef,
-	government: governmentRef,
+	leavegovernmentDate: leavegovernmentDateRef,
-	birthday: birthdayRef,
+	leavebirthDate: leavebirthDateRef,
 	leaveStartDate: leaveStartDateRef,
 	leaveEndDate: leaveEndDateRef,
 	totalLeave: totalLeaveRef,
@@ -73,11 +78,20 @@ const formRef: OrdinationForm = {
 	leaveDocument: leaveDocumentRef,
 }
 
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
+const fileUploadDoc = async (files: any) => {
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
+
 // Watch for changes in leaveEndDate and update leaveTotal accordingly
-watch(formData.leaveEndDate, async () => {
+watch(formDataOrdination.leaveEndDate, async () => {
-	if (formData.leaveStartDate !== undefined && formData.leaveEndDate !== undefined) {
+	if (formDataOrdination.leaveStartDate !== undefined && formDataOrdination.leaveEndDate !== undefined) {
-		const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
+		const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
-		formData.leaveTotal = newLeaveTotal
+		formDataOrdination.leaveTotal = newLeaveTotal
 		console.log(newLeaveTotal)
 	}
 	// Update the leaveTotal value
@@ -88,8 +102,8 @@ watch(formData.leaveEndDate, async () => {
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
+	const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
-	formData.leaveTotal = newLeaveTotal
+	formDataOrdination.leaveTotal = newLeaveTotal
 	console.log("test")
 }
 
@@ -106,9 +120,56 @@ function onValidate() {
 		}
 	}
 	if (hasError.every(result => result === true)) {
-		props.onSubmit(formData)
+		onSubmit()
 	}
 }
+
+/** ฟังก์ชั่น บันทึก */
+const onSubmit = async () => {
+	dialogConfirm(
+		$q,
+		async () => {
+			await saveFormData()
+		},
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
+	)
+
+	console.log("save")
+}
+
+async function saveFormData() {
+	const formData = new FormData()
+
+	const blob = formDataOrdination.leaveDocument.slice(0, formDataOrdination.leaveDocument[0].size)
+	const newFile = new File(blob, nameFile.value, {
+		type: formDataOrdination.leaveDocument[0].type,
+	})
+	formData.append("leaveDocument", newFile)
+	formData.append("type", formDataOrdination.type)
+	formData.append("leaveStartDate", dateToISO(formDataOrdination.leaveStartDate))
+	formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate))
+	formData.append("ordainDayOrdination", dateToISO(formDataOrdination.ordainDayOrdination))
+	formData.append("ordainDayLocationName", formDataOrdination.ordainDayLocationName)
+	formData.append("ordainDayLocationNumber", formDataOrdination.ordainDayLocationNumber)
+	formData.append("ordainDayLocationAddress", formDataOrdination.ordainDayLocationAddress)
+	formData.append("ordainDayBuddhistLentName", formDataOrdination.ordainDayBuddhistLentName)
+	formData.append("ordainDayBuddhistLentAddress", formDataOrdination.ordainDayBuddhistLentAddress)
+	formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus)
+	formData.append("leaveWrote", formDataOrdination.leaveWrote)
+	formData.append("leaveDetail", formDataOrdination.leaveDetail)
+	formData.append("leavebirthDate", dateToISO(formDataOrdination.leavebirthDate))
+	formData.append("leavegovernmentDate", dateToISO(formDataOrdination.leavegovernmentDate))
+
+	await http
+		.post(config.API.leaveUser(), formData)
+		.then((res: any) => {
+			success($q, "บันทึกสำเร็จ")
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
+}
 </script>
 
 <!-- ฟอร์ม ลาอุปสมบท -->
@@ -127,12 +188,21 @@ function onValidate() {
 					outlined
 					bg-color="white"
 					hide-bottom-space
-					v-model="formData.leaveWrote"
+					v-model="formDataOrdination.leaveWrote"
 					label="เขียนที่"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 
-				<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.leaveStartDate" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
+				<datepicker
+					class="col-12 col-md-4 col-sm-6"
+					menu-class-name="modalfix"
+					v-model="formDataOrdination.leaveStartDate"
+					:locale="'th'"
+					autoApply
+					borderless
+					:enableTimePicker="false"
+					week-start="0"
+				>
 					<template #year="{ year }">
 						{{ year + 543 }}
 					</template>
@@ -147,7 +217,7 @@ function onValidate() {
 							ref="leaveStartDateRef"
 							hide-bottom-space
 							class="full-width datepicker"
-							:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
+							:model-value="formDataOrdination.leaveStartDate != null ? date2Thai(formDataOrdination.leaveStartDate) : null"
 							:label="`${'ลาตั้งแต่วันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
 						>
@@ -161,14 +231,14 @@ function onValidate() {
 				<datepicker
 					class="col-12 col-md-4 col-sm-6"
 					menu-class-name="modalfix"
-					v-model="formData.leaveEndDate"
+					v-model="formDataOrdination.leaveEndDate"
 					:locale="'th'"
 					autoApply
 					borderless
 					@update:model-value="updateLeaveTotal"
-					:readonly="!formData.leaveStartDate"
+					:readonly="!formDataOrdination.leaveStartDate"
 					:enableTimePicker="false"
-					:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataOrdination.leaveStartDate ? new Date(formDataOrdination.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
 					week-start="0"
 				>
 					<template #year="{ year }">
@@ -185,9 +255,9 @@ function onValidate() {
 							bg-color="white"
 							hide-bottom-space
 							class="full-width datepicker"
-							:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
+							:model-value="formDataOrdination.leaveEndDate != null ? date2Thai(formDataOrdination.leaveEndDate) : null"
 							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!formData.leaveStartDate"
+							:readonly="!formDataOrdination.leaveStartDate"
 							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 						>
 							<template v-slot:prepend>
@@ -203,7 +273,7 @@ function onValidate() {
 					bg-color="white"
 					ref="leaveTotalRef"
 					for="leaveTotalRef"
-					v-model="formData.leaveTotal"
+					v-model="formDataOrdination.leaveTotal"
 					label="จำนวนวันที่ลา"
 					readonly
 					hide-bottom-space
@@ -213,7 +283,7 @@ function onValidate() {
 						<datepicker
 							class="col-12 col-md-4 col-sm-6"
 							menu-class-name="modalfix"
-							v-model="formData.government"
+							v-model="formDataOrdination.leavegovernmentDate"
 							:locale="'th'"
 							autoApply
 							borderless
@@ -230,13 +300,13 @@ function onValidate() {
 							<template #trigger>
 								<q-input
 									outlined
-									ref="governmentRef"
+									ref="leavegovernmentDateRef"
 									dense
 									bg-color="white"
 									hide-bottom-space
 									readonly
 									class="full-width datepicker"
-									:model-value="formData.government != null ? date2Thai(formData.government) : null"
+									:model-value="formDataOrdination.leavegovernmentDate != null ? date2Thai(formDataOrdination.leavegovernmentDate) : null"
 									:label="`${'วันที่เข้ารับราชการ'}`"
 									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
 								>
@@ -250,7 +320,7 @@ function onValidate() {
 						<datepicker
 							class="col-12 col-md-4 col-sm-6"
 							menu-class-name="modalfix"
-							v-model="formData.birthday"
+							v-model="formDataOrdination.leavebirthDate"
 							:locale="'th'"
 							autoApply
 							borderless
@@ -267,13 +337,13 @@ function onValidate() {
 							<template #trigger>
 								<q-input
 									outlined
-									ref="birthdayRef"
+									ref="leavebirthDateRef"
 									dense
 									bg-color="white"
 									hide-bottom-space
 									readonly
 									class="full-width datepicker"
-									:model-value="formData.birthday != null ? date2Thai(formData.birthday) : null"
+									:model-value="formDataOrdination.leavebirthDate != null ? date2Thai(formDataOrdination.leavebirthDate) : null"
 									:label="`${'วันเดือนปีเกิด'}`"
 									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
 								>
@@ -288,15 +358,15 @@ function onValidate() {
 
 				<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 " hide-bottom-space />
+					<q-radio v-model="formDataOrdination.ordainDayStatus" val="true" label="เคยบวช" checked-icon="task_alt " hide-bottom-space />
-					<q-radio v-model="formData.monk" val="never" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
+					<q-radio v-model="formDataOrdination.ordainDayStatus" val="false" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
 				</div>
 
 				<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.ordainDayOrdination"
+					v-model="formDataOrdination.ordainDayOrdination"
 					:locale="'th'"
 					autoApply
 					full-width
@@ -319,7 +389,7 @@ function onValidate() {
 							bg-color="white"
 							hide-bottom-space
 							class="full-width datepicker"
-							:model-value="formData.ordainDayOrdination != null ? date2Thai(formData.ordainDayOrdination) : null"
+							:model-value="formDataOrdination.ordainDayOrdination != null ? date2Thai(formDataOrdination.ordainDayOrdination) : null"
 							:label="`${'วันอุปสมบท'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
 						>
@@ -338,7 +408,7 @@ function onValidate() {
 					bg-color="white"
 					outlined
 					full-width
-					v-model="formData.ordainDayLocationName"
+					v-model="formDataOrdination.ordainDayLocationName"
 					label="ชื่อวัด"
 					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
 				/>
@@ -349,7 +419,7 @@ function onValidate() {
 					dense
 					full-width
 					outlined
-					v-model="formData.ordainDayLocationNumber"
+					v-model="formDataOrdination.ordainDayLocationNumber"
 					bg-color="white"
 					mask="(###)-###-####"
 					unmasked-value
@@ -364,7 +434,7 @@ function onValidate() {
 					bg-color="white"
 					outlined
 					hide-bottom-space
-					v-model="formData.ordainDayLocationAddress"
+					v-model="formDataOrdination.ordainDayLocationAddress"
 					label="ที่อยู่"
 					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
 					type="textarea"
@@ -378,7 +448,7 @@ function onValidate() {
 					bg-color="white"
 					hide-bottom-space
 					outlined
-					v-model="formData.ordainDayBuddhistLentName"
+					v-model="formDataOrdination.ordainDayBuddhistLentName"
 					label="ชื่อวัด"
 					:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
 				/>
@@ -389,7 +459,7 @@ function onValidate() {
 					ref="ordainDayBuddhistLentAddressRef"
 					bg-color="white"
 					outlined
-					v-model="formData.ordainDayBuddhistLentAddress"
+					v-model="formDataOrdination.ordainDayBuddhistLentAddress"
 					label="ที่อยู่"
 					:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
 					type="textarea"
@@ -403,13 +473,13 @@ function onValidate() {
 					outlined
 					ref="leaveDetailRef"
 					for="leaveDetailRef"
-					v-model="formData.leaveDetail"
+					v-model="formDataOrdination.leaveDetail"
 					label="รายละเอียด"
 					:readonly="!edit"
 				/>
 
 				<div class="col-12 col-sm-6">
-					<q-file ref="leaveDocumentRef" v-model="formData.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple>
+					<q-file ref="leaveDocumentRef" v-model="formDataOrdination.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined bg-color="white" multiple use-chips>
 						<template v-slot:prepend>
 							<q-icon name="attach_file" color="primary" />
 						</template>

src/modules/05_leave/componenst/Forms/07_HajjForm.vue

@@ -3,17 +3,23 @@ import { reactive, ref } from "vue"
 import { useCounterMixin } from "@/stores/mixin"
 import { useQuasar } from "quasar"
 import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
 
+const router = useRouter()
+const dataStore = useLeaveStore()
 const $q = useQuasar()
 const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin
+const { date2Thai, dialogConfirm, calculateDurationYmd, messageError, success, dateToISO } = mixin
 
 const edit = ref<boolean>(true)
 const files = ref<any>(null)
 
 /** ตัวแปร ref สำหรับแสดง validate */
 const leaveWroteRef = ref<object | null>(null)
-const governmentRef = ref<object | null>(null)
+const leavegovernmentDateRef = ref<object | null>(null)
 const leaveStartDateRef = ref<object | null>(null)
 const leaveEndDateRef = ref<object | null>(null)
 const leaveDocumentRef = ref<object | null>(null)
@@ -30,25 +36,35 @@ const props = defineProps({
 })
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<any>({
+const formDataHaji = reactive<any>({
+	type: dataStore.typeId,
 	leaveWrote: "",
-	government: new Date(),
+	leavegovernmentDate: new Date(),
 	leaveStartDate: null,
 	leaveEndDate: null,
 	totalLeave: new Date(),
-	hajjDayStatus: "never",
+	hajjDayStatus: "true",
 	leaveDocument: null,
 })
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: HajiForm = {
 	leaveWrote: leaveWroteRef,
-	government: governmentRef,
+	leavegovernmentDate: leavegovernmentDateRef,
 	leaveStartDate: leaveStartDateRef,
 	leaveEndDate: leaveEndDateRef,
 	leaveDocument: leaveDocumentRef,
 }
 
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
+const fileUploadDoc = async (files: any) => {
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
+
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
 	const hasError = []
@@ -62,15 +78,57 @@ function onValidate() {
 		}
 	}
 	if (hasError.every(result => result === true)) {
-		props.onSubmit(formData)
+		onSubmit()
 	}
 }
+
+/** ฟังก์ชั่น บันทึก */
+const onSubmit = async () => {
+	dialogConfirm(
+		$q,
+		async () => {
+			await saveFormData()
+		},
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
+	)
+
+	console.log("save")
+}
+
+async function saveFormData() {
+	const formData = new FormData()
+
+	const blob = formDataHaji.leaveDocument.slice(0, formDataHaji.leaveDocument[0].size)
+	const newFile = new File(blob, nameFile.value, {
+		type: formDataHaji.leaveDocument[0].type,
+	})
+	formData.append("leaveDocument", newFile)
+	formData.append("type", formDataHaji.type)
+	formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate))
+	formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate))
+	formData.append("hajjDayStatus", formDataHaji.hajjDayStatus)
+	formData.append("leaveWrote", formDataHaji.leaveWrote)
+	formData.append("leaveDetail", formDataHaji.leaveDetail)
+	formData.append("leavegovernmentDate", dateToISO(formDataHaji.leavegovernmentDate))
+
+	await http
+		.post(config.API.leaveUser(), formData)
+		.then((res: any) => {
+			success($q, "บันทึกสำเร็จ")
+			router.push(`/leave`)
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
+}
+
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
+	const newLeaveTotal = calculateDurationYmd(formDataHaji.leaveStartDate, formDataHaji.leaveEndDate)
-	formData.leaveTotal = newLeaveTotal
+	formDataHaji.leaveTotal = newLeaveTotal
 	console.log("test")
 }
 </script>
@@ -84,7 +142,7 @@ function updateLeaveTotal() {
 		<q-card bordered class="q-pa-md bg-grey-1">
 			<div class="row q-pa-sm q-col-gutter-sm">
 				<q-input
-					v-model="formData.leaveWrote"
+					v-model="formDataHaji.leaveWrote"
 					ref="leaveWroteRef"
 					class="col-12 col-sm-12"
 					bg-color="white"
@@ -98,7 +156,7 @@ function updateLeaveTotal() {
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<datepicker
-							v-model="formData.leaveStartDate"
+							v-model="formDataHaji.leaveStartDate"
 							class="col-12 col-md-4 col-sm-6"
 							menu-class-name="modalfix"
 							autoApply
@@ -123,7 +181,7 @@ function updateLeaveTotal() {
 									hide-bottom-space
 									:label="`${'ลาตั้งแต่วันที่'}`"
 									:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
-									:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
+									:model-value="formDataHaji.leaveStartDate != null ? date2Thai(formDataHaji.leaveStartDate) : null"
 								>
 									<template v-slot:prepend>
 										<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
@@ -133,7 +191,7 @@ function updateLeaveTotal() {
 						</datepicker>
 
 						<datepicker
-							v-model="formData.leaveEndDate"
+							v-model="formDataHaji.leaveEndDate"
 							class="col-12 col-md-4 col-sm-6"
 							menu-class-name="modalfix"
 							autoApply
@@ -142,8 +200,8 @@ function updateLeaveTotal() {
 							:enableTimePicker="false"
 							:locale="'th'"
 							@update:model-value="updateLeaveTotal"
-							:readonly="!formData.leaveStartDate"
+							:readonly="!formDataHaji.leaveStartDate"
-							:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+							:min-date="formDataHaji.leaveStartDate ? new Date(formDataHaji.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
 						>
 							<template #year="{ year }">
 								{{ year + 543 }}
@@ -158,10 +216,10 @@ function updateLeaveTotal() {
 									bg-color="white"
 									outlined
 									dense
-									:readonly="!formData.leaveStartDate"
+									:readonly="!formDataHaji.leaveStartDate"
 									hide-bottom-space
 									:label="`${'ลาถึงวันที่'}`"
-									:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
+									:model-value="formDataHaji.leaveEndDate != null ? date2Thai(formDataHaji.leaveEndDate) : null"
 									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 								>
 									<template v-slot:prepend>
@@ -178,13 +236,13 @@ function updateLeaveTotal() {
 							bg-color="white"
 							ref="leaveTotalRef"
 							for="leaveTotalRef"
-							v-model="formData.leaveTotal"
+							v-model="formDataHaji.leaveTotal"
 							label="จำนวนวันที่ลา"
 							readonly
 							hide-bottom-space
 						/>
 						<datepicker
-							v-model="formData.government"
+							v-model="formDataHaji.leavegovernmentDate"
 							class="col-12 col-md-4 col-sm-6"
 							menu-class-name="modalfix"
 							autoApply
@@ -202,7 +260,7 @@ function updateLeaveTotal() {
 							</template>
 							<template #trigger>
 								<q-input
-									ref="governmentRef"
+									ref="leavegovernmentDateRef"
 									bg-color="white"
 									class="full-width datepicker"
 									outlined
@@ -210,7 +268,7 @@ function updateLeaveTotal() {
 									readonly
 									hide-bottom-space
 									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="formData.government != null ? date2Thai(formData.government) : null"
+									:model-value="formDataHaji.leavegovernmentDate != null ? date2Thai(formDataHaji.leavegovernmentDate) : null"
 									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
 								>
 									<template v-slot:prepend>
@@ -224,14 +282,14 @@ function updateLeaveTotal() {
 
 				<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจย์ฯหรือไม่</div>
 				<div class="col-12">
-					<q-radio v-model="formData.hajjDayStatus" val="ever" checked-icon="task_alt" label="เคย" />
+					<q-radio v-model="formDataHaji.hajjDayStatus" val="true" checked-icon="task_alt" label="เคย" />
-					<q-radio v-model="formData.hajjDayStatus" val="never" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจย์ฯ" />
+					<q-radio v-model="formDataHaji.hajjDayStatus" val="false" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจย์ฯ" />
 				</div>
 
-				<q-input v-model="formData.leaveDetail" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
+				<q-input v-model="formDataHaji.leaveDetail" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
 
 				<div class="col-12 col-sm-6">
-					<q-file v-model="formData.leaveDocument" bg-color="white" label="เอกสารประกอบ" dense outlined multiple hide-bottom-space>
+					<q-file v-model="formDataHaji.leaveDocument" bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined multiple hide-bottom-space>
 						<template v-slot:prepend>
 							<q-icon name="attach_file" color="primary" />
 						</template>

src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue

@@ -3,10 +3,16 @@ import { reactive, ref } from "vue"
 import { useCounterMixin } from "@/stores/mixin"
 import { useQuasar } from "quasar"
 import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
 
+const router = useRouter()
+const dataStore = useLeaveStore()
 const $q = useQuasar()
 const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin
+const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError } = mixin
 
 const edit = ref<boolean>(true)
 const files = ref<any>(null)
@@ -35,20 +41,30 @@ const props = defineProps({
 })
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<any>({
+const formDataMilitary = reactive<any>({
+	type: dataStore.typeId,
 	leaveStartDate: null,
 	leaveEndDate: null,
-	totalLeave: 1,
+	leaveTotal: 0,
 	leaveDocument: null,
 	leaveWrote: "",
 	absentDaySummon: "",
 	absentDayLocation: "",
-	absentDayRegistorDate: "",
+	absentDayRegistorDate: null,
 	absentDayGetIn: "",
 	absentDayAt: "",
 	leaveDetail: "",
 })
 
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
+const fileUploadDoc = async (files: any) => {
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
+
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: MilitaryForm = {
 	leaveStartDate: leaveStartDateRef,
@@ -75,16 +91,60 @@ function onValidate() {
 		}
 	}
 	if (hasError.every(result => result === true)) {
-		props.onSubmit(formData)
+		onSubmit()
 	}
 }
 
+/** ฟังก์ชั่น บันทึก */
+const onSubmit = async () => {
+	dialogConfirm(
+		$q,
+		async () => {
+			await saveFormData()
+		},
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
+	)
+
+	console.log("save")
+}
+
+async function saveFormData() {
+	const formData = new FormData()
+	const blob = formDataMilitary.leaveDocument.slice(0, formDataMilitary.leaveDocument[0].size)
+	const newFile = new File(blob, nameFile.value, {
+		type: formDataMilitary.leaveDocument[0].type,
+	})
+	formData.append("leaveDocument", newFile)
+	formData.append("type", formDataMilitary.type)
+	formData.append("leaveStartDate", dateToISO(formDataMilitary.leaveStartDate))
+	formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate))
+	formData.append("absentDaySummon", formDataMilitary.absentDaySummon)
+	formData.append("absentDayLocation", formDataMilitary.absentDayLocation)
+	formData.append("absentDayRegistorDate", dateToISO(formDataMilitary.absentDayRegistorDate))
+	formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn)
+	formData.append("absentDayAt", formDataMilitary.absentDayAt)
+	formData.append("leaveWrote", formDataMilitary.leaveWrote)
+	formData.append("leaveDetail", formDataMilitary.leaveDetail)
+	formData.append("leaveTotal", formDataMilitary.leaveTotal)
+
+	await http
+		.post(config.API.leaveUser(), formData)
+		.then((res: any) => {
+			success($q, "บันทึกสำเร็จ")
+			router.push(`/leave`)
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
+}
+
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
+	const newLeaveTotal = calculateDurationYmd(formDataMilitary.leaveStartDate, formDataMilitary.leaveEndDate)
-	formData.leaveTotal = newLeaveTotal
+	formDataMilitary.leaveTotal = newLeaveTotal
 	console.log("test")
 }
 </script>
@@ -104,12 +164,21 @@ function updateLeaveTotal() {
 					outlined
 					bg-color="white"
 					hide-bottom-space
-					v-model="formData.leaveWrote"
+					v-model="formDataMilitary.leaveWrote"
 					label="เขียนที่"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 
-				<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.leaveStartDate" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
+				<datepicker
+					class="col-12 col-md-4 col-sm-6"
+					menu-class-name="modalfix"
+					v-model="formDataMilitary.leaveStartDate"
+					:locale="'th'"
+					autoApply
+					borderless
+					:enableTimePicker="false"
+					week-start="0"
+				>
 					<template #year="{ year }">
 						{{ year + 543 }}
 					</template>
@@ -124,7 +193,7 @@ function updateLeaveTotal() {
 							ref="leaveStartDateRef"
 							hide-bottom-space
 							class="full-width datepicker"
-							:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
+							:model-value="formDataMilitary.leaveStartDate != null ? date2Thai(formDataMilitary.leaveStartDate) : null"
 							:label="`${'ลาตั้งแต่วันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
 						>
@@ -138,15 +207,15 @@ function updateLeaveTotal() {
 				<datepicker
 					class="col-12 col-md-4 col-sm-6"
 					menu-class-name="modalfix"
-					v-model="formData.leaveEndDate"
+					v-model="formDataMilitary.leaveEndDate"
 					:locale="'th'"
 					autoApply
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
 					@update:model-value="updateLeaveTotal"
-					:readonly="!formData.leaveStartDate"
+					:readonly="!formDataMilitary.leaveStartDate"
-					:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataMilitary.leaveStartDate ? new Date(formDataMilitary.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -161,9 +230,9 @@ function updateLeaveTotal() {
 							ref="leaveEndDateRef"
 							bg-color="white"
 							hide-bottom-space
-							:readonly="!formData.leaveStartDate"
+							:readonly="!formDataMilitary.leaveStartDate"
 							class="full-width datepicker"
-							:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
+							:model-value="formDataMilitary.leaveEndDate != null ? date2Thai(formDataMilitary.leaveEndDate) : null"
 							:label="`${'ลาถึงวันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 						>
@@ -181,7 +250,7 @@ function updateLeaveTotal() {
 					bg-color="white"
 					ref="leaveTotalRef"
 					for="leaveTotalRef"
-					v-model="formData.leaveTotal"
+					v-model="formDataMilitary.leaveTotal"
 					label="จำนวนวันที่ลา"
 					readonly
 					hide-bottom-space
@@ -194,7 +263,7 @@ function updateLeaveTotal() {
 							dense
 							bg-color="white"
 							outlined
-							v-model="formData.absentDaySummon"
+							v-model="formDataMilitary.absentDaySummon"
 							label="ได้รับหมายเรียกของ"
 							hide-bottom-space
 							:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
@@ -206,7 +275,7 @@ function updateLeaveTotal() {
 							dense
 							bg-color="white"
 							outlined
-							v-model="formData.absentDayLocation"
+							v-model="formDataMilitary.absentDayLocation"
 							label="ที่"
 							hide-bottom-space
 							:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
@@ -219,7 +288,7 @@ function updateLeaveTotal() {
 						<datepicker
 							class="col-12 col-md-4 col-sm-6"
 							menu-class-name="modalfix"
-							v-model="formData.absentDayRegistorDate"
+							v-model="formDataMilitary.absentDayRegistorDate"
 							:locale="'th'"
 							autoApply
 							borderless
@@ -240,7 +309,7 @@ function updateLeaveTotal() {
 									bg-color="white"
 									hide-bottom-space
 									class="full-width datepicker"
-									:model-value="formData.absentDayRegistorDate != null ? date2Thai(formData.absentDayRegistorDate) : null"
+									:model-value="formDataMilitary.absentDayRegistorDate != null ? date2Thai(formDataMilitary.absentDayRegistorDate) : null"
 									:label="`${'ลงวันที่'}`"
 									:rules="[val => !!val || `${'กรุณาเลือกลงวันที่'}`]"
 								>
@@ -257,7 +326,7 @@ function updateLeaveTotal() {
 							bg-color="white"
 							ref="absentDayGetInRef"
 							outlined
-							v-model="formData.absentDayGetIn"
+							v-model="formDataMilitary.absentDayGetIn"
 							label="ให้เข้ารับการ"
 							hide-bottom-space
 							:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
@@ -269,7 +338,7 @@ function updateLeaveTotal() {
 							bg-color="white"
 							outlined
 							ref="absentDayAtRef"
-							v-model="formData.absentDayAt"
+							v-model="formDataMilitary.absentDayAt"
 							label="ณ ที่"
 							hide-bottom-space
 							:rules="[val => !!val || `${'กรุณากรอก ณ ที่'}`]"
@@ -277,10 +346,10 @@ function updateLeaveTotal() {
 					</div>
 				</div>
 
-				<q-input class="col-12 col-md-12 col-sm-12" dense bg-color="white" outlined v-model="formData.leaveDetail" type="textarea" label="รายละเอียด" />
+				<q-input class="col-12 col-md-12 col-sm-12" dense bg-color="white" outlined v-model="formDataMilitary.leaveDetail" type="textarea" label="รายละเอียด" />
 
 				<div class="col-12 col-sm-6">
-					<q-file v-model="formData.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space>
+					<q-file v-model="formDataMilitary.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space use-chips @added="fileUploadDoc">
 						<template v-slot:prepend>
 							<q-icon name="attach_file" color="primary" />
 						</template>

src/modules/05_leave/componenst/Forms/09_StudyForm.vue

@@ -3,10 +3,16 @@ import { reactive, ref, computed } from "vue"
 import { useCounterMixin } from "@/stores/mixin"
 import { useQuasar } from "quasar"
 import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
 
+const dataStore = useLeaveStore()
 const $q = useQuasar()
+const router = useRouter()
 const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd } = mixin
+const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError, arabicNumberToText } = mixin
 
 const edit = ref<boolean>(true)
 const files = ref<any>(null)
@@ -14,8 +20,8 @@ const files = ref<any>(null)
 /** ตัวแปร ref สำหรับแสดง validate */
 const leaveStartDateRef = ref<object | null>(null)
 const leaveEndDateRef = ref<object | null>(null)
-const birthdayRef = ref<object | null>(null)
+const leavebirthDateRef = ref<object | null>(null)
-const dateGovernmentRef = ref<object | null>(null)
+const leavegovernmentDateRef = ref<object | null>(null)
 const leaveSalaryRef = ref<object | null>(null)
 const leaveNumberRef = ref<object | null>(null)
 const leaveAddressRef = ref<object | null>(null)
@@ -39,31 +45,33 @@ const props = defineProps({
 })
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<any>({
+const formDataStudy = reactive<any>({
-	leaveWrote: "",
+	type: dataStore.typeId, //
+	leaveWrote: "", //
 	leaveStartDate: null,
 	leaveEndDate: null,
-	birthday: new Date(),
+	leavebirthDate: new Date(),
-	dateGovernment: new Date(),
+	leavegovernmentDate: new Date(),
 	leaveSalary: 10000,
 	leaveSalaryText: arabicNumberToText(10000),
 	leaveNumber: "",
 	leaveAddress: "test",
 	studyDayScholarship: "",
 	studyDayCountry: "",
-	studyDayUniversityName: "",
+	studyDayUniversityName: "", //
-	studyDayDegreeLevel: "",
+	studyDayDegreeLevel: "", //
-	studyDaySubject: "",
+	studyDaySubject: "", //
-	leaveDocument: "",
+	leaveDocument: "", //
 	leaveDetail: "",
+	leaveTotal: "",
 })
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: studyDaySubjectForm = {
 	leaveStartDate: leaveStartDateRef,
 	leaveEndDate: leaveEndDateRef,
-	birthday: birthdayRef,
+	leavebirthDate: leavebirthDateRef,
-	dateGovernment: dateGovernmentRef,
+	leavegovernmentDate: leavegovernmentDateRef,
 	leaveSalary: leaveSalaryRef,
 	leaveNumber: leaveNumberRef,
 	leaveAddress: leaveAddressRef,
@@ -75,6 +83,15 @@ const formRef: studyDaySubjectForm = {
 	leaveWrote: leaveWroteRef,
 }
 
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
+const fileUploadDoc = async (files: any) => {
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
+
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
 	const hasError = []
@@ -88,16 +105,66 @@ function onValidate() {
 		}
 	}
 	if (hasError.every(result => result === true)) {
-		props.onSubmit(formData)
+		onSubmit()
 	}
 }
 
+/** ฟังก์ชั่น บันทึก */
+const onSubmit = async () => {
+	dialogConfirm(
+		$q,
+		async () => {
+			await saveFormData()
+		},
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
+	)
+
+	console.log("save")
+}
+
+async function saveFormData() {
+	const formData = new FormData()
+	const blob = formDataStudy.leaveDocument.slice(0, formDataStudy.leaveDocument[0].size)
+	const newFile = new File(blob, nameFile.value, {
+		type: formDataStudy.leaveDocument[0].type,
+	})
+	formData.append("leaveDocument", newFile) //
+	formData.append("type", formDataStudy.type) //
+	formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)) //
+	formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)) //
+	formData.append("studyDaySubject", formDataStudy.studyDaySubject)
+	formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel)
+	formData.append("leavegovernmentDate", dateToISO(formDataStudy.leavegovernmentDate))
+	formData.append("leavebirthDate", dateToISO(formDataStudy.leavebirthDate))
+	formData.append("studyDayUniversityName", formDataStudy.studyDayUniversityName)
+	formData.append("studyDayCountry", formDataStudy.studyDayCountry)
+	formData.append("leaveWrote", formDataStudy.leaveWrote) //
+	formData.append("leaveDetail", formDataStudy.leaveDetail) //
+	formData.append("studyDayScholarship", formDataStudy.studyDayScholarship)
+	formData.append("leaveAddress", formDataStudy.leaveAddress) //
+	formData.append("leaveNumber", formDataStudy.leaveNumber) //
+	formData.append("leaveSalaryText", formDataStudy.leaveSalaryText) //
+	formData.append("leaveSalary", formDataStudy.leaveSalary) //
+	formData.append("leaveTotal", formDataStudy.leaveTotal) //
+
+	await http
+		.post(config.API.leaveUser(), formData)
+		.then((res: any) => {
+			success($q, "บันทึกสำเร็จ")
+			router.push(`/leave`)
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
+}
+
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
+	const newLeaveTotal = calculateDurationYmd(formDataStudy.leaveStartDate, formDataStudy.leaveEndDate)
-	formData.leaveTotal = newLeaveTotal
+	formDataStudy.leaveTotal = newLeaveTotal
 	console.log("test")
 }
 
@@ -105,7 +172,7 @@ function updateLeaveTotal() {
  * แปลงตัวเลขเงินเดือน
  */
 const formattedleaveSalary = computed(() => {
-	return formData.leaveSalary !== null ? formData.leaveSalary.toLocaleString("th-TH") : ""
+	return formDataStudy.leaveSalary !== null ? formDataStudy.leaveSalary.toLocaleString("th-TH") : ""
 })
 </script>
 
@@ -118,7 +185,7 @@ const formattedleaveSalary = computed(() => {
 		<q-card bordered class="q-pa-md bg-grey-1">
 			<div class="row q-pa-sm q-col-gutter-sm">
 				<q-input
-					v-model="formData.leaveWrote"
+					v-model="formDataStudy.leaveWrote"
 					ref="leaveWroteRef"
 					class="col-12 col-sm-12"
 					bg-color="white"
@@ -129,7 +196,16 @@ const formattedleaveSalary = computed(() => {
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 
-				<datepicker v-model="formData.leaveStartDate" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
+				<datepicker
+					v-model="formDataStudy.leaveStartDate"
+					class="col-12 col-md-4 col-sm-6"
+					menu-class-name="modalfix"
+					autoApply
+					borderless
+					week-start="0"
+					:enableTimePicker="false"
+					:locale="'th'"
+				>
 					<template #year="{ year }">
 						{{ year + 543 }}
 					</template>
@@ -146,7 +222,7 @@ const formattedleaveSalary = computed(() => {
 							lazy-rules
 							hide-bottom-space
 							:label="`${'ลาตั้งแต่วันที่'}`"
-							:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
+							:model-value="formDataStudy.leaveStartDate != null ? date2Thai(formDataStudy.leaveStartDate) : null"
 							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
 						>
 							<template v-slot:prepend>
@@ -157,7 +233,7 @@ const formattedleaveSalary = computed(() => {
 				</datepicker>
 
 				<datepicker
-					v-model="formData.leaveEndDate"
+					v-model="formDataStudy.leaveEndDate"
 					class="col-12 col-md-4 col-sm-6"
 					menu-class-name="modalfix"
 					autoApply
@@ -165,9 +241,9 @@ const formattedleaveSalary = computed(() => {
 					week-start="0"
 					:locale="'th'"
 					@update:model-value="updateLeaveTotal"
-					:readonly="!formData.leaveStartDate"
+					:readonly="!formDataStudy.leaveStartDate"
 					:enableTimePicker="false"
-					:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataStudy.leaveStartDate ? new Date(formDataStudy.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -185,8 +261,8 @@ const formattedleaveSalary = computed(() => {
 							bg-color="white"
 							hide-bottom-space
 							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!formData.leaveStartDate"
+							:readonly="!formDataStudy.leaveStartDate"
-							:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
+							:model-value="formDataStudy.leaveEndDate != null ? date2Thai(formDataStudy.leaveEndDate) : null"
 							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 						>
 							<template v-slot:prepend>
@@ -203,7 +279,7 @@ const formattedleaveSalary = computed(() => {
 					bg-color="white"
 					ref="leaveTotalRef"
 					for="leaveTotalRef"
-					v-model="formData.leaveTotal"
+					v-model="formDataStudy.leaveTotal"
 					label="มีกำหนด"
 					readonly
 					hide-bottom-space
@@ -212,7 +288,7 @@ const formattedleaveSalary = computed(() => {
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<datepicker
-							v-model="formData.dateGovernment"
+							v-model="formDataStudy.leavegovernmentDate"
 							class="col-12 col-md-3 col-sm-6"
 							menu-class-name="modalfix"
 							autoApply
@@ -230,7 +306,7 @@ const formattedleaveSalary = computed(() => {
 							</template>
 							<template #trigger>
 								<q-input
-									ref="dateGovernmentRef"
+									ref="leavegovernmentDateRef"
 									class="full-width datepicker"
 									bg-color="white"
 									outlined
@@ -238,7 +314,7 @@ const formattedleaveSalary = computed(() => {
 									dense
 									hide-bottom-space
 									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="formData.dateGovernment != null ? date2Thai(formData.dateGovernment) : null"
+									:model-value="formDataStudy.leavegovernmentDate != null ? date2Thai(formDataStudy.leavegovernmentDate) : null"
 									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
 								>
 									<template v-slot:prepend>
@@ -249,7 +325,7 @@ const formattedleaveSalary = computed(() => {
 						</datepicker>
 
 						<datepicker
-							v-model="formData.birthday"
+							v-model="formDataStudy.leavebirthDate"
 							class="col-12 col-md-3 col-sm-6"
 							menu-class-name="modalfix"
 							autoApply
@@ -267,7 +343,7 @@ const formattedleaveSalary = computed(() => {
 							</template>
 							<template #trigger>
 								<q-input
-									ref="birthdayRef"
+									ref="leavebirthDateRef"
 									class="full-width datepicker"
 									bg-color="white"
 									outlined
@@ -275,7 +351,7 @@ const formattedleaveSalary = computed(() => {
 									readonly
 									hide-bottom-space
 									:label="`${'วันเดือนปีเกิด'}`"
-									:model-value="formData.birthday != null ? date2Thai(formData.birthday) : null"
+									:model-value="formDataStudy.leavebirthDate != null ? date2Thai(formDataStudy.leavebirthDate) : null"
 									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 								>
 									<template v-slot:prepend>
@@ -288,7 +364,7 @@ const formattedleaveSalary = computed(() => {
 						<q-input v-model="formattedleaveSalary" ref="leaveSalaryRef" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
 
 						<q-input
-							v-model="formData.leaveSalaryText"
+							v-model="formDataStudy.leaveSalaryText"
 							ref="leaveSalaryRef"
 							class="col-12 col-sm-6 col-md-3"
 							bg-color="white"
@@ -305,7 +381,7 @@ const formattedleaveSalary = computed(() => {
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<q-input
-							v-model="formData.studyDayUniversityName"
+							v-model="formDataStudy.studyDayUniversityName"
 							ref="studyDayUniversityNameRef"
 							class="col-12 col-sm-6 col-md-4"
 							bg-color="white"
@@ -317,7 +393,7 @@ const formattedleaveSalary = computed(() => {
 						/>
 
 						<q-input
-							v-model="formData.studyDayDegreeLevel"
+							v-model="formDataStudy.studyDayDegreeLevel"
 							ref="studyDayDegreeLevelRef"
 							class="col-12 col-sm-6 col-md-4"
 							bg-color="white"
@@ -329,7 +405,7 @@ const formattedleaveSalary = computed(() => {
 						/>
 
 						<q-input
-							v-model="formData.studyDaySubject"
+							v-model="formDataStudy.studyDaySubject"
 							ref="studyDaySubjectRef"
 							class="col-12 col-sm-6 col-md-4"
 							bg-color="white"
@@ -341,7 +417,7 @@ const formattedleaveSalary = computed(() => {
 						/>
 
 						<q-input
-							v-model="formData.studyDayCountry"
+							v-model="formDataStudy.studyDayCountry"
 							ref="studyDayCountryRef"
 							class="col-12 col-sm-6 col-md-4"
 							bg-color="white"
@@ -353,7 +429,7 @@ const formattedleaveSalary = computed(() => {
 						/>
 
 						<q-input
-							v-model="formData.studyDayScholarship"
+							v-model="formDataStudy.studyDayScholarship"
 							ref="studyDayScholarshipRef"
 							class="col-12 col-sm-6 col-md-4"
 							bg-color="white"
@@ -365,7 +441,7 @@ const formattedleaveSalary = computed(() => {
 						/>
 
 						<q-input
-							v-model="formData.leaveNumber"
+							v-model="formDataStudy.leaveNumber"
 							ref="leaveNumberRef"
 							class="col-12 col-sm-6 col-md-4"
 							bg-color="white"
@@ -379,7 +455,7 @@ const formattedleaveSalary = computed(() => {
 						/>
 
 						<q-input
-							v-model="formData.leaveAddress"
+							v-model="formDataStudy.leaveAddress"
 							ref="leaveAddressRef"
 							class="col-12"
 							bg-color="white"
@@ -392,10 +468,10 @@ const formattedleaveSalary = computed(() => {
 					</div>
 				</div>
 
-				<q-input v-model="formData.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
+				<q-input v-model="formDataStudy.leaveDetail" 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.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
+					<q-file v-model="formDataStudy.leaveDocument" bg-color="white" dense outlined multiple use-chips @added="fileUploadDoc" label="เอกสารประกอบ">
 						<template v-slot:prepend>
 							<q-icon name="attach_file" color="primary" />
 						</template>

src/modules/05_leave/componenst/Forms/10_TrainForm.vue

@@ -3,10 +3,16 @@ import { reactive, ref, computed } from "vue"
 import { useCounterMixin } from "@/stores/mixin"
 import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence"
 import { useQuasar } from "quasar"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
 
+const dataStore = useLeaveStore()
 const $q = useQuasar()
+const router = useRouter()
 const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd } = mixin
+const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd, dateToISO, success, messageError } = mixin
 const edit = ref<boolean>(true)
 const files = ref<any>(null)
 
@@ -23,16 +29,17 @@ const props = defineProps({
 })
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<any>({
+const formDataTrain = reactive<any>({
+	type: dataStore.typeId,
 	leaveWrote: "",
 	leaveStartDate: null,
 	leaveEndDate: null,
-	birthday: new Date(),
+	leavebirthDate: new Date(),
-	dateGovernment: new Date(),
+	leavegovernmentDate: new Date(),
 	leaveSalary: 10000,
-	salaryText: arabicNumberToText(10000),
+	leaveSalaryText: arabicNumberToText(10000),
 	leaveNumber: "",
-	leaveAddress: "test",
+	leaveAddress: "",
 	studyDayScholarship: "",
 	studyDayCountry: "",
 	studyDayTrainingSubject: "",
@@ -44,8 +51,8 @@ const formData = reactive<any>({
 /** ตัวแปร ref สำหรับแสดง validate */
 const leaveStartDateRef = ref<object | null>(null)
 const leaveEndDateRef = ref<object | null>(null)
-const birthdayRef = ref<object | null>(null)
+const leavebirthDateRef = ref<object | null>(null)
-const dateGovernmentRef = ref<object | null>(null)
+const leavegovernmentDateRef = ref<object | null>(null)
 const leaveNumberRef = ref<object | null>(null)
 const leaveAddressRef = ref<object | null>(null)
 const studyDayScholarshipRef = ref<object | null>(null)
@@ -58,8 +65,8 @@ const leaveWroteRef = ref<object | null>(null)
 const formRef: TrainForm = {
 	leaveStartDate: leaveStartDateRef,
 	leaveEndDate: leaveEndDateRef,
-	birthday: birthdayRef,
+	leavebirthDate: leavebirthDateRef,
-	dateGovernment: dateGovernmentRef,
+	leavegovernmentDate: leavegovernmentDateRef,
 	leaveNumber: leaveNumberRef,
 	leaveAddress: leaveAddressRef,
 	studyDayScholarship: studyDayScholarshipRef,
@@ -69,6 +76,15 @@ const formRef: TrainForm = {
 	leaveWrote: leaveWroteRef,
 }
 
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("")
+const fileDocDataUpload = ref<File[]>([])
+const fileUploadDoc = async (files: any) => {
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
+
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
 	const hasError = []
@@ -83,16 +99,65 @@ function onValidate() {
 		}
 	}
 	if (hasError.every(result => result === true)) {
-		props.onSubmit(formData)
+		onSubmit()
 	}
 }
 
+/** ฟังก์ชั่น บันทึก */
+const onSubmit = async () => {
+	dialogConfirm(
+		$q,
+		async () => {
+			await saveFormData()
+		},
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
+	)
+
+	console.log("save")
+}
+
+async function saveFormData() {
+	const formData = new FormData()
+	const blob = formDataTrain.leaveDocument.slice(0, formDataTrain.leaveDocument[0].size)
+	const newFile = new File(blob, nameFile.value, {
+		type: formDataTrain.leaveDocument[0].type,
+	})
+	formData.append("leaveDocument", newFile) //
+	formData.append("type", formDataTrain.type) //
+	formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)) //
+	formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)) //
+	formData.append("studyDayCountry", formDataTrain.studyDayCountry)
+	formData.append("leavegovernmentDate", dateToISO(formDataTrain.leavegovernmentDate))
+	formData.append("leavebirthDate", dateToISO(formDataTrain.leavebirthDate))
+	formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName)
+	formData.append("studyDayTrainingSubject", formDataTrain.studyDayTrainingSubject)
+	formData.append("leaveWrote", formDataTrain.leaveWrote) //
+	formData.append("leaveDetail", formDataTrain.leaveDetail) //
+	formData.append("studyDayScholarship", formDataTrain.studyDayScholarship)
+	formData.append("leaveAddress", formDataTrain.leaveAddress) //
+	formData.append("leaveNumber", formDataTrain.leaveNumber) //
+	formData.append("leaveSalaryText", formDataTrain.leaveSalaryText) //
+	formData.append("leaveSalary", formDataTrain.leaveSalary) //
+	formData.append("leaveTotal", formDataTrain.leaveTotal) //
+
+	await http
+		.post(config.API.leaveUser(), formData)
+		.then((res: any) => {
+			success($q, "บันทึกสำเร็จ")
+			router.push(`/leave`)
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
+}
+
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
+	const newLeaveTotal = calculateDurationYmd(formDataTrain.leaveStartDate, formDataTrain.leaveEndDate)
-	formData.leaveTotal = newLeaveTotal
+	formDataTrain.leaveTotal = newLeaveTotal
 	console.log("test")
 }
 
@@ -100,7 +165,7 @@ function updateLeaveTotal() {
  * แปลงตัวเลขเงินเดือน
  */
 const formattedSalary = computed(() => {
-	return formData.leaveSalary !== null ? formData.leaveSalary.toLocaleString("th-TH") : ""
+	return formDataTrain.leaveSalary !== null ? formDataTrain.leaveSalary.toLocaleString("th-TH") : ""
 })
 </script>
 
@@ -113,7 +178,7 @@ const formattedSalary = computed(() => {
 		<q-card bordered class="q-pa-md bg-grey-1">
 			<div class="row q-pa-sm q-col-gutter-sm">
 				<q-input
-					v-model="formData.leaveWrote"
+					v-model="formDataTrain.leaveWrote"
 					ref="leaveWroteRef"
 					class="col-12 col-sm-12"
 					bg-color="white"
@@ -124,7 +189,16 @@ const formattedSalary = computed(() => {
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 
-				<datepicker v-model="formData.leaveStartDate" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
+				<datepicker
+					v-model="formDataTrain.leaveStartDate"
+					class="col-12 col-md-4 col-sm-6"
+					menu-class-name="modalfix"
+					autoApply
+					borderless
+					week-start="0"
+					:enableTimePicker="false"
+					:locale="'th'"
+				>
 					<template #year="{ year }">
 						{{ year + 543 }}
 					</template>
@@ -141,7 +215,7 @@ const formattedSalary = computed(() => {
 							lazy-rules
 							hide-bottom-space
 							:label="`${'ลาตั้งแต่วันที่'}`"
-							:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
+							:model-value="formDataTrain.leaveStartDate != null ? date2Thai(formDataTrain.leaveStartDate) : null"
 							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
 						>
 							<template v-slot:prepend>
@@ -152,17 +226,17 @@ const formattedSalary = computed(() => {
 				</datepicker>
 
 				<datepicker
-					v-model="formData.leaveEndDate"
+					v-model="formDataTrain.leaveEndDate"
 					class="col-12 col-md-4 col-sm-6"
 					menu-class-name="modalfix"
 					autoApply
 					borderless
 					@update:model-value="updateLeaveTotal"
 					week-start="0"
-					:readonly="!formData.leaveStartDate"
+					:readonly="!formDataTrain.leaveStartDate"
 					:locale="'th'"
 					:enableTimePicker="false"
-					:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataTrain.leaveStartDate ? new Date(formDataTrain.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -180,8 +254,8 @@ const formattedSalary = computed(() => {
 							bg-color="white"
 							hide-bottom-space
 							:label="`${'ลาถึงวันที่'}`"
-							:readonly="!formData.leaveStartDate"
+							:readonly="!formDataTrain.leaveStartDate"
-							:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
+							:model-value="formDataTrain.leaveEndDate != null ? date2Thai(formDataTrain.leaveEndDate) : null"
 							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 						>
 							<template v-slot:prepend>
@@ -198,7 +272,7 @@ const formattedSalary = computed(() => {
 					bg-color="white"
 					ref="leaveTotalRef"
 					for="leaveTotalRef"
-					v-model="formData.leaveTotal"
+					v-model="formDataTrain.leaveTotal"
 					label="มีกำหนด"
 					readonly
 					hide-bottom-space
@@ -207,7 +281,7 @@ const formattedSalary = computed(() => {
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<datepicker
-							v-model="formData.dateGovernment"
+							v-model="formDataTrain.leavegovernmentDate"
 							class="col-12 col-md-3 col-sm-6"
 							menu-class-name="modalfix"
 							autoApply
@@ -225,7 +299,7 @@ const formattedSalary = computed(() => {
 							</template>
 							<template #trigger>
 								<q-input
-									ref="dateGovernmentRef"
+									ref="leavegovernmentDateRef"
 									class="full-width datepicker"
 									outlined
 									readonly
@@ -233,7 +307,7 @@ const formattedSalary = computed(() => {
 									dense
 									hide-bottom-space
 									:label="`${'วันที่เข้ารับราชการ'}`"
-									:model-value="formData.dateGovernment != null ? date2Thai(formData.dateGovernment) : null"
+									:model-value="formDataTrain.leavegovernmentDate != null ? date2Thai(formDataTrain.leavegovernmentDate) : null"
 									:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
 								>
 									<template v-slot:prepend>
@@ -244,7 +318,7 @@ const formattedSalary = computed(() => {
 						</datepicker>
 
 						<datepicker
-							v-model="formData.birthday"
+							v-model="formDataTrain.leavebirthDate"
 							class="col-12 col-md-3 col-sm-6"
 							menu-class-name="modalfix"
 							autoApply
@@ -262,7 +336,7 @@ const formattedSalary = computed(() => {
 							</template>
 							<template #trigger>
 								<q-input
-									ref="birthdayRef"
+									ref="leavebirthDateRef"
 									class="full-width datepicker"
 									bg-color="white"
 									outlined
@@ -270,7 +344,7 @@ const formattedSalary = computed(() => {
 									readonly
 									hide-bottom-space
 									:label="`${'วันเดือนปีเกิด'}`"
-									:model-value="formData.birthday != null ? date2Thai(formData.birthday) : null"
+									:model-value="formDataTrain.leavebirthDate != null ? date2Thai(formDataTrain.leavebirthDate) : null"
 									:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 								>
 									<template v-slot:prepend>
@@ -282,14 +356,14 @@ const formattedSalary = computed(() => {
 
 						<q-input v-model="formattedSalary" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
 
-						<q-input v-model="formData.salaryText" class="col-12 col-sm-6 col-md-3" dense readonly outlined bg-color="white" label="เงินเดือนปัจจุบัน (ตัวอักษร)" />
+						<q-input v-model="formDataTrain.leaveSalaryText" class="col-12 col-sm-6 col-md-3" dense readonly outlined bg-color="white" label="เงินเดือนปัจจุบัน (ตัวอักษร)" />
 					</div>
 				</div>
 
 				<div class="full-width">
 					<div class="q-col-gutter-sm row">
 						<q-input
-							v-model="formData.studyDayTrainingSubject"
+							v-model="formDataTrain.studyDayTrainingSubject"
 							class="col-12 col-sm-6 col-md-4"
 							ref="studyDayTrainingSubjectRef"
 							bg-color="white"
@@ -301,7 +375,7 @@ const formattedSalary = computed(() => {
 						/>
 
 						<q-input
-							v-model="formData.studyDayTrainingName"
+							v-model="formDataTrain.studyDayTrainingName"
 							ref="studyDayTrainingNameRef"
 							class="col-12 col-sm-6 col-md-4"
 							bg-color="white"
@@ -313,7 +387,7 @@ const formattedSalary = computed(() => {
 						/>
 
 						<q-input
-							v-model="formData.studyDayCountry"
+							v-model="formDataTrain.studyDayCountry"
 							ref="studyDayCountryRef"
 							class="col-12 col-sm-6 col-md-4"
 							dense
@@ -325,7 +399,7 @@ const formattedSalary = computed(() => {
 						/>
 
 						<q-input
-							v-model="formData.studyDayScholarship"
+							v-model="formDataTrain.studyDayScholarship"
 							ref="studyDayScholarshipRef"
 							class="col-12 col-sm-6 col-md-4"
 							bg-color="white"
@@ -337,7 +411,7 @@ const formattedSalary = computed(() => {
 						/>
 
 						<q-input
-							v-model="formData.leaveNumber"
+							v-model="formDataTrain.leaveNumber"
 							class="col-12 col-sm-6 col-md-4"
 							ref="leaveNumberRef"
 							dense
@@ -351,7 +425,7 @@ const formattedSalary = computed(() => {
 						/>
 
 						<q-input
-							v-model="formData.leaveAddress"
+							v-model="formDataTrain.leaveAddress"
 							ref="leaveAddressRef"
 							class="col-12"
 							bg-color="white"
@@ -364,10 +438,10 @@ const formattedSalary = computed(() => {
 					</div>
 				</div>
 
-				<q-input v-model="formData.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
+				<q-input v-model="formDataTrain.leaveDetail" 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.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
+					<q-file v-model="formDataTrain.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
 						<template v-slot:prepend>
 							<q-icon name="attach_file" color="primary" />
 						</template>

src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue

@@ -3,11 +3,17 @@ import { ref, reactive, watch } from "vue"
 import type { FormData, FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
 import { useCounterMixin } from "@/stores/mixin"
 import { useQuasar } from "quasar"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
 
+const dataStore = useLeaveStore()
 const $q = useQuasar()
 const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, notifyError } = mixin
+const { date2Thai, dialogConfirm, notifyError, dateToISO, success, messageError } = mixin
 const edit = ref<boolean>(true)
+const router = useRouter()
 const isSave = ref<boolean>(false)
 
 /** รับ props มาจากหน้าหลัก */
@@ -23,7 +29,8 @@ const props = defineProps({
 })
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<FormData>({
+const formDataWorkInternational = reactive<any>({
+	type: dataStore.typeId,
 	leaveWrote: "",
 	leaveStartDate: null,
 	leaveEndDate: null,
@@ -51,15 +58,17 @@ const FormRef: FormRef = {
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, async () => {
 	// console.log("data==>", props.data)
-	formData.leaveWrote = props.data.leaveWrote
+	formDataWorkInternational.leaveWrote = props.data.leaveWrote
-	formData.leaveStartDate = props.data.leaveStartDate
+	formDataWorkInternational.leaveStartDate = props.data.leaveStartDate
-	formData.leaveEndDate = props.data.leaveEndDate
+	formDataWorkInternational.leaveEndDate = props.data.leaveEndDate
-	formData.leaveDetail = props.data.leaveDetail
+	formDataWorkInternational.leaveDetail = props.data.leaveDetail
-	formData.leaveDocument = props.data.leaveDocument
+	formDataWorkInternational.leaveDocument = props.data.leaveDocument
-	formData.leaveDraftDocument = props.data.leaveDraftDocument
+	formDataWorkInternational.leaveDraftDocument = props.data.leaveDraftDocument
 })
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("")
+const nameFileDraft = ref<string>("")
 const fileDocDataUpload = ref<File[]>([])
 const fileUploadDoc = async (files: any) => {
 	files.forEach((file: any) => {
@@ -80,9 +89,53 @@ function onValidate() {
 		}
 	}
 	if (hasError.every(result => result === true)) {
-		props.onSubmit(formData)
+		onSubmit()
 	}
 }
+
+/** ฟังก์ชั่น บันทึก */
+const onSubmit = async () => {
+	dialogConfirm(
+		$q,
+		async () => {
+			await saveFormData()
+		},
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
+	)
+
+	console.log("save")
+}
+
+async function saveFormData() {
+	const formData = new FormData()
+	const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size)
+	const newFile = new File(blob, nameFile.value, {
+		type: formDataWorkInternational.leaveDocument[0].type,
+	})
+	const blobDrafe = formDataWorkInternational.leaveDraftDocument.slice(0, formDataWorkInternational.leaveDraftDocument[0].size)
+	const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
+		type: formDataWorkInternational.leaveDraftDocument[0].type,
+	})
+
+	formData.append("leaveDocument", newFile) //
+	formData.append("leaveDraftDocument", newFileDraft) //
+	formData.append("type", formDataWorkInternational.type) //
+	formData.append("leaveStartDate", dateToISO(formDataWorkInternational.leaveStartDate)) //
+	formData.append("leaveEndDate", dateToISO(formDataWorkInternational.leaveEndDate)) //
+	formData.append("leaveWrote", formDataWorkInternational.leaveWrote) //
+	formData.append("leaveDetail", formDataWorkInternational.leaveDetail) //
+
+	await http
+		.post(config.API.leaveUser(), formData)
+		.then((res: any) => {
+			success($q, "บันทึกสำเร็จ")
+			router.push(`/leave`)
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
+}
 </script>
 
 <template>
@@ -101,7 +154,7 @@ function onValidate() {
 					for="leaveWroteRef"
 					dense
 					outlined
-					v-model="formData.leaveWrote"
+					v-model="formDataWorkInternational.leaveWrote"
 					label="เขียนที่"
 					:readonly="!edit"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
@@ -110,7 +163,7 @@ function onValidate() {
 				<datepicker
 					class="col-12 col-md-6 col-sm-6"
 					menu-class-name="modalfix"
-					v-model="formData.leaveStartDate"
+					v-model="formDataWorkInternational.leaveStartDate"
 					:locale="'th'"
 					hide-bottom-space
 					autoApply
@@ -135,7 +188,7 @@ function onValidate() {
 							bg-color="white"
 							:readonly="!edit"
 							class="full-width datepicker"
-							:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
+							:model-value="formDataWorkInternational.leaveStartDate != null ? date2Thai(formDataWorkInternational.leaveStartDate) : null"
 							:label="`${'ลาตั้งแต่วันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
 						>
@@ -149,15 +202,15 @@ function onValidate() {
 				<datepicker
 					class="col-12 col-md-6 col-sm-6"
 					menu-class-name="modalfix"
-					v-model="formData.leaveEndDate"
+					v-model="formDataWorkInternational.leaveEndDate"
 					:locale="'th'"
 					autoApply
 					hide-bottom-space
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="!formData.leaveStartDate"
+					:readonly="!formDataWorkInternational.leaveStartDate"
-					:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataWorkInternational.leaveStartDate ? new Date(formDataWorkInternational.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -173,9 +226,9 @@ function onValidate() {
 							for="leaveEndDateRef"
 							hide-bottom-space
 							bg-color="white"
-							:readonly="!formData.leaveStartDate"
+							:readonly="!formDataWorkInternational.leaveStartDate"
 							class="full-width datepicker"
-							:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
+							:model-value="formDataWorkInternational.leaveEndDate != null ? date2Thai(formDataWorkInternational.leaveEndDate) : null"
 							:label="`${'ลาถึงวันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 						>
@@ -192,7 +245,7 @@ function onValidate() {
 							ref="leaveTotalRef"
 							for="leaveTotalRef"
 							type="number"
-							v-model="formData.leaveTotal"
+							v-model="formDataWorkInternational.leaveTotal"
 							label="จำนวนวันที่ลา"
 							readonly
 							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
@@ -207,12 +260,23 @@ function onValidate() {
 					outlined
 					ref="leaveDetailRef"
 					for="leaveDetailRef"
-					v-model="formData.leaveDetail"
+					v-model="formDataWorkInternational.leaveDetail"
 					label="รายละเอียด"
 					:readonly="!edit"
 				/>
 
-				<q-file ref="fileRef" bg-color="white" v-model="formData.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
+				<q-file
+					ref="fileRef"
+					bg-color="white"
+					v-model="formDataWorkInternational.leaveDocument"
+					@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>
@@ -224,7 +288,7 @@ function onValidate() {
 					</div>
 					<q-card bordered flat class="full-width">
 						<q-list separator>
-							<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
+							<q-item v-for="(file, index) in formDataWorkInternational.leaveDocument" :key="index" class="q-my-xs">
 								<q-item-section>
 									<q-item-label class="full-width ellipsis">
 										{{ file.name }}
@@ -238,7 +302,7 @@ function onValidate() {
 			</div>
 		</q-card>
 
-		<div v-if="formData.leaveWrote && formData.leaveEndDate && formData.leaveStartDate" class="q-mt-md">
+		<div v-if="formDataWorkInternational.leaveWrote && formDataWorkInternational.leaveEndDate && formDataWorkInternational.leaveStartDate" class="q-mt-md">
 			<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>
@@ -254,7 +318,7 @@ function onValidate() {
 					<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="formData.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept=".pdf">
+							<q-file v-model="formDataWorkInternational.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept=".pdf">
 								<template v-slot:prepend>
 									<q-icon name="attach_file" color="primary" />
 								</template>
@@ -262,7 +326,7 @@ function onValidate() {
 						</div>
 					</div>
 					<div class="col-md-1 self-end q-mb-sm">
-						<q-btn v-if="formData.leaveDraftDocument" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
+						<q-btn v-if="formDataWorkInternational.leaveDraftDocument" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
 					</div>
 				</div>
 			</q-card>

src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue

@@ -2,9 +2,17 @@
 import { ref, reactive, watch, computed, onMounted } from "vue"
 import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
 import { useCounterMixin } from "@/stores/mixin"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import { useQuasar } from "quasar"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
 
+const dataStore = useLeaveStore()
+const $q = useQuasar()
 const mixin = useCounterMixin()
-const { date2Thai, arabicNumberToText, calculateDurationYmd } = mixin
+const router = useRouter()
+const { dialogConfirm, date2Thai, arabicNumberToText, calculateDurationYmd, dateToISO, success, messageError } = mixin
 const edit = ref<boolean>(true)
 
 /** รับ props มาจากหน้าหลัก */
@@ -20,29 +28,30 @@ const props = defineProps({
 })
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<any>({
+const formDataFollowSpouse = reactive<any>({
+	type: dataStore.typeId,
 	leaveWrote: "",
 	leaveStartDate: null,
 	leaveEndDate: null,
 	leaveTotal: "", //จำนวนวันลา
-	salaryText: 25000,
+	leaveSalaryText: 25000,
 	leaveSalary: 25000, //เงินเดือนปัจจุบัน
 	coupleDayName: "", //ชื่อคู่สมรส
 	coupleDayPosition: "", //ตำแหน่งคู่สมรส
 	coupleDayLevel: "", //ระดับคู่สมรส
 	coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
-	followHistoryCountry: "", //ประวัติการลาติดตามคู่สมรส
+	followHistoryCountry: "ลาว", //ประวัติการลาติดตามคู่สมรส
-	followHistoryTime: "",
+	followHistoryTime: "0 วัน",
-	followHistoryStart: null,
+	followHistoryStart: new Date(),
-	followHistoryEnd: null,
+	followHistoryEnd: new Date(),
 	leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
 	leaveDocument: [], //เอกสารปะกอบ
 })
 
 /** แปลงตัวแปร Salary */
-const formattSalaryText = arabicNumberToText(formData.salaryText)
+const formattleaveSalaryText = arabicNumberToText(formDataFollowSpouse.leaveSalaryText)
 const formattSalary = computed(() => {
-	return formData.leaveSalary !== null ? formData.leaveSalary.toLocaleString("th-TH") : ""
+	return formDataFollowSpouse.leaveSalary !== null ? formDataFollowSpouse.leaveSalary.toLocaleString("th-TH") : ""
 })
 
 /** ตัวแปร ref สำหรับแสดง validate */
@@ -86,15 +95,16 @@ const FormRef: FormRef = {
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 watch(props.data, async () => {
 	// console.log("data==>", props.data)
-	formData.leaveWrote = props.data.leaveWrote
+	formDataFollowSpouse.leaveWrote = props.data.leaveWrote
-	formData.leaveStartDate = props.data.leaveStartDate
+	formDataFollowSpouse.leaveStartDate = props.data.leaveStartDate
-	formData.leaveEndDate = props.data.leaveEndDate
+	formDataFollowSpouse.leaveEndDate = props.data.leaveEndDate
-	formData.leaveTotal = props.data.leaveTotal
+	formDataFollowSpouse.leaveTotal = props.data.leaveTotal
-	formData.leaveDetail = props.data.leaveDetail
+	formDataFollowSpouse.leaveDetail = props.data.leaveDetail
-	formData.leaveDocument = props.data.leaveDocument
+	formDataFollowSpouse.leaveDocument = props.data.leaveDocument
 })
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
+const nameFile = ref<string>("")
 const fileDocDataUpload = ref<File[]>([])
 const fileUploadDoc = async (files: any) => {
 	files.forEach((file: any) => {
@@ -115,16 +125,66 @@ function onValidate() {
 		}
 	}
 	if (hasError.every(result => result === true)) {
-		props.onSubmit(formData)
+		onSubmit()
 	}
 }
 
+/** ฟังก์ชั่น บันทึก */
+const onSubmit = async () => {
+	dialogConfirm(
+		$q,
+		async () => {
+			await saveFormData()
+		},
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
+	)
+
+	console.log("save")
+}
+
+async function saveFormData() {
+	const formData = new FormData()
+	const blob = formDataFollowSpouse.leaveDocument.slice(0, formDataFollowSpouse.leaveDocument[0].size)
+	const newFile = new File(blob, nameFile.value, {
+		type: formDataFollowSpouse.leaveDocument[0].type,
+	})
+
+	formData.append("leaveDocument", newFile) //
+	formData.append("type", formDataFollowSpouse.type) //
+	formData.append("leaveStartDate", dateToISO(formDataFollowSpouse.leaveStartDate)) //
+	formData.append("leaveEndDate", dateToISO(formDataFollowSpouse.leaveEndDate)) //
+	formData.append("followHistoryStart", dateToISO(formDataFollowSpouse.followHistoryStart)) //
+	formData.append("followHistoryEnd", dateToISO(formDataFollowSpouse.followHistoryEnd)) //
+	formData.append("leaveWrote", formDataFollowSpouse.leaveWrote) //
+	formData.append("leaveDetail", formDataFollowSpouse.leaveDetail) //
+	formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText) //
+	formData.append("leaveSalary", formDataFollowSpouse.leaveSalary) //
+	formData.append("followHistoryTime", formDataFollowSpouse.followHistoryTime) //
+	formData.append("followHistoryCountry", formDataFollowSpouse.followHistoryCountry) //
+	formData.append("coupleDayLevelCountry", formDataFollowSpouse.coupleDayLevelCountry) //
+	formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel) //
+	formData.append("coupleDayPosition", formDataFollowSpouse.coupleDayPosition) //
+	formData.append("coupleDayName", formDataFollowSpouse.coupleDayName) //
+	formData.append("leaveTotal", formDataFollowSpouse.leaveTotal) //
+
+	await http
+		.post(config.API.leaveUser(), formData)
+		.then((res: any) => {
+			success($q, "บันทึกสำเร็จ")
+			router.push(`/leave`)
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
+}
+
 /**
  * function อัพเดทค่า LeaveTotal
  */
 function updateLeaveTotal() {
-	const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
+	const newLeaveTotal = calculateDurationYmd(formDataFollowSpouse.leaveStartDate, formDataFollowSpouse.leaveEndDate)
-	formData.leaveTotal = newLeaveTotal
+	formDataFollowSpouse.leaveTotal = newLeaveTotal
 	console.log("test")
 }
 </script>
@@ -145,7 +205,7 @@ function updateLeaveTotal() {
 					hide-bottom-space
 					bg-color="white"
 					outlined
-					v-model="formData.leaveWrote"
+					v-model="formDataFollowSpouse.leaveWrote"
 					label="เขียนที่"
 					:readonly="!edit"
 					:rules="[val => !!val || `${'เขียนที่'}`]"
@@ -153,7 +213,7 @@ function updateLeaveTotal() {
 				<datepicker
 					class="col-12 col-md-4 col-sm-12"
 					menu-class-name="modalfix"
-					v-model="formData.leaveStartDate"
+					v-model="formDataFollowSpouse.leaveStartDate"
 					:locale="'th'"
 					autoApply
 					hide-bottom-space
@@ -178,7 +238,7 @@ function updateLeaveTotal() {
 							bg-color="white"
 							:readonly="!edit"
 							class="full-width datepicker"
-							:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
+							:model-value="formDataFollowSpouse.leaveStartDate != null ? date2Thai(formDataFollowSpouse.leaveStartDate) : null"
 							:label="`${'ลาตั้งแต่วันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
 						>
@@ -192,7 +252,7 @@ function updateLeaveTotal() {
 				<datepicker
 					class="col-12 col-md-4 col-sm-12"
 					menu-class-name="modalfix"
-					v-model="formData.leaveEndDate"
+					v-model="formDataFollowSpouse.leaveEndDate"
 					:locale="'th'"
 					autoApply
 					borderless
@@ -200,8 +260,8 @@ function updateLeaveTotal() {
 					:enableTimePicker="false"
 					week-start="0"
 					@update:model-value="updateLeaveTotal"
-					:readonly="!formData.leaveStartDate"
+					:readonly="!formDataFollowSpouse.leaveStartDate"
-					:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataFollowSpouse.leaveStartDate ? new Date(formDataFollowSpouse.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -217,9 +277,9 @@ function updateLeaveTotal() {
 							for="leaveEndDateRef"
 							hide-bottom-space
 							bg-color="white"
-							:readonly="!formData.leaveStartDate"
+							:readonly="!formDataFollowSpouse.leaveStartDate"
 							class="full-width datepicker"
-							:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
+							:model-value="formDataFollowSpouse.leaveEndDate != null ? date2Thai(formDataFollowSpouse.leaveEndDate) : null"
 							:label="`${'ลาถึงวันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 						>
@@ -236,7 +296,7 @@ function updateLeaveTotal() {
 					outlined
 					ref="leaveTotalRef"
 					for="leaveTotalRef"
-					v-model="formData.leaveTotal"
+					v-model="formDataFollowSpouse.leaveTotal"
 					label="เป็นเวลา"
 					readonly
 					hide-bottom-space
@@ -264,7 +324,7 @@ function updateLeaveTotal() {
 						for="leaveSalaryRef"
 						dense
 						outlined
-						v-model="formattSalaryText"
+						v-model="formattleaveSalaryText"
 						label="เงินเดือนปัจจุบัน"
 						readonly
 					/>
@@ -279,7 +339,7 @@ function updateLeaveTotal() {
 						dense
 						bg-color="white"
 						outlined
-						v-model="formData.coupleDayName"
+						v-model="formDataFollowSpouse.coupleDayName"
 						label="ชื่อคู่สมรส"
 						:readonly="!edit"
 						:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
@@ -294,7 +354,7 @@ function updateLeaveTotal() {
 						dense
 						outlined
 						bg-color="white"
-						v-model="formData.coupleDayPosition"
+						v-model="formDataFollowSpouse.coupleDayPosition"
 						label="ตำแหน่งคู่สมรส"
 						:readonly="!edit"
 						:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
@@ -309,7 +369,7 @@ function updateLeaveTotal() {
 						hide-bottom-space
 						outlined
 						bg-color="white"
-						v-model="formData.coupleDayLevel"
+						v-model="formDataFollowSpouse.coupleDayLevel"
 						label="ระดับคู่สมรส"
 						:readonly="!edit"
 						:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
@@ -324,7 +384,7 @@ function updateLeaveTotal() {
 						dense
 						outlined
 						bg-color="white"
-						v-model="formData.coupleDayLevelCountry"
+						v-model="formDataFollowSpouse.coupleDayLevelCountry"
 						label="ไปปฏิบัติราชการ ณ ประเทศ"
 						:readonly="!edit"
 						:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
@@ -334,14 +394,14 @@ function updateLeaveTotal() {
 				<datepicker
 					class="col-12 col-md-3 col-sm-12"
 					menu-class-name="modalfix"
-					v-model="formData.followHistoryStart"
+					v-model="formDataFollowSpouse.followHistoryStart"
 					:locale="'th'"
 					autoApply
 					hide-bottom-space
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="formData.followHistoryStart !== null"
+					:readonly="formDataFollowSpouse.followHistoryStart !== null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -356,10 +416,10 @@ function updateLeaveTotal() {
 							ref="followHistoryStartRef"
 							for="followHistoryStartRef"
 							hide-bottom-space
-							:readonly="formData.followHistoryStart !== null"
+							:readonly="formDataFollowSpouse.followHistoryStart !== null"
 							bg-color="white"
 							class="full-width datepicker"
-							:model-value="formData.followHistoryStart != null ? date2Thai(formData.followHistoryStart) : null"
+							:model-value="formDataFollowSpouse.followHistoryStart != null ? date2Thai(formDataFollowSpouse.followHistoryStart) : null"
 							:label="`${'ตั้งแต่วันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
 						>
@@ -372,14 +432,14 @@ function updateLeaveTotal() {
 				<datepicker
 					class="col-12 col-md-3 col-sm-12"
 					menu-class-name="modalfix"
-					v-model="formData.followHistoryEnd"
+					v-model="formDataFollowSpouse.followHistoryEnd"
 					:locale="'th'"
 					autoApply
 					hide-bottom-space
 					borderless
 					:enableTimePicker="false"
 					week-start="0"
-					:readonly="formData.followHistoryEnd !== null"
+					:readonly="formDataFollowSpouse.followHistoryEnd !== null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -395,9 +455,9 @@ function updateLeaveTotal() {
 							for="followHistoryEndRef"
 							hide-bottom-space
 							bg-color="white"
-							:readonly="formData.followHistoryEnd !== null"
+							:readonly="formDataFollowSpouse.followHistoryEnd !== null"
 							class="full-width datepicker"
-							:model-value="formData.followHistoryEnd != null ? date2Thai(formData.followHistoryEnd) : null"
+							:model-value="formDataFollowSpouse.followHistoryEnd != null ? date2Thai(formDataFollowSpouse.followHistoryEnd) : null"
 							:label="`${'ถึงวันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
 						>
@@ -415,21 +475,21 @@ function updateLeaveTotal() {
 					bg-color="white"
 					ref="followHistoryCountryRef"
 					for="followHistoryCountryRef"
-					v-model="formData.followHistoryCountry"
+					v-model="formDataFollowSpouse.followHistoryCountry"
 					label="ประเทศ"
 					:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
-					:readonly="formData.followHistoryCountry !== ''"
+					:readonly="formDataFollowSpouse.followHistoryCountry !== ''"
 				/>
 				<q-input
 					class="col-12 col-md-3 col-sm-12"
 					dense
 					outlined
-					:readonly="formData.followHistoryTime !== ''"
+					:readonly="formDataFollowSpouse.followHistoryTime !== ''"
 					hide-bottom-space
 					bg-color="white"
 					ref="followHistoryTimeRef"
 					for="followHistoryTimeRef"
-					v-model="formData.followHistoryTime"
+					v-model="formDataFollowSpouse.followHistoryTime"
 					label="เป็นเวลา"
 				/>
 
@@ -442,12 +502,23 @@ function updateLeaveTotal() {
 					outlined
 					ref="leaveDetailRef"
 					for="leaveDetailRef"
-					v-model="formData.leaveDetail"
+					v-model="formDataFollowSpouse.leaveDetail"
 					label="รายละเอียด"
 					:readonly="!edit"
 				/>
 
-				<q-file ref="fileRef" bg-color="white" v-model="formData.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
+				<q-file
+					ref="fileRef"
+					bg-color="white"
+					v-model="formDataFollowSpouse.leaveDocument"
+					@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>
@@ -459,7 +530,7 @@ function updateLeaveTotal() {
 					</div>
 					<q-card bordered flat class="full-width">
 						<q-list separator>
-							<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
+							<q-item v-for="(file, index) in formDataFollowSpouse.leaveDocument" :key="index" class="q-my-xs">
 								<q-item-section>
 									<q-item-label class="full-width ellipsis">
 										{{ file.name }}

src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue

@@ -3,11 +3,16 @@ import { reactive, ref, computed } from "vue"
 import { useCounterMixin } from "@/stores/mixin"
 import { useQuasar } from "quasar"
 import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence"
+import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+import { useRouter } from "vue-router"
 
+const dataStore = useLeaveStore()
 const $q = useQuasar()
 const mixin = useCounterMixin()
-const { date2Thai, dialogConfirm, notifyError } = mixin
+const { date2Thai, dialogConfirm, notifyError, dateToISO, success, messageError } = mixin
-
+const router = useRouter()
 const edit = ref<boolean>(true)
 const isSave = ref<boolean>(false)
 const files = ref<any>(null)
@@ -31,7 +36,8 @@ const props = defineProps({
 })
 
 /** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<any>({
+const formDataRehabilitation = reactive<any>({
+	type: dataStore.typeId,
 	leaveWrote: "",
 	leaveStartDate: null,
 	leaveEndDate: null,
@@ -60,15 +66,63 @@ function onValidate() {
 		}
 	}
 	if (hasError.every(result => result === true)) {
-		props.onSubmit(formData)
+		onSubmit()
 	}
 }
 
-/** ฟังก์ชั่น อัปโหลด
+/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
- * consolelog ไว้ก่อน
+const nameFile = ref<string>("")
- */
+const nameFileDraft = ref<string>("")
-function upLoadFile() {
+const fileDocDataUpload = ref<File[]>([])
-	console.log("upload", filesUpload.value)
+const fileUploadDoc = async (files: any) => {
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file)
+	})
+}
+
+/** ฟังก์ชั่น บันทึก */
+const onSubmit = async () => {
+	dialogConfirm(
+		$q,
+		async () => {
+			await saveFormData()
+		},
+		"ยืนยันการยื่นใบลา",
+		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
+	)
+
+	console.log("save")
+}
+
+async function saveFormData() {
+	const formData = new FormData()
+	const blob = formDataRehabilitation.leaveDocument.slice(0, formDataRehabilitation.leaveDocument[0].size)
+	const newFile = new File(blob, nameFile.value, {
+		type: formDataRehabilitation.leaveDocument[0].type,
+	})
+	const blobDrafe = formDataRehabilitation.leaveDraftDocument.slice(0, formDataRehabilitation.leaveDraftDocument[0].size)
+	const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
+		type: formDataRehabilitation.leaveDraftDocument[0].type,
+	})
+
+	formData.append("leaveDocument", newFile) //
+	formData.append("leaveDraftDocument", newFileDraft) //
+	formData.append("type", formDataRehabilitation.type) //
+	formData.append("leaveStartDate", dateToISO(formDataRehabilitation.leaveStartDate)) //
+	formData.append("leaveEndDate", dateToISO(formDataRehabilitation.leaveEndDate)) //
+	formData.append("leaveWrote", formDataRehabilitation.leaveWrote) //
+	formData.append("leaveDetail", formDataRehabilitation.leaveDetail) //
+
+	await http
+		.post(config.API.leaveUser(), formData)
+		.then((res: any) => {
+			success($q, "บันทึกสำเร็จ")
+
+			router.push(`/leave`)
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
 }
 </script>
 
@@ -81,7 +135,7 @@ function upLoadFile() {
 		<q-card bordered class="q-pa-md bg-grey-1">
 			<div class="row q-pa-sm q-col-gutter-sm">
 				<q-input
-					v-model="formData.leaveWrote"
+					v-model="formDataRehabilitation.leaveWrote"
 					class="col-12 col-sm-12"
 					ref="leaveWroteRef"
 					dense
@@ -92,7 +146,16 @@ function upLoadFile() {
 					:rules="[val => !!val || `${'เขียนที่'}`]"
 				/>
 
-				<datepicker v-model="formData.leaveStartDate" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
+				<datepicker
+					v-model="formDataRehabilitation.leaveStartDate"
+					class="col-12 col-md-4 col-sm-6"
+					menu-class-name="modalfix"
+					autoApply
+					borderless
+					week-start="0"
+					:enableTimePicker="false"
+					:locale="'th'"
+				>
 					<template #year="{ year }">
 						{{ year + 543 }}
 					</template>
@@ -108,7 +171,7 @@ function upLoadFile() {
 							dense
 							lazy-rules
 							hide-bottom-space
-							:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
+							:model-value="formDataRehabilitation.leaveStartDate != null ? date2Thai(formDataRehabilitation.leaveStartDate) : null"
 							:label="`${'ลาตั้งแต่วันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
 						>
@@ -120,16 +183,16 @@ function upLoadFile() {
 				</datepicker>
 
 				<datepicker
-					v-model="formData.leaveEndDate"
+					v-model="formDataRehabilitation.leaveEndDate"
 					class="col-12 col-md-4 col-sm-6"
 					menu-class-name="modalfix"
 					autoApply
 					borderless
 					week-start="0"
 					:locale="'th'"
-					:readonly="!formData.leaveStartDate"
+					:readonly="!formDataRehabilitation.leaveStartDate"
 					:enableTimePicker="false"
-					:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
+					:min-date="formDataRehabilitation.leaveStartDate ? new Date(formDataRehabilitation.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
 				>
 					<template #year="{ year }">
 						{{ year + 543 }}
@@ -146,8 +209,8 @@ function upLoadFile() {
 							lazy-rules
 							bg-color="white"
 							hide-bottom-space
-							:readonly="!formData.leaveStartDate"
+							:readonly="!formDataRehabilitation.leaveStartDate"
-							:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
+							:model-value="formDataRehabilitation.leaveEndDate != null ? date2Thai(formDataRehabilitation.leaveEndDate) : null"
 							:label="`${'ลาถึงวันที่'}`"
 							:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
 						>
@@ -158,10 +221,10 @@ function upLoadFile() {
 					</template>
 				</datepicker>
 
-				<q-input v-model="formData.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
+				<q-input v-model="formDataRehabilitation.leaveDetail" 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.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
+					<q-file v-model="formDataRehabilitation.leaveDocument" @added="fileUploadDoc" use-chips bg-color="white" dense outlined multiple label="เอกสารประกอบ">
 						<template v-slot:prepend>
 							<q-icon name="attach_file" color="primary" />
 						</template>
@@ -189,7 +252,7 @@ function upLoadFile() {
 			</div>
 		</q-card>
 
-		<div v-if="formData.leaveWrote && formData.leaveStartDate && formData.leaveEndDate" class="q-mt-md">
+		<div v-if="formDataRehabilitation.leaveWrote && formDataRehabilitation.leaveStartDate && formDataRehabilitation.leaveEndDate" class="q-mt-md">
 			<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>
@@ -205,7 +268,7 @@ function upLoadFile() {
 					<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="formData.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept="application/pdf">
+							<q-file v-model="formDataRehabilitation.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept="application/pdf">
 								<template v-slot:prepend>
 									<q-icon name="attach_file" color="primary" />
 								</template>
@@ -213,7 +276,7 @@ function upLoadFile() {
 						</div>
 					</div>
 					<div class="col-md-1 self-end q-mb-sm">
-						<q-btn v-if="formData.leaveDraftDocument" flat round color="primary" icon="mdi-arrow-up-bold" @click="upLoadFile"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
+						<q-btn v-if="formDataRehabilitation.leaveDraftDocument" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
 					</div>
 				</div>
 			</q-card>

src/modules/05_leave/componenst/Forms/Form.vue

@@ -39,19 +39,8 @@ const formData = reactive<FormData>({
 })
 
 onMounted(async () => {
-	await FetchProfile()
+	// await FetchProfile()
 })
-
-async function FetchProfile() {
-	await http
-		.post(config.API.leaveProfile(), { type: "08db80fe-919b-4439-856f-3fdb86ff99f9" })
-		.then((res: any) => {
-			success($q, "บันทึกสำเร็จ")
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
 </script>
 <template>
 	<q-card bordered class="q-pa-md bg-grey-1">

src/modules/05_leave/interface/index/main.ts

@@ -1,40 +1,41 @@
-import type { S } from "@fullcalendar/core/internal-common";
+import type { S } from "@fullcalendar/core/internal-common"
 
 interface OptionData {
-  id: string | undefined;
+	id: string | undefined
-  name: string | undefined;
+	name: string | undefined
+	code: string | undefined
 }
 
 interface FormLeavetMainData {
-  type: string;
+	type: string
-  numDate: string;
+	numDate: string
-  extend: string;
+	extend: string
-  use: string;
+	use: string
-  numAll: string;
+	numAll: string
-  numDone: string;
+	numDone: string
-  numNot: string;
+	numNot: string
-  numCancel: string;
+	numCancel: string
 }
 
 interface formListLeaveData {
-  no: string;
+	no: string
-  date: string | null;
+	date: string | null
-  type: string;
+	type: string
-  status: string;
+	status: string
-  year: string;
+	year: string
 }
 
 interface TypeLeave {
-  code: string;
+	code: string
-  createdAt: Date;
+	createdAt: Date
-  createdFullName: string;
+	createdFullName: string
-  createdUserId: string;
+	createdUserId: string
-  id: string;
+	id: string
-  lastUpdateFullName: string;
+	lastUpdateFullName: string
-  lastUpdateUserId: string;
+	lastUpdateUserId: string
-  lastUpdatedAt: Date | null;
+	lastUpdatedAt: Date | null
-  limit: number;
+	limit: number
-  name: string;
+	name: string
 }
 
-export type { OptionData, FormLeavetMainData, formListLeaveData, TypeLeave };
+export type { OptionData, FormLeavetMainData, formListLeaveData, TypeLeave }

src/modules/05_leave/interface/request/AddAbsence.ts

@@ -12,8 +12,8 @@ interface FormData {
 }
 interface OrdinationForm {
 	leaveWrote: object | null
-	government: object | null
+	leavegovernmentDate: object | null
-	birthday: object | null
+	leavebirthDate: object | null
 	leaveStartDate: object | null
 	leaveEndDate: object | null
 	totalLeave: object | null
@@ -27,7 +27,7 @@ interface OrdinationForm {
 }
 interface HajiForm {
 	leaveWrote: object | null
-	government: object | null
+	leavegovernmentDate: object | null
 	leaveStartDate: object | null
 	leaveEndDate: object | null
 	[key: string]: any
@@ -47,8 +47,8 @@ interface MilitaryForm {
 interface studyDaySubjectForm {
 	leaveStartDate: object | null
 	leaveEndDate: object | null
-	birthday: object | null
+	leavebirthDate: object | null
-	dateGovernment: object | null
+	leavegovernmentDate: object | null
 	leaveSalary: object | null
 	leaveNumber: object | null
 	leaveAddress: object | null
@@ -63,8 +63,8 @@ interface studyDaySubjectForm {
 interface TrainForm {
 	leaveStartDate: object | null
 	leaveEndDate: object | null
-	birthday: object | null
+	leavebirthDate: object | null
-	dateGovernment: object | null
+	leavegovernmentDate: object | null
 	leaveNumber: object | null
 	leaveAddress: object | null
 	studyDayScholarship: object | null

src/modules/05_leave/interface/request/VacationForm.ts

@@ -6,7 +6,6 @@ interface FormData {
 	leaveStartDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
 	leaveEndDate: Date | null //*วัน เดือน ปีสิ้นสุดลา
 	leaveTotal: string //จำนวนวันลา
-	contractTel: string //หมายเลขโทรศัพท์ที่ติดต่อได้
 	leaveNumber: string //หมายเลขที่ติดต่อขณะลา
 	leaveDetail: string //รายละเอียดการลา
 	leaveAddress: string //สถานที่ติดต่อขณะลา
@@ -22,7 +21,6 @@ interface FormRef {
 	restDayCurrentTotal: object | null //วันที่คลอด
 	leaveEndDate: object | null //*วัน เดือน ปีสิ้นสุดลา
 	leaveTotal: object | null //จำนวนวันลา
-	contractTel: object | null //หมายเลขโทรศัพท์ที่ติดต่อได้
 	leaveNumber: object | null //หมายเลขที่ติดต่อขณะลา
 	leaveDetail: object | null //รายละเอียดการลา
 	leaveAddress: object | null //สถานที่ติดต่อขณะลา

src/modules/05_leave/interface/request/WorkInternationalForm.ts

@@ -1,4 +1,5 @@
 interface FormData {
+	type: string
 	leaveWrote: string //เขียนที่***
 	leaveStartDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
 	leaveEndDate: Date | null //*วัน เดือน ปีสิ้นสุดลา

src/modules/05_leave/store.ts

@@ -1,257 +1,263 @@
-import { defineStore } from "pinia";
+import { defineStore } from "pinia"
-import { ref } from "vue";
+import { ref } from "vue"
+import { useQuasar } from "quasar"
 
-import type { QTableProps } from "quasar";
+import type { QTableProps } from "quasar"
-import type {
+import type { OptionData, TypeLeave } from "@/modules/05_leave/interface/index/main"
-  OptionData,
+import type { ListLeave, ListLeaveTable } from "@/modules/05_leave/interface/response/leave"
-  TypeLeave,
+import http from "@/plugins/http"
-} from "@/modules/05_leave/interface/index/main";
+import config from "@/app.config"
-import type {
-  ListLeave,
-  ListLeaveTable,
-} from "@/modules/05_leave/interface/response/leave";
 
-import { useCounterMixin } from "@/stores/mixin";
+import { useCounterMixin } from "@/stores/mixin"
-const mixin = useCounterMixin();
+const mixin = useCounterMixin()
-const { date2Thai } = mixin;
+const { date2Thai, messageError } = mixin
+const $q = useQuasar()
 
 export const useLeaveStore = defineStore("Leave", () => {
-  const tabValue = ref<string>("calendar");
+	const tabValue = ref<string>("calendar")
-  const typeLeave = ref<string | undefined>("");
+	const typeLeave = ref<string | undefined>("")
 
-  const LeaveType = ref<string | null>("0");
+	const LeaveType = ref<string | null>("0")
-  const LeaveStatus = ref<string | null>("0");
+	const LeaveStatus = ref<string | null>("0")
-  const fiscalYearyear = ref<Number | null>(new Date().getFullYear());
+	const fiscalYearyear = ref<Number | null>(new Date().getFullYear())
-  const rows = ref<ListLeaveTable[]>([]);
+	const rows = ref<ListLeaveTable[]>([])
 
-  /**
+	/**
-   * function เรียกข้อมูลรายการลา Table
+	 * function เรียกข้อมูลรายการลา Table
-   * @param data ข้อมูลรายการลา Table
+	 * @param data ข้อมูลรายการลา Table
-   */
+	 */
-  async function fetchListLeave(data: ListLeave[]) {
+	async function fetchListLeave(data: ListLeave[]) {
-    let datalist: ListLeaveTable[] = data.map((e: ListLeave) => ({
+		let datalist: ListLeaveTable[] = data.map((e: ListLeave) => ({
-      id: e.id,
+			id: e.id,
-      leaveTypeName: e.leaveTypeName,
+			leaveTypeName: e.leaveTypeName,
-      leaveTypeId: e.leaveTypeId,
+			leaveTypeId: e.leaveTypeId,
-      fullName: e.fullName,
+			fullName: e.fullName,
-      dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave),
+			dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave),
-      status: e.status,
+			status: e.status,
-      statusConvert: convertStatud(e.status),
+			statusConvert: convertStatud(e.status),
-      isDelete: e.isDelete,
+			isDelete: e.isDelete,
-    }));
+		}))
-    rows.value = datalist;
+		rows.value = datalist
-  }
+	}
 
-  function convertStatud(val: string) {
+	function convertStatud(val: string) {
-    switch (val) {
+		switch (val) {
-      case "NEW":
+			case "NEW":
-        return "ใหม่";
+				return "ใหม่"
-      case "PENDING":
+			case "PENDING":
-        return "กำลังดำเนินการ";
+				return "กำลังดำเนินการ"
-      case "APPROVE":
+			case "APPROVE":
-        return "อนุมัติ";
+				return "อนุมัติ"
-      case "REJECT":
+			case "REJECT":
-        return "ไม่อนุมัติ";
+				return "ไม่อนุมัติ"
-      case "DELETE":
+			case "DELETE":
-        return "ยกเลิก";
+				return "ยกเลิก"
-    }
+		}
-  }
+	}
 
-  /** ประเภทการลา */
+	/** ประเภทการลา */
-  const typeOptions = ref<OptionData[]>([]);
+	const typeOptions = ref<OptionData[]>([])
-  const typeOptionsMain = ref<OptionData[]>([]);
+	const typeId = ref<string | undefined>("")
-  /**
+	const typeOptionsMain = ref<OptionData[]>([])
-   * function เรียกข้อมูลประเภทการลา
+	const typeOptionsAdd = ref<OptionData[]>([])
-   * @param data ประเภทการลา
+	/** รายการข้อมูลประเภทใบลา */
-   */
+	const options = ref<OptionData[]>([])
-  async function fetchLeaveType(data: TypeLeave[]) {
+	/**
-    typeOptionsMain.value = [
+	 * function เรียกข้อมูลประเภทการลา
-      { id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด" },
+	 * @param data ประเภทการลา
-    ];
+	 */
-    const optionType = data.map((e: TypeLeave) => ({
+	async function fetchLeaveType(data: TypeLeave[]) {
-      id: e.id,
+		typeOptionsMain.value = [{ id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด", code: "LV-000" }]
-      name: e.name,
+		const optionType = data.map((e: TypeLeave) => ({
-    }));
+			id: e.id,
-    typeOptionsMain.value.push(...optionType);
+			name: e.name,
-    typeOptions.value = typeOptionsMain.value;
+			code: e.code,
-  }
+		}))
+		typeOptionsMain.value.push(...optionType)
+		typeOptions.value = typeOptionsMain.value
+		console.log(typeOptions.value)
 
-  /** สถานะของการลา */
+		typeOptionsAdd.value.push(...optionType)
-  const statusOptionsMain = ref<OptionData[]>([
+		options.value = typeOptionsAdd.value
-    { id: "ALL", name: "ทั้งหมด" },
+		console.log(options.value)
-    { id: "NEW", name: "ใหม่" },
+	}
-    { id: "PENDING", name: "กำลังดำเนินการ" },
-    { id: "APPROVE", name: "อนุมัติ " },
-    { id: "REJECT", name: "ไม่อนุมัติ" },
-    { id: "DELETE", name: "ยกเลิก" },
-  ]);
-  const statusOptions = ref<OptionData[]>(statusOptionsMain.value);
 
-  /**
+	/** สถานะของการลา */
-   * function ต้นหาข้อมูลของ Option
+	const statusOptionsMain = ref<any[]>([
-   * @param val ค่าที่ต้องการฟิลเตอร์
+		{ id: "ALL", name: "ทั้งหมด" },
-   * @param update  อัพเดทค่า
+		{ id: "NEW ", name: "ใหม่" },
-   * @param refData ดาต้าที่ต้องการฟิลเตอร์
+		{ id: "PENDING ", name: "กำลังดำเนินการ" },
-   */
+		{ id: "APPROVE ", name: "อนุมัติ " },
-  function filterOption(val: any, update: Function, refData: string) {
+		{ id: "REJECT ", name: "ไม่อนุมัติ" },
-    switch (refData) {
+		{ id: "DELETE  ", name: "ยกเลิก" },
-      case "LeaveTypeOption":
+	])
-        update(() => {
+	const statusOptions = ref<any[]>(statusOptionsMain.value)
-          typeOptions.value = typeOptionsMain.value.filter(
-            (v: any) => v.name.indexOf(val) > -1
-          );
-        });
-        break;
-      case "LeaveStatusOption":
-        update(() => {
-          statusOptions.value = statusOptionsMain.value.filter(
-            (v: any) => v.name.indexOf(val) > -1
-          );
-        });
-        break;
-      default:
-        break;
-    }
-  }
 
-  /** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
+	/**
-  const optionsSpecific = ref([
+	 * function ต้นหาข้อมูลของ Option
-    { id: "s0", name: "ลาไปศึกษาต่อ" },
+	 * @param val ค่าที่ต้องการฟิลเตอร์
-    { id: "s1", name: "ลาฝึกอบรม" },
+	 * @param update  อัพเดทค่า
-    { id: "s2", name: "ลาปฎิบัติการวิจัย" },
+	 * @param refData ดาต้าที่ต้องการฟิลเตอร์
-    { id: "s3", name: "ลาดูงาน" },
+	 */
-  ]);
+	function filterOption(val: any, update: Function, refData: string) {
+		switch (refData) {
+			case "LeaveTypeOption":
+				update(() => {
+					typeOptions.value = typeOptionsMain.value.filter((v: any) => v.name.indexOf(val) > -1)
+				})
+				break
+			case "LeaveStatusOption":
+				update(() => {
+					statusOptions.value = statusOptionsMain.value.filter((v: any) => v.name.indexOf(val) > -1)
+				})
+				break
+			default:
+				break
+		}
+	}
+	/** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
+	const optionsSpecific = ref([
+		{ id: "s0", name: "ลาไปศึกษาต่อ", code: "s0" },
+		{ id: "s1", name: "ลาฝึกอบรม", code: "s1" },
+		{ id: "s2", name: "ลาปฎิบัติการวิจัย", code: "s2" },
+		{ id: "s3", name: "ลาดูงาน", code: "s3" },
+	])
 
-  /** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ*/
+	/** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ*/
-  const optionsOrdination = ref([
+	const optionsOrdination = ref([
-    { id: "0", name: "ลาอุปสมบท" },
+		{ id: "0", name: "ลาอุปสมบท", code: "0" },
-    { id: "1", name: "ลาประกอบพิธีฮัจย์ฯ" },
+		{ id: "1", name: "ลาประกอบพิธีฮัจย์ฯ", code: "1" },
-  ]);
+	])
 
-  /** รายการข้อมูลประเภทใบลา */
+	/** data table filter & column ของรายการลา */
-  const options = ref<OptionData[]>([
+	const visibleColumns = ref<String[]>(["no", "leaveTypeName", "dateSendLeave", "status"])
-    { id: "1", name: "ลาป่วย" },
+	const columns = ref<QTableProps["columns"]>([
-    { id: "2", name: "ลากิจส่วนตัว" },
+		{
-    { id: "3", name: "ลาคลอดบุตร" },
+			name: "no",
-    { id: "4", name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
+			align: "left",
-    { id: "5", name: "ลาพักผ่อน" },
+			label: "ลำดับ",
-    { id: "6", name: "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ" },
+			sortable: true,
-    { id: "7", name: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" },
+			field: "no",
-    { id: "8", name: "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน" },
+			headerStyle: "font-size: 14px",
-    { id: "9", name: "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ" },
+			style: "font-size: 14px; width:5%;",
-    { id: "10", name: "ลาติดตามคู่สมรส" },
+		},
-    { id: "11", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
+		{
-  ]);
+			name: "leaveTypeName",
+			align: "left",
+			label: "ประเภทการลา",
+			sortable: true,
+			field: "leaveTypeName",
+			headerStyle: "font-size: 14px",
+			style: "font-size: 14px; width:15%;",
+		},
+		{
+			name: "dateSendLeave",
+			align: "left",
+			label: "วันที่ยื่นใบลา",
+			sortable: true,
+			field: "dateSendLeave",
+			headerStyle: "font-size: 14px",
+			style: "font-size: 14px; width:15%;",
+		},
+		{
+			name: "status",
+			align: "left",
+			label: "สถานะ",
+			sortable: true,
+			field: "status",
+			headerStyle: "font-size: 14px",
+			style: "font-size: 14px; width:10%;",
+		},
+	])
+	/**
+	 *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา
+	 * @param item ประเภทแบบฟอร์ม
+	 * @param subitem ประเภทแบบฟอร์มย่อย
+	 */
+	function typeConvert(item: string, subitem: any) {
+		// console.log('first',item)
+		if (item !== "LV-006" && item !== "LV-008") {
+			typeLeave.value = convertSubtitle(item)
+		} else if (item === "LV-006") {
+			typeLeave.value = convertSubtitleInfo(subitem)
+		} else if (item === "LV-008") {
+			typeLeave.value = convertSubtitleInfo2(subitem)
+		}
+		typeId.value = convertId(item)
+		console.log(typeId.value)
+	}
 
-  /** data table filter & column ของรายการลา */
+	/**
-  const visibleColumns = ref<String[]>([
+	 *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจย์
-    "no",
+	 * @param val ค่า string
-    "leaveTypeName",
+	 * @returns ส่งค่าที่แปลงแล้ว
-    "dateSendLeave",
+	 */
-    "status",
+	function convertSubtitle(val: string) {
-  ]);
+		return options.value.find(x => x.id == val)?.name
-  const columns = ref<QTableProps["columns"]>([
+	}
-    {
-      name: "no",
-      align: "left",
-      label: "ลำดับ",
-      sortable: true,
-      field: "no",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px; width:5%;",
-    },
-    {
-      name: "leaveTypeName",
-      align: "left",
-      label: "ประเภทการลา",
-      sortable: true,
-      field: "leaveTypeName",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px; width:15%;",
-    },
-    {
-      name: "dateSendLeave",
-      align: "left",
-      label: "วันที่ยื่นใบลา",
-      sortable: true,
-      field: "dateSendLeave",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px; width:15%;",
-    },
-    {
-      name: "status",
-      align: "left",
-      label: "สถานะ",
-      sortable: true,
-      field: "status",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px; width:10%;",
-    },
-  ]);
 
-  /**
+	/**
-   *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา
+	 *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจย์ ย่อย
-   * @param item ประเภทแบบฟอร์ม
+	 * @param val ค่า string
-   * @param subitem ประเภทแบบฟอร์มย่อย
+	 * @returns ส่งค่าที่แปลงแล้ว
-   */
+	 */
-  function typeConvert(item: string, subitem: any) {
+	function convertSubtitleInfo(val: string) {
-    // console.log('first',item)
+		return optionsOrdination.value.find(x => x.id == val)?.name
-    if (item !== "6" && item !== "8") {
+	}
-      typeLeave.value = convertSubtitle(item);
-    } else if (item === "6") {
-      typeLeave.value = convertSubtitleInfo(subitem);
-    } else if (item === "8") {
-      typeLeave.value = convertSubtitleInfo2(subitem);
-    }
-  }
 
-  /**
+	/**
-   *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจย์
+	 *ฟังก์ชั่นแปลง ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
-   * @param val ค่า string
+	 * @param val ค่า string
-   * @returns ส่งค่าที่แปลงแล้ว
+	 * @returns ส่งค่าที่แปลงแล้ว
-   */
+	 */
-  function convertSubtitle(val: string) {
+	function convertSubtitleInfo2(val: string) {
-    return options.value.find((x) => x.id == val)?.name;
+		return optionsSpecific.value.find(x => x.id == val)?.name
-  }
+	}
 
-  /**
+	/**
-   *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจย์ ย่อย
+	 *ฟังก์ชั่นแปลง id
-   * @param val ค่า string
+	 * @param val ค่า string
-   * @returns ส่งค่าที่แปลงแล้ว
+	 * @returns ส่งค่าที่แปลงแล้ว
-   */
+	 */
-  function convertSubtitleInfo(val: string) {
+	function convertId(val: string) {
-    return optionsOrdination.value.find((x) => x.id == val)?.name;
+		return options.value.find(x => x.code == val)?.id
-  }
+	}
 
-  /**
+	async function fetchProfile() {
-   *ฟังก์ชั่นแปลง ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
+		console.log("profile")
-   * @param val ค่า string
+		await http
-   * @returns ส่งค่าที่แปลงแล้ว
+			.post(config.API.leaveProfile(), { type: typeId.value })
-   */
+			.then((res: any) => {
-  function convertSubtitleInfo2(val: string) {
+				const data = res.data.result
-    return optionsSpecific.value.find((x) => x.id == val)?.name;
+				console.log(data.va)
-  }
+			})
+			.catch((e: any) => {
+				messageError($q, e)
+			})
+	}
 
-  return {
+	return {
-    tabValue,
+		tabValue,
-    typeOptions,
+		typeOptions,
-    optionsSpecific,
+		optionsSpecific,
-    statusOptions,
+		statusOptions,
 
-    visibleColumns,
+		visibleColumns,
-    columns,
+		columns,
-    rows,
+		rows,
-    LeaveType,
+		LeaveType,
-    LeaveStatus,
+		LeaveStatus,
 
-    fiscalYearyear,
+		fiscalYearyear,
-    options,
+		options,
-    optionsOrdination,
+		optionsOrdination,
-    typeConvert,
+		typeConvert,
-    typeLeave,
+		typeLeave,
+		typeId,
 
-    fetchListLeave,
+		fetchListLeave,
-    fetchLeaveType,
+		fetchLeaveType,
-    filterOption,
+		filterOption,
-  };
+		fetchProfile,
-});
+	}
+})

src/modules/05_leave/views/AddPage.vue

@@ -23,6 +23,7 @@ import type { QForm } from "quasar"
 import { useCounterMixin } from "@/stores/mixin"
 
 const dataStore = useLeaveStore()
+const { fetchLeaveType } = dataStore
 const mixin = useCounterMixin()
 const { date2Thai, dialogConfirm, success, messageError } = mixin
 const router = useRouter()
@@ -33,7 +34,9 @@ const $q = useQuasar()
 const model = ref<string>("")
 const modelSpecific = ref<string>("")
 
-// onMounted(() => {});
+onMounted(async () => {
+	await fectOptionType()
+})
 
 const saveAbsence = () => {
 	$q.dialog({
@@ -47,9 +50,9 @@ const saveAbsence = () => {
 	})
 		.onOk(() => {
 			// createFormresign()
-			if (model.value !== "7") {
+			if (model.value !== "LV-007") {
 				console.log(1)
-			} else if (model.value === "7") {
+			} else if (model.value === "LV-007") {
 				console.log(2)
 			}
 			router.push(`/leave`)
@@ -58,69 +61,107 @@ const saveAbsence = () => {
 		.onDismiss(() => {})
 }
 /** ฟังก์ชั่น บันทึก */
-const onSubmit = async (formData: any) => {
+const onSubmit = async () => {
 	dialogConfirm(
 		$q,
 		async () => {
-			console.log(formData)
+			await saveformdata()
-			saveformdata(formData)
 		},
 		"ยืนยันการยื่นใบลา",
 		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
 	)
-	console.log(formData)
-	console.log(formData.leaveWrote)
 
 	console.log("save")
 }
 
-async function saveformdata(formData: any) {
+async function fectOptionType() {
+	await http
+		.get(config.API.leaveType())
+		.then(async res => {
+			const data = res.data.result
+			await fetchLeaveType(data)
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+}
+
+async function FetchCheck(formData: any) {
+	await http
+		.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, leaveStartDate: formData.leaveStartDate ?? null, leaveEndDate: formData.leaveEndDate ?? null })
+		.then((res: any) => {
+			const data = res.data.result
+			formData.dateStart = data.isLeave
+			formData.subject = data.sumDateWork
+			formData.leaveabsentDaySummon = data.totalDate
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
+}
+
+async function saveformdata() {
+	const formData = new FormData()
+
+	// if (formDataLeave.value.leaveDocument > 0) {
+	// 	const blob = formDataLeave.value.leaveDocument.slice(0, formDataLeave.value.leaveDocument[0].size)
+	// 	const newFile = new File(blob, nameFile.value, {
+	// 		type: formDataLeave.value.leaveDocument[0].type,
+	// 	})
+	// 	formData.append("leaveDocument", newFile)
+	// }
+	// if (formDataLeave.value.leaveDraftDocument > 0) {
+	// 	const blob = formDataLeave.value.leaveDraftDocument.slice(0, formDataLeave.value.leaveDraftDocument[0].size)
+	// 	const newFileDraft = new File(blob, nameFile.value, {
+	// 		type: formDataLeave.value.leaveDraftDocument[0].type,
+	// 	})
+	// 	formData.append("leaveDraftDocument", newFileDraft)
+	// }
+	formData.append("type", "6d8430db-da6d-4234-8499-6c98ea1de1cd")
+	// formData.append("leaveStartDate", formDataLeave.value.leaveStartDate)
+	// formData.append("leaveEndDate", formDataLeave.value.leaveEndDate)
+	// formData.append("leaveWrote", formDataLeave.value.leaveWrote)
+	// formData.append("leaveAddress", formDataLeave.value.leaveAddress)
+	// formData.append("leaveNumber", formDataLeave.value.leaveNumber)
+	// formData.append("leaveDetail", formDataLeave.value.leaveDetail)
+	// formData.append("leaveSalaryText", formDataLeave.value.leaveSalaryText)
+	// formData.append("wifeDayName", formDataLeave.value.wifeDayName)
+	// formData.append("wifeDayDateBorn", formDataLeave.value.wifeDayDateBorn)
+	// formData.append("restDayOldTotal", formDataLeave.value.restDayOldTotal)
+	// formData.append("restDayCurrentTotal", formDataLeave.value.restDayCurrentTotal)
+	// formData.append("ordainDayStatus", formDataLeave.value.ordainDayStatus)
+	// formData.append("ordainDayLocationName", formDataLeave.value.ordainDayLocationName)
+	// formData.append("ordainDayLocationAddress", formDataLeave.value.ordainDayLocationAddress)
+	// formData.append("ordainDayLocationNumber", formDataLeave.value.ordainDayLocationNumber)
+	// formData.append("ordainDayOrdination", formDataLeave.value.ordainDayOrdination)
+	// formData.append("ordainDayBuddhistLentName", formDataLeave.value.ordainDayBuddhistLentName)
+	// formData.append("ordainDayBuddhistLentAddress", formDataLeave.value.ordainDayBuddhistLentAddress)
+	// formData.append("hajjDayStatus", formDataLeave.value.hajjDayStatus)
+	// formData.append("absentDaySummon", formDataLeave.value.absentDaySummon)
+	// formData.append("absentDayLocation", formDataLeave.value.absentDayLocation)
+	// formData.append("absentDayRegistorDate", formDataLeave.value.absentDayRegistorDate)
+	// formData.append("absentDayGetIn", formDataLeave.value.absentDayGetIn)
+	// formData.append("absentDayAt", formDataLeave.value.absentDayAt)
+	// formData.append("studyDaySubject", formDataLeave.value.studyDaySubject)
+	// formData.append("studyDayDegreeLevel", formDataLeave.value.studyDayDegreeLevel)
+	// formData.append("studyDayUniversityName", formDataLeave.value.studyDayUniversityName)
+	// formData.append("studyDayTrainingSubject", formDataLeave.value.studyDayTrainingSubject)
+	// formData.append("studyDayTrainingName", formDataLeave.value.studyDayTrainingName)
+	// formData.append("studyDayCountry", formDataLeave.value.studyDayCountry)
+	// formData.append("studyDayScholarship", formDataLeave.value.studyDayScholarship)
+	// formData.append("coupleDayName", formDataLeave.value.coupleDayName)
+	// formData.append("coupleDayPosition", formDataLeave.value.coupleDayPosition)
+	// formData.append("coupleDayLevel", formDataLeave.value.coupleDayLevel)
+	// formData.append("coupleDayLevelCountry", formDataLeave.value.coupleDayLevelCountry)
+	// formData.append("coupleDayCountryHistory", formDataLeave.value.coupleDayCountryHistory)
+	// formData.append("coupleDayTotalHistory", formDataLeave.value.coupleDayTotalHistory)
+	// formData.append("coupleDayStartDateHistory", formDataLeave.value.coupleDayStartDateHistory)
+	// formData.append("coupleDayEndDateHistory", formDataLeave.value.coupleDayEndDateHistory)
+	// formData.append("coupleDaySumTotalHistory", formDataLeave.value.coupleDaySumTotalHistory)
+	// formData.append("leaveSalary", formDataLeave.value.leaveSalary)
 	await http
 		.post(config.API.leaveUser(), {
-			type: formData.id ?? null,
+			formData,
-			leaveStartDate: formData.leaveStartDate ?? null,
-			leaveEndDate: formData.leaveEndDate ?? null,
-			leaveWrote: formData.leaveWrote ?? null ?? null, //เขียนที่
-			leaveAddress: formData.leaveAddress ?? null, //สถานที่ติดต่อขณะลา
-			leaveNumber: formData.leaveNumber ?? null, //หมายเลขที่ติดต่อขณะลา
-			leaveDetail: formData.leaveDetail ?? null, //รายละเอียดการลา
-			leaveDocument: formData.leaveDocument ?? null, //อัปโหลดเอกสารประกอบรายละเอียด
-			leaveDraftDocument: formData.leaveDraftDocument ?? null, //อัปโหลดแบบฟอร์มการลา
-			leaveSalaryText: formData.leaveSalaryText ?? null, //เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน)
-			wifeDayName: formData.wifeDayName ?? null, //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-			wifeDayDateBorn: formData.wifeDayDateBorn ?? null, //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-			restDayOldTotal: formData.restDayOldTotal ?? null, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
-			restDayCurrentTotal: formData.restDayCurrentTotal ?? null, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
-			ordainDayStatus: formData.ordainDayStatus ?? null, //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
-			ordainDayLocationName: formData.ordainDayLocationName ?? null, //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
-			ordainDayLocationAddress: formData.ordainDayLocationAddress ?? null, //สถานที่บวช ที่อยู่(ลาอุปสมบท)
-			ordainDayLocationNumber: formData.ordainDayLocationNumber ?? null, //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
-			ordainDayOrdination: formData.ordainDayOrdination ?? null, //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
-			ordainDayBuddhistLentName: formData.ordainDayBuddhistLentName ?? null, //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
-			ordainDayBuddhistLentAddress: formData.ordainDayBuddhistLentAddress ?? null, //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
-			hajjDayStatus: formData.hajjDayStatus ?? null, //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
-			absentDaySummon: formData.absentDaySummon ?? null, //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-			absentDayLocation: formData.absentDayLocation ?? null, //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-			absentDayRegistorDate: formData.absentDayRegistorDate ?? null, //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-			absentDayGetIn: formData.absentDayGetIn ?? null, //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-			absentDayAt: formData.absentDayAt ?? null, //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-			studyDaySubject: formData.studyDaySubject ?? null, //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-			studyDayDegreeLevel: formData.studyDayDegreeLevel ?? null, //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-			studyDayUniversityName: formData.studyDayUniversityName ?? null, //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-			studyDayTrainingSubject: formData.studyDayTrainingSubject ?? null, //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-			studyDayTrainingName: formData.studyDayTrainingName ?? null, //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-			studyDayCountry: formData.studyDayCountry ?? null, //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-			studyDayScholarship: formData.studyDayScholarship ?? null, //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-			coupleDayName: formData.coupleDayName ?? null, //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
-			coupleDayPosition: formData.coupleDayPosition ?? null, //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
-			coupleDayLevel: formData.coupleDayLevel ?? null, //ระดับคู่สมรส (ลาติดตามคู่สมรส)
-			coupleDayLevelCountry: formData.coupleDayLevelCountry ?? null, //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
-			coupleDayCountryHistory: formData.coupleDayCountryHistory ?? null, //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
-			coupleDayTotalHistory: formData.coupleDayTotalHistory ?? null, //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
-			coupleDayStartDateHistory: formData.coupleDayStartDateHistory ?? null, //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
-			coupleDayEndDateHistory: formData.coupleDayEndDateHistory ?? null, //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
-			coupleDaySumTotalHistory: formData.coupleDaySumTotalHistory ?? null, //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
-			leaveSalary: formData.leaveSalary,
 		})
 		.then((res: any) => {
 			success($q, "บันทึกสำเร็จ")
@@ -156,22 +197,22 @@ async function saveformdata(formData: any) {
 										outlined
 										v-model="model"
 										:options="dataStore.options"
-										option-value="id"
+										option-value="code"
 										option-label="name"
 										emit-value
 										map-options
 										prefix="ประเภทใบลา :"
-										@update:model-value="dataStore.typeConvert(model, null), (modelSpecific = '')"
+										@update:model-value="dataStore.typeConvert(model, null), (modelSpecific = ''), dataStore.fetchProfile()"
 									/>
 								</div>
 								<div class="row q-mt-sm">
-									<div class="col-12 col-sm-6 col-md-3" v-if="model === '6' || model === '8'">
+									<div class="col-12 col-sm-6 col-md-3" v-if="model === 'LV-006' || model === 'LV-008'">
 										<q-select
 											dense
 											outlined
 											v-model="modelSpecific"
-											:options="model === '6' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
+											:options="model === 'LV-006' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
-											option-value="id"
+											option-value="code"
 											option-label="name"
 											emit-value
 											map-options
@@ -193,18 +234,18 @@ async function saveformdata(formData: any) {
 							</div>
 						</div>
 						<div v-if="model" class="col-12">
-							<SickForm :on-submit="onSubmit" v-if="model === '1' || model === '2'" />
+							<SickForm :on-submit="onSubmit" v-if="model === 'LV-001' || model === 'LV-002'" />
-							<FormBirth :on-submit="onSubmit" v-if="model === '3'" />
+							<FormBirth :on-submit="onSubmit" v-if="model === 'LV-003'" />
-							<HelpWifeBirthForm :on-submit="onSubmit" v-if="model === '4'" />
+							<HelpWifeBirthForm :on-submit="onSubmit" v-if="model === 'LV-004'" />
-							<VacationForm :on-submit="onSubmit" v-if="model === '5'" />
+							<VacationForm :on-submit="onSubmit" v-if="model === 'LV-005'" />
-							<OrdinationForm :on-submit="onSubmit" v-if="model === '6' && modelSpecific === '0'" />
+							<OrdinationForm :on-submit="onSubmit" v-if="model === 'LV-006' && modelSpecific === '0'" />
-							<HajjForm :on-submit="onSubmit" v-if="model === '6' && modelSpecific === '1'" />
+							<HajjForm :on-submit="onSubmit" v-if="model === 'LV-006' && modelSpecific === '1'" />
-							<MilitaryForm :on-submit="onSubmit" v-if="model === '7'" style="width: 100%" />
+							<MilitaryForm :on-submit="onSubmit" v-if="model === 'LV-007'" style="width: 100%" />
-							<StudyForm :on-submit="onSubmit" v-if="model === '8' && modelSpecific === 's0'" style="width: 100%" />
+							<StudyForm :on-submit="onSubmit" v-if="model === 'LV-008' && modelSpecific === 's0'" style="width: 100%" />
-							<TrainForm :on-submit="onSubmit" v-if="model === '8' && modelSpecific != 's0' && modelSpecific != ''" />
+							<TrainForm :on-submit="onSubmit" v-if="model === 'LV-008' && modelSpecific != 's0' && modelSpecific != ''" />
-							<WorkInternationalForm :on-submit="onSubmit" v-if="model === '9'" />
+							<WorkInternationalForm :on-submit="onSubmit" v-if="model === 'LV-009'" />
-							<FollowSpouseForm :on-submit="onSubmit" v-if="model === '10'" />
+							<FollowSpouseForm :on-submit="onSubmit" v-if="model === 'LV-010'" />
-							<RehabilitationForm :on-submit="onSubmit" v-if="model === '11'" />
+							<RehabilitationForm :on-submit="onSubmit" v-if="model === 'LV-011'" />
 						</div>
 					</div>
 				</q-card>