From 853f925d92f28ba29249590aa71844775818cab7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 8 Nov 2023 18:02:52 +0700
Subject: [PATCH] no message

---
 .../components/2_Leave/DetailLeave.vue        | 322 ++++++++++++++----
 .../2_Leave/formDetail/formChildbirth.vue     |  56 +++
 .../2_Leave/formDetail/formHoliday.vue        |  61 ++++
 .../2_Leave/formDetail/formLeave.vue          |  59 ++++
 .../2_Leave/formDetail/formMain.vue           |  46 +++
 .../09_leave/interface/request/leave.ts       |  44 ++-
 .../09_leave/interface/response/leave.ts      |  19 +-
 src/modules/09_leave/stores/LeaveStore.ts     | 110 +++---
 src/modules/09_leave/views/LeaveListMain.vue  |   8 +-
 9 files changed, 596 insertions(+), 129 deletions(-)
 create mode 100644 src/modules/09_leave/components/2_Leave/formDetail/formChildbirth.vue
 create mode 100644 src/modules/09_leave/components/2_Leave/formDetail/formHoliday.vue
 create mode 100644 src/modules/09_leave/components/2_Leave/formDetail/formLeave.vue
 create mode 100644 src/modules/09_leave/components/2_Leave/formDetail/formMain.vue

diff --git a/src/modules/09_leave/components/2_Leave/DetailLeave.vue b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
index 2ae89a7d2..3c1d09f20 100644
--- a/src/modules/09_leave/components/2_Leave/DetailLeave.vue
+++ b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
@@ -1,20 +1,249 @@
 <script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+//importStore
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
+
+//importType
+import type { FremData } from "@/modules/09_leave/interface/request/leave";
+
+// importForm
+import FormMain from "@/modules/09_leave/components/2_Leave/formDetail/formMain.vue";
+import FormLeave from "@/modules/09_leave/components/2_Leave/formDetail/formLeave.vue";
+import FormChildbirth from "@/modules/09_leave/components/2_Leave/formDetail/formChildbirth.vue";
+import FormHoliday from "@/modules/09_leave/components/2_Leave/formDetail/formHoliday.vue";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm } = mixin;
+const { dialogConfirm, showLoader, hideLoader, date2Thai } = mixin;
+const stores = useLeavelistDataStore();
 const router = useRouter();
 const route = useRoute();
