Merge branch 'develop' into dev-tee

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>