From 3ad8d8bf724dc8421df98a2ecd523b57ce6f9075 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 7 Nov 2023 16:19:10 +0700
Subject: [PATCH] no message

---
 src/modules/05_leave/componenst/Form.vue      | 175 ++++++++----------
 .../05_leave/interface/request/AddAbsence.ts  |  14 +-
 2 files changed, 87 insertions(+), 102 deletions(-)

diff --git a/src/modules/05_leave/componenst/Form.vue b/src/modules/05_leave/componenst/Form.vue
index 3c248c3..7e153f1 100644
--- a/src/modules/05_leave/componenst/Form.vue
+++ b/src/modules/05_leave/componenst/Form.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
-
+import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence";
 const router = useRouter();
 const mixin = useCounterMixin();
 const routeName = router.currentRoute.value.name;
-const id = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
 const files = ref<any>();
-const locationAbsence = ref<string>("");
 const levelStudy = ref<string>("");
 const degree = ref<string>("");
 const major = ref<string>("");
@@ -17,18 +14,22 @@ const educational = ref<string>("");
 const studyPeriod = ref<string>("");
 const country = ref<string>("");
 const capital = ref<string>("");
-const tel = ref<number>();
-const detail = ref<string>();
-const Writeat = ref<string>();
-const dateLeaveStart = ref<Date>(new Date());
-const dateLeaveEnd = ref<Date>(new Date());
-const dateTotal = ref<number>();
 const noteReason = ref("");
-const nameFile = ref<string>("");
-const model = ref(null);
-const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader } =
-  mixin;
 
+const { date2Thai } = mixin;
+
+const formData = reactive<FormData>({
+  dateStart: new Date(),
+  subject: "เรื่อง",
+  who: "เรียนผู้ใด",
+  requestName: "ชื่อผู้ยื่น",
+  position: "ตำแหน่ง",
+  level: "ระดับ",
+  ocRequest: "สังกัด",
+  leaveReceived: "2",
+  leaveUse: "1",
+  leaveRemaining: "1",
+});
 const props = defineProps({
   type: {
     type: String,
@@ -48,9 +49,9 @@ const props = defineProps({
   <q-card bordered class="q-pa-md bg-grey-1">
     <div class="col-12 row q-pa-sm q-col-gutter-sm">
       <datepicker
-        class="col-2"
+        class="col-4"
         menu-class-name="modalfix"
-        v-model="dateLeaveStart"
+        v-model="formData.dateStart"
         :locale="'th'"
         autoApply
         borderless
@@ -72,49 +73,10 @@ const props = defineProps({
             :readonly="routeName != 'addAbsence'"
             class="full-width datepicker"
             :model-value="
-              dateLeaveStart != null ? date2Thai(dateLeaveStart) : null
+              formData.dateStart != null ? date2Thai(formData.dateStart) : 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-2"
-        menu-class-name="modalfix"
-        v-model="dateLeaveEnd"
-        :locale="'th'"
-        autoApply
-        borderless
-        :enableTimePicker="false"
-        week-start="0"
-        :readonly="routeName != 'addAbsence'"
-      >
-        <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="routeName != 'addAbsence'"
-            class="full-width datepicker"
-            :model-value="dateLeaveEnd != null ? date2Thai(dateLeaveEnd) : null"
-            :label="`${'จนถึงวันที่'}`"
-            :rules="[(val) => !!val || `${'กรุณาเลือกวันที่่สิ้นสุดการลา'}`]"
+            :label="`${'วันที่ยื่นใบลา'}`"
+            :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
           >
             <template v-slot:prepend>
               <q-icon
@@ -128,54 +90,81 @@ const props = defineProps({
         </template>
       </datepicker>
       <q-input
-        class="col-2"
+        class="col-4"
         dense
         outlined
-        type="number"
-        v-model="dateTotal"
-        label="จำนวนวัน(บันทึกลง ก.พ.7)"
-        :readonly="routeName != 'addAbsence'"
-        :rules="[(val) => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
+        readonly
+        v-model="formData.subject"
+        label="เรื่อง"
+      />
+      <q-input
+        class="col-4"
+        dense
+        outlined
+        readonly
+        v-model="formData.who"
+        label="เรียน"
       />
       <q-input
         class="col-3"
         dense
         outlined
-        v-model="Writeat"
-        label="เขียนที่"
-        :readonly="routeName != 'addAbsence'"
-        :rules="[(val) => !!val || `${'เขียนที่'}`]"
+        readonly
+        v-model="formData.requestName"
+        label="ชื่อผู้ยื่นขอ"
       />
       <q-input
         class="col-3"
         dense
         outlined
-        v-model="tel"
-        mask="(###)-###-####"
-        unmasked-value
-        label="หมายเลขโทรศัพท์ที่ติดต่อได้"
-        :readonly="routeName != 'addAbsence'"
-        :rules="[(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
+        readonly
+        v-model="formData.position"
+        label="ตำแหน่งผู้ยื่นขอ"
       />
       <q-input
-        class="col-6"
+        class="col-3"
         dense
         outlined
-        v-model="detail"
-        label="รายละเอียด"
-        :readonly="routeName != 'addAbsence'"
-        :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+        readonly
+        v-model="formData.level"
+        label="ระดับผู้ยื่นขอ"
       />
       <q-input
-        class="col-6"
+        class="col-3"
         dense
         outlined
-        v-model="locationAbsence"
-        label="สถาที่ติดต่อขณะลา"
-        :readonly="routeName != 'addAbsence'"
-        :rules="[(val) => !!val || `${'กรุณากรอกสถาที่ติดต่อขณะลา'}`]"
+        readonly
+        v-model="formData.ocRequest"
+        label="สังกัดผู้ยื่นขอ"
       />
-
+      <q-input
+        class="col-4"
+        dense
+        outlined
+        readonly
+        v-model="formData.leaveReceived"
+        label="จำนวนสิทธิ์การลาที่ได้รับในแต่ละประเภท"
+      />
+      <q-input
+        class="col-4"
+        dense
+        outlined
+        readonly
+        v-model="formData.leaveUse"
+        label="จำนวนสิทธิ์การลาที่ใช้ไปในแต่ละประเภท"
+      />
+      <q-input
+        class="col-4"
+        dense
+        outlined
+        readonly
+        v-model="formData.leaveRemaining"
+        label="จำนวนสิทธิ์การลาคงเหลือในแต่ละประเภท"
+      />
+    </div>
+  </q-card>
+  <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-4"
         v-if="props.type === '7'"
@@ -256,20 +245,6 @@ const props = defineProps({
         :readonly="routeName != 'addAbsence'"
       />
 
-      <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="routeName != 'addAbsence'">
         <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>
diff --git a/src/modules/05_leave/interface/request/AddAbsence.ts b/src/modules/05_leave/interface/request/AddAbsence.ts
index 13aaab3..96c6368 100644
--- a/src/modules/05_leave/interface/request/AddAbsence.ts
+++ b/src/modules/05_leave/interface/request/AddAbsence.ts
@@ -1,6 +1,16 @@
-interface OptionDataAdd {
+interface FormData {
+    dateStart:Date
+    subject:string
+    who:string
+    requestName:string
+    position:string
+    level:string
+    ocRequest:string
+    leaveReceived:string
+    leaveUse:string
+    leaveRemaining:string
 
 }
 export type {
-    OptionDataAdd
+    FormData
 }
\ No newline at end of file