ปรับ Code การลาลงเวลา

2024-11-25 13:18:11 +07:00 · 2024-11-25 13:18:11 +07:00 · 99419877c4
commit 99419877c4
parent d150dedb81
42 changed files with 123 additions and 148 deletions
--- a/src/modules/09_leave/components/01_RoundTime/DialogForm.vue
+++ b/src/modules/09_leave/components/01_RoundTime/DialogForm.vue
@ -16,7 +16,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 const $q = useQuasar();

 const mixin = useCounterMixin();
-const { dialogConfirm, success, messageError } = mixin;
+const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
 const isRead = defineModel<boolean>("isRead", { required: true });
 /** propsData จาก RoundMain */
 const props = defineProps({
@ -104,22 +104,25 @@ function onSubmit() {

 /** Function สร้างรอบการปฏิบัติงาน*/
 async function postRoundDuty() {
+  showLoader();
  await http
    .post(config.API.roundDutytime(), formData)
-    .then(() => {
+    .then(async () => {
+      await props.fetchData?.();
+      await props.closeDialog?.();
      success($q, "บันทึกข้อมูล");
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
-      props.fetchData?.();
-      props.closeDialog?.();
+      hideLoader();
    });
 }

 /** Functiom แก้ไข้รอบการปฏิบัติงาน*/
 async function putRoundDuty(id: string) {
+  showLoader();
  const data = {
    description: formData.description,
    isDefault: formData.isDefault,
@ -127,15 +130,16 @@ async function putRoundDuty(id: string) {
  };
  await http
    .put(config.API.roundDutytimeByid(id), data)
-    .then(() => {
+    .then(async () => {
+      await props.fetchData?.();
+      await props.closeDialog?.();
      success($q, "บันทึกข้อมูล");
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
-      props.fetchData?.();
-      props.closeDialog?.();
+      hideLoader();
    });
 }

--- a/src/modules/09_leave/components/02_WorkList/DialogDetail.vue
+++ b/src/modules/09_leave/components/02_WorkList/DialogDetail.vue
@ -8,7 +8,7 @@ import { useQuasar } from "quasar";
 import type { FormDetail } from "@/modules/09_leave/interface/response/work";

 /** importComponents*/
-import Map from "@/modules/09_leave/components/1_Work/DialogMap.vue";
+import Map from "@/modules/09_leave/components/02_WorkList/DialogMap.vue";

 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
--- a/src/modules/09_leave/components/02_WorkList/DialogEdit.vue
+++ b/src/modules/09_leave/components/02_WorkList/DialogEdit.vue
@ -65,7 +65,9 @@ async function onClickSave() {
      showLoader();
      await http
        .put(config.API.leaveEditCheckin(props.detail?.id), body)
-        .then(() => {
+        .then(async () => {
+          await props.fetchData?.();
+          await props.close?.();
          success($q, "บันทึกข้อมูลสำเร็จ");
        })
        .catch((err) => {
@ -73,14 +75,12 @@ async function onClickSave() {
        })
        .finally(() => {
          hideLoader();
-          props.fetchData?.();
-          props.close?.();
        });
    });
  }
 }

-function filterFnOptions(val: any, update: Function) {
+function filterFnOptions(val: string, update: Function) {
  update(() => {
    options.value = optionsMain.value.filter(
      (v: DataOption) => v.name.indexOf(val) > -1
@ -143,7 +143,7 @@ watch(
              :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
              hide-bottom-space
              use-input
-              @filter="(inputValue: any,doneFn: Function) => filterFnOptions(inputValue, doneFn)"
+              @filter="(inputValue: string,doneFn: Function) => filterFnOptions(inputValue, doneFn)"
              ><template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
@ -178,7 +178,7 @@ watch(
              :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
              hide-bottom-space
              use-input
-              @filter="(inputValue: any,doneFn: Function) => filterFnOptions(inputValue, doneFn)"
+              @filter="(inputValue: string,doneFn: Function) => filterFnOptions(inputValue, doneFn)"
              ><template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
--- a/src/modules/09_leave/components/02_WorkList/DialogMap.vue
+++ b/src/modules/09_leave/components/02_WorkList/DialogMap.vue
--- a/src/modules/09_leave/components/02_WorkList/DialogReport.vue
+++ b/src/modules/09_leave/components/02_WorkList/DialogReport.vue
@ -21,8 +21,8 @@ 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 apiGenReport =
+//   "https://report-server.frappet.synology.me/api/v1/report-template/xlsx";

 const props = defineProps({
  modal: {
@ -126,7 +126,7 @@ function filterFnOptions(val: any, update: Function) {
 */
 async function genReportXLSX(data: any) {
  await axios
-    .post(apiGenReport, data, {
+    .post(`${config.API.reportTemplate}/xlsx`, data, {
      headers: {
        accept:
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
@ -134,9 +134,9 @@ async function genReportXLSX(data: any) {
      },
      responseType: "blob",
    })
-    .then((res) => {
+    .then(async (res) => {
      const blob = new Blob([res.data]);
-      downloadReport(blob, "xlsx");
+      await downloadReport(blob, "xlsx");
    })
    .catch(async (e) => {
      messageError($q, JSON.parse(await e.response.data.text()));
--- a/src/modules/09_leave/components/02_WorkList/Tab1.vue
+++ b/src/modules/09_leave/components/02_WorkList/Tab1.vue
@ -12,8 +12,8 @@ import type {
 } from "@/modules/09_leave/interface/response/work";

 /** importComponents */
-import ToolBar from "@/modules/09_leave/components/1_Work/ToolBar.vue";
-import TableList from "@/modules/09_leave/components/1_Work/TableList.vue";
+import ToolBar from "@/modules/09_leave/components/02_WorkList/ToolBar.vue";
+import TableList from "@/modules/09_leave/components/02_WorkList/TableList.vue";

 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
@ -121,6 +121,7 @@ const rows = ref<TableRowsTime[]>([]);

 /** function เรียกข้อมูล รายการลงเวลาที่ประมวลผลแล้ว*/
 async function fetchListTimeRecord() {
+  rows.value = [];
  const date = new Date(workStore.selectDate as string | Date);
  const querySting = {
    startDate: dateToISO(date), //*วันที่เริ่ม
--- a/src/modules/09_leave/components/02_WorkList/Tab2.vue
+++ b/src/modules/09_leave/components/02_WorkList/Tab2.vue
@ -12,8 +12,8 @@ import type {
 } from "@/modules/09_leave/interface/response/work";

 /** importComponents */
-import ToolBarDate from "@/modules/09_leave/components/1_Work/ToolBarDate.vue";
-import TableList from "@/modules/09_leave/components/1_Work/TableList.vue";
+import ToolBarDate from "@/modules/09_leave/components/02_WorkList/ToolBarDate.vue";
+import TableList from "@/modules/09_leave/components/02_WorkList/TableList.vue";

 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
@ -102,6 +102,7 @@ const maxPage = ref<number>(1);

 /** function เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
 async function fetchListLogRecord() {
+  rows.value = [];
  showLoader();
  const date = new Date(workStore.selectDate as string | Date);
  await http
@ -132,7 +133,6 @@ async function fetchListLogRecord() {
    })
    .catch((err) => {
      messageError($q, err);
-      rows.value = [];
    })
    .finally(() => {
      hideLoader();
--- a/src/modules/09_leave/components/02_WorkList/TableList.vue
+++ b/src/modules/09_leave/components/02_WorkList/TableList.vue
@ -5,8 +5,8 @@ import { checkPermission } from "@/utils/permissions";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";

 /** importComponents */
-import DialogDetail from "@/modules/09_leave/components/1_Work/DialogDetail.vue";
-import DialogEdit from "@/modules/09_leave/components/1_Work/DialogEdit.vue";
+import DialogDetail from "@/modules/09_leave/components/02_WorkList/DialogDetail.vue";
+import DialogEdit from "@/modules/09_leave/components/02_WorkList/DialogEdit.vue";

 const workStore = useWorklistDataStore();
 const props = defineProps({
@ -44,7 +44,7 @@ const emit = defineEmits(["update:pagination"]);

 /** ข้อมูล popup */
 const modal = ref<boolean>(false);
-const dataDetail = ref<any>([]);
+const dataDetail = ref<any>();
 const modalEdit = ref<boolean>(false);

 /** pagination */
--- a/src/modules/09_leave/components/02_WorkList/ToolBar.vue
+++ b/src/modules/09_leave/components/02_WorkList/ToolBar.vue
--- a/src/modules/09_leave/components/02_WorkList/ToolBarDate.vue
+++ b/src/modules/09_leave/components/02_WorkList/ToolBarDate.vue
--- a/src/modules/09_leave/components/03_ChangeRound/DialogForm.vue
+++ b/src/modules/09_leave/components/03_ChangeRound/DialogForm.vue
--- a/src/modules/09_leave/components/04_SpecialTime/DialogApprove.vue
+++ b/src/modules/09_leave/components/04_SpecialTime/DialogApprove.vue
--- a/src/modules/09_leave/components/04_SpecialTime/Table.vue
+++ b/src/modules/09_leave/components/04_SpecialTime/Table.vue
--- a/src/modules/09_leave/components/05_Leave/Calendar.vue
+++ b/src/modules/09_leave/components/05_Leave/Calendar.vue
--- a/src/modules/09_leave/components/05_Leave/DetailLeave.vue
+++ b/src/modules/09_leave/components/05_Leave/DetailLeave.vue
@ -16,18 +16,18 @@ import type { LeaveType } from "@/modules/09_leave/interface/response/leave";

 /** importForm*/
 import DialogReason from "@/components/Dialogs/PopupReason.vue";
-import FormMain from "@/modules/09_leave/components/2_Leave/formDetail/formMain.vue"; // from ซ้าย
-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"; //ลาพักผ่อน
-import FormUpasom from "@/modules/09_leave/components/2_Leave/formDetail/formUpasom.vue"; // ลาอุปสมบท
-import FormHajj from "@/modules/09_leave/components/2_Leave/formDetail/formHajj.vue"; //ลาประกอบพิธีฮัจญ์
-import FormCheckSelect from "@/modules/09_leave/components/2_Leave/formDetail/formCheckSelect.vue"; //ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล
-import FormStudy from "@/modules/09_leave/components/2_Leave/formDetail/formStudy.vue"; //ลาไปศึกษา
-import FormLeaveToTraining from "@/modules/09_leave/components/2_Leave/formDetail/formLeaveToTraining.vue"; // ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน
-import FormLeaveToWorkInternational from "@/modules/09_leave/components/2_Leave/formDetail/formLeaveToWorkInternational.vue"; // ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
-import FormSpouse from "@/modules/09_leave/components/2_Leave/formDetail/formSpouse.vue"; // ลาติดตามคู่สมรส
-import FormVocationalRehabilitation from "@/modules/09_leave/components/2_Leave/formDetail/formVocationalRehabilitation.vue"; //ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
+import FormMain from "@/modules/09_leave/components/05_Leave/formDetail/formMain.vue"; // from ซ้าย
+import FormLeave from "@/modules/09_leave/components/05_Leave/formDetail/formLeave.vue"; // ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
+import FormChildbirth from "@/modules/09_leave/components/05_Leave/formDetail/formChildbirth.vue"; // ลาไปช่วยเหลือภริยาที่คลอดบุตร
+import FormHoliday from "@/modules/09_leave/components/05_Leave/formDetail/formHoliday.vue"; //ลาพักผ่อน
+import FormUpasom from "@/modules/09_leave/components/05_Leave/formDetail/formUpasom.vue"; // ลาอุปสมบท
+import FormHajj from "@/modules/09_leave/components/05_Leave/formDetail/formHajj.vue"; //ลาประกอบพิธีฮัจญ์
+import FormCheckSelect from "@/modules/09_leave/components/05_Leave/formDetail/formCheckSelect.vue"; //ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล
+import FormStudy from "@/modules/09_leave/components/05_Leave/formDetail/formStudy.vue"; //ลาไปศึกษา
+import FormLeaveToTraining from "@/modules/09_leave/components/05_Leave/formDetail/formLeaveToTraining.vue"; // ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน
+import FormLeaveToWorkInternational from "@/modules/09_leave/components/05_Leave/formDetail/formLeaveToWorkInternational.vue"; // ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
+import FormSpouse from "@/modules/09_leave/components/05_Leave/formDetail/formSpouse.vue"; // ลาติดตามคู่สมรส
+import FormVocationalRehabilitation from "@/modules/09_leave/components/05_Leave/formDetail/formVocationalRehabilitation.vue"; //ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
 import WorkFlow from "@/components/Workflow/Main.vue";

 /** use */
--- a/src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue
+++ b/src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue
@ -19,18 +19,18 @@ import type { FremData } from "@/modules/09_leave/interface/request/leave";

 /** importForm*/
 import DialogReason from "@/components/Dialogs/PopupReason.vue";
-import FormMain from "@/modules/09_leave/components/2_Leave/formDetail/formMain.vue"; // from ซ้าย
-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"; //ลาพักผ่อน
-import FormUpasom from "@/modules/09_leave/components/2_Leave/formDetail/formUpasom.vue"; // ลาอุปสมบท
-import FormHajj from "@/modules/09_leave/components/2_Leave/formDetail/formHajj.vue"; //ลาประกอบพิธีฮัจญ์
-import FormCheckSelect from "@/modules/09_leave/components/2_Leave/formDetail/formCheckSelect.vue"; //ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล
-import FormStudy from "@/modules/09_leave/components/2_Leave/formDetail/formStudy.vue"; //ลาไปศึกษา
-import FormLeaveToTraining from "@/modules/09_leave/components/2_Leave/formDetail/formLeaveToTraining.vue"; // ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน
-import FormLeaveToWorkInternational from "@/modules/09_leave/components/2_Leave/formDetail/formLeaveToWorkInternational.vue"; // ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
-import FormSpouse from "@/modules/09_leave/components/2_Leave/formDetail/formSpouse.vue"; // ลาติดตามคู่สมรส
-import FormVocationalRehabilitation from "@/modules/09_leave/components/2_Leave/formDetail/formVocationalRehabilitation.vue"; //ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
+import FormMain from "@/modules/09_leave/components/05_Leave/formDetail/formMain.vue"; // from ซ้าย
+import FormLeave from "@/modules/09_leave/components/05_Leave/formDetail/formLeave.vue"; // ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
+import FormChildbirth from "@/modules/09_leave/components/05_Leave/formDetail/formChildbirth.vue"; // ลาไปช่วยเหลือภริยาที่คลอดบุตร
+import FormHoliday from "@/modules/09_leave/components/05_Leave/formDetail/formHoliday.vue"; //ลาพักผ่อน
+import FormUpasom from "@/modules/09_leave/components/05_Leave/formDetail/formUpasom.vue"; // ลาอุปสมบท
+import FormHajj from "@/modules/09_leave/components/05_Leave/formDetail/formHajj.vue"; //ลาประกอบพิธีฮัจญ์
+import FormCheckSelect from "@/modules/09_leave/components/05_Leave/formDetail/formCheckSelect.vue"; //ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล
+import FormStudy from "@/modules/09_leave/components/05_Leave/formDetail/formStudy.vue"; //ลาไปศึกษา
+import FormLeaveToTraining from "@/modules/09_leave/components/05_Leave/formDetail/formLeaveToTraining.vue"; // ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน
+import FormLeaveToWorkInternational from "@/modules/09_leave/components/05_Leave/formDetail/formLeaveToWorkInternational.vue"; // ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
+import FormSpouse from "@/modules/09_leave/components/05_Leave/formDetail/formSpouse.vue"; // ลาติดตามคู่สมรส
+import FormVocationalRehabilitation from "@/modules/09_leave/components/05_Leave/formDetail/formVocationalRehabilitation.vue"; //ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
 import WorkFlow from "@/components/Workflow/Main.vue";

 /** use */
--- a/src/modules/09_leave/components/05_Leave/Tab1.vue
+++ b/src/modules/09_leave/components/05_Leave/Tab1.vue
@ -8,14 +8,11 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";

 /**importType*/
-import type {
-  QuerySting,
-  DateFilter,
-} from "@/modules/09_leave/interface/request/leave";
+import type { QuerySting } from "@/modules/09_leave/interface/request/leave";

-import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
-import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBarLeave.vue";
-import CalendarView from "@/modules/09_leave/components/2_Leave/Calendar.vue";
+import TableList from "@/modules/09_leave/components/05_Leave/TableList.vue";
+import ToolBar from "@/modules/09_leave/components/05_Leave/ToolBarLeave.vue";
+import CalendarView from "@/modules/09_leave/components/05_Leave/Calendar.vue";

 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
@ -49,13 +46,13 @@ async function fecthLeaveList() {
    showLoader();
    await http
      .post(config.API.leaveList(), querySting)
-      .then((res) => {
+      .then(async (res) => {
        const data = res.data.result;
        totalList.value = Math.ceil(
          res.data.result.total / querySting.pageSize
        );
        total.value = res.data.result.total;
-        leaveStore.fetchListLeave(data.data); /** ส่งข้อมูลไป stores*/
+        await leaveStore.fetchListLeave(data.data); /** ส่งข้อมูลไป stores*/
      })
      .catch((err) => {
        messageError($q, err);
@ -75,8 +72,7 @@ async function fetchOption() {
    })
    .catch((err) => {
      messageError($q, err);
-    })
-    .finally(() => {});
+    });
 }

 function getSearch() {
@ -95,13 +91,12 @@ watch(
  () => leaveStore.tabView,
  async () => {
    leaveStore.tabView === "list" &&
-      (await fecthLeaveList(), await fetchOption());
+      (await Promise.all([fetchOption(), fecthLeaveList()]));
  }
 );

 onMounted(async () => {
-  await fetchOption();
-  await fecthLeaveList();
+  await Promise.all([fetchOption(), fecthLeaveList()]);
 });
 </script>
 <template>
@ -144,7 +139,12 @@ onMounted(async () => {
    </q-tabs>
  </q-toolbar>
  <div v-if="leaveStore.tabView === 'list'">
-    <ToolBar :dataToobar="dataToobar" v-model:query-sting="querySting" :get-list="fecthLeaveList" :get-search="getSearch"/>
+    <ToolBar
+      :dataToobar="dataToobar"
+      v-model:query-sting="querySting"
+      :get-list="fecthLeaveList"
+      :get-search="getSearch"
+    />
    <TableList
      v-model:total="total"
      v-model:total-list="totalList"
--- a/src/modules/09_leave/components/05_Leave/Tab2.vue
+++ b/src/modules/09_leave/components/05_Leave/Tab2.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted,watch } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";

 import http from "@/plugins/http";
@ -13,8 +13,8 @@ import type {
  DateFilter,
 } from "@/modules/09_leave/interface/request/leave";

-import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
-import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBarLeave.vue";
+import TableList from "@/modules/09_leave/components/05_Leave/TableList.vue";
+import ToolBar from "@/modules/09_leave/components/05_Leave/ToolBarLeave.vue";

 const mixin = useCounterMixin();
 const leaveStore = useLeavelistDataStore();
@ -63,28 +63,6 @@ async function fecthLeaveList() {
        hideLoader();
      });
  }
-  // const data = APIDATA.data;
-}
-
-/**
- *
- * @param newPage หน้า
- * @param pageSize จำนวนต่อแถว
- * @param dateFilter ข้อมูลค้นหา
- */
-async function updatePaging(
-  newPage: number,
-  pageSize: number,
-  dateFilter: DateFilter
-) {
-  querySting.year = dateFilter ? dateFilter.year : querySting.year;
-  querySting.type = dateFilter ? dateFilter.type : querySting.type;
-  querySting.status = dateFilter ? dateFilter.status : querySting.status;
-  querySting.page = newPage;
-  querySting.pageSize = pageSize ? pageSize : querySting.pageSize;
-  querySting.keyword = dateFilter ? dateFilter.keyword : querySting.keyword;
-
-  await fecthLeaveList();
 }

 /** function เรียกข้อมูลสถานะ*/
@ -96,8 +74,7 @@ async function fetchOption() {
    })
    .catch((err) => {
      messageError($q, err);
-    })
-    .finally(() => {});
+    });
 }

 function getSearch() {
@ -113,8 +90,7 @@ watch(
 );

 onMounted(async () => {
-  await fetchOption();
-  await fecthLeaveList();
+  await Promise.all([fetchOption(), fecthLeaveList()]);
 });
 </script>
 <template>
--- a/src/modules/09_leave/components/05_Leave/TableList.vue
+++ b/src/modules/09_leave/components/05_Leave/TableList.vue
@ -261,7 +261,7 @@ onMounted(() => {
    dense
    class="custom-header-table"
    :visible-columns="leaveStore.visibleColumns"
-    :rows-per-page-options="[1, 25, 50, 100]"
+    :rows-per-page-options="[10, 25, 50, 100]"
    @update:pagination="updatePagination"
  >
    <template v-slot:header="props">
@ -290,9 +290,7 @@ onMounted(() => {
        <q-td v-for="col in props.cols" :key="col.name" :props="props">
          <div v-if="col.name == 'no'">
            {{
-              (pagination.page - 1) * pagination.pageSize +
-              props.rowIndex +
-              1
+              (pagination.page - 1) * pagination.pageSize + props.rowIndex + 1
            }}
          </div>
          <div v-else-if="col.name == 'leaveTypeName'">
--- a/src/modules/09_leave/components/05_Leave/ToolBarLeave.vue
+++ b/src/modules/09_leave/components/05_Leave/ToolBarLeave.vue
--- a/src/modules/09_leave/components/05_Leave/formDetail/formCheckSelect.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formCheckSelect.vue
--- a/src/modules/09_leave/components/05_Leave/formDetail/formChildbirth.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formChildbirth.vue
--- a/src/modules/09_leave/components/05_Leave/formDetail/formHajj.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formHajj.vue
--- a/src/modules/09_leave/components/05_Leave/formDetail/formHoliday.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formHoliday.vue
--- a/src/modules/09_leave/components/05_Leave/formDetail/formLeave.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formLeave.vue
--- a/src/modules/09_leave/components/05_Leave/formDetail/formLeaveToTraining.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formLeaveToTraining.vue
--- a/src/modules/09_leave/components/05_Leave/formDetail/formLeaveToWorkInternational.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formLeaveToWorkInternational.vue
--- a/src/modules/09_leave/components/05_Leave/formDetail/formMain.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formMain.vue
--- a/src/modules/09_leave/components/05_Leave/formDetail/formSpouse.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formSpouse.vue
--- a/src/modules/09_leave/components/05_Leave/formDetail/formStudy.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formStudy.vue
--- a/src/modules/09_leave/components/05_Leave/formDetail/formUpasom.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formUpasom.vue
--- a/src/modules/09_leave/components/05_Leave/formDetail/formVocationalRehabilitation.vue
+++ b/src/modules/09_leave/components/05_Leave/formDetail/formVocationalRehabilitation.vue
--- a/src/modules/09_leave/components/3_Report/LeaveReport.vue
+++ b/src/modules/09_leave/components/3_Report/LeaveReport.vue
@ -1,499 +0,0 @@
-<script setup lang="ts">
-import axios from "axios";
-import { ref, onMounted } from "vue";
-import { VuePDF, usePDF } from "@tato30/vue-pdf";
-import { useQuasar } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { checkPermission } from "@/utils/permissions";
-import { useCounterMixin } from "@/stores/mixin";
-
-import type { DataOption } from "@/modules/09_leave/interface/index/Main";
-
-/** use*/
-const mixin = useCounterMixin();
-const $q = useQuasar();
-const { showLoader, hideLoader, date2Thai, dateToISO, messageError } = mixin;
-
-const apiGenReport =
-  "https://report-server.frappet.synology.me/api/v1/report-template/xlsx";
-
-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 employeeClassMain = ref<DataOption[]>([
-  { id: "employee", name: "ลูกจ้างประจำ" },
-  { id: "officer", name: "ข้าราชการ" },
-]);
-const yearTypeOptionMain = ref<DataOption[]>([
-  { id: "FULL", name: "รายปี" },
-  { id: "FIRSTHAFT", name: "ครึ่งปีแรก" },
-  { id: "SECONDHAFT", name: "ครึ่งปีหลัง" },
-]);
-const employeeClassOption = ref<DataOption[]>(employeeClassMain.value);
-const yearTypeOptionOption = ref<DataOption[]>(yearTypeOptionMain.value);
-
-const detailReport = ref<any>();
-
-/** function อัปเดทบัญชีแสดงวันลา */
-async function updateLeaveday() {
-  if (yearType.value === "FULL") {
-    dateStart.value = new Date(year.value - 1, 9, 1);
-    dateEnd.value = new Date(year.value, 8, 30);
-  } else if (yearType.value === "FIRSTHAFT") {
-    dateStart.value = new Date(year.value - 1, 9, 1);
-    dateEnd.value = new Date(year.value, 2, 31);
-  } else if (yearType.value === "SECONDHAFT") {
-    dateStart.value = new Date(year.value, 3, 1);
-    dateEnd.value = new Date(year.value, 8, 30);
-  }
-
-  fetchLeaveday(
-    employeeClass.value,
-    yearType.value,
-    dateStart.value,
-    dateEnd.value
-  );
-}
-
-/**
- * function เรียกข้อมูลบัญชีแสดงวันลา
- * @param type สถานภาพ
- * @param year ปั
- * @param startDate วันเริ่มต้น
- * @param endDate วันสิ้นสุด
- */
-async function fetchLeaveday(
-  type: string,
-  year: string,
-  startDate: Date,
-  endDate: Date
-) {
-  showLoader();
-  const body = {
-    type: year === "FULL" ? "FULL" : "HAFT",
-    startDate: dateToISO(startDate),
-    endDate: dateToISO(endDate),
-  };
-
-  await http
-    .post(config.API.leaveReportLeaveday(type), body)
-    .then((res) => {
-      const data = res.data.result;
-      data && genReport(data);
-      !data && hideLoader();
-      detailReport.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-      hideLoader();
-    })
-    .finally(() => {});
-}
-
-/**
- * function เรียกไฟล์ PDF
- * @param data  ข้อมูลบัญชีวันลา
- */
-async function genReport(data: any) {
-  await axios
-    .post(apiGenReport, data, {
-      headers: {
-        accept: "application/pdf",
-        "content-Type": "application/json",
-      },
-      responseType: "blob",
-    })
-    .then(async (res) => {
-      const blob = new Blob([res.data]);
-      const objectUrl = URL.createObjectURL(blob);
-      fileBlob.value = blob;
-      const pdfData = await usePDF(`${objectUrl}`);
-
-      setTimeout(() => {
-        pdfSrc.value = pdfData.pdf.value;
-        numOfPages.value = pdfData.pages.value;
-      }, 1500);
-    })
-    .catch(async (e) => {
-      messageError($q, JSON.parse(await e.response.data.text()));
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
-    });
-}
-
-/**
- * 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(async (e) => {
-      messageError($q, JSON.parse(await e.response.data.text()));
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * function Download ไฟล์
- * @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);
-}
-
-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 ค้นหาข้อมูล 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 text-dark col-12 row items-center">บัญชีแสดงวันลา</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">
-          <q-select
-            outlined
-            dense
-            v-model="employeeClass"
-            :options="employeeClassOption"
-            label="สถานภาพ"
-            emit-value
-            map-options
-            option-label="name"
-            option-value="id"
-            use-input
-            style="width: 230px"
-            @update:model-value="updateLeaveday"
-            @filter="(inputValue: any,
-        doneFn: Function) => filterFnOptions(inputValue, doneFn,'employeeClass')"
-            ><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">
-          <q-select
-            outlined
-            dense
-            v-model="yearType"
-            :options="yearTypeOptionOption"
-            emit-value
-            map-options
-            option-label="name"
-            option-value="id"
-            use-input
-            style="width: 230px"
-            @update:model-value="updateLeaveday"
-            @filter="(inputValue: any,
-        doneFn: Function) => filterFnOptions(inputValue, doneFn,'yearType')"
-            ><template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
-        </div>
-        <q-space />
-        <div class="q-py-xs">
-          <q-btn
-            flat
-            round
-            color="primary"
-            icon="download"
-            v-if="checkPermission($route)?.attrIsGet"
-          >
-            <q-menu>
-              <q-list style="min-width: 150px">
-                <q-item
-                  clickable
-                  v-close-popup
-                  @click="downloadReport(fileBlob, 'pdf')"
-                >
-                  <q-item-section avatar
-                    ><q-icon color="red" name="mdi-file-pdf"
-                  /></q-item-section>
-                  <q-item-section>ไฟล์ .PDF</q-item-section>
-                </q-item>
-                <q-item
-                  clickable
-                  v-close-popup
-                  @click="genReportXLSX(detailReport)"
-                >
-                  <q-item-section avatar
-                    ><q-icon color="green" name="mdi-file-excel"
-                  /></q-item-section>
-                  <q-item-section>ไฟล์ .xlsx</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-        </div>
-      </q-toolbar>
-
-      <q-toolbar class="q-pa-sm bg-grey-2" style="border-radius: 5px">
-        <div class="q-pr-xs">
-          <datepicker
-            v-model="year"
-            :locale="'th'"
-            autoApply
-            year-picker
-            :enableTimePicker="false"
-            @update:model-value="updateLeaveday"
-          >
-            <template #year="{ year }">{{ year + 543 }}</template>
-            <template #year-overlay-value="{ value }">{{
-              parseInt(value + 543)
-            }}</template>
-            <template #trigger>
-              <q-input
-                class="bg-white"
-                dense
-                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>
-        <div class="q-pr-xs">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateStart"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            week-start="0"
-            readonly
-          >
-            <template #year="{ year }">{{ year + 543 }}</template>
-            <template #year-overlay-value="{ value }">{{
-              parseInt(value + 543)
-            }}</template>
-            <template #trigger>
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                borderless
-                :model-value="dateStart ? date2Thai(dateStart) : null"
-                :label="`${'ตั้งเเต่วันที่'}`"
-                readonly
-              >
-                <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
-            menu-class-name="modalfix"
-            v-model="dateEnd"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            week-start="0"
-            readonly
-          >
-            <template #year="{ year }">{{ year + 543 }}</template>
-            <template #year-overlay-value="{ value }">{{
-              parseInt(value + 543)
-            }}</template>
-            <template #trigger>
-              <q-input
-                class="bg-white"
-                outlined
-                dense
-                borderless
-                :model-value="dateEnd ? date2Thai(dateEnd) : null"
-                :label="`${'ถึงวันที่'}`"
-                readonly
-              >
-                <template v-slot:prepend>
-                  <q-icon name="event" class="cursor-pointer" color="primary">
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-      </q-toolbar>
-      <q-splitter
-        v-model="splitterModel"
-        horizontal
-        style="
-          height: 70vh;
-          border: 1px solid rgb(210, 210, 210);
-          border-radius: 5px;
-        "
-        before-class="overflow-hidden disable"
-        separator-class="bg-white disabled"
-      >
-        <template v-slot:before>
-          <div class="q-px-sm">
-            <div class="row items-start items-center">
-              <div class="col">
-                <q-btn
-                  padding="xs"
-                  icon="mdi-chevron-left"
-                  color="grey-2"
-                  text-color="grey-5"
-                  size="md"
-                  class="my-auto"
-                  @click="backPage"
-                  :disable="page == 1"
-                />
-              </div>
-              <div class="col-12 col-md-auto">
-                <div class="q-pa-md flex">
-                  หน้าที่ {{ page }} จาก {{ numOfPages }}
-                </div>
-              </div>
-              <div class="col text-right">
-                <q-btn
-                  padding="xs"
-                  icon="mdi-chevron-right"
-                  color="grey-2"
-                  text-color="grey-5"
-                  size="md"
-                  @click="nextPage"
-                  :disable="page === numOfPages"
-                />
-              </div>
-            </div>
-          </div>
-        </template>
-        <template v-slot:after>
-          <div class="q-pa-md">
-            <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
-          </div>
-        </template>
-        <template v-slot:default>
-          <div class="q-pa-md">
-            <div class="row items-start items-center">
-              <div class="col">
-                <q-btn
-                  padding="xs"
-                  icon="mdi-chevron-left"
-                  color="grey-2"
-                  text-color="grey-5"
-                  size="md"
-                  class="my-auto"
-                  @click="backPage"
-                  :disable="page == 1"
-                />
-              </div>
-
-              <div class="col-12 col-md-auto">
-                <div class="q-pa-md flex">
-                  หน้าที่ {{ page }} จาก {{ numOfPages }}
-                </div>
-              </div>
-              <div class="col text-right">
-                <q-btn
-                  padding="xs"
-                  icon="mdi-chevron-right"
-                  color="grey-2"
-                  text-color="grey-5"
-                  size="md"
-                  @click="nextPage"
-                  :disable="page === numOfPages"
-                />
-              </div>
-            </div>
-          </div>
-        </template>
-      </q-splitter>
-    </div>
-  </q-card>
-</template>
-
-<style scoped></style>