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

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { useQuasar } from "quasar"
import { useRouter, useRoute } from "vue-router"
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"

import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue"
import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue"
import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue"
import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue"
import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue"
import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue"
import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue"
import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue"
import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue"
import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue"
import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue"
import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue"
import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue"

const dataStore = useLeaveStore()
const { fetchLeaveType } = dataStore
const mixin = useCounterMixin()
const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin

const router = useRouter()
const route = useRoute()
const myform = ref<QForm | null>(null)
const $q = useQuasar()

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

/**
 * ดึงค่าประเภทการลาจาก Api
 */
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)
		})
}

function inputEdit(val: boolean) {
	return {
		"full-width cursor-pointer ": val,
		"full-width cursor-pointer inputgreen": !val,
	}
}

function onSubmit(postData: FormData) {
	dialogConfirm($q, async () => {
		showLoader()
		await http
			.post(config.API.leaveUser(), postData)
			.then(res => {
				router.push(`/leave/edit/${res.data.result.id}`)
				success($q, "บันทึกสำเร็จ")
			})
			.catch((e: any) => {
				messageError($q, e)
			})
			.finally(() => {
				hideLoader()
			})
	})
}

onMounted(async () => {
	if (dataStore.options.length == 0) {
		await fectOptionType()
	}
})
</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 inputgreen"
										outlined
										v-model="model"
										:options="dataStore.options"
										option-value="code"
										option-label="name"
										emit-value
										map-options
										prefix="ประเภทใบลา :"
										@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 === 'LV-006' || model === 'LV-008'">
										<q-select
											dense
											outlined
											v-model="modelSpecific"
											:options="model === 'LV-006' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
											option-value="code"
											option-label="name"
											emit-value
											map-options
											prefix="ประเภทการลา :"
											@update:model-value="dataStore.typeConvert(model, modelSpecific)"
										/>
									</div>
								</div>
							</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 class="col-12">
							<SickForm v-if="model === 'LV-001' || model === 'LV-002'" :on-submit="onSubmit" />
							<FormBirth v-if="model === 'LV-003'" :on-submit="onSubmit" />
							<HelpWifeBirthForm v-if="model === 'LV-004'" :on-submit="onSubmit" />
							<VacationForm v-if="model === 'LV-005'" :on-submit="onSubmit" />
							<OrdinationForm v-if="model === 'LV-006' && modelSpecific == 'b1'" :on-submit="onSubmit" />
							<HajjForm v-if="model === 'LV-006' && modelSpecific == 'b2'" :on-submit="onSubmit" />
							<MilitaryForm v-if="model === 'LV-007'" style="width: 100%" :on-submit="onSubmit" />
							<StudyForm v-if="model === 'LV-008' && modelSpecific === 's1'" style="width: 100%" :on-submit="onSubmit" />
							<TrainForm v-if="model === 'LV-008' && modelSpecific != 's1' && modelSpecific != ''" :on-submit="onSubmit" />
							<WorkInternationalForm v-if="model === 'LV-009'" :on-submit="onSubmit" />
							<FollowSpouseForm v-if="model === 'LV-010'" :on-submit="onSubmit" />
							<RehabilitationForm v-if="model === 'LV-011'" :on-submit="onSubmit" />
						</div>
					</div>
				</q-card>
			</q-form>
		</div>
	</div>
</template>