65 lines
1.7 KiB
Vue
65 lines
1.7 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { reactive, ref, watch } from "vue";
|
||
|
|
|
||
|
|
import SickForm from "@/modules/05_leave/componenst/Forms/01_SickForm.vue";
|
||
|
|
import HelpWifeBirthForm from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue";
|
||
|
|
|
||
|
|
const type = ref<number>(0);
|
||
|
|
const typeOption = reactive([
|
||
|
|
{ id: 0, name: "" },
|
||
|
|
{ id: 1, name: "ลาป่วย" },
|
||
|
|
{ id: 2, name: "ลากิจ" },
|
||
|
|
{ id: 3, name: "ลาคลอด" },
|
||
|
|
{ id: 4, name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
|
||
|
|
]);
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => type.value,
|
||
|
|
() => {
|
||
|
|
// save store
|
||
|
|
console.log("ประเภทการลา===>", type.value);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
</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
|
||
|
|
icon="mdi-arrow-left"
|
||
|
|
unelevated
|
||
|
|
round
|
||
|
|
dense
|
||
|
|
flat
|
||
|
|
color="primary"
|
||
|
|
class="q-mr-sm"
|
||
|
|
/>
|
||
|
|
<div>ยื่นใบลา</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<q-card bordered>
|
||
|
|
<div class="col-12 row q-col-gutter-md q-pa-md">
|
||
|
|
<div class="col-xs-12 col-sm-12">
|
||
|
|
<form class="col-12">
|
||
|
|
<q-select
|
||
|
|
filled
|
||
|
|
v-model="type"
|
||
|
|
:options="typeOption"
|
||
|
|
label="ประเภทการลา"
|
||
|
|
option-value="id"
|
||
|
|
option-label="name"
|
||
|
|
map-options
|
||
|
|
emit-value
|
||
|
|
/>
|
||
|
|
|
||
|
|
<SickForm v-if="type == 1 || type == 2 || type == 3" />
|
||
|
|
<HelpWifeBirthForm v-if="type == 4" />
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</q-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|