-const paramsId = route.params.id;
+const paramsId = route.params.id.toString();
+
+const formData = reactive<FremData>({
+  id: "",
+  leaveType: "",
+  subject: "",
+  name: "",
+  Date: "",
+  status: "",
+  quotaSick: "",
+  leaveSick: "",
+  quotaRemaining: "",
+  notification: "",
+  requesterPosition: "",
+  requesterLevel: "",
+  requesterBeUnder: "",
+  writeAt: "",
+  leaveSince: "",
+  leaveTo: "",
+  leaveNumber: 0,
+  leaveDayType: "",
+  leaveLast: "",
+  phoneNumber: "",
+  address: "",
+  detail: "",
+  document: null,
+  nameWife: "",
+  dateOfBirth: "",
+  accumulatedHolidays: 0,
+  currentHolidays: 0,
+});
+
+onMounted(() => {
+  showLoader();
+  if (paramsId) {
+    fecthDetailLeave(paramsId);
+  }
+});
+
+function fecthDetailLeave(paramsId: string) {
+  const dataAPI = [
+    {
+      id: "00000000-0000-0000-0000-000000000001",
+      leaveType: "leave5",
+      name: "นายกัณฐิมา  กาฬสินธ์ุ",
+      Date: new Date("2023-11-03"),
+      status: "NEW",
+      quotaSick: "10",
+      leaveSick: "5",
+      quotaRemaining: "5",
+      notification: "สำนักงาน",
+      requesterPosition: "รองหัวหน้า",
+      requesterLevel: "ทั่วไป",
+      requesterBeUnder: "กรุงเทพมหานนคร",
+      writeAt: "บ้าน",
+      leaveSince: new Date("2023-11-05"),
+      leaveTo: new Date("2023-11-08"),
+      leaveNumber: 3,
+      leaveDayType: "allday",
+      leaveLast: new Date("2023-10-08"),
+      phoneNumber: "095-123467",
+      address: "ที่อยู่ที่ติดต่อได้ระหว่างลา",
+      detail: "รายละเอียดการลา",
+      document: null,
+      nameWife: "",
+      dateOfBirth: null,
+      accumulatedHolidays: 5,
+      currentHolidays: 10,
+    },
+    {
+      id: "00000000-0000-0000-0000-000000000002",
+      leaveType: "leave2",
+      name: "นายนครชัย วันดี",
+      Date: new Date("2023-11-01"),
+      status: "APPROVE",
+      quotaSick: "15",
+      leaveSick: "5",
+      quotaRemaining: "10",
+      notification: "หัวหน้างาน",
+      requesterPosition: "รองหัวหน้า",
+      requesterLevel: "ทั่วไป",
+      requesterBeUnder: "กรุงเทพมหานนคร",
+      writeAt: "บ้าน",
+      leaveSince: new Date("2023-11-05"),
+      leaveTo: new Date("2023-11-08"),
+      leaveNumber: 4,
+      leaveDayType: "halfmorning",
+      leaveLast: new Date("2023-10-08"),
+      phoneNumber: "095-123467",
+      address: "ที่อยู่ที่ติดต่อได้ระหว่างลา",
+      detail: "รายละเอียดการลา",
+      document: null,
+      nameWife: "",
+      dateOfBirth: null,
+      accumulatedHolidays: 0,
+      currentHolidays: 0,
+    },
+    {
+      id: "00000000-0000-0000-0000-000000000003",
+      leaveType: "leave3",
+      name: "นายกัณฐิมา  กาฬสินธ์ุ",
+      Date: new Date("2023-11-02"),
+      status: "PENDING",
+      quotaSick: "10",
+      leaveSick: "5",
+      quotaRemaining: "5",
+      notification: "หัวหน้างาน",
+      requesterPosition: "รองหัวหน้า",
+      requesterLevel: "ทั่วไป",
+      requesterBeUnder: "กรุงเทพมหานนคร",
+      writeAt: "บ้าน",
+      leaveSince: new Date("2023-11-05"),
+      leaveTo: new Date("2023-11-08"),
+      leaveNumber: 5,
+      leaveDayType: "halfafternoon",
+      leaveLast: new Date("2023-10-08"),
+      phoneNumber: "095-123467",
+      address: "ที่อยู่ที่ติดต่อได้ระหว่างลา",
+      detail: "รายละเอียดการลา",
+      document: null,
+      nameWife: "",
+      dateOfBirth: null,
+      accumulatedHolidays: 0,
+      currentHolidays: 0,
+    },
+    {
+      id: "00000000-0000-0000-0000-000000000004",
+      leaveType: "leave4",
+      name: "นายปิยรมย์ ศิริธาราฟ",
+      Date: new Date("2023-11-01"),
+      status: "PENDING",
+      quotaSick: "10",
+      leaveSick: "5",
+      quotaRemaining: "5",
+      notification: "หัวหน้างาน",
+      requesterPosition: "รองหัวหน้า",
+      requesterLevel: "ทั่วไป",
+      requesterBeUnder: "กรุงเทพมหานนคร",
+      writeAt: "บ้าน",
+      leaveSince: new Date("2023-11-05"),
+      leaveTo: new Date("2023-11-08"),
+      leaveNumber: 6,
+      leaveDayType: "halfafternoon",
+      leaveLast: new Date("2023-10-08"),
+      phoneNumber: "095-123467",
+      address: "ที่อยู่ที่ติดต่อได้ระหว่างลา",
+      detail: "รายละเอียดการลา",
+      document: null,
+      nameWife: "นางแก้ว ศิริธาราฟ",
+      dateOfBirth: new Date("2023-11-10"),
+      accumulatedHolidays: 0,
+      currentHolidays: 0,
+    },
+  ];
+  const data = dataAPI.filter((e: any) => e.id === paramsId);
+
+  data.map((e: any) => {
+    formData.id = e.id;
+    formData.leaveType = e.leaveType;
+
+    formData.subject = e.leaveType
+      ? stores.convertLeave(e.leaveType) || ""
+      : null;
+    formData.name = e.name;
+    formData.Date = e.Date ? date2Thai(e.Date) : null;
+    formData.status = e.status;
+    formData.quotaSick = e.quotaSick;
+    formData.leaveSick = e.leaveSick;
+    formData.quotaRemaining = e.quotaRemaining;
+    formData.notification = e.notification;
+    formData.requesterPosition = e.requesterPosition;
+    formData.requesterLevel = e.requesterLevel;
+    formData.requesterBeUnder = e.requesterBeUnder;
+    formData.writeAt = e.writeAt;
+    formData.leaveSince = e.leaveSince ? date2Thai(e.leaveSince) : null;
+    formData.leaveTo = e.leaveTo ? date2Thai(e.leaveTo) : null;
+    formData.leaveNumber = e.leaveNumber;
+    formData.leaveDayType = e.leaveDayType
+      ? stores.convertLeaveDaytype(e.leaveDayType) || ""
+      : null;
+    formData.leaveLast = e.leaveLast ? date2Thai(e.leaveLast) : null;
+    formData.phoneNumber = e.phoneNumber;
+    formData.address = e.address;
+    formData.detail = e.detail;
+    formData.document = e.document;
+    formData.nameWife = e.nameWife;
+    formData.dateOfBirth = e.dateOfBirth ? date2Thai(e.dateOfBirth) : null;
+    formData.accumulatedHolidays = e.accumulatedHolidays;
+    formData.currentHolidays = e.currentHolidays;
+  });
+
+  // setTimeout(() => {
+
+  checkLeaveType(formData.leaveType ? formData.leaveType : "");
+  hideLoader();
+  // }, 1000);
+}
+const checkForm = ref<string>("");
+function checkLeaveType(type: string) {
+  if (type === "leave1" || type === "leave2" || type === "leave3") {
+    checkForm.value = "FormLeave";
+  } else if (type === "leave4") {
+    checkForm.value = "FormChildbirth";
+  } else if (type === "leave5") {
+    checkForm.value = "FormHoliday";
+  }
+}
 
 function clickSave() {
-  dialogConfirm($q, () => saveData());
+  dialogConfirm(
+    $q,
+    () => console.log("save"),
+    "ยืนยันการอนุมัติ",
+    "ต้องการยืนยันการอนุมัติใช่หรือไม่ ?"
+  );
 }
