hrms-user/src/modules/05_leave/views/AddPage.vue

<script setup lang="ts">
import { ref, onMounted, computed } from "vue"
import { useQuasar } from "quasar"
import { useRouter, useRoute } from "vue-router"

import FormPart2 from "@/modules/05_leave/componenst/Forms/Form.vue"
import SickForm from "@/modules/05_leave/componenst/Forms/01_SickForm.vue"
import FormBirth from "@/modules/05_leave/componenst/Forms/03_Birth.vue"
import HelpWifeBirthForm from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue"
import VacationForm from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue"
import OrdinationForm from "@/modules/05_leave/componenst/Forms/06_OrdinationForm.vue"
import HajjForm from "@/modules/05_leave/componenst/Forms/07_HajjForm.vue"
import MilitaryForm from "@/modules/05_leave/componenst/Forms/08_MilitaryForm.vue"
import StudyForm from "@/modules/05_leave/componenst/Forms/09_StudyForm.vue"
import TrainForm from "@/modules/05_leave/componenst/Forms/10_TrainForm.vue"
import WorkInternationalForm from "@/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue"
import FollowSpouseForm from "@/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue"
import RehabilitationForm from "@/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import type { QForm } from "quasar"
import { useCounterMixin } from "@/stores/mixin"

const dataStore = useLeaveStore()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, success, messageError } = mixin
const router = useRouter()
const route = useRoute()
const myform = ref<QForm | null>(null)
const $q = useQuasar()

const model = ref<string>("")
const modelSpecific = ref<string>("")

// onMounted(() => {});

