fix(leave):sort

src/modules/09_leave/components/02_WorkList/DialogDetail.vue

@@ -188,7 +188,8 @@ watch(
         formData.checkOutLocationName = stores.formData.checkOutLocationName;
       }
     }
-  }
+  },
+  { deep: true }
 );
 </script>
 

src/modules/09_leave/components/02_WorkList/DialogMap.vue

@@ -2,9 +2,6 @@
 import { ref, watch } from "vue";
 import { loadModules } from "esri-loader";
 
-// const apiKey = ref<string>(
-//   "YLATgWuywoeRLHn6KImj5rg7UaP8bJoR9jiTldoCVBHlqFIebwMSA5wIXEmcYhwXwMHkmNISEYtUz3x0oiGIIx0bIXXnUwi0OzupoOEtDrQIsRPVtor7gaPpXEmH8TrNaMT3snf6zO_yujHLGzborg"
-// );
 const props = defineProps({
   modal: {
     type: Boolean,

src/modules/09_leave/components/02_WorkList/Tab1.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { usePagination } from "@/composables/usePagination";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -20,20 +22,21 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 
 const $q = useQuasar(); //ใช้ noti quasar
-const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
-const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
+const { date2Thai, dateToISO, showLoader, hideLoader, messageError } =
+  useCounterMixin();
+const { pagination, params, onRequest } = usePagination(
+  "",
+  fetchListTimeRecord
+);
 
 /** ตัวแปร querySting*/
-const total = ref<number>(0);
+const keyword = ref<string>(""); //keyword ค้นหา
-const keyword = ref<string>("");
+const filetStatus = ref<string>("ALL"); //*สถานะ
-const page = ref<number>(1);
+const roleStatus = ref<string>("ALL"); //*ประเภทตำแหน่ง
-const rowsPerPage = ref<number>(10);
-const maxPage = ref<number>(1);
-const filetStatus = ref<string>("ALL");
-const roleStatus = ref<string>("ALL");
 
 /** ข้อมูลตาราง*/
+const rows = ref<TableRowsTime[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -112,7 +115,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "checkOutStatus",
     align: "left",
     label: "สถานะ",
-    sortable: true,
+    sortable: false,
     field: "checkOutStatus",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -129,33 +132,31 @@ const visibleColumns = ref<string[]>([
   "checkOutLocation",
   "checkOutStatus",
 ]);
-const rows = ref<TableRowsTime[]>([]);
 
-/** function เรียกข้อมูล รายการลงเวลาที่ประมวลผลแล้ว*/
+/** ฟังก์ชันเรียกข้อมูลรายการลงเวลาที่ประมวลผลแล้ว*/
 async function fetchListTimeRecord() {
-  rows.value = [];
+  showLoader();
   const date = new Date(workStore.selectDate as string | Date);
   const querySting = {
+    ...params.value,
     startDate: dateToISO(date), //*วันที่เริ่ม
     endDate: dateToISO(date), //*วันที่สิ้นสุด
     status: filetStatus.value, //*สถานะ
-    page: page.value, //*หน้า
-    pageSize: rowsPerPage.value, //*จำนวนแถวต่อหน้า
     keyword: keyword.value.trim(), //keyword ค้นหา
     profileType: roleStatus.value.trim(), //keyword ค้นหา
   };
 
-  showLoader();
   await http
-    .get(
+    .get(config.API.timeRecord(), {
-      config.API.timeRecord() +
+      params: {
-        `?startDate=${querySting.startDate}&endDate=${querySting.startDate}&status=${querySting.status}&page=${querySting.page}&pageSize=${querySting.pageSize}&keyword=${querySting.keyword}&profileType=${querySting.profileType}`
+        ...querySting,
-    )
+      },
+    })
     .then((res) => {
-      total.value = res.data.result.total;
+      const result = res.data.result;
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      pagination.value.rowsNumber = result.total;
-      const datalist: TableRowsTime[] = res.data.result.data.map(
+      if (result.data.length > 0) {
-        (e: DataResTime) => ({
+        rows.value = result.data.map((e: DataResTime) => ({
           id: e.id,
           fullName: e.fullName,
           profileType: e.profileType,
@@ -175,35 +176,21 @@ async function fetchListTimeRecord() {
           checkOutStatus: e.checkOutStatus
             ? workStore.convertSatatus(e.checkOutStatus)
             : "-",
-        })
+        }));
-      );
+      }
-      rows.value = datalist;
     })
     .catch((err) => {
       messageError($q, err);
+      rows.value = [];
     })
     .finally(() => {
       hideLoader();
     });
 }
 
-/**
+/** ฟังก์ชันค้นหาข้อมูล */
- * function updatePaging และเรียกข้อมูลอีกรอบ
+async function onSearchData() {
- * @param params pagin
+  pagination.value.page = 1;
- * @param currentPage page
- * @param key คำค้นหา
- * @param status สถานะ
- */
-async function updatePaging(
-  params: any,
-  currentPage: number,
-  key: string,
-  status: string
-) {
-  page.value = currentPage;
-  rowsPerPage.value = params.rowsPerPage ?? rowsPerPage.value;
-  keyword.value = key ?? keyword.value;
-  filetStatus.value = status ?? filetStatus.value;
   await fetchListTimeRecord();
 }
 
@@ -214,22 +201,23 @@ onMounted(async () => {
   await fetchListTimeRecord();
 });
 </script>
+
 <template>
+  <!-- Toolbar -->
   <ToolBar
-    :filetStatus="filetStatus"
+    v-model:filetStatus="filetStatus"
-    @update:pagination="updatePaging"
     v-model:role-status="roleStatus"
+    v-model:keyword="keyword"
+    :on-search-data="onSearchData"
   />
 
+  <!-- ตาราง -->
   <TableList
-    :total="total"
     :rows="rows.length > 0 ? rows : []"
-    v-model:page="page"
-    :rowsPerPage="rowsPerPage"
-    :maxPage="maxPage"
-    @update:pagination="updatePaging"
     :tab="'time-record'"
     :fetchData="fetchListTimeRecord"
+    :on-request="onRequest"
+    v-model:pagination="pagination"
   />
 </template>
 

src/modules/09_leave/components/02_WorkList/Tab2.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { usePagination } from "@/composables/usePagination";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -20,14 +22,18 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 
 /** useStore */
-const total = ref<number>(0);
-const mixin = useCounterMixin();
-const workStore = useWorklistDataStore();
-const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
-const roleStatus = ref<string>("ALL");
 const $q = useQuasar(); //ใช้ noti quasar
+const workStore = useWorklistDataStore();
+const { date2Thai, dateToISO, showLoader, hideLoader, messageError } =
+  useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchListLogRecord);
+
+/** ตัวแปร QueryString*/
+const keyword = ref<string>("");
+const roleStatus = ref<string>("ALL");
 
 /** ข้อมูลตาราง*/
+const rows = ref<TableRows[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -102,66 +108,55 @@ const visibleColumns = ref<string[]>([
   "checkOutTime",
   "checkOutLocation",
 ]);
-const rows = ref<TableRows[]>([]);
 
-/** ตัวแปร QueryString*/
+/** ฟังก์ชันเรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
-const keyword = ref<string>("");
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
-const maxPage = ref<number>(1);
-
-/** function เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
 async function fetchListLogRecord() {
-  rows.value = [];
   showLoader();
   const date = new Date(workStore.selectDate as string | Date);
+
   await http
-    .get(
+    .get(config.API.logRecord(), {
-      config.API.logRecord() +
+      params: {
-        `?startDate=${dateToISO(date)}&endDate=${dateToISO(date)}&page=${
+        ...params.value,
-          page.value
+        startDate: dateToISO(date), //*วันที่เริ่ม
-        }&pageSize=${rowsPerPage.value}&keyword=${keyword.value}&profileType=${
+        endDate: dateToISO(date), //*วันที่สิ้นสุด
-          roleStatus.value
+        keyword: keyword.value.trim(), //keyword ค้นหา
-        }`
+        profileType: roleStatus.value.trim(), //keyword ค้นหา
-    )
+      },
+    })
     .then((res) => {
-      total.value = res.data.result.total;
+      const result = res.data.result;
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      pagination.value.rowsNumber = result.total;
-      let datalist: TableRows[] = res.data.result.data.map((e: DataResLog) => ({
+      if (result.data.length > 0) {
-        id: e.id,
+        rows.value = result.data.map((e: DataResLog) => ({
-        profileType: e.profileType,
+          id: e.id,
-        fullName: e.fullName,
+          profileType: e.profileType,
-        checkInDate: e.checkInDate && date2Thai(e.checkInDate),
+          fullName: e.fullName,
-        checkInTime: e.checkInTime ? e.checkInTime : "-",
+          checkInDate: e.checkInDate && date2Thai(e.checkInDate),
-        checkInLocation: e.checkInLocation ? e.checkInLocation : "-",
+          checkInTime: e.checkInTime ? e.checkInTime : "-",
-        checkInLat: e.checkInLat ? e.checkInLat : "",
+          checkInLocation: e.checkInLocation ? e.checkInLocation : "-",
-        checkInLon: e.checkInLon ? e.checkInLon : "",
+          checkInLat: e.checkInLat ? e.checkInLat : "",
-        checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
+          checkInLon: e.checkInLon ? e.checkInLon : "",
-        checkOutLocation: e.checkOutLocation ? e.checkOutLocation : "-",
+          checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
-        checkOutTime: e.checkOutTime ? e.checkOutTime : "-",
+          checkOutLocation: e.checkOutLocation ? e.checkOutLocation : "-",
-        checkOutLat: e.checkOutLat ? e.checkOutLat : "",
+          checkOutTime: e.checkOutTime ? e.checkOutTime : "-",
-        checkOutLon: e.checkOutLon ? e.checkOutLon : "",
+          checkOutLat: e.checkOutLat ? e.checkOutLat : "",
-      }));
+          checkOutLon: e.checkOutLon ? e.checkOutLon : "",
-      rows.value = datalist;
+        }));
+      }
     })
     .catch((err) => {
       messageError($q, err);
+      rows.value = [];
     })
     .finally(() => {
       hideLoader();
     });
 }
 
-/**
+/*** ฟังก์ชันค้นหาข้อมูล */
- * function ค้นหาตามหน้าที่เลือก
+async function onSearchData() {
- * @param params pagination
+  pagination.value.page = 1;
- * @param currentPage page
- * @param key keyword ค้นหา
- */
-async function updatePagingProp(params: any, currentPage: number, key: string) {
-  page.value = currentPage;
-  rowsPerPage.value = params.rowsPerPage ?? rowsPerPage.value;
-  keyword.value = key ?? keyword.value;
   await fetchListLogRecord();
 }
 
@@ -174,18 +169,17 @@ onMounted(async () => {
 </script>
 <template>
   <ToolBarDate
-    :keyword="keyword"
+    v-model:keyword="keyword"
-    @update:pagination="updatePagingProp"
     v-model:role-status="roleStatus"
+    :on-search-data="onSearchData"
   />
+
   <TableList
-    :total="total"
     :rows="rows.length > 0 ? rows : []"
-    v-model:page="page"
-    :rowsPerPage="rowsPerPage"
-    :maxPage="maxPage"
-    @update:pagination="updatePagingProp"
     :tab="'log-record'"
+    :fetchData="fetchListLogRecord"
+    :on-request="onRequest"
+    v-model:pagination="pagination"
   />
 </template>
 

src/modules/09_leave/components/02_WorkList/TableList.vue

@@ -1,38 +1,26 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 
 import { checkPermission } from "@/utils/permissions";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 
+import type { PropsTable } from "@/interface/index/PropsTable";
+import type { DataWorkList } from "@/modules/09_leave/interface/index/Main";
+
 /** importComponents */
 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 currentPage = defineModel<number>("page", {
+const pagination = defineModel<PropsTable.Pagination>("pagination", {
-  default: 1,
+  required: true,
 });
+
 const props = defineProps({
   rows: {
     type: Object,
     require: true,
   },
-  // page: {
-  //   type: Number,
-  //   require: true,
-  // },
-  rowsPerPage: {
-    type: Number,
-    require: true,
-  },
-  maxPage: {
-    type: Number,
-    require: true,
-  },
-  total: {
-    type: Number,
-    require: true,
-  },
   tab: {
     type: String,
     require: true,
@@ -41,48 +29,30 @@ const props = defineProps({
     type: Function,
     require: true,
   },
+  onRequest: {
+    type: Function,
+    require: true,
+  },
 });
 
-const emit = defineEmits(["update:pagination"]);
+const modal = ref<boolean>(false); //modal แสดงรายละเอียด
-
+const dataDetail = ref<DataWorkList>(); //ข้อมูลรายละเอียด
-/** ข้อมูล popup */
+const modalEdit = ref<boolean>(false); //modal แก้ไขข้อมูล
-const modal = ref<boolean>(false);
+const typeTab = ref<string>(""); //ประเภท tab
-const dataDetail = ref<any>();
-const modalEdit = ref<boolean>(false);
-
-/** pagination */
-// const currentPage = ref<number>(1);
-const pagination = ref({
-  descending: false,
-  page: Number(currentPage.value),
-  rowsPerPage: props.rowsPerPage,
-});
-
-/**
- * function อัปเดท props
- * @param newPagination paging
- * @param page หน้าปัจุบัน
- */
-function updateProp(newPagination: any, page: number) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, page);
-}
-
-const typeTab = ref<string>("");
 
 /**
  * Function openPopup และแสดงรายละเอียด
  * @param data ข้อมูลรายละเอียด
  */
-function clickDetail(data: any) {
+function clickDetail(data: DataWorkList) {
   typeTab.value = props.tab as string;
   modal.value = true;
   dataDetail.value = data;
 }
 
-function onClickEdit(data: any) {
+function onClickEdit(data: DataWorkList) {
   modalEdit.value = !modalEdit.value;
-  dataDetail.value = modalEdit.value ? data : [];
+  dataDetail.value = modalEdit.value ? data : undefined;
 }
 
 /** Function ปิด popup */
@@ -90,27 +60,13 @@ function closeDetail() {
   modal.value = false;
 }
 
-/** function Callblck ทำงานเมื่อ pagination มีการเปลี่ยนแปลง */
-watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
-  updateProp(pagination.value, currentPage.value);
-});
-
-/**
- * function updatePageSize
- * @param newPagination  PageSize
- */
-function updateRowsPerPagen(newPagination: any) {
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-  currentPage.value = 1;
-}
-
 onMounted(() => {
   typeTab.value = props.tab as string;
 });
 </script>
 
 <template>
-  <d-table
+  <p-table
     ref="table"
     :columns="workStore.columns"
     :rows="props.rows"
@@ -120,9 +76,9 @@ onMounted(() => {
     dense
     class="custom-header-table"
     :visible-columns="workStore.visibleColumns"
-    :rows-per-page-options="[10, 25, 50, 100]"
+    :rows-per-page-options="[1, 10, 25, 50, 100]"
-    :pagination="pagination"
+    v-model:pagination="pagination"
-    @update:pagination="updateRowsPerPagen"
+    @request="props.onRequest"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -164,11 +120,7 @@ onMounted(() => {
         </q-td>
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div v-if="col.name == 'no'">
-            {{
+            {{ props.rowIndex + 1 }}
-              (currentPage - 1) * Number(pagination.rowsPerPage) +
-              props.rowIndex +
-              1
-            }}
           </div>
           <div v-else-if="col.name == 'checkInLocation'">
             <q-item style="padding: 0">
@@ -203,19 +155,7 @@ onMounted(() => {
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
+  </p-table>
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="currentPage"
-        active-color="primary"
-        color="dark"
-        :max="Number(props.maxPage)"
-        size="sm"
-        boundary-links
-        direction-links
-      ></q-pagination>
-    </template>
-  </d-table>
 
   <DialogDetail
     :modal="modal"

src/modules/09_leave/components/02_WorkList/ToolBar.vue

@@ -13,23 +13,24 @@ const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
+const filetStatus = defineModel<string>("filetStatus", {
+  required: true,
+});
+const roleStatus = defineModel<string>("roleStatus", {
+  required: true,
+});
+const keyword = defineModel<string>("keyword", {
+  required: true,
+});
+
 /** props จาก Tab 1*/
 const props = defineProps({
-  filetStatus: {
+  onSearchData: {
-    type: String,
+    type: Function,
     require: true,
   },
 });
 
-const emit = defineEmits(["update:pagination"]);
-
-/** ตัแปร filter**/
-const filetStatus = ref<string>(
-  props.filetStatus?.toString() || "default-value"
-);
-const roleStatus = defineModel<string>("roleStatus", { required: true });
-
-const keyword = ref<string>("");
 const optionMain = ref<DataOption[]>([
   { id: "ALL", name: "ทั้งหมด" },
   { id: "NORMAL", name: "ปกติ" },
@@ -45,20 +46,9 @@ const roleMainOp = ref<DataOption[]>([
 const option = ref<DataOption[]>(optionMain.value);
 const roleOp = ref<DataOption[]>(roleMainOp.value);
 
-/**
- * function updateProps
- * @param newPagination paging
- * @param keyword คำค้น
- * @param status สถานะ
- */
-function updateProp(newPagination: any, keyword: string, status: string) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, 1, keyword, status);
-}
-
 /** function ค้นหาข้อมูลแล้วไปอัปเดท props*/
 function filterFn() {
-  updateProp([], keyword.value, filetStatus.value);
+  props.onSearchData?.();
 }
 
 /**
@@ -70,13 +60,13 @@ function filterOptionFn(val: string, update: Function, type?: string) {
   if (type == "role") {
     update(() => {
       roleOp.value = roleMainOp.value.filter(
-        (e: any) => e.name.search(val) !== -1
+        (e: DataOption) => e.name.search(val) !== -1
       );
     });
   } else {
     update(() => {
       option.value = optionMain.value.filter(
-        (e: any) => e.name.search(val) !== -1
+        (e: DataOption) => e.name.search(val) !== -1
       );
     });
   }
@@ -92,7 +82,7 @@ function calculateMaxDate() {
 
 <template>
   <div class="row col-12 q-col-gutter-sm q-mb-sm">
-    <div class="col-xs-12 col-sm-3 col-md-2">
+    <div class="col-xs-12 col-sm-4 col-md-2">
       <datepicker
         v-model="workStore.selectDate"
         :locale="'th'"
@@ -127,7 +117,7 @@ function calculateMaxDate() {
         </template>
       </datepicker>
     </div>
-    <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="col-xs-12 col-sm- col-md-3">
       <q-select
         for="selectStatus"
         emit-value
@@ -162,7 +152,7 @@ function calculateMaxDate() {
         </template>
       </q-select>
     </div>
-    <div class="col-xs-12 col-sm-3 col-md-2">
+    <div class="col-xs-12 col-sm-4 col-md-2">
       <q-select
         for="selectStatus"
         emit-value
@@ -197,7 +187,7 @@ function calculateMaxDate() {
       </q-select>
     </div>
     <q-space />
-    <div class="col-xs-12 col-sm-3 col-md-2">
+    <div class="col-xs-12 col-sm-5 col-md-2">
       <q-input
         for="filterTable"
         dense

src/modules/09_leave/components/02_WorkList/ToolBarDate.vue

@@ -16,9 +16,13 @@ const emit = defineEmits(["update:pagination"]);
 
 /** ตัวแปร filter*/
 const roleStatus = defineModel<string>("roleStatus", { required: true });
-const keyword = ref<string>("");
+const keyword = defineModel<string>("keyword", { required: true });
-const pagination = ref({
+
-  page: 1,
+const props = defineProps({
+  onSearchData: {
+    type: Function,
+    require: true,
+  },
 });
 
 const roleMainOp = ref<DataOption[]>([
@@ -28,16 +32,6 @@ const roleMainOp = ref<DataOption[]>([
 ]);
 const roleOp = ref<DataOption[]>(roleMainOp.value);
 
-/**
- * function updateProps
- * @param newPagination paging
- * @param keyword คำค้นหา
- */
-function updateProp(newPagination: any, keyword: string) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, 1, keyword);
-}
-
 /** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
 function calculateMaxDate() {
   const today = new Date();
@@ -45,9 +39,9 @@ function calculateMaxDate() {
   return today;
 }
 
-/** function ค้นหาข้อมูล แล้ว อัปเดท Props*/
+/** function ค้นหาข้อมูล */
 function filterFn() {
-  updateProp(pagination.value, keyword.value);
+  props.onSearchData?.();
 }
 
 /**
@@ -58,7 +52,7 @@ function filterFn() {
 function filterOptionFn(val: string, update: Function) {
   update(() => {
     roleOp.value = roleMainOp.value.filter(
-      (e: any) => e.name.search(val) !== -1
+      (e: DataOption) => e.name.search(val) !== -1
     );
   });
 }
@@ -66,7 +60,7 @@ function filterOptionFn(val: string, update: Function) {
 
 <template>
   <div class="row col-12 q-col-gutter-sm q-mb-sm">
-    <div class="col-xs-12 col-sm-3 col-md-2">
+    <div class="col-xs-12 col-sm-6 col-md-2">
       <datepicker
         v-model="workStore.selectDate"
         :locale="'th'"
@@ -101,7 +95,7 @@ function filterOptionFn(val: string, update: Function) {
         </template>
       </datepicker>
     </div>
-    <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="col-xs-12 col-sm-6 col-md-3">
       <q-select
         for="selectStatus"
         emit-value
@@ -136,7 +130,7 @@ function filterOptionFn(val: string, update: Function) {
       </q-select>
     </div>
     <q-space />
-    <div class="col-xs-12 col-sm-3 col-md-2">
+    <div class="col-xs-12 col-sm-5 col-md-2">
       <q-input
         for="filterTable"
         dense

src/modules/09_leave/components/04_SpecialTime/Table.vue

@@ -1,239 +0,0 @@
-<script setup lang="ts">
-import { ref, useAttrs } from "vue";
-
-/** import Stoer*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
-
-const attrs = ref<any>(useAttrs());
-const SpecialTimeStore = useSpecialTimeStore();
-const mixin = useCounterMixin();
-
-const { date2Thai } = mixin;
-const { searchFilterTable } = SpecialTimeStore;
-
-/** props*/
-const props = defineProps({
-  count: Number,
-  pass: Number,
-  notpass: Number,
-
-  inputfilter: String,
-  name: String,
-  icon: String,
-  inputvisible: Array,
-  editvisible: Boolean,
-  add: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  validate: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  nornmalData: {
-    type: Boolean,
-    defualt: true,
-  },
-  conclude: {
-    type: Boolean,
-    defualt: false,
-  },
-});
-
-/**emit Function*/
-const emit = defineEmits([
-  "update:inputfilter",
-  "update:inputvisible",
-  "update:editvisible",
-]);
-
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
-
-/** pagination*/
-const paging = ref<boolean>(true);
-const pagination = ref({
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-function paginationLabel(start: string, end: string, total: string) {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-}
-
-/**
- * function update filter
- * @param value คำค้นหา
- */
-function updateInput(value: string | number | null) {
-  emit("update:inputfilter", value);
-}
-
-/**
- * function updateVisible
- * @param value ค่า Visible
- */
-function updateVisible(value: []) {
-  emit("update:inputvisible", value);
-}
-
-function resetFilter() {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-}
-</script>
-<template>
-  <div class="q-pb-sm row q-col-gutter-sm">
-    <!--  -->
-    <div class="q-gutter-sm" v-if="nornmalData == true">
-      <datepicker
-        v-model="SpecialTimeStore.selectDate"
-        :locale="'th'"
-        autoApply
-        :enableTimePicker="false"
-        week-start="0"
-        @update:model-value="searchFilterTable(SpecialTimeStore.selectDate)"
-      >
-        <template #year="{ year }">{{ year + 543 }}</template>
-        <template #year-overlay-value="{ value }">{{
-          parseInt(value + 543)
-        }}</template>
-        <template #trigger>
-          <q-input
-            for="selectDate"
-            dense
-            outlined
-            :model-value="
-              SpecialTimeStore.selectDate !== null
-                ? date2Thai(SpecialTimeStore.selectDate)
-                : null
-            "
-            hide-bottom-space
-            :label="`${'วันที่'}`"
-          >
-            <template v-slot:prepend>
-              <q-icon name="event" class="cursor-pointer text-primary">
-              </q-icon>
-            </template>
-          </q-input>
-        </template>
-      </datepicker>
-    </div>
-    <q-space />
-    <!-- ค้นหาข้อความใน table -->
-    <q-input
-      standout
-      dense
-      :model-value="inputfilter"
-      ref="filterRef"
-      @update:model-value="updateInput"
-      outlined
-      placeholder="ค้นหา"
-      style="max-width: 200px"
-      class="col-xs-12 col-sm-3 col-md-2"
-    >
-      <template v-slot:append>
-        <q-icon v-if="inputfilter == ''" name="search" />
-        <q-icon
-          v-if="inputfilter !== ''"
-          name="clear"
-          class="cursor-pointer"
-          @click="resetFilter"
-        />
-      </template>
-    </q-input>
-    <!-- แสดงคอลัมน์ใน table -->
-    <q-select
-      :model-value="inputvisible"
-      @update:model-value="updateVisible"
-      :display-value="$q.lang.table.columns"
-      multiple
-      outlined
-      dense
-      :options="attrs.columns"
-      options-dense
-      option-value="name"
-      map-options
-      emit-value
-      style="min-width: 140px"
-      class="col-xs-12 col-sm-3 col-md-2 gt-xs"
-    >
-      <template> </template>
-    </q-select>
-  </div>
-  <d-table
-    ref="table"
-    flat
-    v-bind="attrs"
-    virtual-scroll
-    :virtual-scroll-sticky-size-start="48"
-    dense
-    :pagination-label="paginationLabel"
-    v-model:pagination="pagination"
-  >
-    <template v-slot:header="props">
-      <q-tr :props="props">
-        <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          <span class="text-weight-medium" v-html="col.label" />
-        </q-th>
-        <q-th auto-width />
-        <q-th auto-width />
-        <q-th auto-width v-if="nornmalData == true" />
-      </q-tr>
-    </template>
-    <template #body="props">
-      <slot v-bind="props" name="columns"></slot>
-    </template>
-  </d-table>
-</template>
-
-<style lang="scss">
-.icon-color {
-  color: #4154b3;
-}
-
-.custom-table2 {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-  }
-
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
-
-  .q-table th:nth-of-type(2),
-  .q-table td:nth-of-type(2) {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>

src/modules/09_leave/interface/index/Main.ts

@@ -18,4 +18,62 @@ interface DataPagination {
   rowsPerPage: number;
   sortBy: string;
 }
-export type { DataOption, DataOption2, DataDateMonthObject, DataPagination };
+
+interface DataWorkList {
+  checkInDate: string;
+  checkInLat: number;
+  checkInLocation: string;
+  checkInLon: number;
+  checkInStatus: string;
+  checkInTime: string;
+  checkOutDate: string;
+  checkOutLat: number;
+  checkOutLocation: string;
+  checkOutLon: number;
+  checkOutStatus: string;
+  checkOutTime: string;
+  fullName: string;
+  id: string;
+  profileType: string;
+}
+
+interface DataSpecialTime {
+  checkDate: string;
+  checkIn: string;
+  checkInEdit: boolean;
+  checkInStatus: string;
+  checkInTime: string;
+  checkOut: string;
+  checkOutEdit: boolean;
+  checkOutStatus: string;
+  checkOutTime: string;
+  createdAt: string;
+  date: string;
+  dateFix: string;
+  description: string;
+  endTimeAfternoon: string;
+  endTimeMorning: string;
+  firstName: string;
+  fullName: string;
+  id: string;
+  lastName: string;
+  latitude: number;
+  longitude: number;
+  poi: string;
+  prefix: string;
+  reason: string;
+  startTimeAfternoon: string;
+  startTimeMorning: string;
+  status: string;
+  statusSort: number;
+  timeAfternoon: string;
+  timeMorning: string;
+}
+export type {
+  DataOption,
+  DataOption2,
+  DataDateMonthObject,
+  DataPagination,
+  DataWorkList,
+  DataSpecialTime,
+};

src/modules/09_leave/stores/ChangeRoundStore.ts

@@ -43,7 +43,7 @@ export const useChangeRoundDataStore = defineStore(
         name: "cardId",
         align: "left",
         label: "เลขประจำตัวประชาชน",
-        sortable: true,
+        sortable: false,
         field: "cardId",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
@@ -52,7 +52,7 @@ export const useChangeRoundDataStore = defineStore(
         name: "fullName",
         align: "left",
         label: "ชื่อ-นามสกุล",
-        sortable: true,
+        sortable: false,
         field: "fullName",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
@@ -61,7 +61,7 @@ export const useChangeRoundDataStore = defineStore(
         name: "currentRound",
         align: "left",
         label: "รอบปัจจุบัน",
-        sortable: true,
+        sortable: false,
         field: "currentRound",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
@@ -70,7 +70,7 @@ export const useChangeRoundDataStore = defineStore(
         name: "effectiveDate",
         align: "left",
         label: "วันที่มีผล",
-        sortable: true,
+        sortable: false,
         field: "effectiveDate",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
@@ -81,7 +81,7 @@ export const useChangeRoundDataStore = defineStore(
         name: "round",
         align: "left",
         label: "ครั้งที่",
-        sortable: true,
+        sortable: false,
         field: "round",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
@@ -90,7 +90,7 @@ export const useChangeRoundDataStore = defineStore(
         name: "time",
         align: "left",
         label: "รอบเวลา",
-        sortable: true,
+        sortable: false,
         field: "time",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
@@ -99,7 +99,7 @@ export const useChangeRoundDataStore = defineStore(
         name: "effectiveDate",
         align: "left",
         label: "วันที่มีผล",
-        sortable: true,
+        sortable: false,
         field: "effectiveDate",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
@@ -108,7 +108,7 @@ export const useChangeRoundDataStore = defineStore(
         name: "reson",
         align: "left",
         label: "เหตุผล",
-        sortable: true,
+        sortable: false,
         field: "reson",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",

src/modules/09_leave/stores/SpecialTimeStore.ts

@@ -1,142 +1,9 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import type { QTableProps } from "quasar";
-import type { DataRows } from "@/modules/09_leave/interface/response/specialTime";
 
-import { useCounterMixin } from "@/stores/mixin";
 import type { DataOption } from "@/modules/09_leave/interface/index/Main";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const mixin = useCounterMixin();
-const { date2Thai, showLoader, hideLoader } = mixin;
 
 export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
-  const rows = ref<any[]>([]);
-  const selectDate = ref<Date | null>(new Date());
-  const fiscalYear = ref<string | null>("0");
-  const DataMainOrig = ref<DataRows[]>([]); // ข้อมูลหลักดั้งเดิม
-  const DataMainUpdate = ref<DataRows[]>([]); // ข้อมูลเปลี่ยนแปลง
-  const DataMain = (val: DataRows[]) => (DataMainOrig.value = val);
-  const DataUpdate = (filterYear: string) => {
-    DataMainUpdate.value = [];
-    if (filterYear === "") {
-      DataMainUpdate.value = DataMainOrig.value;
-    }
-  };
-  const checkInStatus = ref<String>("ปกติ");
-  const checkOutStatus = ref<String>("ปกติ");
-
-  // paging
-  const toDay = ref<Date>(new Date());
-  const monthToday = toDay.value.getMonth();
-  const yearToday = toDay.value.getFullYear();
-  console.log(monthToday + 1);
-
-  const month = ref<number>(monthToday + 1);
-  const year = ref<number>(yearToday);
-  const page = ref<number>(1);
-  const total = ref<number>(0);
-  const pageSize = ref<number>(10);
-  const filter = ref<string>(""); //search data table
-  const maxPage = ref<number>(0);
-
-  /**
-   * ฟังชั้นเรียกดูข้อมูล
-   */
-  const fetchData = async () => {
-    showLoader();
-    await http
-      .get(
-        config.API.specialTime() +
-          `?year=${year.value}&month=${month.value}&page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
-      )
-      .then(async (res) => {
-        let data = res.data.result.data;
-        total.value = res.data.result.total;
-        maxPage.value = await Math.ceil(total.value / pageSize.value);
-        rows.value = [];
-        data.map((e: any) => {
-          rows.value.push({
-            id: e.id,
-            fullname: e.fullName,
-            date: date2Thai(new Date(e.createdAt), false, true),
-            dateFix: date2Thai(new Date(e.checkDate)),
-            timeMorning:
-              e.startTimeMorning == null
-                ? "-"
-                : e.checkInEdit == true
-                ? e.startTimeMorning + " - " + e.endTimeMorning
-                : "-",
-            timeAfternoon:
-              e.startTimeAfternoon == null
-                ? "-"
-                : e.checkOutEdit == true
-                ? e.startTimeAfternoon + " - " + e.endTimeAfternoon
-                : "-",
-            startTimeMorning: e.startTimeMorning,
-            endTimeMorning: e.endTimeMorning,
-            startTimeAfternoon: e.startTimeAfternoon,
-            endTimeAfternoon: e.endTimeAfternoon,
-            checkIn: e.checkInTime,
-            checkOut: e.checkOutTime,
-            status: e.status,
-            checkInStatus: convertStatus(e.checkInStatus),
-            checkOutStatus: convertStatus(e.checkOutStatus),
-            reason: e.reason,
-            description: e.description,
-            checkInEdit: e.checkInEdit,
-            checkOutEdit: e.checkOutEdit,
-          });
-        });
-      })
-      .catch((e) => {
-        console.log(e);
-      })
-      .finally(() => {
-        hideLoader();
-        console.log(month.value);
-      });
-  };
-
-  /**
-   * ฟังก์ชั่น api เปลี่ยนหน้า
-   * @param pageVal page
-   * @param pageSizeVal pagesize
-   */
-  async function changePage(pageVal: number, pageSizeVal: number) {
-    page.value = await pageVal;
-    pageSize.value = await pageSizeVal;
-    console.log(pageSize.value);
-
-    fetchData();
-    console.log("page");
-  }
-
-  //--------------|ฟิลเตอร์|--------------------------------------//
-  const searchFilterTable = async (searchDate: any) => {
-    rows.value = [];
-
-    if (fiscalYear.value !== undefined && searchDate.value !== null) {
-      await DataUpdate(searchDate.value === "0" ? "all" : searchDate.value!);
-      let filteredData = DataMainOrig.value;
-      if (searchDate.value !== "0") {
-        filteredData = filteredData.filter(
-          (item: DataRows) => item.date === searchDate.value
-        );
-        console.log(searchDate.value);
-      }
-      const dataArr = filteredData.map((e: any) => ({
-        fullname: e.fullname,
-        date: date2Thai(new Date(e.date)),
-        dateFix: date2Thai(new Date(e.dateFix)) + (e.timeStamp || ""),
-        type: e.type,
-        reason: e.reason,
-        timeStamp: e.timeStamp,
-      }));
-      rows.value = dataArr;
-    }
-  };
   const optionStatus = ref<DataOption[]>([
     { id: "NORMAL", name: "ปกติ" },
     { id: "LATE", name: "สาย" },
@@ -144,82 +11,6 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
     { id: "NOT_COMPLETE", name: "ปฏิบัติงานไม่ครบตามกำหนดเวลา" },
   ]);
 
-  const visibleColumns = ref<String[]>([
-    "no",
-    "fullname",
-    "date",
-    "dateFix",
-    "timeMorning",
-    "timeAfternoon",
-    "description",
-  ]);
-
-  const columns = ref<QTableProps["columns"]>([
-    {
-      name: "no",
-      align: "center",
-      label: "ลำดับ",
-      sortable: false,
-      field: "no",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "fullname",
-      align: "left",
-      label: "ชื่อ-นามสกุล",
-      sortable: true,
-      field: "fullname",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "date",
-      align: "left",
-      label: "วันที่ยื่นเรื่อง",
-      sortable: true,
-      field: "date",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "dateFix",
-      align: "left",
-      label: "วันที่ขอแก้ไข",
-      sortable: true,
-      field: "dateFix",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "timeMorning",
-      align: "left",
-      label: "ช่วงเช้า",
-      sortable: true,
-      field: "timeMorning",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "timeAfternoon",
-      align: "left",
-      label: "ช่วงบ่าย",
-      sortable: true,
-      field: "timeAfternoon",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "description",
-      align: "left",
-      label: "เหตุผล",
-      sortable: true,
-      field: "description",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-  ]);
-
   // convertSatatus
   function convertStatus(val: string) {
     const value = val ? val.toUpperCase() : null;
@@ -236,26 +27,7 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
   }
 
   return {
-    // fecthList,
-    rows,
-    visibleColumns,
-    columns,
-    DataMain,
-    searchFilterTable,
-    selectDate,
-    checkInStatus,
-    checkOutStatus,
     optionStatus,
-    fetchData,
-    changePage,
-    total,
-    maxPage,
-    year,
-    page,
-    pageSize,
-    month,
-    filter,
     convertStatus,
-    // changeMonth,
   };
 });

src/modules/09_leave/stores/WorkStore.ts

@@ -6,11 +6,13 @@ import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
 import type { FormDetail } from "@/modules/09_leave/interface/response/work";
 
-
 export const useWorklistDataStore = defineStore("work", () => {
+  /** รายการลงเวลาปฏิบัติงาน */
+  const tabs = ref<string>("1");
+
   /** ข้อมูล Table */
-  const mixin = useCounterMixin()
+  const mixin = useCounterMixin();
-  const { date2Thai } = mixin
+  const { date2Thai } = mixin;
   const columns = ref<QTableProps["columns"]>([]);
   const visibleColumns = ref<string[]>([]);
 
@@ -95,11 +97,12 @@ export const useWorklistDataStore = defineStore("work", () => {
     formData.checkOutLocationName = data.checkOutLocationName;
   }
   return {
+    tabs,
     columns,
     visibleColumns,
     selectDate,
     convertSatatus,
     getData,
-    formData
+    formData,
   };
 });

src/modules/09_leave/views/02_WorkingMain.vue

@@ -1,66 +1,50 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, toRefs } from "vue";
+
+import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 
 /** import Components */
 import Tab1 from "@/modules/09_leave/components/02_WorkList/Tab1.vue";
 import Tab2 from "@/modules/09_leave/components/02_WorkList/Tab2.vue";
-// import DialogReport from "@/modules/09_leave/components/02_WorkList/DialogReport.vue";
 
-const tab = ref("1");
+const stores = useWorklistDataStore();
 
-const modalReport = ref<boolean>(false);
+const { tabs } = toRefs(stores);
-
-function onClickOpenDialog() {
-  modalReport.value = !modalReport.value;
-}
 </script>
+
 <template>
   <div class="row">
     <span class="toptitle text-dark item-center">รายการลงเวลาปฏิบัติงาน</span>
-    <q-space />
+  </div>
-    <!-- <q-btn
+
+  <q-card bordered flat>
+    <q-tabs
+      v-model="tabs"
       dense
-      flat
+      align="left"
-      class="text-blue"
+      inline-label
-      label="รายงานสถิติการลงเวลา"
+      class="rounded-borders"
-      @click="onClickOpenDialog"
+      indicator-color="primary"
+      active-bg-color="teal-1"
+      active-class="text-primary"
     >
-      <q-tooltip>รายงานสถิติการลงเวลา</q-tooltip>
+      <q-tab name="1" label="รายการลงเวลาที่ประมวลผลแล้ว" />
-    </q-btn> -->
+      <q-tab name="2" label="รายการลงเวลา" />
-  </div>
+    </q-tabs>
 
-  <div>
+    <q-separator />
-    <q-card bordered flat>
+    <div class="q-pa-sm">
-      <q-tabs
+      <q-tab-panels v-model="tabs" animated>
-        v-model="tab"
+        <q-tab-panel name="1">
-        dense
+          <Tab1 />
-        align="left"
+        </q-tab-panel>
-        inline-label
-        class="rounded-borders"
-        indicator-color="primary"
-        active-bg-color="teal-1"
-        active-class="text-primary"
-      >
-        <q-tab name="1" label="รายการลงเวลาที่ประมวลผลแล้ว" />
-        <q-tab name="2" label="รายการลงเวลา" />
-      </q-tabs>
 
-      <q-separator />
+        <q-tab-panel name="2">
-      <div class="q-pa-sm">
+          <Tab2 />
-        <q-tab-panels v-model="tab" animated>
+        </q-tab-panel>
-          <q-tab-panel name="1">
+      </q-tab-panels>
-            <Tab1 />
+    </div>
-          </q-tab-panel>
+  </q-card>
-
-          <q-tab-panel name="2">
-            <Tab2 />
-          </q-tab-panel>
-        </q-tab-panels>
-      </div>
-    </q-card>
-  </div>
-
-  <!-- <DialogReport :modal="modalReport" :close="onClickOpenDialog" /> -->
 </template>
 
 <style scoped></style>

src/modules/09_leave/views/04_SpecialTimeMain.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
 
@@ -8,11 +8,10 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
 import { checkPermission } from "@/utils/permissions";
+import { usePagination } from "@/composables/usePagination";
 
-import type {
+import type { DataDateMonthObject } from "@/modules/09_leave/interface/request/specialTime";
-  DataDateMonthObject,
+import type { DataSpecialTime } from "@/modules/09_leave/interface/index/Main";
-  DetailData,
-} from "@/modules/09_leave/interface/request/specialTime";
 
 import DialogReason from "@/components/Dialogs/PopupReason.vue";
 import DialogApprove from "@/modules/09_leave/components/04_SpecialTime/DialogApprove.vue";
@@ -29,20 +28,22 @@ const {
   date2Thai,
   dialogConfirm,
 } = mixin;
+const { pagination, params, onRequest } = usePagination("", fetchData);
+
 const emit = defineEmits(["update:change-page"]);
-const rows = ref<any[]>([]);
+
 const toDay = ref<Date>(new Date());
 const monthToday = toDay.value.getMonth();
 const yearToday = toDay.value.getFullYear();
 
 const month = ref<number>(monthToday + 1);
 const year = ref<number>(yearToday);
-const description = ref<string>('')
+const description = ref<string>("");
 
 /**ตัวแปรที่ใช้ */
 const modalUnapprove = ref<boolean>(false);
 const modalApprove = ref<boolean>(false);
-const detailData = ref<DetailData[]>([]);
+const detailData = ref<DataSpecialTime>();
 const editCheck = ref<string>("");
 const dialogTitle = ref<string>("");
 const dialogDesc = ref<string>("");
@@ -58,26 +59,16 @@ const dateMonth = ref<DataDateMonthObject>({
   year: new Date().getFullYear(),
 });
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
-const filterRef = ref<HTMLInputElement | null>(null);
+const rows = ref<DataSpecialTime[]>([]);
-
 const visibleColumns = ref<String[]>([
   "no",
-  "fullname",
+  "fullName",
-  "date",
+  "createdAt",
-  "dateFix",
+  "checkDate",
-  "timeMorning",
+  "startTimeMorning",
-  "timeAfternoon",
+  "startTimeAfternoon",
   "description",
 ]);
 const columns = ref<QTableProps["columns"]>([
@@ -91,16 +82,16 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullname",
+    name: "fullName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: "fullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "date",
+    name: "createdAt",
     align: "left",
     label: "วันที่ยื่นเรื่อง",
     sortable: true,
@@ -109,7 +100,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "dateFix",
+    name: "checkDate",
     align: "left",
     label: "วันที่ขอแก้ไข",
     sortable: true,
@@ -118,7 +109,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "timeMorning",
+    name: "startTimeMorning",
     align: "left",
     label: "ช่วงเช้า",
     sortable: true,
@@ -127,7 +118,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "timeAfternoon",
+    name: "startTimeAfternoon",
     align: "left",
     label: "ช่วงบ่าย",
     sortable: true,
@@ -146,6 +137,54 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+/** ฟังก์ชั่นเรียกดูข้อมูลรายการลงเวลากรณีพิเศษ */
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.specialTime(), {
+      params: {
+        ...params.value,
+        year: year.value,
+        month: month.value,
+        keyword: filterKeyword.value.trim(),
+      },
+    })
+    .then(async (res) => {
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      if (result.data.length > 0) {
+        rows.value = result.data.map((e: DataSpecialTime) => ({
+          ...e,
+          date: date2Thai(new Date(e.createdAt), false, true),
+          dateFix: date2Thai(new Date(e.checkDate)),
+          timeMorning:
+            e.startTimeMorning == null
+              ? "-"
+              : e.checkInEdit == true
+              ? e.startTimeMorning + " - " + e.endTimeMorning
+              : "-",
+          timeAfternoon:
+            e.startTimeAfternoon == null
+              ? "-"
+              : e.checkOutEdit == true
+              ? e.startTimeAfternoon + " - " + e.endTimeAfternoon
+              : "-",
+          checkIn: e.checkInTime,
+          checkOut: e.checkOutTime,
+          checkInStatus: store.convertStatus(e.checkInStatus),
+          checkOutStatus: store.convertStatus(e.checkOutStatus),
+        }));
+      }
+    })
+    .catch((e) => {
+      rows.value = [];
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**
  * ฟังก์ชั่นไม่อนุมัติ
  * @param fullname ชื่อ
@@ -158,43 +197,39 @@ async function unapprove(fullname: string, personId: string) {
   modalUnapprove.value = true;
 }
 
-/** function openDialog */
+/**
-function openModal(
+ *  ฟังก์ชั่นอนุมัติ
-  data: any,
+ * @param data ข้อมูล
-  check: string,
+ */
-  date: string,
+function openModal(data: DataSpecialTime) {
-  dateFix: string,
+  id.value = data.id;
-  personId: string,
+  dateDialog.value = data.date;
-  detail: string,
+  description.value = data.description;
-) {
+  dateFixDialog.value = data.dateFix;
-  id.value = personId;
+  editCheck.value = data.status;
+  detailData.value = data;
   modalApprove.value = true;
-  dateDialog.value = date;
-  description.value= detail
-  dateFixDialog.value = dateFix;
-  editCheck.value = check;
-  if (check === "PENDING") {
-    detailData.value = data;
-  }
 }
 
-/** function closeDialog */
+/** ฟังก์ชั่นปิด Dialog */
 function closeDialog() {
   modalUnapprove.value = false;
   modalApprove.value = false;
-  description.value = '';
+  description.value = "";
   editCheck.value = "PENDING";
 }
 
-/** API reject */
+/**
+ * ฟังก์ชั่นบันทึกข้อมูลไม่อนุมัติ
+ * @param reason เหตุผลที่ไม่อนุมัติ
+ */
 async function clickSave(reason: string) {
   dialogConfirm($q, async () => {
     showLoader();
-    const body = {
-      reason: reason,
-    };
     await http
-      .put(config.API.specialTimeReject(id.value), body)
+      .put(config.API.specialTimeReject(id.value), {
+        reason: reason,
+      })
       .then(async () => {
         await fetchData();
         success($q, "บันทึกข้อมูลสำเร็จ");
@@ -219,97 +254,22 @@ async function updateMonth(e: DataDateMonthObject) {
     dateYear.value = year.value;
     month.value = dateMonth.value.month + 1;
     year.value = dateMonth.value.year;
-    getSearch();
+    onSearchData();
   }
 }
 
 //แปลงเดือนเป็นไทย
-function monthYearThai(val: any) {
+function monthYearThai(val: DataDateMonthObject) {
   if (val == null) return "";
   else return monthYear2Thai(val.month, val.year);
 }
 
-function updatePagination(newPagination: any) {
+/** ฟังก์ชั่นค้นหาข้อมูล */
-  pagination.value.page = 1;
+function onSearchData() {
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
-function getSearch() {
   pagination.value.page = 1;
   fetchData();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
-/**
- * ฟังชั้นเรียกดูข้อมูล
- */
-async function fetchData() {
-  showLoader();
-  await http
-    .get(
-      config.API.specialTime() +
-        `?year=${year.value}&month=${month.value}&page=${
-          pagination.value.page
-        }&pageSize=${
-          pagination.value.rowsPerPage
-        }&keyword=${filterKeyword.value.trim()}`
-    )
-    .then(async (res) => {
-      let data = await res.data.result.data;
-      total.value = res.data.result.total;
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      rows.value = [];
-      data.map((e: any) => {
-        rows.value.push({
-          id: e.id,
-          fullname: e.fullName,
-          date: date2Thai(new Date(e.createdAt), false, true),
-          dateFix: date2Thai(new Date(e.checkDate)),
-          timeMorning:
-            e.startTimeMorning == null
-              ? "-"
-              : e.checkInEdit == true
-              ? e.startTimeMorning + " - " + e.endTimeMorning
-              : "-",
-          timeAfternoon:
-            e.startTimeAfternoon == null
-              ? "-"
-              : e.checkOutEdit == true
-              ? e.startTimeAfternoon + " - " + e.endTimeAfternoon
-              : "-",
-          startTimeMorning: e.startTimeMorning,
-          endTimeMorning: e.endTimeMorning,
-          startTimeAfternoon: e.startTimeAfternoon,
-          endTimeAfternoon: e.endTimeAfternoon,
-          checkIn: e.checkInTime,
-          checkOut: e.checkOutTime,
-          status: e.status,
-          checkInStatus: store.convertStatus(e.checkInStatus),
-          checkOutStatus: store.convertStatus(e.checkOutStatus),
-          reason: e.reason,
-          description: e.description,
-          checkInEdit: e.checkInEdit,
-          checkOutEdit: e.checkOutEdit,
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 /**Hook */
 onMounted(async () => {
   //อัพเดทเป็นวันปัจจุบันเมื่อเข้าหน้านี้
@@ -326,9 +286,10 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการลงเวลากรณีพิเศษ
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+
+  <q-card flat bordered class="col-12 q-pa-md">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
-      <div class="q-gutter-sm">
+      <div class="col-xs-12 col-sm-3 col-md-2">
         <datepicker
           v-model="dateMonth"
           :locale="'th'"
@@ -347,7 +308,6 @@ onMounted(async () => {
               dense
               outlined
               hide-bottom-space
-              style="width: 130px"
             >
               <template v-slot:prepend>
                 <q-icon
@@ -363,39 +323,38 @@ onMounted(async () => {
       </div>
 
       <q-space />
+      <div class="col-xs-12 col-sm-3 col-md-2">
+        <q-input
+          standout
+          dense
+          v-model="filterKeyword"
+          outlined
+          placeholder="ค้นหาชื่อ-นามสกุล"
+          @keydown.enter.prevent="onSearchData()"
+        >
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </div>
 
-      <q-input
+      <div class="col-xs-12 col-sm-3 col-md-2">
-        class="col-xs-12 col-sm-3 col-md-2"
+        <q-select
-        standout
+          v-model="visibleColumns"
-        dense
+          multiple
-        v-model="filterKeyword"
+          outlined
-        ref="filterRef"
+          dense
-        outlined
+          options-dense
-        placeholder="ค้นหาชื่อ-นามสกุล"
+          :display-value="$q.lang.table.columns"
-        @keydown.enter.prevent="getSearch()"
+          emit-value
-      >
+          map-options
-        <template v-slot:append>
+          :options="columns"
-          <q-icon name="search" />
+          option-value="name"
-        </template>
+        />
-      </q-input>
+      </div>
-
-      <q-select
-        v-model="visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="columns"
-        option-value="name"
-        style="min-width: 140px"
-        class="col-xs-12 col-sm-3 col-md-2"
-      />
     </div>
     <div class="col-12">
-      <d-table
+      <p-table
         :columns="columns"
         :rows="rows"
         row-key="id"
@@ -405,7 +364,8 @@ onMounted(async () => {
         dense
         :visible-columns="visibleColumns"
         :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
+        v-model:pagination="pagination"
+        @request="onRequest"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -428,7 +388,7 @@ onMounted(async () => {
                 class="q-px-md"
                 dense
                 unelevated
-                @click="unapprove(props.row.fullname, props.row.id)"
+                @click="unapprove(props.row.fullName, props.row.id)"
                 >ไม่อนุมัติ</q-btn
               >
               <q-btn
@@ -441,18 +401,10 @@ onMounted(async () => {
                 class="q-px-md q-ml-sm"
                 dense
                 unelevated
-                @click="
+                @click="openModal(props.row)"
-                  openModal(
-                    props.row,
-                    'PENDING',
-                    props.row.date,
-                    props.row.dateFix,
-                    props.row.id,
-                    props.row.description
-                  )
-                "
-                >อนุมัติ</q-btn
               >
+                อนุมัติ
+              </q-btn>
 
               <q-badge
                 v-if="props.row.status == 'APPROVE'"
@@ -471,11 +423,7 @@ onMounted(async () => {
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
-                {{
+                {{ props.rowIndex + 1 }}
-                  (pagination.page - 1) * pagination.rowsPerPage +
-                  props.rowIndex +
-                  1
-                }}
               </div>
               <div
                 v-else-if="col.name === 'description'"
@@ -489,22 +437,7 @@ onMounted(async () => {
             </q-td>
           </q-tr>
         </template>
-
+      </p-table>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total }} รายการ
-          <q-pagination
-            v-model="pagination.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(totalList)"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="fetchData()"
-          ></q-pagination>
-        </template>
-      </d-table>
     </div>
   </q-card>