-function saveData() {
-  console.log("save");
+function clickReject() {
+  dialogConfirm(
+    $q,
+    () => console.log("reject"),
+    "ยืนยันการดำเนินการ",
+    "ต้องการยืนยันการดำเนินการนี้ใช่หรือไม่ ?"
+  );
 }
 </script>
 <template>
@@ -30,7 +259,7 @@ function saveData() {
         class="q-mr-sm"
         @click="router.push(`/leave-list`)"
       />
-      รายละเอียดการลาของ นายปิยรมย์ ศิริธาราฟ
+      รายละเอียดการลาของ {{ formData.name }}
     </div>
     <div>
       <q-btn
@@ -64,7 +293,13 @@ function saveData() {
               <div class="col-xs-12 col-sm-5 row items-center q-my-xs">
                 <div class="col-12 row">
                   <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
-                  <div class="col text-primary">ลาป่วย</div>
+                  <div class="col text-primary">
+                    {{
+                      stores.convertLeave(
+                        formData.leaveType ? formData.leaveType : ""
+                      )
+                    }}
+                  </div>
                 </div>
                 <div class="col-12 row">
                   <div class="col-xs-5 col-sm-3 text-grey-8">
@@ -81,7 +316,7 @@ function saveData() {
                       class="col-12 items-center row q-px-md q-py-sm"
                     >
                       <div class="text-h6 text-weight-bold text-blue-10">
-                        10
+                        {{ formData.quotaSick }}
                       </div>
                       <div class="col-12 text-subtitle2 text-weight-regular">
                         โควต้า<span class="gt-xs">ลาป่วย</span>
@@ -94,7 +329,7 @@ function saveData() {
                       class="col-12 items-center row q-px-md q-py-sm"
                     >
                       <div class="text-h6 text-weight-bold text-light-blue-6">
-                        8
+                        {{ formData.leaveSick }}
                       </div>
                       <div class="col-12 text-subtitle2 text-weight-regular">
                         ลา<span class="gt-xs">ป่วยไป</span>แล้ว
@@ -107,7 +342,7 @@ function saveData() {
                       class="col-12 items-center row q-px-md q-py-sm"
                     >
                       <div class="text-h6 text-weight-bold text-indigo-7">
-                        2
+                        {{ formData.quotaRemaining }}
                       </div>
                       <div class="col-12 text-subtitle2 text-weight-regular">
                         คงเหลือ<span class="gt-xs">โควต้า</span>
@@ -121,63 +356,22 @@ function saveData() {
         </div>
         <div class="row q-col-gutter-md col-12">
           <div class="col-xs-12 col-sm-6 row">
+            <!-- card ซ้าย -->
             <q-card flat bordered class="col-12">
-              <q-card-section>
-                <div class="q-pa-md q-gutter-md">
-                  <div class="row">
-                    <div class="col text-grey-8">เขียนที่</div>
-                    <div class="col">บ้าน</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">รับเงินเดือน</div>
-                    <div class="col">รับเงินเดือน</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">เขียนที่</div>
-                    <div class="col">บ้าน</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">รับเงินเดือน</div>
-                    <div class="col">รับเงินเดือน</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">วัน เดือน ปีเริ่มต้น</div>
-                    <div class="col">14 ก.ค. 2556</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">วัน เดือน ปีเริ่มสิ้นสุด</div>
-                    <div class="col">15 ก.ค. 2556</div>
-                  </div>
-                </div>
-              </q-card-section>
+              <FormMain :data="formData" />
             </q-card>
           </div>
           <div class="col-xs-12 col-sm-6 row">
             <q-card flat bordered class="col-12">
-              <q-card-section>
-                <div class="q-pa-md q-gutter-md">
-                  <div class="row">
-                    <div class="col text-grey-8">จำนวนวันที่ลา</div>
-                    <div class="col">1</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">สถานที่ติดต่อขณะลา</div>
-                    <div class="col">สถานที่ติดต่อขณะลา</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
-                    <div class="col">095-123467</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">สถานะการพิจารณา</div>
-                    <div class="col">ขอยกเลิก</div>
-                  </div>
-                  <div class="row">
-                    <div class="col text-grey-8">เอกสารแบบ</div>
-                    <div class="col">ไม่พบเอกสาร</div>
-                  </div>
-                </div>
-              </q-card-section>
+              <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
+              <FormChildbirth
+                v-else-if="checkForm === 'FormChildbirth'"
+                :data="formData"
+              />
+              <FormHoliday
+                v-else-if="checkForm === 'FormHoliday'"
+                :data="formData"
+              />
             </q-card>
           </div>
         </div>
@@ -185,7 +379,7 @@ function saveData() {
     </div>
     <q-separator />
     <div class="row q-pa-md q-gutter-md justify-end">
-      <q-btn unelevated color="orange-5" label="ไม่อนุมัติ"
+      <q-btn unelevated color="orange-5" label="ไม่อนุมัติ" @click="clickReject"
         ><q-tooltip>ไม่อนุมัติ</q-tooltip>
       </q-btn>
       <q-btn unelevated color="primary" label="อนุมัติ" @click="clickSave"
diff --git a/src/modules/09_leave/components/2_Leave/formDetail/formChildbirth.vue b/src/modules/09_leave/components/2_Leave/formDetail/formChildbirth.vue
new file mode 100644
index 000000000..c4d38da66
--- /dev/null
+++ b/src/modules/09_leave/components/2_Leave/formDetail/formChildbirth.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.writeAt }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveSince }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveTo }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันที่ลา</div>
+        <div class="col">{{ props.data.leaveNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ชื่อภรรยา</div>
+        <div class="col">{{ props.data.nameWife }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">วันที่คลอด</div>
+        <div class="col">{{ props.data.dateOfBirth }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+        <div class="col">{{ props.data.phoneNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+        <div class="col">{{ props.data.address }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.detail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">ไม่พบเอกสาร</div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/09_leave/components/2_Leave/formDetail/formHoliday.vue b/src/modules/09_leave/components/2_Leave/formDetail/formHoliday.vue
new file mode 100644
index 000000000..06baaa7d9
--- /dev/null
+++ b/src/modules/09_leave/components/2_Leave/formDetail/formHoliday.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.writeAt }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา</div>
+        <div class="col">{{ props.data.accumulatedHolidays }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div>
+        <div class="col">{{ props.data.currentHolidays }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveSince }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveTo }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันที่ลา</div>
+        <div class="col">{{ props.data.leaveNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8"></div>
+        <div class="col">{{ props.data.leaveDayType }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+        <div class="col">{{ props.data.phoneNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+        <div class="col">{{ props.data.address }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.detail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">ไม่พบเอกสาร</div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/09_leave/components/2_Leave/formDetail/formLeave.vue b/src/modules/09_leave/components/2_Leave/formDetail/formLeave.vue
new file mode 100644
index 000000000..0d4278e76
--- /dev/null
+++ b/src/modules/09_leave/components/2_Leave/formDetail/formLeave.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.writeAt }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveSince }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveTo }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันที่ลา</div>
+        <div class="col">{{ props.data.leaveNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8"></div>
+        <div class="col">{{ props.data.leaveDayType }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">
+          ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่
+        </div>
+        <div class="col">{{ props.data.leaveLast }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+        <div class="col">{{ props.data.phoneNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+        <div class="col">{{ props.data.address }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.detail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">ไม่พบเอกสาร</div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/09_leave/components/2_Leave/formDetail/formMain.vue b/src/modules/09_leave/components/2_Leave/formDetail/formMain.vue
new file mode 100644
index 000000000..bfcf5887a
--- /dev/null
+++ b/src/modules/09_leave/components/2_Leave/formDetail/formMain.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+console.log(props);
+</script>
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">วันที่ยืนใบลา</div>
+        <div class="col">{{ props.data.Date }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เรื่อง</div>
+        <div class="col">{{ props.data.subject }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เรียน</div>
+        <div class="col">{{ props.data.notification }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ชื่อผู้ยื่นขอ</div>
+        <div class="col">{{ props.data.name }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ตำแหน่งผู้ยืนขอ</div>
+        <div class="col">{{ props.data.requesterPosition }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ระดับผู้ยืนขอ</div>
+        <div class="col">{{ props.data.requesterLevel }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">สังกัดผู้ยืนขอ</div>
+        <div class="col">{{ props.data.requesterBeUnder }}</div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/09_leave/interface/request/leave.ts b/src/modules/09_leave/interface/request/leave.ts
index 1b1bb5463..4572b93c8 100644
--- a/src/modules/09_leave/interface/request/leave.ts
+++ b/src/modules/09_leave/interface/request/leave.ts
@@ -1,10 +1,38 @@
 interface ListsData {
-    id: string;
-    leaveType: string
-    name: string
-    Date: Date
-    status: string
+  id: string;
+  leaveType: string;
+  name: string;
+  Date: Date;
+  status: string;
 }
-export type {
-    ListsData
-}
\ No newline at end of file
+interface FremData {
+  id: string;
+  leaveType: string | null;
+  name: string;
+  subject: string | null;
+  Date: string | null;
+  status: string;
+  quotaSick: string;
+  leaveSick: string;
+  quotaRemaining: string;
+  notification: string;
+  requesterPosition: string;
+  requesterLevel: string;
+  requesterBeUnder: string;
+  writeAt: string;
+  leaveSince: string | null;
+  leaveTo: string | null;
+  leaveNumber: number;
+  leaveDayType: string | null;
+  leaveLast: string | null;
+  phoneNumber: string;
+  address: string;
+  detail: string;
+  document: any | null;
+  nameWife: string;
+  dateOfBirth: string | null;
+  accumulatedHolidays: number;
+  currentHolidays: number;
+}
+
+export type { ListsData, FremData };
diff --git a/src/modules/09_leave/interface/response/leave.ts b/src/modules/09_leave/interface/response/leave.ts
index 363087831..55af334c5 100644
--- a/src/modules/09_leave/interface/response/leave.ts
+++ b/src/modules/09_leave/interface/response/leave.ts
@@ -1,9 +1,14 @@
 interface DataRows {
-    leaveType: string
-    name: string
-    Date: string
-    status: string
+  leaveType: string;
+  name: string;
+  Date: string;
+  status: string;
 }
-export type {
-    DataRows
-}
\ No newline at end of file
+interface FormData {
+  id: string;
+  leaveType: string;
+  name: string;
+  Date: string;
+  status: string;
+}
+export type { DataRows, FormData };
diff --git a/src/modules/09_leave/stores/LeaveStore.ts b/src/modules/09_leave/stores/LeaveStore.ts
index 0e107d6a0..cd6530e30 100644
--- a/src/modules/09_leave/stores/LeaveStore.ts
+++ b/src/modules/09_leave/stores/LeaveStore.ts
@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { ref,onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOption } from "@/modules/09_leave/interface/index/Main";
@@ -21,19 +21,19 @@ export const useLeavelistDataStore = defineStore("leave", () => {
   const visibleColumns = ref<string[]>([]);
   const loadTable = ref<boolean>(false);
   const leaveOp = [
-    { id: 'all', name: 'ทั้งหมด' },
-    { id: 'leave1', name: 'ลากิจส่วนตัว' },
-    { id: 'leave2', name: 'ลาป่วย' },
-  ]
+    { id: "all", name: "ทั้งหมด" },
+    { id: "leave1", name: "ลากิจส่วนตัว" },
+    { id: "leave2", name: "ลาป่วย" },
+  ];
   const statusOp = [
-    { id: 'all', name: 'ทั้งหมด' },
-    { id: 'NEW', name: 'ใหม่' },
-    { id: 'PENDING', name: 'อยู่ระหว่างดำเนินการ' },
-    { id: 'APPROVE', name: 'อนุมัติ' },
-    { id: 'REJECT', name: 'ไม่อนุมัติ' },
-  ]
-  const leaveOps = ref<any>(leaveOp)
-  const statusOps = ref<any>(statusOp)
+    { id: "all", name: "ทั้งหมด" },
+    { id: "NEW", name: "ใหม่" },
+    { id: "PENDING", name: "อยู่ระหว่างดำเนินการ" },
+    { id: "APPROVE", name: "อนุมัติ" },
+    { id: "REJECT", name: "ไม่อนุมัติ" },
+  ];
+  const leaveOps = ref<any>(leaveOp);
+  const statusOps = ref<any>(statusOp);
   async function fetchList(data: ListsData[]) {
     let datalist = data.map((e: ListsData) => ({
       id: e.id,
@@ -42,11 +42,9 @@ export const useLeavelistDataStore = defineStore("leave", () => {
       Date: date2Thai(e.Date),
       status: e.status,
     }));
-    console.log(datalist)
-    mainData.value = datalist
-    const filteramounttab1 = datalist.filter(
-      (e) => e.status === "PENDING"
-    );
+    console.log(datalist);
+    mainData.value = datalist;
+    const filteramounttab1 = datalist.filter((e) => e.status === "PENDING");
     amounttab1.value = filteramounttab1.length;
     amounttab2.value = datalist.length;
     await searchDataFn(selectType.value, selectStatus.value);
@@ -68,7 +66,7 @@ export const useLeavelistDataStore = defineStore("leave", () => {
     // showLoader()
     loadTable.value = true;
     if (selectYear.value == "all" && type == "all" && status == "all") {
-      console.log(1)
+      console.log(1);
       rows.value = mainData.value.map((e: any) => ({
         id: e.id,
         leaveType: convertLeave(e.leaveType),
@@ -80,25 +78,27 @@ export const useLeavelistDataStore = defineStore("leave", () => {
       console.log(2);
     } else if (selectYear.value == "all" && type !== "all" && status == "all") {
       console.log(3);
-      rows.value = mainData.value.filter((e: any) => e.leaveType === type)
-      .map((e: any) => ({
-        id: e.id,
-        leaveType: convertLeave(e.leaveType),
-        name: e.name,
-        Date: date2Thai(e.Date),
-        status: convertSatatus(e.status), // แปลงค่า status เมื่อเป็น "PENDING"
-      }));
+      rows.value = mainData.value
+        .filter((e: any) => e.leaveType === type)
+        .map((e: any) => ({
+          id: e.id,
+          leaveType: convertLeave(e.leaveType),
+          name: e.name,
+          Date: date2Thai(e.Date),
+          status: convertSatatus(e.status), // แปลงค่า status เมื่อเป็น "PENDING"
+        }));
     } else if (selectYear.value == "all" && type == "all" && status !== "all") {
       console.log(4);
       console.log(status);
-      rows.value = mainData.value.filter((e: any) => e.status === status)
-      .map((e: any) => ({
-        id: e.id,
-        leaveType: convertLeave(e.leaveType),
-        name: e.name,
-        Date: date2Thai(e.Date),
-        status: convertSatatus(e.status), // แปลงค่า status เมื่อเป็น "PENDING"
-      }));
+      rows.value = mainData.value
+        .filter((e: any) => e.status === status)
+        .map((e: any) => ({
+          id: e.id,
+          leaveType: convertLeave(e.leaveType),
+          name: e.name,
+          Date: date2Thai(e.Date),
+          status: convertSatatus(e.status), // แปลงค่า status เมื่อเป็น "PENDING"
+        }));
     } else if (
       selectYear.value !== "all" &&
       type !== "all" &&
@@ -118,16 +118,15 @@ export const useLeavelistDataStore = defineStore("leave", () => {
     ) {
       console.log(7);
       console.log(type);
-      rows.value = mainData.value.filter(
-        (e: any) => e.leaveType === type && e.status === status
-      )
-      .map((e: any) => ({
-        id: e.id,
-        leaveType: convertLeave(e.leaveType),
-        name: e.name,
-        Date: date2Thai(e.Date),
-        status: convertSatatus(e.status), // แปลงค่า status เมื่อเป็น "PENDING"
-      }));
+      rows.value = mainData.value
+        .filter((e: any) => e.leaveType === type && e.status === status)
+        .map((e: any) => ({
+          id: e.id,
+          leaveType: convertLeave(e.leaveType),
+          name: e.name,
+          Date: date2Thai(e.Date),
+          status: convertSatatus(e.status), // แปลงค่า status เมื่อเป็น "PENDING"
+        }));
     } else console.log("ค้นหาจากทั้งหมด");
     setTimeout(function () {
       loadTable.value = false;
@@ -175,6 +174,22 @@ export const useLeavelistDataStore = defineStore("leave", () => {
         return "ลากิจส่วนตัว";
       case "leave2":
         return "ลาป่วย";
+      case "leave3":
+        return "ลาคลอดบุตร";
+      case "leave4":
+        return "ลาไปช่วยเหลือภริยาที่คลอดบุตร";
+      case "leave5":
+        return "ลาพักผ่อน";
+    }
+  }
+  function convertLeaveDaytype(val: string) {
+    switch (val) {
+      case "allday":
+        return "ลาทั้งวัน";
+      case "halfmorning":
+        return "ลาครึ่งวันเช้า";
+      case "halfafternoon":
+        return "ลาครึ่งวันบ่าย";
     }
   }
 
@@ -202,6 +217,9 @@ export const useLeavelistDataStore = defineStore("leave", () => {
     leaveOp,
     statusOp,
     leaveOps,
-    statusOps
+    statusOps,
+    //
+    convertLeave,
+    convertLeaveDaytype,
   };
 });
diff --git a/src/modules/09_leave/views/LeaveListMain.vue b/src/modules/09_leave/views/LeaveListMain.vue
index 4b7cb5c3a..6a5ce27f9 100644
--- a/src/modules/09_leave/views/LeaveListMain.vue
+++ b/src/modules/09_leave/views/LeaveListMain.vue
@@ -17,28 +17,28 @@ onMounted(() => {
 function fecthLeaveList() {
   const data = [
     {
-      id: "00000000-0000-0000-0000-000000000000",
+      id: "00000000-0000-0000-0000-000000000001",
       leaveType: "leave1",
       name: "นายกัณฐิมา  กาฬสินธ์ุ",
       Date: "2023-11-03",
       status: "NEW",
     },
     {
-      id: "00000000-0000-0000-0000-000000000000",
+      id: "00000000-0000-0000-0000-000000000002",
       leaveType: "leave1",
       name: "นายนครชัย วันดี",
       Date: "2023-11-01",
       status: "APPROVE",
     },
     {
-      id: "00000000-0000-0000-0000-000000000000",
+      id: "00000000-0000-0000-0000-000000000003",
       leaveType: "leave1",
       name: "นายกัณฐิมา  กาฬสินธ์ุ",
       Date: "2023-11-02",
       status: "PENDING",
     },
     {
-      id: "00000000-0000-0000-0000-000000000000",
+      id: "00000000-0000-0000-0000-000000000004",
       leaveType: "leave2",
       name: "นายปิยรมย์ ศิริธาราฟ",
       Date: "2023-11-01",