hrms-bangkok/hrms-user
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

อัพเดท form

Browse source
This commit is contained in:
AnandaTon 2023-11-08 12:58:20 +07:00
parent 809216c6d8
commit d177859908
7 changed files with 947 additions and 253 deletions
Download patch file Download diff file Expand all files Collapse all files

109
src/modules/05_leave/views/SampleForm.vue
View file

@ -1,81 +1,60 @@
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
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";
import SickForm from "@/modules/05_leave/componenst/Forms/01_SickForm.vue"
import HelpWifeBirthForm from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue"
import VacationForm from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue"
const type = ref<number>(0);
const type = ref<number>(0)
const typeOption = reactive([
{ id: 0, name: "" },
{ id: 1, name: "ลาป่วย" },
{ id: 2, name: "ลากิจ" },
{ id: 3, name: "ลาคลอด" },
{ id: 4, name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
]);
{ id: 0, name: "" },
{ id: 1, name: "ลาป่วย" },
{ id: 2, name: "ลากิจ" },
{ id: 3, name: "ลาคลอด" },
{ id: 4, name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
{ id: 5, name: "ลาพักผ่อน" },
])
async function onSubmit() {
console.log("testOnsub")
}
watch(
() => type.value,
() => {
// save store
console.log("ประเภทการลา===>", type.value);
}
);
() => 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>
<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>
<form>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-12">
<q-select
filled
v-model="type"
:options="typeOption"
label="ประเภทการลา"
option-value="id"
option-label="name"
map-options
emit-value
/>
<q-card bordered>
<form>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-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" />
</div>
</div>
<SickForm v-if="type == 1 || type == 2 || type == 3" />
<HelpWifeBirthForm v-if="type == 4" />
<VacationForm v-if="type == 5" />
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-md">
<q-space />
<q-btn
id="submitForm"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
@click="onSubmit"
/>
</div>
</form>
</q-card>
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-md">
<q-space />
<q-btn id="submitForm" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก" @click="onSubmit" />
</div>
</form>
</q-card>
</div>
</div>
</template>