hrms-user/src/modules/05_leave/views/SampleForm.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: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
]);

async function onSubmit() {

}

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>
        <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>

          <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>