example form leave

src/modules/05_leave/componenst/Forms/01_SickForm.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <div>
+    ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
+    <ul>
+        <li>เขียนที่</li>
+        <li>ลาตั้งแต่วันที่</li>
+        <li>ลาถึงวันที่</li>
+        <li>ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่ (Auto)</li>
+        <li>จำนวนวันที่ลา (Auto)</li>
+    </ul>
+    <p>*หมายเหตุ (กรณีลาป่วยและลากิจ สามารถเลือกให้ลาครึ่งวันเช้า หรือครึ่งวันบ่ายได้)
+    ที่อยู่ที่ติดต่อได้ระหว่างลา (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ
+    แต่ให้ผู้ใช้งานแก้ไขได้)</p>
+  </div>
+</template>

src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Array,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <div>
+    ลาไปช่วยเหลือภริยาที่คลอดบุตร
+    <ul>
+      <li>เขียนที่</li>
+      <li>ชื่อภรรยา</li>
+      <li>วันที่คลอด</li>
+      <li>ลาตั้งแต่วันที่</li>
+      <li>ลาถึงวันที่</li>
+      <li>จำนวนวันที่ลา (frontend คำนวนให้ Auto)</li>
+      <li>ที่อยู่ที่ติดต่อได้ระหว่างลา (textarea)</li>
+      <li>หมายเลขโทรศัพท์</li>
+    </ul>
+    <p>
+      *หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
+    </p>
+  </div>
+</template>

src/modules/05_leave/router.ts

@@ -4,6 +4,7 @@
 const leave = () => import("@/modules/05_leave/views/Main.vue")
 
 const addAbsence = () => import("@/modules/05_leave/componenst/addAbsence.vue")
+const samplePage = () => import("@/modules/05_leave/views/SampleForm.vue")
 
 /* const Checkout = () => import("@/modules/04_checkin/views/Checkout.vue");
  */
@@ -26,4 +27,13 @@ export default [
 			Key: [7],
 		},
 	},
+	{
+		path: "/leave/sample",
+		name: "sample-page",
+		component: samplePage,
+		meta: {
+			Auth: true,
+			Key: [7],
+		},
+	},
 ]

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>