code for example form leave ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว

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

@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { ref } from "vue";
+
+const edit = ref<boolean>(true);
+const halfDay = ref<string>("day");
+
 const props = defineProps({
   data: {
     type: Array,
@@ -9,16 +14,222 @@ const props = defineProps({
 
 <template>
   <div>
-    ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
+    <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
     <ul>
-        <li>เขียนที่</li>
-        <li>ลาตั้งแต่วันที่</li>
-        <li>ลาถึงวันที่</li>
-        <li>ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่ (Auto)</li>
-        <li>จำนวนวันที่ลา (Auto)</li>
+      <li>เขียนที่</li>
+      <li>ลาตั้งแต่วันที่</li>
+      <li>ลาถึงวันที่</li>
+      <li>จำนวนวันที่ลา (frontend คำนวนให้ Auto)</li>
+      <li>ตัวเลือกให้ลาครึ่งวันเช้า หรือครึ่งวันบ่ายได้</li>
+      <li>ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่ (Auto)</li>
+      <li>ที่อยู่ที่ติดต่อได้ระหว่างลา</li>
+      <li>รายละเอียด (ไม่บังคับกรอก)</li>
+      <li>เอกสารประกอบ</li>
     </ul>
-    <p>*หมายเหตุ (กรณีลาป่วยและลากิจ สามารถเลือกให้ลาครึ่งวันเช้า หรือครึ่งวันบ่ายได้)
-    ที่อยู่ที่ติดต่อได้ระหว่างลา (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ
-    แต่ให้ผู้ใช้งานแก้ไขได้)</p>
+    <p>
+      *หมายเหตุ (กรณีลาป่วยและลากิจ สามารถเลือกให้ลาครึ่งวันเช้า
+      หรือครึ่งวันบ่ายได้) ที่อยู่ที่ติดต่อได้ระหว่างลา
+      (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
+    </p> -->
+
+    <div class="col-12 row q-col-gutter-md q-pa-md">
+      <div class="col-xs-12 col-sm-12">
+        <q-card bordered class="q-pa-md bg-grey-1">
+          <div class="col-12 row q-pa-sm q-col-gutter-sm">
+            <q-input
+              class="col-12 col-sm-12"
+              dense
+              outlined
+              v-model="Writeat"
+              label="เขียนที่"
+              :readonly="!edit"
+              :rules="[(val) => !!val || `${'เขียนที่'}`]"
+            />
+
+            <div class="col-md-4 col-sm-12">
+              <q-radio v-model="halfDay" val="day" label="ลาทั้งวัน" />
+              <q-radio
+                v-model="halfDay"
+                val="half_day_morning"
+                label="ลาครึ่งวันเช้า"
+              />
+              <q-radio
+                v-model="halfDay"
+                val="half_day_afternoon"
+                label="ลาครึ่งวันบ่าย"
+              />
+            </div>
+
+            <datepicker
+              class="col-md-3 col-sm-12"
+              menu-class-name="modalfix"
+              v-model="dateLeaveStart"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :readonly="!edit"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  hide-bottom-space
+                  :readonly="!edit"
+                  class="full-width datepicker"
+                  :model-value="
+                    dateLeaveStart != null ? date2Thai(dateLeaveStart) : null
+                  "
+                  :label="`${'ลาตั้งแต่วันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <datepicker
+              class="col-md-3 col-sm-12"
+              menu-class-name="modalfix"
+              v-model="dateLeaveEnd"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :readonly="!edit"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  hide-bottom-space
+                  :readonly="!edit"
+                  class="full-width datepicker"
+                  :model-value="
+                    dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : null
+                  "
+                  :label="`${'ลาถึงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-input
+              class="col-md-2 col-sm-12"
+              dense
+              outlined
+              type="number"
+              v-model="dateTotal"
+              label="จำนวนวันที่ลา"
+              readonly
+              :rules="[(val) => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+            />
+
+            <q-input
+              class="col-3"
+              dense
+              outlined
+              v-model="tel"
+              mask="(###)-###-####"
+              unmasked-value
+              label="หมายเลขโทรศัพท์ที่ติดต่อได้"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
+              ]"
+            />
+
+            <q-input
+              class="col-md-9 col-sm-12"
+              dense
+              outlined
+              v-model="locationAbsence"
+              label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
+              :readonly="!edit"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
+              ]"
+            />
+
+            <q-input
+              type="textarea"
+              class="col-md-12 col-sm-12"
+              dense
+              outlined
+              v-model="detail"
+              label="รายละเอียด"
+              :readonly="!edit"
+              :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+            />
+
+            <q-file
+              v-model="files"
+              dense
+              label="เอกสารประกอบ"
+              outlined
+              use-chips
+              multiple
+              class="q-pl-sm col-6"
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+
+            <div class="col-12 row" v-if="!edit">
+              <div
+                class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+              >
+                <div class="q-pl-sm text-weight-bold text-dark">
+                  เอกสารเพิ่มเติม
+                </div>
+              </div>
+              <q-card bordered flat class="full-width">
+                <q-list separator>
+                  <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+                    <q-item-section>
+                      <q-item-label class="full-width ellipsis">
+                        {{ file.fileName }}
+                      </q-item-label>
+
+                      <q-item-label caption> </q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
   </div>
 </template>

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

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { ref } from "vue"
+
+const edit = ref<boolean>(false)
 const props = defineProps({
   data: {
     type: Array,
@@ -19,6 +22,8 @@ const props = defineProps({
       <li>จำนวนวันที่ลา (frontend คำนวนให้ Auto)</li>
       <li>ที่อยู่ที่ติดต่อได้ระหว่างลา (textarea)</li>
       <li>หมายเลขโทรศัพท์</li>
+      <li>รายละเอียด (ไม่บังคับกรอก)</li>
+      <li>เอกสารประกอบ</li>
     </ul>
     <p>
       *หมายเหตุ ที่อยู่ที่ติดต่อได้ระหว่างลา (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)

src/modules/05_leave/componenst/Forms/05_VacationForm.vue

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

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

@@ -13,10 +13,14 @@ const typeOption = reactive([
   { id: 4, name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
 ]);
 
+async function onSubmit() {
+
+}
+
 watch(
   () => type.value,
   () => {
-	// save store
+    // save store
     console.log("ประเภทการลา===>", type.value);
   }
 );
@@ -39,9 +43,9 @@ watch(
       </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">
+        <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"
@@ -50,14 +54,27 @@ watch(
                 option-value="id"
                 option-label="name"
                 map-options
-				emit-value
+                emit-value
               />
 
               <SickForm v-if="type == 1 || type == 2 || type == 3" />
               <HelpWifeBirthForm v-if="type == 4" />
-            </form>
+            </div>
           </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>

src/views/MainLayout.vue

@@ -77,12 +77,21 @@ const doLogout = () => {
   <q-layout view="hHh LpR fFr">
     <!-- header -->
     <q-header flat class="text-dark col-12 bg-top header-br" height-hint="7">
-      <q-toolbar class="q-my-xs items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;' : 'padding: 1% 4%;'">
+      <q-toolbar
+        class="q-my-xs items-center"
+        :style="$q.screen.gt.xs ? 'padding: 1% 2%;' : 'padding: 1% 4%;'"
+      >
         <div class="row items-center no-wrap" v-if="$q.screen.gt.xs">
-          <q-img src="@/assets/logo.png" spinner-color="white" style="height: 35px; max-width: 35px" />
+          <q-img
+            src="@/assets/logo.png"
+            spinner-color="white"
+            style="height: 35px; max-width: 35px"
+          />
           <div class="row q-ml-md items-center q-pt-xs">
-            <div style="color: #ffffff; letter-spacing: 1px; line-height: 10px"
-              class="text-body2 text-weight-bolder col-12">
+            <div
+              style="color: #ffffff; letter-spacing: 1px; line-height: 10px"
+              class="text-body2 text-weight-bolder col-12"
+            >
               ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
             </div>
             <div class="text-caption text-white">กรุงเทพมหานคร</div>
@@ -92,34 +101,79 @@ const doLogout = () => {
           <img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
         </div>
         <div v-if="$q.screen.gt.xs">
-          <q-tabs v-model="tab" align="justify" indicator-color="transparent" active-color="white bg-white-btn border-100"
-            dense inline-label class="text-grey-5 tabsHome">
-            <q-tab class="border-100" name="dashboard" label="หน้าแรก" icon="mdi-view-dashboard-outline"
-              @click="router.push(`/`)" />
+          <q-tabs
+            v-model="tab"
+            align="justify"
+            indicator-color="transparent"
+            active-color="white bg-white-btn border-100"
+            dense
+            inline-label
+            class="text-grey-5 tabsHome"
+          >
+            <q-tab
+              class="border-100"
+              name="dashboard"
+              label="หน้าแรก"
+              icon="mdi-view-dashboard-outline"
+              @click="router.push(`/`)"
+            />
             <!-- <q-tab class="border-100" name="Checkin" label="ลงเวลางาน" icon="mdi-map-marker-check-outline"
               @click="router.push(`/check-in`)" /> -->
-            <q-tab class="border-100" name="leave" label="การลา" icon="mdi-calendar-blank-outline"
-              @click="router.push(`/leave`)" />
+            <q-tab
+              class="border-100"
+              name="leave"
+              label="การลา"
+              icon="mdi-calendar-blank-outline"
+              @click="router.push(`/leave`)"
+            />
           </q-tabs>
         </div>
         <q-space />
         <!-- Notification -->
-        <q-btn round dense flat size="13px" :class="$q.screen.gt.xs ? 'bg-white-btn q-mx-md' : 'q-mr-sm'"
-          :color="notiList.length === 0 ? 'grey-6' : 'grey-8'" :disable="notiList.length === 0">
+        <q-btn
+          round
+          dense
+          flat
+          size="13px"
+          :class="$q.screen.gt.xs ? 'bg-white-btn q-mx-md' : 'q-mr-sm'"
+          :color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
+          :disable="notiList.length === 0"
+        >
           <q-icon name="mdi-bell-outline" size="22px" color="white" />
-          <q-badge rounded v-show="notiList.length > 0" color="negative" text-color="white" floating>{{ notiList.length
-          }}</q-badge>
+          <q-badge
+            rounded
+            v-show="notiList.length > 0"
+            color="negative"
+            text-color="white"
+            floating
+            >{{ notiList.length }}</q-badge
+          >
           <q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
             <div class="q-px-md q-py-sm row col-12 items-center">
               <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
               <q-space />
-              <q-btn label="ล้างข้อมูล" color="pink" dense class="text-caption" flat />
+              <q-btn
+                label="ล้างข้อมูล"
+                color="pink"
+                dense
+                class="text-caption"
+                flat
+              />
             </div>
 
-            <q-list style="min-width: 300px" v-for="(n, index) in notiList" :key="index">
+            <q-list
+              style="min-width: 300px"
+              v-for="(n, index) in notiList"
+              :key="index"
+            >
               <q-item v-ripple class="mytry q-py-sm" dense>
                 <q-item-section avatar top style="min-width: 40px">
-                  <q-avatar rounded color="primary" size="25px" text-color="white">
+                  <q-avatar
+                    rounded
+                    color="primary"
+                    size="25px"
+                    text-color="white"
+                  >
                     <span class="text-weight-medium text-uppercase">{{
                       n.sender[0]
                     }}</span>
@@ -129,26 +183,54 @@ const doLogout = () => {
                   <q-item-label caption class="text-black">{{
                     n.body
                   }}</q-item-label>
-                  <q-item-label caption class="row items-center text-grey-7" style="font-size: 12px">{{ n.timereceive
-                  }}</q-item-label>
+                  <q-item-label
+                    caption
+                    class="row items-center text-grey-7"
+                    style="font-size: 12px"
+                    >{{ n.timereceive }}</q-item-label
+                  >
                 </q-item-section>
                 <div>
-                  <q-btn size="sm" unelevated dense icon="mdi-close" class="mybtn q-mx-xs" v-close-popup></q-btn>
+                  <q-btn
+                    size="sm"
+                    unelevated
+                    dense
+                    icon="mdi-close"
+                    class="mybtn q-mx-xs"
+                    v-close-popup
+                  ></q-btn>
                 </div>
               </q-item>
-              <q-separator class="q-my-xs" color="grey-2" v-if="index + 1 < notiList.length" :key="index" />
+              <q-separator
+                class="q-my-xs"
+                color="grey-2"
+                v-if="index + 1 < notiList.length"
+                :key="index"
+              />
             </q-list>
           </q-menu>
         </q-btn>
 
         <!-- User -->
-        <q-btn-dropdown v-if="$q.screen.gt.xs" rounded dense flat :class="$q.screen.gt.xs ? 'bg-white-btn' : ''"
-          color="white" class="q-pr-sm border-10" dropdown-icon="mdi-chevron-down">
+        <q-btn-dropdown
+          v-if="$q.screen.gt.xs"
+          rounded
+          dense
+          flat
+          :class="$q.screen.gt.xs ? 'bg-white-btn' : ''"
+          color="white"
+          class="q-pr-sm border-10"
+          dropdown-icon="mdi-chevron-down"
+        >
           <template v-slot:label>
             <q-item dense v-close-popup class="q-pa-none q-pl-xs">
               <q-item-section avatar class="q-pa-none" style="min-width: 30px">
-                <q-img src="@/assets/avatar_user.jpg" class="border-100" spinner-color="white"
-                  style="height: 30px; max-width: 30px" />
+                <q-img
+                  src="@/assets/avatar_user.jpg"
+                  class="border-100"
+                  spinner-color="white"
+                  style="height: 30px; max-width: 30px"
+                />
               </q-item-section>
               <q-item-section class="text-left text-white q-pa-none q-pl-sm">
                 <q-item-label class="text-caption text-weight-medium">{{
@@ -162,42 +244,74 @@ const doLogout = () => {
               <q-item-section avatar style="min-width: 30px">
                 <q-icon color="orange-9" size="18px" name="mdi-lock-outline" />
               </q-item-section>
-              <q-item-section><q-item-label>เปลี่ยนรหัสผ่าน</q-item-label></q-item-section>
+              <q-item-section
+                ><q-item-label>เปลี่ยนรหัสผ่าน</q-item-label></q-item-section
+              >
             </q-item>
 
             <q-item clickable v-close-popup @click="doLogout">
               <q-item-section avatar style="min-width: 30px">
                 <q-icon color="primary" size="18px" name="mdi-logout-variant" />
               </q-item-section>
-              <q-item-section> <q-item-label>ออกจากระบบ</q-item-label> </q-item-section>
+              <q-item-section>
+                <q-item-label>ออกจากระบบ</q-item-label>
+              </q-item-section>
             </q-item>
           </q-list>
         </q-btn-dropdown>
         <div v-else class="q-ml-sm" style="width: 30px">
-          <q-img src="@/assets/avatar_user.jpg" class="border-100" spinner-color="white"
-            style="height: 30px; max-width: 30px" />
+          <q-img
+            src="@/assets/avatar_user.jpg"
+            class="border-100"
+            spinner-color="white"
+            style="height: 30px; max-width: 30px"
+          />
         </div>
       </q-toolbar>
     </q-header>
-    <div class="bg-top" :style="$q.screen.gt.xs ? 'height: 200px;' : 'height: 200px;'" />
+    <div
+      class="bg-top"
+      :style="$q.screen.gt.xs ? 'height: 200px;' : 'height: 200px;'"
+    />
     <!-- end header -->
 
     <q-footer class="bg-top" v-if="!$q.screen.gt.xs">
       <q-toolbar style="padding: 2% 2%">
         <div class="row col-12 justify-around">
-          <q-btn flat round color="white" icon="mdi-view-dashboard-outline" @click="router.push(`/`)" />
-          <q-btn flat round color="white" icon="mdi-map-marker-check-outline" @click="router.push(`/check-in`)" />
-          <q-btn flat round color="white" icon="mdi-calendar-blank-outline" @click="router.push(`/leave`)" />
+          <q-btn
+            flat
+            round
+            color="white"
+            icon="mdi-view-dashboard-outline"
+            @click="router.push(`/`)"
+          />
+          <q-btn
+            flat
+            round
+            color="white"
+            icon="mdi-map-marker-check-outline"
+            @click="router.push(`/check-in`)"
+          />
+          <q-btn
+            flat
+            round
+            color="white"
+            icon="mdi-calendar-blank-outline"
+            @click="router.push(`/leave`)"
+          />
           <q-btn flat round color="white" icon="mdi-account-outline" />
         </div>
       </q-toolbar>
     </q-footer>
 
     <q-page-container class="bg-grey-2 q-pb-md">
-      <q-page :style="$q.screen.gt.xs
-          ? 'padding: 1.8% 2%; margin-top: -200px;'
-          : 'padding: 5% 4%; margin-top: -200px;'
-        ">
+      <q-page
+        :style="
+          $q.screen.gt.xs
+            ? 'padding: 1.8% 2%; margin-top: -200px;'
+            : 'padding: 5% 4%; margin-top: -200px;'
+        "
+      >
         <router-view :key="$route.fullPath" />
       </q-page>
     </q-page-container>
@@ -267,4 +381,9 @@ const doLogout = () => {
 .shadow-0 {
   box-shadow: none !important;
 }
+
+.btnBlue {
+  background-color: #016987;
+  color: #fff;
+}
 </style>