hrms-user/src/modules/05_leave/views/AddPage.vue
2023-11-14 15:24:04 +07:00

143 lines
5.4 KiB
Vue

<script setup lang="ts">
import { ref, onMounted, computed } from "vue"
import { useQuasar } from "quasar"
import { useRouter, useRoute } from "vue-router"
import Form from "@/modules/05_leave/componenst/Forms/Form.vue"
import Form3 from "@/modules/05_leave/componenst/Forms/01_SickForm.vue"
import FormBirth from "@/modules/05_leave/componenst/Forms/03_ฺBirth.vue"
import Form4 from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue"
import Form5 from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue"
import Form6 from "@/modules/05_leave/componenst/Forms/06_OrdinationForm.vue"
import Form7 from "@/modules/05_leave/componenst/Forms/07_HajjForm.vue"
import Form8 from "@/modules/05_leave/componenst/Forms/08_MilitaryForm.vue"
import Form9 from "@/modules/05_leave/componenst/Forms/09_StudyForm.vue"
import Form10 from "@/modules/05_leave/componenst/Forms/10_TrainForm.vue"
import Form11 from "@/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue"
import Form12 from "@/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue"
import Form13 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"
const dataStore = useLeaveStore()
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 () => {
console.log("save")
}
</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)"
/>
</div>
<div class="row q-mt-sm">
<div class="col-12 col-sm-6 col-md-3" v-if="model === '5' || model === '7'">
<q-select
dense
outlined
v-model="modelSpecific"
:options="model === '5' ? 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>
<Form :model="model" />
</div>
</div>
<div v-if="model" class="col-12">
<Form3 :on-submit="onSubmit" v-if="model === '0' || model === '1'" />
<FormBirth :on-submit="onSubmit" v-if="model === '2'" />
<Form4 :on-submit="onSubmit" v-if="model === '3'" />
<Form5 :on-submit="onSubmit" v-if="model === '4'" />
<Form6 :on-submit="onSubmit" v-if="model === '5' && modelSpecific === '0'" />
<Form7 :on-submit="onSubmit" v-if="model === '5' && modelSpecific === '1'" />
<Form8 :on-submit="onSubmit" v-if="model === '6'" style="width: 100%" />
<Form9 :on-submit="onSubmit" v-if="model === '7' && modelSpecific === '0'" style="width: 100%" />
<Form10 :on-submit="onSubmit" v-if="model === '7' && modelSpecific != '0' && modelSpecific != ''" />
<Form11 :on-submit="onSubmit" v-if="model === '8'" />
<Form12 :on-submit="onSubmit" v-if="model === '9'" />
<Form13 :on-submit="onSubmit" v-if="model === '10'" />
</div>
</div>
</q-card>
</q-form>
</div>
</div>
</template>