ปรับรายงานการลงเวลา และการลา

src/interface/request/main/main.ts

@@ -409,7 +409,7 @@ const menuList = readonly<any[]>([
       {
         key: 9.6,
         label: "รายงานสถิติ",
-        path: "/statistics-report",
+        path: "/leave-report",
         role: "leave",
       },
     ],

src/modules/09_leave/components/1_Work/DialogReport.vue

@@ -0,0 +1,297 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import axios from "axios";
+
+/** importType*/
+import type {
+  DataOption,
+  DataDateMonthObject,
+} from "@/modules/09_leave/interface/index/Main";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const { date2Thai, monthYear2Thai, dateToISO, messageError } = mixin;
+
+const apiGenReport =
+  "https://report-server.frappet.synology.me/api/v1/report-template/xlsx";
+
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    requier: true,
+    default: false,
+  },
+  close: {
+    type: Function,
+    requier: true,
+  },
+});
+
+const loadingBtn = ref<boolean>(true);
+const filterType = ref<string>("daily");
+const filterTypeMain = ref<DataOption[]>([
+  { id: "daily", name: "รายวัน" },
+  { id: "monthly", name: "รายเดือน" },
+]);
+const filterTypeOption = ref<DataOption[]>(filterTypeMain.value);
+const date = ref<Date>(new Date());
+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+});
+
+const detailReport = ref<any>();
+
+/** function อัปเดทรายงานสถิติการลา*/
+async function updateFilterType() {
+  filterType.value === "daily"
+    ? updateDte()
+    : filterType.value === "monthly"
+    ? updateMonth()
+    : false;
+}
+
+/** function อัปเดทวัน*/
+async function updateDte() {
+  const body = {
+    startDate: dateToISO(date.value),
+    endDate: dateToISO(date.value),
+  };
+  fetchReportTimeRecords(body);
+}
+
+/** function อัปเดทเดือน*/
+async function updateMonth() {
+  const mount = dateMonth.value.month + 1;
+  //  วันเริ่มต้นของเดือน
+  const firstDay = new Date(dateMonth.value.year, mount - 1, 1);
+  // วันสิ้นสุดของเดือนถัดไป
+  const lastDay = new Date(dateMonth.value.year, mount, 0);
+  const body = {
+    startDate: dateToISO(firstDay),
+    endDate: dateToISO(lastDay),
+  };
+  fetchReportTimeRecords(body);
+}
+
+/**
+ * function เรียกข้อมูลรายงานสถิติการลา
+ * @param body วันเรื่มต้นและสิ้นสุด
+ */
+async function fetchReportTimeRecords(body: any) {
+  loadingBtn.value = true;
+  await http
+    .post(config.API.leaveReportTimeRecords(), body)
+    .then((res) => {
+      const data = res.data.result;
+      detailReport.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        loadingBtn.value = false;
+      }, 500);
+    });
+}
+
+/**
+ *  function filterOption
+ * @param val  คำค้นหา
+ * @param update functoin
+ */
+function filterFnOptions(val: any, update: Function) {
+  update(() => {
+    filterTypeOption.value = filterTypeMain.value.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+/**
+ * function เรียกไฟล์ XLSX
+ * @param data ข้อมูลรายงานสถิติการลา
+ */
+async function genReportXLSX(data: any) {
+  await axios
+    .post(apiGenReport, data, {
+      headers: {
+        accept:
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        "content-Type": "application/json",
+      },
+      responseType: "blob",
+    })
+    .then(async (res) => {
+      const blob = new Blob([res.data]);
+      downloadReport(blob, "xlsx");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ *
+ * @param data ข้อมูลรายงานสถิติการลา
+ * @param type นามสกุลไฟล์
+ */
+async function downloadReport(data: any, type: string) {
+  const link = document.createElement("a");
+  var fileName = "รายงานสรุปบันทึกการลงเวลาปฏิบัติงาน";
+  link.href = window.URL.createObjectURL(new Blob([data]));
+  link.setAttribute("download", `${fileName}.${type}`);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+function monthYearThai(val: DataDateMonthObject) {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+}
+
+watch(
+  () => props.modal,
+  () => {
+    filterType.value = "daily";
+    date.value = new Date();
+    props.modal && updateFilterType();
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="props.modal">
+    <q-card style="width: 800px; max-width: 80vw">
+      <Header :close="props.close" :tittle="'รายงานสถิติการลา'" />
+
+      <q-separator />
+
+      <q-card-section class="q-pt-none">
+        <div class="q-pa-sm q-gutter-y-sm">
+          <q-toolbar class="q-pa-sm bg-grey-2" style="border-radius: 5px">
+            <div class="q-pr-xs">
+              <q-select
+                class="bg-white"
+                outlined
+                dense
+                v-model="filterType"
+                :options="filterTypeOption"
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                use-input
+                style="width: 230px"
+                @update:model-value="updateFilterType"
+                @filter="(inputValue: any,
+        doneFn: Function) => filterFnOptions(inputValue, doneFn,)"
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="q-pr-xs" v-if="filterType === 'daily'">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                @update:model-value="updateDte"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    class="bg-white"
+                    outlined
+                    dense
+                    lazy-rules
+                    borderless
+                    :model-value="date ? date2Thai(date) : null"
+                    :label="`${'วันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="q-pr-xs" v-if="filterType === 'monthly'">
+              <datepicker
+                v-model="dateMonth"
+                :locale="'th'"
+                autoApply
+                month-picker
+                :enableTimePicker="false"
+                @update:model-value="updateMonth"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    class="bg-white"
+                    outlined
+                    dense
+                    lazy-rules
+                    borderless
+                    :label="`${'เดือน'}`"
+                    :model-value="monthYearThai(dateMonth)"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      ></q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <q-space />
+            <q-btn
+              :loading="loadingBtn"
+              :disable="loadingBtn"
+              color="primary"
+              icon="download"
+              label="ดาวน์โหลดรายงาน"
+              @click="genReportXLSX(detailReport)"
+            >
+              <q-tooltip>ดาวน์โหลดรายงาน</q-tooltip>
+            </q-btn>
+          </q-toolbar>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/09_leave/components/3_Report/LeaveReport.vue

@@ -1,67 +1,31 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
-import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import axios from "axios";
 
-import type {
+/** importType*/
-  DataDateMonthObject,
+import type { DataOption } from "@/modules/09_leave/interface/index/Main";
-  DataOption,
-} from "@/modules/09_leave/interface/index/Main";
 
+/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
-const route = useRoute();
+/** use*/
 const mixin = useCounterMixin();
 const $q = useQuasar();
-const {
+const { showLoader, hideLoader, date2Thai, dateToISO, messageError } = mixin;
-  showLoader,
-  hideLoader,
-  date2Thai,
-  monthYear2Thai,
-  dateToISO,
-  messageError,
-} = mixin;
 
 const apiGenReport =
   "https://report-server.frappet.synology.me/api/v1/report-template/xlsx";
 
-const typeReport = route.params.type.toString();
-const titleReport = computed(() => {
-  const title =
-    typeReport === "time-records"
-      ? "รายงานสรุปบันทึกการลงเวลาปฏิบัติงาน"
-      : typeReport === "leaveday"
-      ? "บัญชีแสดงวันลา"
-      : "";
-  return title;
-});
-
-const date = ref<Date>(new Date());
-const dateMonth = ref<DataDateMonthObject>({
-  month: new Date().getMonth(),
-  year: new Date().getFullYear(),
-});
 const year = ref<number>(new Date().getFullYear());
 const dateStart = ref<Date>(new Date(year.value, 9, 1));
 const dateEnd = ref<Date>(new Date(year.value + 1, 8, 30));
+
 const employeeClass = ref<string>("employee");
 const yearType = ref<string>("FULL");
-const filterType = ref<string>("daily");
-
-function monthYearThai(val: DataDateMonthObject) {
-  if (val == null) return "";
-  else return monthYear2Thai(val.month, val.year);
-}
-
-const filterTypeMain = ref<DataOption[]>([
-  { id: "daily", name: "รายวัน" },
-  { id: "monthly", name: "รายเดือน" },
-  { id: "yearly", name: "รายปี" },
-]);
 const employeeClassMain = ref<DataOption[]>([
   { id: "employee", name: "ลูกจ้างประจำ" },
   { id: "officer", name: "ข้าราชการ" },
@@ -73,79 +37,37 @@ const yearTypeOptionMain = ref<DataOption[]>([
 ]);
 const employeeClassOption = ref<DataOption[]>(employeeClassMain.value);
 const yearTypeOptionOption = ref<DataOption[]>(yearTypeOptionMain.value);
-const filterTypeOption = ref<DataOption[]>(filterTypeMain.value);
+
+const detailReport = ref<any>();
+
+/** function อัปเดทบัญชีแสดงวันลา */
+async function updateLeaveday() {
+  if (yearType.value === "FULL") {
+    dateStart.value = new Date(year.value, 9, 1);
+    dateEnd.value = new Date(year.value + 1, 8, 30);
+  } else if (yearType.value === "FIRSTHAFT") {
+    dateStart.value = new Date(year.value, 9, 1);
+    dateEnd.value = new Date(year.value + 1, 2, 31);
+  } else if (yearType.value === "SECONDHAFT") {
+    dateStart.value = new Date(year.value + 1, 3, 1);
+    dateEnd.value = new Date(year.value + 1, 8, 30);
+  }
+
+  fetchLeaveday(
+    employeeClass.value,
+    yearType.value,
+    dateStart.value,
+    dateEnd.value
+  );
+}
 
 /**
- * function ค้นหาข้อมูล Option
+ * function เรียกข้อมูลบัญชีแสดงวันลา
- * @param val คำค้นหา
+ * @param type สถานภาพ
- * @param update  function
+ * @param year ปั
- * @param type   ประเภท option
+ * @param startDate วันเริ่มต้น
+ * @param endDate วันสิ้นสุด
  */
-function filterFnOptions(val: any, update: Function, type: string) {
-  switch (type) {
-    case "filterType":
-      update(() => {
-        filterTypeOption.value = filterTypeMain.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeeClass":
-      update(() => {
-        employeeClassOption.value = employeeClassMain.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "yearType":
-      update(() => {
-        yearTypeOptionOption.value = yearTypeOptionMain.value.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-  }
-}
-
-const splitterModel = ref(14);
-const numOfPages = ref<number>(0);
-const page = ref<number>(1);
-const pdfSrc = ref<any>();
-const modalFull = ref<boolean>(false);
-const fileBlob = ref<any>();
-/** ไปหน้าต่อไปของรายงาน */
-function nextPage() {
-  if (page.value < numOfPages.value) {
-    page.value++;
-  }
-}
-
-/** กลับหน้าก่อนหน้าของรายงาน */
-function backPage() {
-  if (page.value !== 1) {
-    page.value--;
-  }
-}
-
-/** กลับหน้าหลัก */
-function backHistory() {
-  window.history.back();
-}
-
-async function fetchReportTimeRecords(body: any) {
-  showLoader();
-  await http
-    .post(config.API.leaveReportTimeRecords(), body)
-    .then((res) => {
-      const data = res.data.result;
-      data && genReport(data);
-      dataDetail.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
 async function fetchLeaveday(
   type: string,
   year: string,
@@ -153,7 +75,6 @@ async function fetchLeaveday(
   endDate: Date
 ) {
   showLoader();
-
   const body = {
     type: year === "FULL" ? "FULL" : "HAFT",
     startDate: dateToISO(startDate),
@@ -165,59 +86,17 @@ async function fetchLeaveday(
     .then((res) => {
       const data = res.data.result;
       data && genReport(data);
-      dataDetail.value = data;
+      detailReport.value = data;
     })
     .catch((err) => {
       messageError($q, err);
     });
 }
 
-async function updateFilterType() {
+/**
-  // console.log(filterType.value);
+ * function เรียกไฟล์ PDF
-  filterType.value === "daily"
+ * @param data  ข้อมูลบัญชีวันลา
-    ? updateDte()
+ */
-    : filterType.value === "monthly"
-    ? updateMonth()
-    : updateYear();
-}
-
-async function updateDte() {
-  const body = {
-    startDate: dateToISO(date.value),
-    endDate: dateToISO(date.value),
-  };
-  fetchReportTimeRecords(body);
-}
-
-async function updateMonth() {
-  const mount = dateMonth.value.month + 1;
-
-  //  วันเริ่มต้นของเดือน
-  const firstDay = new Date(dateMonth.value.year, mount - 1, 1);
-
-  // วันสิ้นสุดของเดือนถัดไป
-  const lastDay = new Date(dateMonth.value.year, mount, 0);
-
-  const body = {
-    startDate: dateToISO(firstDay),
-    endDate: dateToISO(lastDay),
-  };
-  fetchReportTimeRecords(body);
-}
-
-async function updateYear() {
-  // วันเริ่มต้นของปี
-  const firstDay = new Date(year.value, 0, 1);
-  // วันสิ้นสุดของปี
-  const lastDay = new Date(year.value, 11, 31);
-
-  const body = {
-    startDate: dateToISO(firstDay),
-    endDate: dateToISO(lastDay),
-  };
-  fetchReportTimeRecords(body);
-}
-
 async function genReport(data: any) {
   await axios
     .post(apiGenReport, data, {
@@ -247,7 +126,10 @@ async function genReport(data: any) {
     });
 }
 
-const dataDetail = ref<any>([]);
+/**
+ * function เรียกไฟล์ XLSX
+ * @param data ข้อมูลบัญชีวันลา
+ */
 async function genReportXLSX(data: any) {
   await axios
     .post(apiGenReport, data, {
@@ -270,29 +152,14 @@ async function genReportXLSX(data: any) {
     });
 }
 
-async function updateLeaveday() {
+/**
-  if (yearType.value === "FULL") {
+ * function Download ไฟล์
-    dateStart.value = new Date(year.value, 9, 1);
+ * @param data ข้อมูลบัญชีวันลา
-    dateEnd.value = new Date(year.value + 1, 8, 30);
+ * @param type นามสกุลไฟล์
-  } else if (yearType.value === "FIRSTHAFT") {
+ */
-    dateStart.value = new Date(year.value, 9, 1);
-    dateEnd.value = new Date(year.value + 1, 2, 31);
-  } else if (yearType.value === "SECONDHAFT") {
-    dateStart.value = new Date(year.value + 1, 3, 1);
-    dateEnd.value = new Date(year.value + 1, 8, 30);
-  }
-
-  fetchLeaveday(
-    employeeClass.value,
-    yearType.value,
-    dateStart.value,
-    dateEnd.value
-  );
-}
-
 async function downloadReport(data: any, type: string) {
   const link = document.createElement("a");
-  var fileName = titleReport.value;
+  var fileName = "บัญชีแสดงวันลา";
   link.href = window.URL.createObjectURL(new Blob([data]));
   link.setAttribute("download", `${fileName}.${type}`);
   document.body.appendChild(link);
@@ -300,64 +167,62 @@ async function downloadReport(data: any, type: string) {
   document.body.removeChild(link);
 }
 
-onMounted(() => {
+const splitterModel = ref(14);
-  const body = {
+const numOfPages = ref<number>(0);
-    startDate: dateToISO(date.value),
+const page = ref<number>(1);
-    endDate: dateToISO(date.value),
+const pdfSrc = ref<any>();
-  };
+// const modalFull = ref<boolean>(false);
+const fileBlob = ref<any>();
+/** ไปหน้าต่อไปของรายงาน */
+function nextPage() {
+  if (page.value < numOfPages.value) {
+    page.value++;
+  }
+}
 
-  typeReport === "time-records"
+/** กลับหน้าก่อนหน้าของรายงาน */
-    ? fetchReportTimeRecords(body)
+function backPage() {
-    : fetchLeaveday(
+  if (page.value !== 1) {
-        employeeClass.value,
+    page.value--;
-        yearType.value,
+  }
-        dateStart.value,
+}
-        dateEnd.value
+
-      );
+/**
+ * function ค้นหาข้อมูล Option
+ * @param val คำค้นหา
+ * @param update  function
+ * @param type   ประเภท option
+ */
+function filterFnOptions(val: any, update: Function, type: string) {
+  switch (type) {
+    case "employeeClass":
+      update(() => {
+        employeeClassOption.value = employeeClassMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "yearType":
+      update(() => {
+        yearTypeOptionOption.value = yearTypeOptionMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+  }
+}
+
+onMounted(() => {
+  updateLeaveday();
 });
 </script>
 <template>
-  <div class="toptitle">
+  <div class="toptitle text-dark col-12 row items-center">บัญชีแสดงวันลา</div>
-    <q-btn
+
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="backHistory"
-    />
-    {{ titleReport }}
-  </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="q-pa-md q-gutter-y-sm">
       <q-toolbar style="padding: 0">
-        <div class="q-pr-xs" v-if="typeReport === 'time-records'">
+        <div class="q-pr-xs">
-          <q-select
-            class="bg-white"
-            outlined
-            dense
-            v-model="filterType"
-            :options="filterTypeOption"
-            emit-value
-            map-options
-            option-label="name"
-            option-value="id"
-            use-input
-            style="width: 230px"
-            @update:model-value="updateFilterType"
-            @filter="(inputValue: any,
-      doneFn: Function) => filterFnOptions(inputValue, doneFn,'filterType')"
-            ><template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
-        </div>
-
-        <div class="q-pr-xs" v-if="typeReport === 'leaveday'">
           <q-select
             outlined
             dense
@@ -372,7 +237,7 @@ onMounted(() => {
             style="width: 230px"
             @update:model-value="updateLeaveday"
             @filter="(inputValue: any,
-      doneFn: Function) => filterFnOptions(inputValue, doneFn,'employeeClass')"
+        doneFn: Function) => filterFnOptions(inputValue, doneFn,'employeeClass')"
             ><template v-slot:no-option>
               <q-item>
                 <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
@@ -380,7 +245,7 @@ onMounted(() => {
             </template>
           </q-select>
         </div>
-        <div class="q-pr-xs" v-if="typeReport === 'leaveday'">
+        <div class="q-pr-xs">
           <q-select
             outlined
             dense
@@ -394,7 +259,7 @@ onMounted(() => {
             style="width: 230px"
             @update:model-value="updateLeaveday"
             @filter="(inputValue: any,
-      doneFn: Function) => filterFnOptions(inputValue, doneFn,'yearType')"
+        doneFn: Function) => filterFnOptions(inputValue, doneFn,'yearType')"
             ><template v-slot:no-option>
               <q-item>
                 <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
@@ -402,7 +267,6 @@ onMounted(() => {
             </template>
           </q-select>
         </div>
-
         <q-space />
         <div class="q-py-xs">
           <q-btn flat round color="primary" icon="download">
@@ -421,7 +285,7 @@ onMounted(() => {
                 <q-item
                   clickable
                   v-close-popup
-                  @click="genReportXLSX(dataDetail)"
+                  @click="genReportXLSX(detailReport)"
                 >
                   <q-item-section avatar
                     ><q-icon color="green" name="mdi-file-excel"
@@ -431,126 +295,10 @@ onMounted(() => {
               </q-list>
             </q-menu>
           </q-btn>
-          <!-- <q-btn unelevated color="primary" @click="modalFull = true">
-            <q-icon left size="2em" name="mdi-eye-outline" />
-            <div>แสดงรายงาน</div>
-          </q-btn> -->
-        </div>
-      </q-toolbar>
-      <q-toolbar
-        v-if="typeReport === 'time-records'"
-        class="q-pa-sm bg-grey-2"
-        style="border-radius: 5px"
-      >
-        <div class="q-pr-xs" v-if="filterType === 'daily'">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="date"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            week-start="0"
-            @update:model-value="updateDte"
-          >
-            <template #year="{ year }">{{ year + 543 }}</template>
-            <template #year-overlay-value="{ value }">{{
-              parseInt(value + 543)
-            }}</template>
-            <template #trigger>
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                borderless
-                :model-value="date ? date2Thai(date) : null"
-                :label="`${'วันที่'}`"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" color="primary">
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-        <div class="q-pr-xs" v-if="filterType === 'monthly'">
-          <datepicker
-            v-model="dateMonth"
-            :locale="'th'"
-            autoApply
-            month-picker
-            :enableTimePicker="false"
-            @update:model-value="updateMonth"
-          >
-            <template #year="{ year }">{{ year + 543 }}</template>
-            <template #year-overlay-value="{ value }">{{
-              parseInt(value + 543)
-            }}</template>
-            <template #trigger>
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                borderless
-                :label="`${'เดือน'}`"
-                :model-value="monthYearThai(dateMonth)"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    color="primary"
-                  ></q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-        <div class="q-pr-xs" v-if="filterType === 'yearly'">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="year"
-            class="col-2"
-            :locale="'th'"
-            autoApply
-            year-picker
-            :enableTimePicker="false"
-            @update:model-value="updateYear"
-          >
-            <template #year="{ year }">{{ year + 543 }}</template>
-            <template #year-overlay-value="{ value }">{{
-              parseInt(value + 543)
-            }}</template>
-            <template #trigger>
-              <q-input
-                class="bg-white"
-                dense
-                lazy-rules
-                outlined
-                :model-value="Number(year) + 543"
-                :label="`${'ปีงบประมาณ'}`"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
         </div>
       </q-toolbar>
 
-      <q-toolbar
+      <q-toolbar class="q-pa-sm bg-grey-2" style="border-radius: 5px">
-        v-if="typeReport === 'leaveday'"
-        class="q-pa-sm bg-grey-2"
-        style="border-radius: 5px"
-      >
         <div class="q-pr-xs">
           <datepicker
             v-model="year"
@@ -584,35 +332,6 @@ onMounted(() => {
               </q-input>
             </template>
           </datepicker>
-          <!-- <datepicker
-            menu-class-name="modalfix"
-            v-model="year"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            year-picker
-          >
-            <template #year="{ year }">{{ year + 543 }}</template>
-            <template #year-overlay-value="{ value }">{{
-              parseInt(value + 543)
-            }}</template>
-            <template #trigger>
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                lazy-rules
-                borderless
-                :model-value="dateEnd ? date2Thai(dateEnd) : null"
-                :label="`${'ถึงวันที่'}`"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" color="primary">
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker> -->
         </div>
         <div class="q-pr-xs">
           <datepicker
@@ -771,7 +490,7 @@ onMounted(() => {
   </q-card>
 
   <!-- Dialog Full Screen -->
-  <q-dialog
+  <!-- <q-dialog
     v-model="modalFull"
     persistent
     :maximized="true"
@@ -856,7 +575,7 @@ onMounted(() => {
         </div>
       </div>
     </q-card>
-  </q-dialog>
+  </q-dialog> -->
 </template>
 
 <style scoped></style>

src/modules/09_leave/router.ts

@@ -1,8 +1,5 @@
 const workMain = () => import("@/modules/09_leave/views/WorkingMain.vue");
 const leaveMain = () => import("@/modules/09_leave/views/LeaveListMain.vue");
-const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue");
-const reportDetail = () =>
-  import("@/modules/09_leave/components/3_Report/DetailReport.vue");
 const leaveDetail = () =>
   import("@/modules/09_leave/components/2_Leave/DetailLeave.vue");
 const leaveDetailReject = () =>
@@ -12,7 +9,8 @@ const ChangeRoundMain = () =>
   import("@/modules/09_leave/views/ChangeRoundMain.vue");
 const SpecialTimeMain = () =>
   import("@/modules/09_leave/views/SpecialTimeMain.vue");
-
+const leaveReport = () =>
+  import("@/modules/09_leave/components/3_Report/LeaveReport.vue");
 export default [
   {
     path: "/round-time",
@@ -95,23 +93,33 @@ export default [
     },
   },
   {
-    path: "/statistics-report",
+    path: "/leave-report",
-    name: "/statistics-report",
+    name: "/leave-report",
-    component: reportMain,
+    component: leaveReport,
-    meta: {
-      Auth: true,
-      Key: [9],
-      Role: "coin",
-    },
-  },
-  {
-    path: "/statistics-report/:type",
-    name: "/statistics-report-detail",
-    component: reportDetail,
     meta: {
       Auth: true,
       Key: [9],
       Role: "coin",
     },
   },
+  // {
+  //   path: "/statistics-report",
+  //   name: "/statistics-report",
+  //   component: reportMain,
+  //   meta: {
+  //     Auth: true,
+  //     Key: [9],
+  //     Role: "coin",
+  //   },
+  // },
+  // {
+  //   path: "/statistics-report/:type",
+  //   name: "/statistics-report-detail",
+  //   component: reportDetail,
+  //   meta: {
+  //     Auth: true,
+  //     Key: [9],
+  //     Role: "coin",
+  //   },
+  // },
 ];

src/modules/09_leave/views/ReportMain.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-
-function nextPage(type: string) {
-  router.push(`/statistics-report/${type}`);
-}
-</script>
-<template>
-  <div class="toptitle text-dark col-12 row items-center">รายงานสถิติ</div>
-  <div>
-    <q-card flat bordered class="col-12 q-mt-sm">
-      <div class="q-pa-md">
-        <q-item
-          clickable
-          dense
-          class="hover-green"
-          @click="nextPage('time-records')"
-        >
-          <q-item-section avatar>
-            <q-icon color="primary" name="mdi-file" size="xs" />
-          </q-item-section>
-          <q-item-section class="text-dark">
-            รายงานสรุปบันทึกการลงเวลาปฏิบัติงาน
-          </q-item-section>
-        </q-item>
-
-        <q-item
-          clickable
-          dense
-          class="hover-green"
-          @click="nextPage('leaveday')"
-        >
-          <q-item-section avatar>
-            <q-icon color="primary" name="mdi-file" size="xs" />
-          </q-item-section>
-          <q-item-section class="text-dark"> บัญชีแสดงวันลา </q-item-section>
-        </q-item>
-      </div>
-    </q-card>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.q-item.hover-green:hover {
-  background-color: #d5f1ee57;
-  border-radius: 2px;
-}
-.q-item.hover-green {
-  padding: 10px;
-}
-</style>

src/modules/09_leave/views/WorkingMain.vue

@@ -4,13 +4,31 @@ import { ref } from "vue";
 /** import Components */
 import Tab1 from "@/modules/09_leave/components/1_Work/Tab1.vue";
 import Tab2 from "@/modules/09_leave/components/1_Work/Tab2.vue";
+import DialogReport from "@/modules/09_leave/components/1_Work/DialogReport.vue";
 
 const tab = ref("1");
+
+const modalReport = ref<boolean>(false);
+
+function onClickOpenDialog() {
+  modalReport.value = !modalReport.value;
+}
 </script>
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
+  <div class="row">
-    รายการลงเวลาปฏิบัติงาน
+    <span class="toptitle text-dark item-center">รายการลงเวลาปฏิบัติงาน</span>
+    <q-space />
+    <q-btn
+      dense
+      flat
+      class="text-primary"
+      label="รายงานสถิติการลา"
+      @click="onClickOpenDialog"
+    >
+      <q-tooltip>รายงานสถิติการลา</q-tooltip>
+    </q-btn>
   </div>
+
   <div>
     <q-card bordered flat>
       <q-tabs
@@ -40,6 +58,8 @@ const tab = ref("1");
       </q-tab-panels>
     </q-card>
   </div>
+
+  <DialogReport :modal="modalReport" :close="onClickOpenDialog" />
 </template>
 
 <style scoped></style>