example form leave

src/modules/05_leave/views/SampleForm.vue

@@ -0,0 +1,64 @@
+<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>