From c7e7abe441f1e8f947bc54e35654c78d73942269 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 20 Dec 2023 15:38:42 +0700
Subject: [PATCH 1/5] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=A5=E0=B8=87=E0=B9=80=E0=B8=A7=E0=B8=A5=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=B4=E0=B9=80=E0=B8=A8=E0=B8=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/4_specialTime/DialogApprove.vue      |  4 +++-
 src/modules/09_leave/stores/SpecialTimeStore.ts     | 13 +++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
index 2fcd3a31c..c56708d53 100644
--- a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
+++ b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
@@ -159,7 +159,7 @@ watch(
           <div class="col q-ma-md q-pa-sm bg-white border-custom">
             <q-card bordered class="border-primary text-center">
               <q-card-section class="bg-primary q-pa-sm">
-                <div class="text-white text-bold">เวลาที่กรอก</div>
+                <div class="text-white text-bold">วันที่ยื่นเรื่อง</div>
               </q-card-section>
 
               <q-card-section class="q-pa-sm bg-white text-black">
@@ -216,6 +216,7 @@ watch(
             </div>
           </div>
           <div
+          v-if="formData.checkInEdit"
             class="col q-ma-md q-pa-sm bg-white border-custom text-weight-medium"
           >
             <p style="color: #06884d; font-size: 16px">สถานะช่วงเช้า</p>
@@ -242,6 +243,7 @@ watch(
           </div>
 
           <div
+          v-if="formData.checkOutEdit"
             class="col q-ma-md q-pa-sm bg-white border-custom text-weight-medium"
           >
             <p style="color: #06884d; font-size: 16px">สถานะช่วงบ่าย</p>
diff --git a/src/modules/09_leave/stores/SpecialTimeStore.ts b/src/modules/09_leave/stores/SpecialTimeStore.ts
index 9069ff8e8..12059f15b 100644
--- a/src/modules/09_leave/stores/SpecialTimeStore.ts
+++ b/src/modules/09_leave/stores/SpecialTimeStore.ts
@@ -73,8 +73,8 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
           rows.value.push({
             id: e.id,
             fullname: e.fullName,
-            date: date2Thai(new Date(e.checkDate), false, true),
-            dateFix: date2Thai(new Date(e.createdAt)),
+            date: date2Thai(new Date(e.createdAt), false, true),
+            dateFix: date2Thai(new Date(e.checkDate)),
             timeMorning:
               e.startTimeMorning == null
                 ? "-"
@@ -151,9 +151,10 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
     }
   };
   const optionStatus = ref<DataOption[]>([
-    { id: "0", name: "ปกติ" },
-    { id: "1", name: "สาย" },
-    { id: "2", name: "ขาดราชการ" },
+    { id: "NORMAL", name: "ปกติ" },
+    { id: "LATE", name: "สาย" },
+    { id: "ABSENT", name: "ขาดราชการ" },
+    { id: "NOT_COMPLETE", name: "ปฏิบัติงานไม่ครบตามกำหนดเวลา" },
   ]);
 
   //   const filterSelector = (val: any, update: Function, refData: string) => {
@@ -203,7 +204,7 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
     {
       name: "date",
       align: "left",
-      label: "วันที่กรอก",
+      label: "วันที่ยื่นเรื่อง",
       sortable: true,
       field: "date",
       headerStyle: "font-size: 14px",

From 624f9cbd47f7cfa817458621d5f3e7e8a688549d Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Wed, 20 Dec 2023 15:48:07 +0700
Subject: [PATCH 2/5] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20ui=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20funciton//=20=E0=B8=A3=E0=B8=AD=E0=B8=9A=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PopupCheckFeatures.vue         | 138 ++++++++++++++++++
 .../components/3_WorkTime/DialogForm.vue      |  13 +-
 .../09_leave/views/ChangeRoundMain.vue        |  62 ++++++++
 3 files changed, 212 insertions(+), 1 deletion(-)

diff --git a/src/components/PopupCheckFeatures.vue b/src/components/PopupCheckFeatures.vue
index e69de29bb..8ed0d1684 100644
--- a/src/components/PopupCheckFeatures.vue
+++ b/src/components/PopupCheckFeatures.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+import { ref, useAttrs } from "vue";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "ตรวจสอบคุณสมบัติ",
+  },
+  desc: {
+    type: String,
+    default: "",
+  },
+  clickClose: {
+    type: Function,
+  },
+  type: {
+    type: String,
+    default: "Expert",
+  },
+});
+
+const attrs = ref<any>(useAttrs());
+const currentPage = ref<number>(1);
+const pageSize = ref<number>(10);
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const filter = ref<string>("");
+const rowsPerPage = ref<number>(10);
+
+/**
+ *pagination ของตาราง
+ */
+const pagination = ref({
+  descending: false,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
+});
+
+const rows = ref<any[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "degree",
+    align: "center",
+    label: "คุณวุฒิ",
+    sortable: false,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "Expert",
+    align: "center",
+    label: "ชำนาญการ",
+    sortable: false,
+    field: "Expert",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const visibleColumns = ref<String[]>(["degree", "level", "Expert"]);
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 35vw; max-width: 35vw">
+      <d-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        :filter="filter"
+        row-key="interrogated"
+        flat
+        bordered
+        :paging="true"
+        dense
+        class="custom-header-table"
+        v-bind="attrs"
+        :visible-columns="visibleColumns"
+        v-model:pagination="pagination"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th auto-width></q-th>
+            <q-th
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              style="color: #000000; font-weight: 500"
+            >
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <!-- <q-th auto-width></q-th> -->
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td auto-width>
+              <q-icon
+                v-if="props.row.isDefault === true"
+                name="mdi-bookmark"
+                size="xs"
+                color="primary"
+              >
+                <q-tooltip>เวลา Default</q-tooltip>
+              </q-icon>
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
index 967471626..0ba9095d2 100644
--- a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
+++ b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
@@ -68,6 +68,13 @@ const formData = reactive<FormData>({
   isActive: false,
 });
 
+/**FunctionCheckbox แก้ไขสถานะ */
+function checkDefault() {
+  if (formData.isDefault === true) {
+    formData.isActive = true;
+  }
+}
+
 /** Function validateForm*/
 function validateForm() {
   const hasError = [];
@@ -356,7 +363,11 @@ watch(
             <div class="row items-center q-my-sm justify-between">
               <p class="q-ma-none">เวลา Default</p>
               <label class="toggle-control">
-                <input type="checkbox" v-model="formData.isDefault" />
+                <input
+                  type="checkbox"
+                  v-model="formData.isDefault"
+                  @change="checkDefault()"
+                />
                 <span class="control"></span>
               </label>
             </div>
diff --git a/src/modules/09_leave/views/ChangeRoundMain.vue b/src/modules/09_leave/views/ChangeRoundMain.vue
index 1863febd4..1c7fd2c71 100644
--- a/src/modules/09_leave/views/ChangeRoundMain.vue
+++ b/src/modules/09_leave/views/ChangeRoundMain.vue
@@ -21,6 +21,8 @@ const dataStore = useChangeRoundDataStore();
 const $q = useQuasar();
 
 const modal = ref<boolean>(false);
+const dateWork = ref<any>();
+const modalFix = ref<boolean>(false);
 const editCheck = ref<string>("");
 const DataRow = ref<any>();
 const formData = reactive<dataPost>({
@@ -45,9 +47,14 @@ function Openmodal(check: string, detail: any) {
   }
 }
 
+function OpenmodalFix(detail: any) {
+  modalFix.value = true;
+}
+
 /** Function closePopup */
 function closeDialog() {
   modal.value = false;
+  modalFix.value = false;
 }
 
 /** Function ค้นหาข้อมูล */
@@ -180,6 +187,15 @@ function searchData() {
                           <q-item-label>ประวัติการเปลี่ยนรอบ</q-item-label>
                         </q-item-section>
                       </q-item>
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="OpenmodalFix(props.row)"
+                      >
+                        <q-item-section>
+                          <q-item-label>แก้ไขปฏิทินวันทำงาน</q-item-label>
+                        </q-item-section>
+                      </q-item>
                     </q-list>
                   </q-menu>
                 </q-btn>
@@ -198,6 +214,52 @@ function searchData() {
     :personId="DataRow == null ? '' : DataRow.profileId"
     @update:change-page="dataStore.changePage"
   />
+  <q-dialog v-model="modalFix" persistent>
+    <q-card style="min-width: 800px"
+      ><q-toolbar>
+        <q-toolbar-title class="text-subtitle1 text-bold">
+          {{ "แก้ไขปฏิทินวันทำงาน" }}
+        </q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="closeDialog"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator color="grey-4" />
+      <q-form @submit="closeDialog" class="q-gutter-md">
+        <div class="q-pa-md">
+          <q-radio
+            name="dateWork"
+            v-model="dateWork"
+            val="line"
+            label="ทำงาน 5 วัน"
+          />
+          <q-radio
+            name="dateWork"
+            v-model="dateWork"
+            val="rectangle"
+            label="ทำงาน 6 วัน"
+          />
+        </div>
+        <q-separator color="grey-4" />
+        <div class="q-pa-xs">
+          <div class="row justify-end q-mr-sm q-py-sm">
+            <q-btn
+              id="onSubmit"
+              type="submit"
+              unelevated
+              label="บันทึก"
+              class="q-px-md items-center"
+              color="secondary"
+            />
+          </div>
+        </div>
+      </q-form> </q-card
+  ></q-dialog>
 </template>
 <style scoped lang="scss">
 .q-table tbody td:before.no-background {

From a34a6f96c25a87ae000f84bdfdb9cf94f6266d9c Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 20 Dec 2023 16:30:38 +0700
Subject: [PATCH 3/5] add type generate report

---
 src/plugins/genreport.ts | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/plugins/genreport.ts b/src/plugins/genreport.ts
index 534694828..09851d2a7 100644
--- a/src/plugins/genreport.ts
+++ b/src/plugins/genreport.ts
@@ -10,15 +10,21 @@ const { showLoader, hideLoader, messageError } = mixin;
 const apiGenReport =
   "https://report-server.frappet.synology.me/api/v1/report-template/docx";
 
-async function genReport(data: any, fileName: string) {
+async function genReport(data: any, fileName: string, type: string = "docx") {
   showLoader();
   await axios
     .post(apiGenReport, data, {
-      headers: {
-        accept:
-          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-        "content-Type": "application/json",
-      },
+      headers:
+        type == "docx"
+          ? {
+              accept:
+                "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+              "content-Type": "application/json",
+            }
+          : {
+              accept: "application/pdf",
+              "content-Type": "application/json",
+            },
       responseType: "arraybuffer",
     })
     .then((res) => {

From 8cfda78cb08ab349e766869c403366ddf951a62e Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 20 Dec 2023 16:32:35 +0700
Subject: [PATCH 4/5] fix bug

---
 .../09_leave/components/1_Work/Tab1.vue       |  8 ++--
 .../4_specialTime/DialogApprove.vue           | 37 +++++++++++++------
 .../09_leave/views/SpecialTimeMain.vue        |  2 +
 3 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/modules/09_leave/components/1_Work/Tab1.vue b/src/modules/09_leave/components/1_Work/Tab1.vue
index fa8374955..ec4859380 100644
--- a/src/modules/09_leave/components/1_Work/Tab1.vue
+++ b/src/modules/09_leave/components/1_Work/Tab1.vue
@@ -145,16 +145,16 @@ async function fetchListTimeRecord() {
           checkInDate: e.checkInDate ? date2Thai(e.checkInDate) : "-",
           checkInTime: e.checkInTime,
           checkInLocation: e.checkInLocation,
-          checkInLat: e.checkInLat,
-          checkInLon: e.checkInLon,
+          checkInLat: e.checkInLat ? e.checkInLat : "",
+          checkInLon: e.checkInLon ? e.checkInLon : "",
           checkInStatus: e.checkInStatus
             ? workStore.convertSatatus(e.checkInStatus)
             : "-",
           checkOutDate: e.checkOutDate ? date2Thai(e.checkOutDate) : "-",
           checkOutLocation: e.checkOutLocation ? e.checkOutLocation : "-",
           checkOutTime: e.checkOutTime ? e.checkOutTime : "-",
-          checkOutLat: e.checkOutLocation ? e.checkOutLat : "",
-          checkOutLon: e.checkOutLocation ? e.checkOutLon : "",
+          checkOutLat: e.checkOutLat ? e.checkOutLat : "",
+          checkOutLon: e.checkOutLat ? e.checkOutLon : "",
           checkOutStatus: e.checkOutStatus
             ? workStore.convertSatatus(e.checkOutStatus)
             : "-",
diff --git a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
index c56708d53..93e3953f5 100644
--- a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
+++ b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
@@ -43,8 +43,8 @@ const formData = reactive<dataRowRound>({
   checkIn: "",
   checkOut: "",
   note: "",
-  checkInStatus: "",
-  checkOutStatus: "",
+  checkInStatus: "NORMAL",
+  checkOutStatus: "NORMAL",
   checkInEdit: false,
   checkOutEdit: false,
 });
@@ -95,8 +95,8 @@ async function approveData() {
   const body = {
     checkInTime: formData.checkIn,
     checkOutTime: formData.checkOut,
-    checkInStatus: SpecialTimeStore.checkInStatus,
-    checkOutStatus: SpecialTimeStore.checkOutStatus,
+    checkInStatus: formData.checkInStatus,
+    checkOutStatus: formData.checkOutStatus,
     reason: formData.note,
   };
   await http
@@ -123,14 +123,29 @@ function close() {
 watch(
   () => props.modal,
   () => {
+    console.log("props===>", props);
     if (props.editCheck === "APPROVE") {
       formData.checkIn = "";
       formData.checkOut = "";
       formData.note = "";
     } else if (props.editCheck === "PENDING") {
       if (props.detailData) {
-        formData.checkIn = props.detailData.checkIn;
-        formData.checkOut = props.detailData.checkOut;
+        if (props.detailData.checkInEdit) {
+          formData.checkIn = props.detailData.startTimeMorning;
+          formData.checkOut = props.detailData.endTimeAfternoon;
+        } else if (
+          props.detailData.checkInEdit &&
+          !props.detailData.checkOutEdit
+        ) {
+          formData.checkIn = props.detailData.startTimeMorning;
+          formData.checkOut = props.detailData.endTimeMorning;
+        } else if (
+          !props.detailData.checkInEdit &&
+          props.detailData.checkOutEdit
+        ) {
+          formData.checkIn = props.detailData.startAfternoon;
+          formData.checkOut = props.detailData.endTimeAfternoon;
+        }
         formData.note = props.detailData.note;
         formData.checkInEdit = props.detailData.checkInEdit;
         formData.checkOutEdit = props.detailData.checkOutEdit;
@@ -142,7 +157,7 @@ watch(
 
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card style="min-width: 350px" class="bg-grey-11">
+    <q-card style="width: 350px" class="bg-grey-11">
       <form @submit.prevent="validateForm">
         <DialogHeader
           :tittle="
@@ -216,7 +231,7 @@ watch(
             </div>
           </div>
           <div
-          v-if="formData.checkInEdit"
+            v-if="formData.checkInEdit"
             class="col q-ma-md q-pa-sm bg-white border-custom text-weight-medium"
           >
             <p style="color: #06884d; font-size: 16px">สถานะช่วงเช้า</p>
@@ -231,7 +246,7 @@ watch(
                 outlined
                 full-width
                 dense
-                v-model="SpecialTimeStore.checkInStatus"
+                v-model="formData.checkInStatus"
                 :options="SpecialTimeStore.optionStatus"
                 option-value="id"
                 option-label="name"
@@ -243,7 +258,7 @@ watch(
           </div>
 
           <div
-          v-if="formData.checkOutEdit"
+            v-if="formData.checkOutEdit"
             class="col q-ma-md q-pa-sm bg-white border-custom text-weight-medium"
           >
             <p style="color: #06884d; font-size: 16px">สถานะช่วงบ่าย</p>
@@ -261,7 +276,7 @@ watch(
                 :rules="[(val) => !!val || 'กรุณาเลือกสถานะช่วงบ่าย']"
                 hide-bottom-space
                 full-width
-                v-model="SpecialTimeStore.checkOutStatus"
+                v-model="formData.checkOutStatus"
                 :options="SpecialTimeStore.optionStatus"
                 option-value="id"
                 option-label="name"
diff --git a/src/modules/09_leave/views/SpecialTimeMain.vue b/src/modules/09_leave/views/SpecialTimeMain.vue
index 8324590a5..66aac7d57 100644
--- a/src/modules/09_leave/views/SpecialTimeMain.vue
+++ b/src/modules/09_leave/views/SpecialTimeMain.vue
@@ -358,6 +358,7 @@ const monthYearThai = (val: any) => {
       </d-table>
     </div>
   </q-card>
+
   <DialogReason
     :modal="modalUnapprove"
     :title="dialogTitle"
@@ -366,6 +367,7 @@ const monthYearThai = (val: any) => {
     label="เหตุผล"
     :savaForm="clickSave"
   />
+  
   <DialogApprove
     :modal="modalApprove"
     :closeDialog="closeDialog"

From 7d90f443a00d9f2140f839856814e22559f199a0 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Wed, 20 Dec 2023 17:00:45 +0700
Subject: [PATCH 5/5] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20itemlist=20download=20=E0=B9=84=E0=B8=9F=E0=B8=A5?=
 =?UTF-8?q?=E0=B9=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- รายละเอียดการขอยกเลิกการลา
- รายละเอียดการลา
---
 .../components/2_Leave/DetailLeave.vue        | 48 +++++++++++++++++--
 .../components/2_Leave/DetailLeaveReject.vue  | 47 ++++++++++++++++--
 src/plugins/genreport.ts                      |  2 +-
 3 files changed, 88 insertions(+), 9 deletions(-)

diff --git a/src/modules/09_leave/components/2_Leave/DetailLeave.vue b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
index 487fae021..c1dea856f 100644
--- a/src/modules/09_leave/components/2_Leave/DetailLeave.vue
+++ b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
@@ -48,6 +48,8 @@ const route = useRoute();
 const paramsId = route.params.id.toString();
 
 const modalApprove = ref(false);
+const typeDocx = ref<string>("docx");
+const typePdf = ref<string>("pdf");
 const dialogTitleUnapprove = ref<string>("ไม่อนุมัติ");
 const dialogTitle = ref<string>("อนุมัติ");
 const dialogLabel = ref<string>("เหตุผล");
@@ -462,14 +464,15 @@ function clickSave(reason: string) {
   }
 }
 
-async function onClickDownloadFile(id: string, fileName: string) {
+async function onClickDownloadFile(id: string, fileName: string, type: string) {
   showLoader();
   await http
     .get(config.API.leaveReport(id))
     .then(async (res) => {
       console.log(res);
       const data = res.data.result;
-      await genReport(data, fileName);
+      await genReport(data, fileName, type);
+      console.log(type);
     })
     .catch((err) => {
       messageError($q, err);
@@ -496,7 +499,7 @@ async function onClickDownloadFile(id: string, fileName: string) {
         รายละเอียดการลาของ {{ formData.fullName }}
       </div>
       <div>
-        <q-btn
+        <!-- <q-btn
           icon="mdi-download"
           unelevated
           round
@@ -506,7 +509,44 @@ async function onClickDownloadFile(id: string, fileName: string) {
           class="q-mr-sm"
           @click="onClickDownloadFile(formData.id, formData.leaveTypeName)"
           ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-        >
+        > -->
+        <q-btn class="q-mr-sm" icon="mdi-download" round color="primary" flat>
+          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+          <q-menu>
+            <q-list style="min-width: 100px">
+              <q-item
+                clickable
+                v-close-popup
+                @click="
+                  onClickDownloadFile(
+                    formData.id,
+                    formData.leaveTypeName,
+                    typeDocx
+                  )
+                "
+              >
+                <q-item-section class="text-blue"
+                  >ดาวน์โหลดไฟล์ .docx</q-item-section
+                >
+              </q-item>
+              <q-item
+                clickable
+                v-close-popup
+                @click="
+                  onClickDownloadFile(
+                    formData.id,
+                    formData.leaveTypeName,
+                    typePdf
+                  )
+                "
+              >
+                <q-item-section class="text-red"
+                  >ดาวน์โหลดไฟล์ .pdf</q-item-section
+                >
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
       </div>
       <q-space />
       <!-- <q-file
diff --git a/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue b/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
index adb3312e4..efe5ed3af 100644
--- a/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
+++ b/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
@@ -47,6 +47,8 @@ const router = useRouter();
 const route = useRoute();
 const paramsId = route.params.id.toString();
 
+const typeDocx = ref<string>("docx");
+const typePdf = ref<string>("pdf");
 const modalApprove = ref(false);
 const dialogTitleUnapprove = ref<string>("ไม่อนุมัติ");
 const dialogTitle = ref<string>("อนุมัติ");
@@ -405,14 +407,14 @@ function clickSave(reason: string) {
   }
 }
 
-async function onClickDownloadFile(id: string, fileName: string) {
+async function onClickDownloadFile(id: string, fileName: string, type: string) {
   showLoader();
   await http
     .get(config.API.leaveReportReject(id))
     .then(async (res) => {
       console.log(res);
       const data = res.data.result;
-      await genReport(data, fileName);
+      await genReport(data, fileName, type);
     })
     .catch((err) => {
       messageError($q, err);
@@ -439,7 +441,7 @@ async function onClickDownloadFile(id: string, fileName: string) {
         รายละเอียดการขอยกเลิกของ {{ formData.fullName }}
       </div>
       <div>
-        <q-btn
+        <!-- <q-btn
           icon="mdi-download"
           unelevated
           round
@@ -449,7 +451,44 @@ async function onClickDownloadFile(id: string, fileName: string) {
           class="q-mr-sm"
           @click="onClickDownloadFile(formData.id, formData.leaveTypeName)"
           ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-        >
+        > -->
+        <q-btn class="q-mr-sm" icon="mdi-download" round color="primary" flat>
+          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+          <q-menu>
+            <q-list style="min-width: 100px">
+              <q-item
+                clickable
+                v-close-popup
+                @click="
+                  onClickDownloadFile(
+                    formData.id,
+                    formData.leaveTypeName,
+                    typeDocx
+                  )
+                "
+              >
+                <q-item-section class="text-blue"
+                  >ดาวน์โหลดไฟล์ .docx</q-item-section
+                >
+              </q-item>
+              <q-item
+                clickable
+                v-close-popup
+                @click="
+                  onClickDownloadFile(
+                    formData.id,
+                    formData.leaveTypeName,
+                    typePdf
+                  )
+                "
+              >
+                <q-item-section class="text-red"
+                  >ดาวน์โหลดไฟล์ .pdf</q-item-section
+                >
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
       </div>
       <q-space />
       <!-- <q-file
diff --git a/src/plugins/genreport.ts b/src/plugins/genreport.ts
index 09851d2a7..7b39dcc63 100644
--- a/src/plugins/genreport.ts
+++ b/src/plugins/genreport.ts
@@ -41,7 +41,7 @@ async function genReport(data: any, fileName: string, type: string = "docx") {
         // สร้างลิงก์เพื่อดาวน์โหลดไฟล์
         const link = document.createElement("a");
         link.href = url;
-        link.download = `${fileName}.docx`; // กำหนดชื่อไฟล์ที่จะดาวน์โหลด
+        link.download = `${fileName}.${type === "docx" ? "docx" : "pdf"}`; // กำหนดชื่อไฟล์ที่จะดาวน์โหลด
         document.body.appendChild(link);
         link.click();