const saveAbsence = () => {
	$q.dialog({
		title: "ยืนยันการยื่นข้อมูลลาออก",
		message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
		cancel: {
			flat: true,
			color: "negative",
		},
		persistent: true,
	})
		.onOk(() => {
			// createFormresign()
			if (model.value !== "7") {
				console.log(1)
			} else if (model.value === "7") {
				console.log(2)
			}
			router.push(`/leave`)
		})
		.onCancel(() => {})
		.onDismiss(() => {})
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async (formData: any) => {
	dialogConfirm(
		$q,
		async () => {
			console.log(formData)
			saveformdata(formData)
		},
		"ยืนยันการยื่นใบลา",
		"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
	)
	console.log(formData)
	console.log(formData.leaveWrote)

	console.log("save")
}

async function saveformdata(formData: any) {
	await http
		.post(config.API.leaveUser(), {
			type: formData.id ?? "",
			leaveStartDate: formData.leaveStartDate ?? "",
			leaveEndDate: formData.leaveEndDate ?? "",
			leaveWrote: formData.leaveWrote ?? "" ?? "", //เขียนที่
			leaveAddress: formData.leaveAddress ?? "", //สถานที่ติดต่อขณะลา
			leaveNumber: formData.leaveNumber ?? "", //หมายเลขที่ติดต่อขณะลา
			leaveDetail: formData.leaveDetail ?? "", //รายละเอียดการลา
			leaveDocument: formData.leaveDocument ?? "", //อัปโหลดเอกสารประกอบรายละเอียด
			leaveDraftDocument: formData.leaveDraftDocument ?? "", //อัปโหลดแบบฟอร์มการลา
			leaveSalaryText: formData.leaveSalaryText ?? "", //เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน)
			wifeDayName: formData.wifeDayName ?? "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
			wifeDayDateBorn: formData.wifeDayDateBorn ?? "", //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
			restDayOldTotal: formData.restDayOldTotal ?? "", //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
			restDayCurrentTotal: formData.restDayCurrentTotal ?? "", //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
			ordainDayStatus: formData.ordainDayStatus ?? "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
			ordainDayLocationName: formData.ordainDayLocationName ?? "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
			ordainDayLocationAddress: formData.ordainDayLocationAddress ?? "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
			ordainDayLocationNumber: formData.ordainDayLocationNumber ?? "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
			ordainDayOrdination: formData.ordainDayOrdination ?? "", //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
			ordainDayBuddhistLentName: formData.ordainDayBuddhistLentName ?? "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
			ordainDayBuddhistLentAddress: formData.ordainDayBuddhistLentAddress ?? "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
			hajjDayStatus: formData.hajjDayStatus ?? "", //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
			absentDaySummon: formData.absentDaySummon ?? "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
			absentDayLocation: formData.absentDayLocation ?? "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
			absentDayRegistorDate: formData.absentDayRegistorDate ?? "", //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
			absentDayGetIn: formData.absentDayGetIn ?? "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
			absentDayAt: formData.absentDayAt ?? "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
			studyDaySubject: formData.studyDaySubject ?? "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
			studyDayDegreeLevel: formData.studyDayDegreeLevel ?? "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
			studyDayUniversityName: formData.studyDayUniversityName ?? "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
			studyDayTrainingSubject: formData.studyDayTrainingSubject ?? "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
			studyDayTrainingName: formData.studyDayTrainingName ?? "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
			studyDayCountry: formData.studyDayCountry ?? "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
			studyDayScholarship: formData.studyDayScholarship ?? "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
			coupleDayName: formData.coupleDayName ?? "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
			coupleDayPosition: formData.coupleDayPosition ?? "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
			coupleDayLevel: formData.coupleDayLevel ?? "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
			coupleDayLevelCountry: formData.coupleDayLevelCountry ?? "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
			coupleDayCountryHistory: formData.coupleDayCountryHistory ?? "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
			coupleDayTotalHistory: formData.coupleDayTotalHistory ?? "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
			coupleDayStartDateHistory: formData.coupleDayStartDateHistory ?? "", //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
			coupleDayEndDateHistory: formData.coupleDayEndDateHistory ?? "", //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
			coupleDaySumTotalHistory: formData.coupleDaySumTotalHistory ?? "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
			leaveSalary: formData.leaveSalary,
		})
		.then((res: any) => {
			success($q, "บันทึกสำเร็จ")
			router.push(`/probation/detail`)
		})
		.catch((e: any) => {
			messageError($q, e)
		})
}
</script>

<template>
	<div class="col-12 row justify-center">
		<div class="col-xs-12 col-sm-12 col-md-11">
			<div class="toptitle text-white col-12 row items-center">
				<q-btn to="/leave" icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
				<div>ยื่นใบลา</div>
			</div>

			<q-form ref="myform" class="col-12">
				<q-card bordered>
					<div class="col-12 row q-col-gutter-md q-pa-md">
						<div class="col-xs-12 col-sm-12">
							<div style="display: flex; align-items: center">
								<q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
								<div class="q-pl-sm text-weight-bold text-dark">เลือกประเภทการลา</div>
							</div>
							<div class="q-py-sm q-px-lg">
								<div class="row">
									<q-select
										dense
										class="col-12 col-sm-6 col-md-4"
										outlined
										v-model="model"
										:options="dataStore.options"
										option-value="id"
										option-label="name"
										emit-value
										map-options
										prefix="ประเภทใบลา :"
										@update:model-value="dataStore.typeConvert(model, null), (modelSpecific = '')"
									/>
								</div>
								<div class="row q-mt-sm">
									<div class="col-12 col-sm-6 col-md-3" v-if="model === '6' || model === '8'">
										<q-select
											dense
											outlined
											v-model="modelSpecific"
											:options="model === '6' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
											option-value="id"
											option-label="name"
											emit-value
											map-options
											prefix="ประเภทการลา :"
											@update:model-value="dataStore.typeConvert(model, modelSpecific)"
										/>
									</div>
								</div>

								<!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
							</div>

							<div>
								<div style="display: flex; align-items: center">
									<q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
									<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลา</div>
								</div>
								<FormPart2 :model="model" />
							</div>
						</div>
						<div v-if="model" class="col-12">
							<SickForm :on-submit="onSubmit" v-if="model === '1' || model === '2'" />
							<FormBirth :on-submit="onSubmit" v-if="model === '3'" />
							<HelpWifeBirthForm :on-submit="onSubmit" v-if="model === '4'" />
							<VacationForm :on-submit="onSubmit" v-if="model === '5'" />
							<OrdinationForm :on-submit="onSubmit" v-if="model === '6' && modelSpecific === '0'" />
							<HajjForm :on-submit="onSubmit" v-if="model === '6' && modelSpecific === '1'" />
							<MilitaryForm :on-submit="onSubmit" v-if="model === '7'" style="width: 100%" />
							<StudyForm :on-submit="onSubmit" v-if="model === '8' && modelSpecific === 's0'" style="width: 100%" />
							<TrainForm :on-submit="onSubmit" v-if="model === '8' && modelSpecific != 's0' && modelSpecific != ''" />
							<WorkInternationalForm :on-submit="onSubmit" v-if="model === '9'" />
							<FollowSpouseForm :on-submit="onSubmit" v-if="model === '10'" />
							<RehabilitationForm :on-submit="onSubmit" v-if="model === '11'" />
						</div>
					</div>
				</q-card>
			</q-form>
		</div>
	</div>
</template>