fix load Table

src/components/TableD.vue

@@ -10,13 +10,16 @@
     dense
     :pagination-label="paginationLabel"
     v-model:pagination="pagination"
+    @request="onRequest"
     :grid="!$q.screen.gt.xs"
     :rows-per-page-options="[10, 25, 50, 100]"
+    :loading="loading"
   >
     <template v-slot:pagination="scope">
-      ทั้งหมด {{ attrs.rows.length }} รายการ
+      ทั้งหมด {{ pagination.rowsNumber || attrs.rows.length }} รายการ
       <q-pagination
         v-model="pagination.page"
+        @update:model-value="handlePageChange"
         active-color="primary"
         color="dark"
         :max="scope.pagesNumber"
@@ -27,9 +30,25 @@
       ></q-pagination>
     </template>
 
-    <template v-for="(_, slot) in slots" v-slot:[slot]="scope">
+    <template v-for="(_, slot) in slots" v-slot:[slot]="scope" :key="slot">
       <slot :name="slot" v-bind="scope || {}" />
     </template>
+
+    <template v-slot:loading>
+      <q-inner-loading showing class="q-mt-lg">
+        <q-spinner-dots color="primary" size="40px" />
+      </q-inner-loading>
+    </template>
+
+    <template v-slot:no-data>
+      <div
+        v-if="!loading && attrs.rows.length === 0"
+        class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+      >
+        <span> ไม่พบข้อมูล </span>
+      </div>
+    </template>
+
     <!-- <template #item="props">
       <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
         <q-card bordered flat>
@@ -55,22 +74,45 @@
   </q-table>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs, useSlots } from "vue";
+import { ref, useAttrs, useSlots, computed, watch } from "vue";
 const attrs = ref<any>(useAttrs());
 const slots = ref<any>(useSlots());
 
+const emit = defineEmits(["update:pagination", "request"]);
+
 const props = defineProps({
   paging: {
     type: Boolean,
-    defualt: false,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  pagination: {
+    type: Object,
+    default: () => ({
+      sortBy: "desc",
+      descending: false,
+      page: 1,
+      rowsPerPage: 10,
+      // rowsNumber: 0,
+    }),
   },
 });
 
-const pagination = ref({
+// Internal pagination state ที่จะจัดการเอง
-  sortBy: "desc",
+const internalPagination = ref({
-  descending: false,
+  ...props.pagination,
-  page: 1,
+});
-  rowsPerPage: 10,
+
+// ใช้ computed เพื่อ sync กับ props และ internal state
+const pagination = computed({
+  get: () => internalPagination.value,
+  set: (value) => {
+    internalPagination.value = { ...value };
+    emit("update:pagination", value);
+  },
 });
 
 const paginationLabel = (start: string, end: string, total: string) => {
@@ -78,6 +120,57 @@ const paginationLabel = (start: string, end: string, total: string) => {
     return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
   else return start + "-" + end + " ใน " + total;
 };
+
+function onRequest(requestProp: any) {
+  if (!requestProp || !requestProp.pagination) {
+    return;
+  }
+
+  const { pagination: newPagination } = requestProp;
+
+  // ถ้าเป็นการเปลี่ยนหน้า (page หรือ rowsPerPage เปลี่ยน) ให้ยิง request
+  const isPageChange =
+    internalPagination.value.page !== newPagination.page ||
+    internalPagination.value.rowsPerPage !== newPagination.rowsPerPage;
+
+  internalPagination.value = {
+    ...internalPagination.value,
+    ...newPagination,
+  };
+
+  if (isPageChange) {
+    emit("request", requestProp);
+  }
+}
+
+function handlePageChange(newPage: number) {
+  if (!newPage || newPage < 1) {
+    return;
+  }
+
+  internalPagination.value = {
+    ...internalPagination.value,
+    page: newPage,
+  };
+
+  // สร้าง request object เหมือนกับ onRequest
+  const requestProp = {
+    pagination: internalPagination.value,
+    filter: null,
+    getCellValue: () => {},
+  };
+
+  emit("request", requestProp);
+}
+
+// Watch props เพื่ออัปเดต internal state เมื่อ parent เปลี่ยน
+watch(
+  () => props.pagination,
+  (newPagination) => {
+    internalPagination.value = { ...newPagination };
+  },
+  { deep: true, immediate: true }
+);
 </script>
 
 <style lang="scss">
@@ -113,5 +206,33 @@ const paginationLabel = (start: string, end: string, total: string) => {
     margin-bottom: 0 !important;
     min-height: 0px !important;
   }
+
+  // Loading styles
+  .loading-overlay {
+    width: 100%;
+  }
+
+  .loading-row {
+    background: white;
+  }
+
+  .loading-cell {
+    text-align: center;
+    padding: 60px 20px;
+    border: none;
+  }
+
+  .loading-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .loading-text {
+    color: #666;
+    font-size: 14px;
+    font-weight: 500;
+  }
 }
 </style>

src/interface/PropsTable.ts

@@ -0,0 +1,36 @@
+/** Namespace สำหรับ Table-related types */
+export namespace PropsTable {
+  /** Interface สำหรับ pagination object */
+  export interface Pagination {
+    /** หน้าปัจจุบัน (เริ่มจาก 1) */
+    page: number;
+    /** จำนวนแถวต่อหน้า */
+    rowsPerPage: number;
+    /** จำนวนแถวทั้งหมด */
+    rowsNumber?: number;
+    /** คอลัมน์ที่ใช้ sort */
+    sortBy?: string;
+    /** เรียงจากมากไปน้อย */
+    descending?: boolean;
+
+    rowsTotal?: number;
+  }
+
+  /** Interface สำหรับ request props จาก d-table */
+  export interface RequestProps {
+    /** ข้อมูล pagination */
+    pagination: Pagination;
+    /** ตัวกรองข้อมูล */
+    filter?: any;
+    /** function สำหรับดึงค่าจาก cell */
+    getCellValue?: (col: any, row: any) => any;
+  }
+
+  /** Union type สำหรับ handleRequest function */
+  export type HandleRequestProps = RequestProps;
+}
+
+// Export แบบเดิมเพื่อ backward compatibility
+export type TablePagination = PropsTable.Pagination;
+export type TableRequestProps = PropsTable.RequestProps;
+export type HandleRequestProps = PropsTable.HandleRequestProps;

src/modules/02_transfer/views/Main.vue

@@ -14,8 +14,6 @@ import type {
   TransferMain,
 } from "@/modules/02_transfer/interface/Main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -247,33 +245,18 @@ onMounted(async () => {
           </div>
           <div>
             <d-table
-              v-if="!isLoading"
               flat
               bordered
               dense
               :paging="true"
               row-key="id"
-              class="custom-table2"
-              style="max-height: 80vh"
               :rows="rows"
               :columns="columns"
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
-              v-model:pagination="pagination"
+              :pagination="pagination"
+              :loading="isLoading"
             >
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ rows.length }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
               <template v-slot:header="props">
                 <q-tr :props="props">
                   <q-th
@@ -341,11 +324,11 @@ onMounted(async () => {
                 </div>
               </template>
             </d-table>
-            <SkeletonTable v-else :columns="columns" />
           </div>
         </q-card>
       </div>
     </div>
   </div>
 </template>
+
 <style scoped lang="scss"></style>

src/modules/03_retire/views/addRetire.vue

@@ -20,7 +20,7 @@ import Dialog from "@/modules/03_retire/views/DialogRetire.vue";
 import Header from "@/components/DialogHeader.vue";
 import Workflow from "@/components/Workflow/Main.vue";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
+
 
 const $q = useQuasar();
 const route = useRoute();
@@ -608,7 +608,6 @@ onMounted(async () => {
                     <q-separator />
                     <div class="col-12 q-pa-sm">
                       <d-table
-                        v-if="!isLoad"
                         ref="table"
                         :columns="columnsCommanders"
                         :rows="rowsApprover?.commanders ?? []"
@@ -618,6 +617,8 @@ onMounted(async () => {
                         :paging="true"
                         dense
                         :rows-per-page-options="[1, 25, 50, 100]"
+                        :pagination="{ page: 1, rowsPerPage: 10 }"
+                        :loading="isLoad"
                       >
                         <template v-slot:header="props">
                           <q-tr :props="props">
@@ -657,7 +658,6 @@ onMounted(async () => {
                           </q-tr>
                         </template>
                       </d-table>
-                      <SkeletonTable v-else :columns="columnsCommanders" />
                     </div>
                   </q-card>
                 </div>
@@ -769,7 +769,6 @@ onMounted(async () => {
                     <q-separator />
                     <div class="col-12 q-pa-sm">
                       <d-table
-                        v-if="!isLoad"
                         ref="table"
                         :columns="columnsCommanders"
                         :rows="rowsApprover?.cancelCommanders ?? []"
@@ -779,6 +778,8 @@ onMounted(async () => {
                         :paging="true"
                         dense
                         :rows-per-page-options="[1, 25, 50, 100]"
+                        :pagination="{ page: 1, rowsPerPage: 10 }"
+                        :loading="isLoad"
                       >
                         <template v-slot:header="props">
                           <q-tr :props="props">
@@ -818,7 +819,6 @@ onMounted(async () => {
                           </q-tr>
                         </template>
                       </d-table>
-                      <SkeletonTable v-else :columns="columnsCommanders" />
                     </div>
                   </q-card>
                 </div>

src/modules/03_retire/views/main.vue

@@ -15,15 +15,12 @@ import type {
   MainListResponse,
 } from "@/modules/03_retire/interface/Main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const router = useRouter();
 const link = ref<string>("");
 const dataStore = useDataStore();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
+const { date2Thai, messageError, onSearchDataTable } = mixin;
-  mixin;
 const RestData = useRestDataStore();
 const { statusText } = RestData; //Func แปลง status to text
 
@@ -200,8 +197,7 @@ onMounted(async () => {
           </div>
           <div>
             <d-table
-              v-if="!isLoad"
+              fla
-              flat
               bordered
               dense
               row-key="id"
@@ -210,20 +206,8 @@ onMounted(async () => {
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
               v-model:pagination="pagination"
+              :loading="isLoad"
             >
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ rows.length }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
               <template v-slot:header="props">
                 <q-tr :props="props">
                   <q-th
@@ -280,7 +264,6 @@ onMounted(async () => {
                 </div>
               </template>
             </d-table>
-            <SkeletonTable v-else :columns="columns" />
           </div>
         </q-card>
       </div>

src/modules/05_leave/components/FormLeave/Form.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { ref } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
@@ -8,15 +8,16 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 import { useDataStore } from "@/stores/data";
 
-import DialogHeader from "@/components/DialogHeader.vue";
+import type { PropsTable } from "@/interface/PropsTable";
-import SkeletonTable from "@/components/SkeletonTable.vue";
+import type { DataCommander } from "@/modules/05_leave/interface/response/main";
 
-const mixin = useCounterMixin();
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
 const dataStore = useLeaveStore();
 const storeData = useDataStore();
-const { date2Thai, showLoader, hideLoader, messageError } = mixin;
+const { date2Thai, messageError } = useCounterMixin();
 
-const modal = ref<boolean>(false);
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   model: {
@@ -25,21 +26,13 @@ const props = defineProps({
   },
 });
 
-const $q = useQuasar();
+const modal = ref<boolean>(false);
-const isAct = ref<boolean>(false);
-const search = ref<string>("");
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
 
-const selected = ref<any[]>([]);
+const isAct = ref<boolean>(false);
+const selected = ref<DataCommander[]>([]);
+const search = ref<string>("");
 const isLoading = ref<boolean>(false);
-const rows = ref<any[]>([]);
+const rows = ref<DataCommander[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "posNo",
@@ -72,28 +65,15 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const pagination = ref<PropsTable.Pagination>({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 0,
+});
 
-function onPerson() {
+/** ฟังก์ชันสำหรับดึงข้อมูลผู้บังคับบัญชา */
-  modal.value = true;
-  getCommander();
-}
-
-function onSubmit() {
-  modal.value = false;
-  dataStore.dear = selected.value[0].firstName
-    ? `${selected.value[0].prefix}${selected.value[0].firstName} ${selected.value[0].lastName}`
-    : "";
-
-  dataStore.commanderPosition = selected.value[0].posExecutiveName;
-}
-
-function closeDialog() {
-  modal.value = false;
-  search.value = "";
-  rows.value = [];
-  selected.value = [];
-}
-
 async function getCommander() {
   isLoading.value = true;
   await http
@@ -109,11 +89,12 @@ async function getCommander() {
           : "employee",
     })
     .then((res) => {
-      rows.value = res.data.result.data;
+      const result = res.data.result;
-      total.value = res.data.result.total;
+      rows.value = result.data;
-      totalList.value = Math.ceil(
+      pagination.value = {
-        res.data.result.total / pagination.value.rowsPerPage
+        ...pagination.value,
-      );
+        rowsNumber: result.total,
+      };
     })
     .catch((e) => {
       messageError($q, e);
@@ -123,25 +104,53 @@ async function getCommander() {
     });
 }
 
-function updatePagination(newPagination: any) {
+/*** ฟังก์ชันสำหรับเปิด Modal และดึงข้อมูลผู้บังคับบัญชา */
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+function onPerson() {
+  modal.value = true;
+  getCommander();
 }
 
+/*** ฟังก์ชันสำหรับปิด Modal และล้างข้อมูล */
+function closeDialog() {
+  modal.value = false;
+  search.value = "";
+  rows.value = [];
+  selected.value = [];
+  pagination.value = {
+    sortBy: "createdAt",
+    descending: true,
+    page: 1,
+    rowsPerPage: 10,
+    rowsNumber: 0,
+  };
+}
+
+/** ฟังก์ชันสำหรับยืนยันการเลือกผู้บังคับบัญชา */
+function onSubmit() {
+  modal.value = false;
+  dataStore.dear = selected.value[0].firstName
+    ? `${selected.value[0].prefix}${selected.value[0].firstName} ${selected.value[0].lastName}`
+    : "";
+
+  dataStore.commanderPosition = selected.value[0].posExecutiveName;
+}
+
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  getCommander();
+}
+
+/** ฟังก์ชันสำหรับค้นหาข้อมูล*/
 function getSearch() {
   pagination.value.page = 1;
   getCommander();
 }
-
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
-/**Hook */
-onMounted(() => {
-});
 </script>
 
 <template>
@@ -227,15 +236,6 @@ onMounted(() => {
         v-model="dataStore.typeLeave"
         label="เรื่อง"
       />
-      <!-- <q-input
-        class="col-12 col-sm-4"
-        dense
-        outlined
-        readonly
-        bg-color="white"
-        v-model="dataStore.commanderPosition"
-        label="เรียน"
-      /> -->
 
       <q-input
         class="col-12 col-sm-4"
@@ -315,7 +315,7 @@ onMounted(() => {
           <div class="row q-col-gutter-sm">
             <div class="col-12">
               <div class="row q-col-gutter-md items-start">
-                <div class="col-12 col-sm-4 col-md-4">
+                <div class="col-12 col-sm-6 col-md-4">
                   <q-input
                     v-model="search"
                     outlined
@@ -325,17 +325,20 @@ onMounted(() => {
                     @keydown.enter.prevent="getSearch()"
                   />
                 </div>
-                <q-checkbox
+                <div class="col-12 col-sm-6 col-md-4">
-                  keep-color
+                  <q-checkbox
-                  v-model="isAct"
+                    keep-color
-                  label="แสดงเฉพาะรักษาการแทน"
+                    v-model="isAct"
-                  color="primary"
+                    label="แสดงเฉพาะรักษาการแทน"
-                >
+                    color="primary"
-                  <q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
+                    @update:model-value="getSearch()"
-                </q-checkbox>
+                  >
-                <q-space />
+                    <q-tooltip>แสดงเฉพาะรักษาการแทน </q-tooltip>
+                  </q-checkbox>
+                </div>
+                <q-space v-if="$q.screen.gt.sm" />
 
-                <div class="col-12 col-sm-6 col-md-3">
+                <div class="col-12 col-md-3">
                   <q-btn
                     color="primary"
                     icon="search"
@@ -349,9 +352,7 @@ onMounted(() => {
               </div>
             </div>
             <div class="col-12">
-              <SkeletonTable v-if="isLoading" :columns="columns" />
               <d-table
-                v-else
                 ref="table"
                 :columns="columns"
                 :rows="rows"
@@ -362,25 +363,11 @@ onMounted(() => {
                 dense
                 :rows-per-page-options="[10, 25, 50, 100]"
                 selection="single"
-                @update:pagination="updatePagination"
                 v-model:pagination="pagination"
                 v-model:selected="selected"
+                :loading="isLoading"
+                @request="onTableRequest"
               >
-                <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="getSearch"
-                  ></q-pagination>
-                </template>
-
                 <template v-slot:header-selection="scope">
                   <q-checkbox
                     keep-color

src/modules/05_leave/components/Table.vue

@@ -2,8 +2,8 @@
 import { ref, useAttrs, watch } from "vue";
 import { useQuasar } from "quasar";
 
+import type { PropsTable } from "@/interface/PropsTable";
 import { useLeaveStore } from "@/modules/05_leave/store";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());
@@ -54,13 +54,26 @@ const table = ref<any>(null);
 
 /** ตั้งค่า pagination*/
 const currentPage = ref<number>(1);
-const pagination = ref({
+
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "dateSendLeave",
   descending: true,
   page: 1,
   rowsPerPage: Number(props.pageSize),
+
+  rowsNumber: Number(props.total),
 });
 
+// Watch props เพื่ออัปเดต pagination เมื่อค่าเปลี่ยน (เฉพาะ props)
+watch(
+  () => [props.pageSize, props.total],
+  ([newPageSize, newTotal]) => {
+    pagination.value.rowsPerPage = Number(newPageSize);
+    pagination.value.rowsNumber = Number(newTotal);
+  },
+  { immediate: true }
+);
+
 /** filter */
 const year = ref<number>(new Date().getFullYear());
 const filter = ref<string>("");
@@ -86,18 +99,17 @@ function updatePagination(p: number, ps: number) {
   emit("update:Pagination", p, ps);
 }
 
-/** function updatePageSize*/
+/**
-function updatePageSize(newPageSize: any) {
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
-  pagination.value.rowsPerPage = newPageSize.rowsPerPage;
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  currentPage.value = newPagination.page;
+  pagination.value = { ...newPagination };
+  updatePagination(newPagination.page, newPagination.rowsPerPage);
 }
-
-watch(
-  () => pagination.value.rowsPerPage,
-  () => {
-    currentPage.value = 1;
-    updatePagination(currentPage.value, pagination.value.rowsPerPage);
-  }
-);
 </script>
 
 <template>
@@ -240,9 +252,7 @@ watch(
     </q-card>
   </div>
   <div>
-    <SkeletonTable v-if="isloadingData" :columns="leaveStore.columns" />
     <d-table
-      v-else
       ref="table"
       flat
       bordered
@@ -251,9 +261,11 @@ watch(
       :virtual-scroll-sticky-size-start="48"
       dense
       :rows-per-page-options="[10, 25, 50, 100]"
+      D
       v-model:pagination="pagination"
-      @update:pagination="updatePageSize"
+      @request="onTableRequest"
       :grid="$q.screen.gt.xs ? false : true"
+      :loading="isloadingData"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -262,21 +274,6 @@ watch(
           </q-th>
         </q-tr>
       </template>
-      <template v-slot:pagination="scope">
-        ทั้งหมด {{ props.total }} รายการ
-        <q-pagination
-          v-model="currentPage"
-          active-color="primary"
-          color="dark"
-          :max="Number(props.maxPage)"
-          size="sm"
-          boundary-links
-          direction-links
-          @update:model-value="
-            updatePagination(currentPage, pagination.rowsPerPage)
-          "
-        ></q-pagination>
-      </template>
       <template #body="props">
         <slot v-bind="props" name="columns"></slot>
       </template>

src/modules/05_leave/interface/response/main.ts

@@ -0,0 +1,34 @@
+interface DataCommander {
+  actFullName: string;
+  actFullNameId: string;
+  actFullNameKeycloakId: string;
+  citizenId: string;
+  firstName: string;
+  id: string;
+  isDeputy: number;
+  isDirector: number;
+  isOfficer: boolean;
+  key: string;
+  keycloakId: string;
+  lastName: string;
+  orgChild1: string;
+  orgChild1Id: string;
+  orgChild2: string;
+  orgChild2Id: string;
+  orgChild3: string;
+  orgChild3Id: string;
+  orgChild4: string;
+  orgChild4Id: string;
+  orgRevisionId: string;
+  orgRoot: string;
+  orgRootId: string;
+  posExecutiveName: string;
+  posExecutiveNameOrg: string;
+  posLevel: string;
+  posNo: string;
+  posType: string;
+  position: string;
+  prefix: string;
+}
+
+export type { DataCommander };

src/modules/06_evaluate/components/ExpertPageDetail.vue

@@ -459,7 +459,6 @@ onMounted(() => {
                   <q-skeleton
                     v-if="isLoadingFile['fileEvaluation1']"
                     height="120px"
-                    type="QCard"
                   />
                   <q-card v-else bordered>
                     <div
@@ -552,7 +551,6 @@ onMounted(() => {
                   <q-skeleton
                     v-if="isLoadingFile['fileEvaluation2']"
                     height="120px"
-                    type="QCard"
                   />
                   <q-card v-else bordered>
                     <div
@@ -645,7 +643,6 @@ onMounted(() => {
                   <q-skeleton
                     v-if="isLoadingFile['fileEvaluation3']"
                     height="120px"
-                    type="QCard"
                   />
                   <q-card v-else bordered>
                     <div
@@ -738,7 +735,6 @@ onMounted(() => {
                   <q-skeleton
                     v-if="isLoadingFile['fileEvaluation5']"
                     height="120px"
-                    type="QCard"
                   />
                   <q-card v-else bordered>
                     <div
@@ -830,7 +826,6 @@ onMounted(() => {
                   <q-skeleton
                     v-if="isLoadingFile['fileEvaluation4']"
                     height="120px"
-                    type="QCard"
                   />
                   <q-card v-else bordered>
                     <div
@@ -921,7 +916,6 @@ onMounted(() => {
                   <q-skeleton
                     v-if="isLoadingFile['fileEvaluation6']"
                     height="120px"
-                    type="QCard"
                   />
                   <q-card v-else bordered>
                     <div

src/modules/06_evaluate/components/PopupPosition.vue

@@ -99,12 +99,7 @@ watch(modal, (v) => {
       <q-separator />
       <q-card-section>
         <div class="row q-col-gutter-sm q-pb-sm">
-          <q-skeleton
+          <q-skeleton v-if="isLoading" width="100%" height="240px" />
-            v-if="isLoading"
-            type="Qcard"
-            width="100%"
-            height="240px"
-          />
 
           <div
             v-else

src/modules/06_evaluate/components/TableListEvaluate.vue

@@ -1,47 +1,35 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
+
+import type { PropsTable } from "@/interface/PropsTable";
 import type { QTableProps } from "quasar";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
 import { useCounterMixin } from "@/stores/mixin";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 /** use*/
 const $q = useQuasar();
 const store = useEvaluateStore();
 const mixin = useCounterMixin();
 const router = useRouter();
-
-const total = defineModel<number>("total", { required: true });
-const totalList = defineModel<number>("totalList", { required: true });
-const pagination = defineModel<any>("pagination", { required: true });
 const { dialogRemove, showLoader, hideLoader, success, messageError } = mixin;
 
+const isLoading = defineModel<boolean>("isLoading", {
+  default: false,
+});
+const pagination = defineModel<PropsTable.Pagination>("pagination", {
+  required: true,
+});
+
 const props = defineProps({
-  page: {
-    type: Number,
-    require: true,
-  },
-  pageSize: {
-    type: Number,
-    require: true,
-  },
-  maxPage: {
-    type: Number,
-    require: true,
-  },
   fetchData: {
     type: Function,
     require: true,
   },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits(["update:pagination"]);
@@ -87,25 +75,11 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/**
- * function ส่งข้อมูลไป Update Paging
- * @param newPagination ข้อมูล Paging ใหม่
- * @param page หน้า
- */
-function updateProp(newPagination: any, page: number) {
-  emit("update:pagination", newPagination, page);
-}
-
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 /**
  * function ลบรายการประเมิน
  * @param id รายการประเมิน
  */
-async function onCkilckDelete(id: string) {
+async function onClickDelete(id: string) {
   dialogRemove($q, async () => {
     showLoader();
     await http
@@ -132,6 +106,17 @@ function redirectToDetail(data: any) {
   router.push(`/evaluate/detail/${data.typeparam.toLowerCase()}/${data.id}`);
 }
 
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  props.fetchData?.();
+}
+
 /** Hook lifecycle*/
 onMounted(() => {
   store.columns = columns.value;
@@ -140,20 +125,19 @@ onMounted(() => {
 </script>
 
 <template>
-  <SkeletonTable v-if="isLoading" :columns="columns" />
   <d-table
-    v-else
     ref="table"
     flat
-    bordered
+    bordere
-    class="custom-header-table"
     :columns="columns"
     :rows="store.row"
     dense
     :visible-columns="store.visibleColumns"
     :rows-per-page-options="[10, 25, 50, 100]"
-    @update:pagination="updatePagination"
+    @request="onTableRequest"
     v-model:pagination="pagination"
+    :loading="isLoading"
+    row-key="id"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -190,7 +174,7 @@ onMounted(() => {
             round
             color="red"
             icon="delete"
-            @click.stop="onCkilckDelete(props.row.id)"
+            @click.stop="onClickDelete(props.row.id)"
           >
             <q-tooltip>ลบ</q-tooltip>
           </q-btn>
@@ -235,7 +219,7 @@ onMounted(() => {
               round
               color="red"
               icon="delete"
-              @click.stop="onCkilckDelete(props.row.id)"
+              @click.stop="onClickDelete(props.row.id)"
             >
               <q-tooltip>ลบ</q-tooltip>
             </q-btn>
@@ -243,48 +227,7 @@ onMounted(() => {
         </q-card>
       </div>
     </template>
-    <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="props.fetchData?.()"
-      ></q-pagination>
-    </template>
   </d-table>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-.custom-header-table {
-  height: auto;
-  .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;
-    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/06_evaluate/components/step/step1.vue

@@ -90,13 +90,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <q-skeleton
+  <q-skeleton v-if="isLoading" class="q-mb-md" width="100%" height="100%" />
-    v-if="isLoading"
-    class="q-mb-md"
-    type="Qcard"
-    width="100%"
-    height="100%"
-  />
   <div class="q-pa-sm" v-else>
     <q-list dense>
       <q-item v-ripple class="listItem">

src/modules/06_evaluate/components/step/step2.vue

@@ -349,7 +349,7 @@ onMounted(async () => {
   <div class="col-12 q-pa-sm">
     <!-- ผลงาน -->
     <div class="col-12">
-      <q-skeleton type="Qcard" height="100px" v-if="isLoading" class="q-mb-sm" />
+      <q-skeleton height="100px" v-if="isLoading" class="q-mb-sm" />
       <q-card v-else bordered class="cardSp1 col-12">
         <div class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md">
           ผลงาน
@@ -425,7 +425,7 @@ onMounted(async () => {
 
     <!-- เลือกผู้เซ็นเอกสาร -->
     <div class="col-12">
-      <q-skeleton type="Qcard" height="200px" v-if="isLoading" />
+      <q-skeleton height="200px" v-if="isLoading" />
       <q-card v-else bordered class="cardSp1 col-12">
         <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
           เลือกผู้เซ็นเอกสาร
@@ -584,7 +584,7 @@ onMounted(async () => {
         v-for="(item, index) in formTemplates"
         :key="index"
       >
-        <q-skeleton type="Qcard" height="100px" v-if="item.isLoading" />
+        <q-skeleton height="100px" v-if="item.isLoading" />
 
         <q-card bordered class="cardSp1" v-else>
           <div

src/modules/06_evaluate/components/step/step4.vue

@@ -235,7 +235,6 @@ onMounted(async () => {
   <div class="row q-col-gutter-sm q-pa-sm">
     <div class="col-6" v-for="(item, index) in formTemplates" :key="index">
       <q-skeleton
-        type="Qcard"
         :height="store.currentStep !== 4 ? '50px' : '100px'"
         v-if="item.isLoading"
       />

src/modules/06_evaluate/components/step/step5.vue

@@ -96,11 +96,7 @@ onMounted(async () => {
 
 <template>
   <div class="row col-12 q-pa-sm">
-    <q-skeleton
+    <q-skeleton v-if="isLoading" style="width: 100%; height: 300px" />
-      v-if="isLoading"
-      type="Qcard"
-      style="width: 100%; height: 300px"
-    />
     <div v-else class="row col-12 q-col-gutter-sm">
       <div class="col-12 text-center">
         <q-banner rounded class="text-weight-bold text-red-14 bg-red-1">

src/modules/06_evaluate/components/step/step6.vue

@@ -251,7 +251,7 @@ onMounted(async () => {
   <div class="row col-12 q-pa-sm">
     <div class="row col-12 q-col-gutter-sm">
       <div class="col-12 text-center">
-        <q-skeleton v-if="isLoadingDate" type="Qcard" height="50px" />
+        <q-skeleton v-if="isLoadingDate" height="50px" />
         <q-banner v-else rounded class="text-weight-bold text-red-14 bg-red-1">
           <div class="text-weight-bold">
             <q-icon name="info_outline" color="red-14" size="24px" />
@@ -262,7 +262,7 @@ onMounted(async () => {
 
       <!-- ผลงาน -->
       <div class="col-12">
-        <q-skeleton v-if="isLoading" type="Qcard" height="200px" width="100%" />
+        <q-skeleton v-if="isLoading" height="200px" width="100%" />
 
         <q-card
           v-else
@@ -373,7 +373,7 @@ onMounted(async () => {
 
       <!-- เลือกผู้เซ็นเอกสาร -->
       <div class="col-12">
-        <q-skeleton v-if="isLoading" type="Qcard" height="200px" width="100%" />
+        <q-skeleton v-if="isLoading" height="200px" width="100%" />
         <q-card
           v-else
           bordered
@@ -548,7 +548,7 @@ onMounted(async () => {
 
       <!-- อัปไฟล์ -->
       <div class="col-12" v-if="store.currentStep === 6">
-        <q-skeleton type="Qcard" height="100px" v-if="isLoadingFile" />
+        <q-skeleton height="100px" v-if="isLoadingFile" />
         <q-card
           v-else
           bordered

src/modules/06_evaluate/components/step/step8.vue

@@ -181,7 +181,6 @@ onMounted(async () => {
         "
       >
         <q-skeleton
-          type="Qcard"
           :height="store.currentStep !== 8 ? '50px' : '100px'"
           v-if="isLoadingFile"
         />

src/modules/06_evaluate/components/viewstep/popupHistory.vue

@@ -9,12 +9,11 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 
 import HeaderDialog from "@/components/DialogHeader.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const route = useRoute();
 const mixins = useCounterMixin();
-const { showLoader, hideLoader, date2Thai, messageError } = mixins;
+const { date2Thai, messageError } = mixins;
 
 const isLoading = ref<boolean>(false);
 
@@ -127,9 +126,7 @@ watch(
       <q-card-section>
         <div class="col-xs-12 col-sm-12 col-md-12 row q-col-gutter-md">
           <div class="col-12">
-            <SkeletonTable v-if="isLoading" :columns="columns" />
             <d-table
-              v-else
               ref="table"
               flat
               bordered
@@ -138,6 +135,8 @@ watch(
               :rows="row"
               dense
               :rows-per-page-options="[10, 25, 50, 100]"
+              :pagination="{ page: 1, rowsPerPage: 10 }"
+              :loading="isLoading"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">

src/modules/06_evaluate/components/viewstep/tableStep1.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const props = defineProps({
   columns: {
     type: Array as () => any[],
@@ -19,9 +17,7 @@ const props = defineProps({
 
 <template>
   <div class="q-pa-sm row col-12">
-    <SkeletonTable class="col-12" v-if="isLoading" :columns="props.columns" />
     <d-table
-      v-else
       ref="table"
       flat
       bordered
@@ -32,6 +28,9 @@ const props = defineProps({
       virtual-scroll
       class="row col-12"
       :style="$q.screen.lt.sm ? 'width: 80vw' : 'width: 50vw;'"
+      :pagination="{ page: 1, rowsPerPage: 10 }"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props" class="bg-grey-2">
@@ -54,30 +53,4 @@ const props = defineProps({
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-.custom-header-table {
-  height: auto;
-  .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;
-  }
-  /* 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/06_evaluate/components/viewstep/viewStep1.vue

@@ -2,7 +2,7 @@ div
 <script setup lang="ts">
 import { reactive, onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
-import { is, useQuasar } from "quasar";
+import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -21,7 +21,6 @@ import type {
 /** importComponents*/
 import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";
 import HeaderDialog from "@/components/DialogHeader.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 /** use*/
 const mixin = useCounterMixin();
@@ -410,7 +409,7 @@ onMounted(async () => {
   >
     <div class="row col-12">
       <div class="col-12" v-if="isLoading.loadDetail">
-        <q-skeleton type="Qcard" height="200px" class="q-mb-md" />
+        <q-skeleton height="200px" class="q-mb-md" />
       </div>
       <q-card v-else class="col-12 cardSp1" bordered>
         <div class="text-weight-bold row items-center bg-grey-2 col-12">
@@ -516,7 +515,7 @@ onMounted(async () => {
       </q-card>
 
       <div class="col-12" v-if="isLoading.loadEducation">
-        <q-skeleton type="Qcard" height="200px" class="q-mb-md" />
+        <q-skeleton height="200px" class="q-mb-md" />
       </div>
       <q-card v-else class="col-12 cardSp1" bordered>
         <div class="text-weight-bold row items-center bg-grey-2 col-12">
@@ -668,14 +667,8 @@ onMounted(async () => {
           <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
         </div>
         <div class="col-12"><q-separator /></div>
-
+        <div class="col-10 q-pa-sm">
-        <div class="col-10">
-          <SkeletonTable
-            v-if="isLoading.loadSalary"
-            :columns="columnSalaries"
-          />
           <d-table
-            v-else
             ref="table"
             row-key="id"
             flat
@@ -685,6 +678,8 @@ onMounted(async () => {
             :rows="formDetail.salaries"
             :paging="true"
             :rows-per-page-options="[20, 50, 100]"
+            :pagination="{ page: 1, rowsPerPage: 20 }"
+            :loading="isLoading.loadSalary"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -768,13 +763,7 @@ onMounted(async () => {
         <div class="col-12"><q-separator /></div>
         <div class="col-10">
           <div class="q-pa-sm row col-12">
-            <SkeletonTable
-              v-if="isLoading.loadExperience"
-              :columns="columnAssessments"
-              class="col-12"
-            />
             <d-table
-              v-else
               flat
               bordered
               :columns="columnAssessments"
@@ -784,6 +773,8 @@ onMounted(async () => {
               virtual-scroll
               class="row col-12"
               :style="$q.screen.lt.sm ? 'width: 80vw' : 'width: 50vw;'"
+              :pagination="{ page: 1, rowsPerPage: 20 }"
+              :loading="isLoading.loadExperience"
             >
               <template v-slot:header="props">
                 <q-tr :props="props" class="bg-grey-2">

src/modules/06_evaluate/views/EvaluateMain.vue

@@ -14,6 +14,7 @@ import TableListEvaluate from "@/modules/06_evaluate/components/TableListEvaluat
 import DialogMain from "@/modules/06_evaluate/components/DialogMain.vue"; // popup การเพิ่มประเมิน
 
 /** import Type*/
+import type { PropsTable } from "@/interface/PropsTable";
 import type { ListMenu } from "@/modules/06_evaluate/interface/evalute";
 import type { OptionStatus } from "@/modules/06_evaluate/interface/main";
 
@@ -50,13 +51,12 @@ const listMenu = ref<ListMenu[]>([
   },
 ]);
 
-const total = ref<number>(0);
+const pagination = ref<PropsTable.Pagination>({
-const totalList = ref<number>(1);
-const pagination = ref({
   sortBy: "createdAt",
   descending: true,
   page: 1,
   rowsPerPage: 10,
+  rowsNumber: 0,
 });
 
 /**
@@ -85,11 +85,9 @@ async function fetchEvaluteList() {
   await http
     .put(config.API.evaluationList(), body)
     .then(async (res) => {
-      totalList.value = Math.ceil(
+      const result = res.data.result;
-        res.data.result.total / pagination.value.rowsPerPage
+      pagination.value.rowsNumber = result.total;
-      );
+      store.fetchEvaluateList(result.data);
-      total.value = res.data.result.total;
-      store.fetchEvaluateList(res.data.result.data);
     })
     .catch((err) => {
       messageError($q, err);
@@ -193,13 +191,6 @@ function getSearch() {
   fetchEvaluteList();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /** hook lifecycle*/
 onMounted(async () => {
   await fetchEvaluteList();
@@ -325,10 +316,8 @@ onMounted(async () => {
           <div class="col-12">
             <TableListEvaluate
               :fetchData="fetchEvaluteList"
-              v-model:total="total"
-              v-model:total-list="totalList"
               v-model:pagination="pagination"
-              :isLoading="isLoading"
+              v-model:isLoading="isLoading"
             />
           </div>
         </q-card>

src/modules/07_appealComplain/views/Main.vue

@@ -10,16 +10,15 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
 
+import type { PropsTable } from "@/interface/PropsTable";
 import type { FormType } from "@/modules/07_appealComplain/interface/response/mainType";
 import type { DataOption } from "@/modules/07_appealComplain/interface/index/main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
 const dataStore = useAppealComplainStore();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 
 const filterKeyword = ref<string>("");
 const type = ref<DataOption[]>([
@@ -28,25 +27,18 @@ const type = ref<DataOption[]>([
 ]);
 
 const isload = ref<boolean>(false);
-const total = ref<number>(0);
+const pagination = ref<PropsTable.Pagination>({
-const totalList = ref<number>(1);
-const pagination = ref({
   sortBy: "createdAt",
   descending: true,
   page: 1,
   rowsPerPage: 10,
+  rowsNumber: 0,
 });
-
-/**
- * เพิ่มหัวข้อตาราง
- */
-
 const formData = reactive<FormType>({
   type: "ALL",
   status: "ALL",
   year: new Date().getFullYear(),
 });
-
 const visibleColumns = ref<string[]>([
   "no",
   "title",
@@ -59,7 +51,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "status",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -170,19 +161,16 @@ async function getData() {
       )
     )
     .then(async (res) => {
-      totalList.value = Math.ceil(
+      const result = res.data.result;
-        res.data.result.total / pagination.value.rowsPerPage
+      pagination.value.rowsNumber = result.total;
-      );
+      dataStore.fetchAppealComplain(result.data);
-      total.value = res.data.result.total;
-      let data = res.data.result.data;
-      await dataStore.fetchAppealComplain(data);
-      isload.value = false;
     })
     .catch((e: any) => {
       messageError($q, e);
-      isload.value = false;
     })
-    .finally(() => {});
+    .finally(() => {
+      isload.value = false;
+    });
 }
 
 /**
@@ -214,22 +202,21 @@ function redirectToPageadd() {
   router.push(`/appeal-complain/add`);
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
   pagination.value.page = 1;
   getData();
 }
 
-watch(
+/**
-  () => pagination.value.rowsPerPage,
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
-  async () => {
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
-    getSearch();
+ */
-  }
+function onTableRequest(requestProps: PropsTable.RequestProps) {
-);
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  getData();
+}
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
@@ -241,6 +228,7 @@ onMounted(async () => {
   await getData();
 });
 </script>
+
 <template>
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
@@ -377,36 +365,18 @@ onMounted(async () => {
             />
 
             <div class="col-12">
-              <SkeletonTable v-if="isload" :columns="dataStore.columns" />
               <d-table
-                v-else
                 flat
                 bordered
                 dense
-                class="custom-table2"
-                style="max-height: 80vh"
                 :rows="dataStore.rows"
                 :columns="dataStore.columns"
                 :visible-columns="dataStore.visibleColumns"
                 :rows-per-page-options="[10, 25, 50, 100]"
-                @update:pagination="updatePagination"
+                @request="onTableRequest"
                 v-model:pagination="pagination"
+                :loading="isload"
               >
-                <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="getData()"
-                  ></q-pagination>
-                </template>
-
                 <template v-slot:header="props">
                   <q-tr :props="props">
                     <q-th
@@ -425,7 +395,7 @@ onMounted(async () => {
                       v-for="col in props.cols"
                       :key="col.name"
                       :props="props"
-                      @click="editPage(props.row.id)"
+                      @click.stop.prevent="editPage(props.row.id)"
                     >
                       <div v-if="col.name == 'no'">
                         {{
@@ -445,7 +415,7 @@ onMounted(async () => {
                 <template #item="props">
                   <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
                     <q-card bordered flat>
-                      <q-list @click="editPage(props.row.id)">
+                      <q-list @click.stop.prevent="editPage(props.row.id)">
                         <q-item v-for="col in props.cols" :key="col.name">
                           <q-item-section>
                             <q-item-label caption>{{ col.label }}</q-item-label>
@@ -469,49 +439,5 @@ onMounted(async () => {
     </div>
   </div>
 </template>
-<style lang="scss">
-.icon-color {
-  color: #4154b3;
-}
 
-.custom-table2 {
+<style lang="scss"></style>
-  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/08_KPI/components/Evaluator/01_TabAll.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import type { QTableProps } from "quasar";
 
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import type { PropsTable } from "@/interface/PropsTable";
 import type { ResEvaluatorAssessor } from "@/modules/08_KPI/interface/response/index";
 import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const store = useKpiDataStore();
 const router = useRouter();
-const isLoad = defineModel<boolean>('isLoad',{required:true})
+const isLoad = defineModel<boolean>("isLoad", { required: true });
 const visibleColumns = defineModel<string[]>("visibleColumns", {
   required: true,
 });
@@ -22,30 +21,53 @@ const columns = defineModel<QTableProps["columns"]>("columns", {
 const rows = defineModel<ResEvaluatorAssessor[]>("rows", { required: true });
 const formQuery = defineModel<FormQuery>("formQuery", { required: true });
 const total = defineModel<number>("total", { required: true });
-const maxPage = defineModel<number>("maxPage", { required: true });
 
 const props = defineProps({
-  updatePagination: { type: Function },
   fetchList: { type: Function },
 });
 
-const pagination = ref({
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "desc",
   descending: false,
-  page: 1,
+  page: formQuery.value.page,
-  rowsPerPage: 10,
+  rowsPerPage: formQuery.value.pageSize,
+  rowsNumber: total.value,
 });
 
 async function redirectViewDetail(id: string) {
-  store.tabMain = await "";
+  store.tabMain = "";
   router.push(`/KPI-evaluator/${id}`);
 }
+
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  formQuery.value.page = newPagination.page;
+  formQuery.value.pageSize = newPagination.rowsPerPage;
+  props?.fetchList?.();
+}
+
+watch(
+  [
+    () => formQuery.value.page,
+    () => formQuery.value.pageSize,
+    () => total.value,
+  ],
+  ([page, pageSize, total]) => {
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = pageSize;
+    pagination.value.rowsNumber = total;
+  }
+);
 </script>
 
 <template>
   <div class="col-12">
     <d-table
-    v-if="!isLoad"
       ref="table"
       :columns="columns"
       :rows="rows"
@@ -54,11 +76,11 @@ async function redirectViewDetail(id: string) {
       bordered
       :paging="true"
       dense
-      class="custom-table2"
+      :rows-per-page-options="[1, 10, 25, 50, 100]"
-      :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       v-model:pagination="pagination"
-      @update:pagination="props.updatePagination"
+      @request="onTableRequest"
+      :loading="isLoad"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -109,22 +131,7 @@ async function redirectViewDetail(id: string) {
           </q-card>
         </div>
       </template>
-      <template v-slot:pagination="scope">
-        ทั้งหมด {{ total }} รายการ
-        <q-pagination
-          v-model="formQuery.page"
-          active-color="primary"
-          color="dark"
-          :max="Number(maxPage)"
-          size="sm"
-          boundary-links
-          direction-links
-          :max-pages="5"
-          @update:model-value="props.fetchList?.()"
-        ></q-pagination>
-      </template>
     </d-table>
-    <SkeletonTable v-else :columns="columns"/>
   </div>
 </template>
 

src/modules/08_KPI/components/Evaluator/02_TabOther.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
-import { useQuasar } from "quasar";
+import { Loading, useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import type { QTableProps } from "quasar";
 
@@ -9,11 +9,10 @@ import http from "@/plugins/http";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import type { PropsTable } from "@/interface/PropsTable";
 import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
 import type { ResEvaluatorAssessor } from "@/modules/08_KPI/interface/response/index";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const router = useRouter();
 const store = useKpiDataStore();
@@ -35,25 +34,24 @@ const columns = defineModel<QTableProps["columns"]>("columns", {
 const rows = defineModel<ResEvaluatorAssessor[]>("rows", { required: true });
 const formQuery = defineModel<FormQuery>("formQuery", { required: true });
 const total = defineModel<number>("total", { required: true });
-const maxPage = defineModel<number>("maxPage", { required: true });
 const isLoad = defineModel<boolean>("isLoad", { required: true });
 
 const props = defineProps({
-  updatePagination: { type: Function },
   fetchList: { type: Function },
 });
 
+const pagination = ref<PropsTable.Pagination>({
+  sortBy: "desc",
+  descending: false,
+  page: formQuery.value.page,
+  rowsPerPage: formQuery.value.pageSize,
+  rowsNumber: total.value,
+});
+
 function redirectViewDetail(id: string) {
   router.push(`/KPI-evaluator/${id}`);
 }
 
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 async function onClickApprove(type: string = "") {
   if (store.selected.length !== 0) {
     const userIds = await store.selected.map(
@@ -107,12 +105,36 @@ async function onClickApprove(type: string = "") {
     dialogMessageNotify($q, "เลือกอย่างน้อย 1 รายการ");
   }
 }
+
+/**
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  formQuery.value.page = newPagination.page;
+  formQuery.value.pageSize = newPagination.rowsPerPage;
+  props?.fetchList?.();
+}
+
+watch(
+  [
+    () => formQuery.value.page,
+    () => formQuery.value.pageSize,
+    () => total.value,
+  ],
+  ([page, pageSize, total]) => {
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = pageSize;
+    pagination.value.rowsNumber = total;
+  }
+);
 </script>
 
 <template>
   <div class="col-12">
     <d-table
-      v-if="!isLoad"
       ref="table"
       :columns="columns"
       :rows="rows"
@@ -124,13 +146,14 @@ async function onClickApprove(type: string = "") {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       v-model:pagination="pagination"
-      @update:pagination="props.updatePagination"
       :selection="
         store.tabMainevaluator === '5' || store.tabMainevaluator === '6'
           ? 'none'
           : 'multiple'
       "
       v-model:selected="store.selected"
+      @request="onTableRequest"
+      :loading="isLoad"
     >
       <template v-slot:header-selection="scope">
         <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
@@ -211,22 +234,7 @@ async function onClickApprove(type: string = "") {
           </q-card>
         </div>
       </template>
-      <template v-slot:pagination="scope">
-        ทั้งหมด {{ total }} รายการ
-        <q-pagination
-          v-model="formQuery.page"
-          active-color="primary"
-          color="dark"
-          :max="Number(maxPage)"
-          size="sm"
-          boundary-links
-          direction-links
-          :max-pages="5"
-          @update:model-value="props.fetchList?.()"
-        ></q-pagination>
-      </template>
     </d-table>
-    <SkeletonTable v-else :columns="columns" />
   </div>
 
   <div class="row justify-end q-mt-md q-gutter-sm" v-if="rows.length !== 0">

src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue

@@ -13,8 +13,6 @@ import type { ListCapacity } from "@/modules/08_KPI/interface/request/index";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import SkeletonTable from '@/components/SkeletonTable.vue'
-
 const dataListCapacityDetails = ref<ListCapacity[]>([]);
 const route = useRoute();
 const idParam = ref<string>(route.params.id as string);
@@ -483,7 +481,7 @@ watch(
                 </div>
                 <div class="col-xs-12 col-md-7">
                   <d-table
-                  v-if="!isLoadById"
+                    v-if="!isLoadById"
                     flat
                     bordered
                     dense
@@ -491,10 +489,12 @@ watch(
                     row-key="level"
                     virtual-scroll
                     :rows="dataListCapacityDetails"
+                    :rows-per-page-options="[100]"
                     hide-pagination
                     :columns="columns"
                     :visible-columns="visibleColumns"
-                    v-model:pagination="pagination"
+                    :pagination="pagination"
+                    :loading="isLoadById"
                   >
                     <template v-slot:header="props">
                       <q-tr :props="props">
@@ -558,7 +558,6 @@ watch(
                       </div>
                     </template>
                   </d-table>
-                  <SkeletonTable v-else :columns="columns"/>
                 </div>
               </div>
             </div>

src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue

@@ -10,20 +10,10 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const store = useKpiDataStore();
 const mixin = useCounterMixin();
-const {
+const { messageError, findOrgNameOldHtml, date2Thai } = mixin;
-  showLoader,
-  hideLoader,
-  messageError,
-  findPosMasterNoOld,
-  findOrgNameOld,
-  findOrgNameOldHtml,
-  date2Thai,
-} = mixin;
 
 const modal = defineModel<boolean>("modal", { required: true });
 const filterKeyword = ref<string>("");
@@ -138,29 +128,6 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-/** เเปลง status เป็น text */
-function statusText(val: string) {
-  switch (val) {
-    case "WAITTING":
-      return "รอดำเนินการ";
-    case "PENDING":
-      return "เลือกตำแหน่งแล้ว";
-    case "APPROVE":
-      return "อนุมัติ";
-    case "REJECT":
-      return "ไม่อนุมัติ";
-    case "REPORT":
-      return "ส่งรายชื่อไปออกคำสั่ง";
-    case "WAITING":
-      return "รอออกคำสั่ง";
-    case "DONE":
-      return "ออกคำสั่งเสร็จแล้ว";
-
-    default:
-      return "-";
-  }
-}
-
 /** ปิด dialog */
 function close() {
   modal.value = false;
@@ -174,7 +141,6 @@ function getData() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
-      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
@@ -187,7 +153,7 @@ function getData() {
 watch(
   () => modal.value,
   (n) => {
-    if (n == true) {
+    if (n) {
       getData();
     }
   }
@@ -202,7 +168,6 @@ watch(
         <div class="row">
           <div class="col-12">
             <d-table
-              v-if="!isLoad"
               ref="table"
               :columns="columns"
               :rows="rows"
@@ -214,6 +179,8 @@ watch(
               dense
               :rows-per-page-options="[10, 25, 50, 100]"
               :visible-columns="visibleColumns"
+              :loading="isLoad"
+              :pagination="{ page: 1, rowsPerPage: 10 }"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
@@ -245,7 +212,6 @@ watch(
                 </q-tr>
               </template>
             </d-table>
-            <SkeletonTable v-else :columns="columns" />
           </div>
         </div>
       </q-card-section>

src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import { useQuasar } from "quasar";
+import { Loading, useQuasar } from "quasar";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -15,19 +15,16 @@ import DialogViewInfo from "@/modules/08_KPI/components/Tab/Dialog/DialogViewInf
 import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
 import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const store = useKpiDataStore();
-const { dialogRemove, showLoader, hideLoader, messageError, success } =
+const { dialogRemove, messageError, success } = useCounterMixin();
-  useCounterMixin();
 
 const checkDetail = ref<boolean>(false);
 const title = defineModel<string>("title", { required: true });
 const rows = defineModel<any>("data", { required: true });
 const numpage = defineModel<number>("page", { required: true });
 
-const isLoad = defineModel<boolean>('isLoad',{required:true})
+const isLoad = defineModel<boolean>("isLoad", { required: true });
 const props = defineProps({
   fetchList: { type: Function, required: true },
 });
@@ -139,7 +136,7 @@ async function onEvaluate() {
 function onDelete(id: string) {
   dialogRemove($q, async () => {
     try {
-      isLoad.value = true
+      isLoad.value = true;
       const url =
         numpage.value === 1
           ? config.API.kpiAchievement("planned") + `/${id}`
@@ -243,12 +240,10 @@ const isEditStep3 = computed(() => {
     </q-card-section>
     <q-separator />
     <q-card-section class="q-pa-sm">
-      
       <d-table
-      v-if="!isLoad"
         ref="table"
         :columns="columns"
-        :rows="rows"
+        :rows="rows || []"
         :filter="filterKeyword"
         row-key="id"
         flat
@@ -257,7 +252,7 @@ const isEditStep3 = computed(() => {
         hide-pagination
         :visible-columns="visibleColumns"
         :rows-per-page-options="[20]"
-        no-data-label="ไม่มีข้อมูล"
+        :loading="isLoad"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -464,7 +459,6 @@ const isEditStep3 = computed(() => {
           </div>
         </template>
       </d-table>
-      <SkeletonTable v-else :columns="columns"/>
     </q-card-section>
   </q-card>
 

src/modules/08_KPI/components/Tab/Topic/02_Competency.vue

@@ -22,8 +22,6 @@ import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/02_Co
 import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
 import DialogCompetncyByRow from "@/modules/08_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const modalLevel = ref<boolean>(false);
 const modalCompetncyByRow = ref<boolean>(false);
 const dataCompetncyByRow = ref<any[]>([]);
@@ -160,15 +158,14 @@ function onAdd(type: string) {
 
 /** ดึงข้อมูล */
 function getData(type: string) {
+  isLoad.value[type] = true;
   http
     .get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type}`)
     .then(async (res) => {
       const data = res.data.result.data;
-      isLoad.value[type] = data ? true : false;
       rows.value[type] = data;
       lists.value = await lists.value.filter((x: any) => x.type != type);
       lists.value.push({ type: type, data });
-      isLoad.value[type] = false;
     })
     .catch((e) => {
       messageError($q, e);
@@ -220,6 +217,7 @@ function getData(type: string) {
               : 0;
         }
       }
+      isLoad.value[type] = false;
     });
 }
 
@@ -400,20 +398,21 @@ watch(
           </q-btn>
         </div>
       </q-card-section>
+
       <q-card-section class="q-pa-sm">
         <d-table
-          v-if="!isLoad[item.id]"
           ref="table"
           :columns="columns"
-          :rows="rows[item.id]"
+          :rows="rows[item.id] || []"
           row-key="id"
           flat
           bordered
           :paging="true"
           dense
           hide-pagination
-          no-data-label="ไม่มีข้อมูล"
           :visible-columns="visibleColumns"
+          :rows-per-page-options="[20]"
+          :loading="isLoad[item.id]"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
@@ -634,7 +633,6 @@ watch(
             </div>
           </template>
         </d-table>
-        <SkeletonTable v-else :columns="columns" />
       </q-card-section>
     </q-card>
   </div>

src/modules/08_KPI/components/Tab/Topic/03_Develop.vue

@@ -13,8 +13,6 @@ import DialogEvalutionDevelop from "@/modules/08_KPI/components/Tab/DialogEvalua
 import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
 import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const store = useKpiDataStore();
 const route = useRoute();
 const evaluationId = ref<string>(route.params.id.toString());
@@ -26,14 +24,7 @@ const idEditDevelop = ref<string>("");
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
+const { date2Thai, messageError, dialogRemove, success } = mixin;
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogRemove,
-  success,
-} = mixin;
 
 const isUpdate = defineModel("isUpdate", {
   type: Boolean,
@@ -248,7 +239,6 @@ onMounted(() => {
     </q-card-section>
     <q-card-section class="q-pa-sm">
       <d-table
-        v-if="!isLoad"
         ref="table"
         :columns="columns"
         :rows="rows"
@@ -258,8 +248,9 @@ onMounted(() => {
         :paging="true"
         dense
         hide-pagination
-        no-data-label="ไม่มีข้อมูล"
+        :rows-per-page-options="[20]"
         :visible-columns="visibleColumns"
+        :loading="isLoad"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -507,8 +498,6 @@ onMounted(() => {
           </div>
         </template>
       </d-table>
-
-      <SkeletonTable v-else :columns="columns" />
     </q-card-section>
   </q-card>
 

src/modules/08_KPI/views/main.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
-import type { QTableProps } from "quasar";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import type { QTableProps } from "quasar";
 import type { DataProfile } from "@/interface/Main";
+import type { PropsTable } from "@/interface/PropsTable";
 import type {
   DataOptions,
   MainListKpi,
-  PaginationType,
 } from "@/modules/08_KPI/interface/index/Main";
 import type {
   RoundKpiResponse,
@@ -21,7 +21,6 @@ import type {
 } from "@/modules/08_KPI/interface/response/index";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -107,7 +106,6 @@ const columns = ref<QTableProps["columns"]>([
 /** List*/
 const year = ref<number>(new Date().getFullYear());
 const round = ref<string>("");
-const filterKeyword = ref<string>("");
 const roundMainOp = ref<DataOptions[]>([]);
 const roundDialgOp = ref<DataOptions[]>([]);
 
@@ -142,20 +140,18 @@ const formRound = reactive({
 
 /** pagetion*/
 const formQuery = reactive({
-  page: 1,
-  pageSize: 10,
   status: "",
   results: "",
 });
-const total = ref<number>(0);
+
-const totalList = ref<number>(1);
 const isRoundClose = ref<boolean>(false);
 
-const pagination = ref({
+const pagination = ref<PropsTable.Pagination>({
   sortBy: "desc",
   descending: false,
   page: 1,
   rowsPerPage: 10,
+  rowsNumber: 0,
 });
 
 /**
@@ -206,14 +202,12 @@ async function fetchRoundOption(type: string) {
     });
 }
 
-/**
+/** ฟังก์ชันดึงข้อมูลรายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล*/
- *  fetch รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
- */
 async function fetchList() {
   isLoad.value = true;
   let queryParams = {
-    page: formQuery.page,
+    page: pagination.value.page,
-    pageSize: formQuery.pageSize,
+    pageSize: pagination.value.rowsPerPage,
     kpiPeriodId: round.value,
     status: formQuery.status === "" ? undefined : formQuery.status,
     results: formQuery.results === "" ? undefined : formQuery.results,
@@ -225,21 +219,20 @@ async function fetchList() {
     })
     .then(async (res) => {
       const data = await res.data.result;
-      total.value = data.total;
+      pagination.value.rowsNumber = data.total;
-      totalList.value = Math.ceil(data.total / formQuery.pageSize);
       rows.value = data.data;
-      isLoad.value = false;
     })
     .catch((err) => {
-      isLoad.value = false;
       messageError($q, err);
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoad.value = false;
+    });
 }
 
 /** เลือกรอบการประเมิน */
 function changRound() {
-  formQuery.page = 1;
+  pagination.value.page = 1;
   fetchList();
 }
 
@@ -333,15 +326,6 @@ function checkClosed() {
   isRoundClose.value = formRound.kpiPeriodId.isClosed;
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: PaginationType) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
-}
-
 /** ดึงข้อมูล option */
 function getOrgOp() {
   http
@@ -421,12 +405,16 @@ function filterOption(val: string, update: Function, refData: string) {
   }
 }
 
-watch(
+/**
-  () => formQuery.pageSize,
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
-  () => {
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
-    fetchList();
+ */
-  }
+function onTableRequest(requestProps: PropsTable.RequestProps) {
-);
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  fetchList();
+}
 
 onMounted(async () => {
   await Promise.all([fetchRoundOption("main"), getOrgOp()]);
@@ -462,7 +450,7 @@ onMounted(async () => {
                   year-picker
                   :enableTimePicker="false"
                   @update:model-value="
-                    (formQuery.page = 1), fetchRoundOption('main')
+                    (pagination.page = 1), fetchRoundOption('main')
                   "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
@@ -557,7 +545,7 @@ onMounted(async () => {
                       outlined
                       use-input
                       input-debounce="0"
-                      @update:model-value="(formQuery.page = 1), fetchList()"
+                      @update:model-value="(pagination.page = 1), fetchList()"
                       :clearable="formQuery.status !== ''"
                       @clear="
                         (formQuery.status = ''),
@@ -589,7 +577,7 @@ onMounted(async () => {
                       lazy-rules
                       hide-bottom-space
                       outlined
-                      @update:model-value="(formQuery.page = 1), fetchList()"
+                      @update:model-value="(pagination.page = 1), fetchList()"
                       use-input
                       @clear="
                         (formQuery.results = ''),
@@ -615,11 +603,9 @@ onMounted(async () => {
 
             <div class="col-12">
               <d-table
-                v-if="!isLoad"
                 ref="table"
                 :columns="columns"
                 :rows="rows"
-                :filter="filterKeyword"
                 row-key="id"
                 flat
                 bordered
@@ -627,8 +613,9 @@ onMounted(async () => {
                 dense
                 :rows-per-page-options="[10, 25, 50, 100]"
                 :visible-columns="visibleColumns"
+                @request="onTableRequest"
                 v-model:pagination="pagination"
-                @update:pagination="updatePagination"
+                :loading="isLoad"
               >
                 <template v-slot:header="props">
                   <q-tr :props="props">
@@ -671,22 +658,7 @@ onMounted(async () => {
                     </q-card>
                   </div>
                 </template>
-                <template v-slot:pagination="scope">
-                  ทั้งหมด {{ total }} รายการ
-                  <q-pagination
-                    v-model="formQuery.page"
-                    active-color="primary"
-                    color="dark"
-                    :max="Number(totalList)"
-                    size="sm"
-                    boundary-links
-                    direction-links
-                    :max-pages="5"
-                    @update:model-value="fetchList"
-                  ></q-pagination>
-                </template>
               </d-table>
-              <SkeletonTable v-else :columns="columns" />
             </div>
           </div>
         </q-card>
@@ -746,7 +718,7 @@ onMounted(async () => {
 
             <div class="col-12">
               <q-select
-              v-if="!isLoadDialog"
+                v-if="!isLoadDialog"
                 :readonly="yearDialog === null"
                 v-model="formRound.kpiPeriodId"
                 outlined
@@ -760,7 +732,7 @@ onMounted(async () => {
                 :rules="[(val:DataOptions) => !!val.id || `${'กรุณาเลือกรอบการประเมิน'}`]"
                 @update:model-value="checkClosed"
               />
-              <q-skeleton type="QInput" height="40px" v-else/>
+              <q-skeleton type="QInput" height="40px" v-else />
             </div>
 
             <div class="col-12">

src/modules/08_KPI/views/mainEvaluator.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
@@ -9,10 +9,7 @@ import http from "@/plugins/http";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
-import type {
+import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
-  DataOptions,
-  Pagination,
-} from "@/modules/08_KPI/interface/index/Main";
 import type {
   ResRound,
   ResEvaluatorAssessor,
@@ -24,7 +21,7 @@ import TabOther from "@/modules/08_KPI/components/Evaluator/02_TabOther.vue";
 const $q = useQuasar();
 const router = useRouter();
 const store = useKpiDataStore();
-const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+const { messageError, date2Thai } = useCounterMixin();
 
 const dataListMain = ref<ResEvaluatorAssessor[]>([]);
 
@@ -87,7 +84,6 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 const totalList = ref<number>(0);
-const maxPage = ref<number>(1);
 
 /**
  * ดึงข้อมูลรายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
@@ -121,19 +117,19 @@ async function fetchRoundOption() {
         store.formQuery.round = roundOp.value[0].id;
         await fetchList();
       }
-      isLoadOp.value = false;
     })
     .catch((err) => {
       messageError($q, err);
-      isLoadOp.value = false;
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoadOp.value = false;
+    });
 }
 
 /** ดึงข้อมูล list */
-const isLoad = ref<boolean>(false)
+const isLoad = ref<boolean>(false);
 async function fetchList() {
-  isLoad.value = true
+  isLoad.value = true;
   const body = {
     page: store.formQuery.page,
     pageSize: store.formQuery.pageSize,
@@ -157,16 +153,15 @@ async function fetchList() {
     .post(config.API.kpiEvaluation + `/admin`, body)
     .then(async (res) => {
       const data = await res.data.result;
-      maxPage.value = Math.ceil(data.total / store.formQuery.pageSize);
       totalList.value = data.total;
       dataListMain.value = data.data;
-      isLoad.value = false
     })
     .catch((err) => {
       messageError($q, err);
-      isLoad.value = false
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoad.value = false;
+    });
 }
 
 /** เลือกรอบการประเมิน */
@@ -175,15 +170,6 @@ function changRound() {
   fetchList();
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: Pagination) {
-  store.formQuery.page = 1;
-  store.formQuery.pageSize = newPagination.rowsPerPage;
-}
-
 /** เปลี่ยน tab */
 async function onChangTab() {
   store.formQuery.page = 1;
@@ -192,13 +178,6 @@ async function onChangTab() {
   await fetchList();
 }
 
-watch(
-  () => store.formQuery.pageSize,
-  () => {
-    fetchList();
-  }
-);
-
 onMounted(async () => {
   await fetchRoundOption();
 });
@@ -347,8 +326,6 @@ onMounted(async () => {
                     :rows="dataListMain"
                     :formQuery="store.formQuery"
                     :total="totalList"
-                    :maxPage="maxPage"
-                    :updatePagination="updatePagination"
                     :fetchList="fetchList"
                     :is-load="isLoad"
                   />
@@ -361,8 +338,6 @@ onMounted(async () => {
                     :rows="dataListMain"
                     :formQuery="store.formQuery"
                     :total="totalList"
-                    :maxPage="maxPage"
-                    :updatePagination="updatePagination"
                     :fetchList="fetchList"
                     :is-load="isLoad"
                   />
@@ -375,8 +350,6 @@ onMounted(async () => {
                     :rows="dataListMain"
                     :formQuery="store.formQuery"
                     :total="totalList"
-                    :maxPage="maxPage"
-                    :updatePagination="updatePagination"
                     :fetchList="fetchList"
                     :is-load="isLoad"
                   />
@@ -389,8 +362,6 @@ onMounted(async () => {
                     :rows="dataListMain"
                     :formQuery="store.formQuery"
                     :total="totalList"
-                    :maxPage="maxPage"
-                    :updatePagination="updatePagination"
                     :fetchList="fetchList"
                     :is-load="isLoad"
                   />
@@ -403,8 +374,6 @@ onMounted(async () => {
                     :rows="dataListMain"
                     :formQuery="store.formQuery"
                     :total="totalList"
-                    :maxPage="maxPage"
-                    :updatePagination="updatePagination"
                     :fetchList="fetchList"
                     :is-load="isLoad"
                   />

src/modules/09_scholarship/views/main.vue

@@ -13,10 +13,8 @@ import type {
   Scholarship,
 } from "@/modules/09_scholarship/interface/index/Main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError } = mixin;
+const { messageError } = mixin;
 const router = useRouter();
 
 const $q = useQuasar();
@@ -88,7 +86,7 @@ const visibleColumns = ref<string[]>(["scholarshipYear", "scholarshipType"]);
 
 /** ดึงข้อมูล */
 async function getData() {
-  
+  isLoad.value = true;
   await http
     .get(
       config.API.developmentScholarship +
@@ -96,13 +94,12 @@ async function getData() {
     )
     .then(async (res) => {
       rows.value = res.data.result;
-      isLoad.value = false
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      isLoad.value = false
+      isLoad.value = false;
     });
 }
 
@@ -110,42 +107,22 @@ function onEdit(id: string) {
   router.push(`/scholarship/${id}`);
 }
 
-// watch(
-//   () => currentPage.value,
-//   () => {
-//     rowsPerPage.value = pagination.value.rowsPerPage;
-//     getData();
-//   }
-// );
-
-// watch(
-//   () => pagination.value.rowsPerPage,
-//   () => {
-//     rowsPerPage.value = pagination.value.rowsPerPage;
-//     currentPage.value = 1;
-//     getData();
-//   }
-// );
-
 async function getProfileId() {
-  isLoad.value = true
+  isLoad.value = true;
   if (dataStore.profileId) {
     profilId.value = dataStore.profileId;
   } else {
-    
     try {
       const res = await http.get(config.API.profilePosition());
       dataStore.profileId = res.data.result.profileId;
       profilId.value = dataStore.profileId;
-      
+      await getData();
     } catch (e) {
       messageError($q, e);
     } finally {
-      
+      isLoad.value = false;
     }
   }
-
-  await getData();
 }
 
 function convertType(val: string) {
@@ -259,9 +236,8 @@ onMounted(async () => {
             />
           </div>
 
-          <div>
+          <div class="col-12">
             <d-table
-              v-if="!isLoad"
               flat
               bordered
               dense
@@ -270,21 +246,9 @@ onMounted(async () => {
               :columns="columns"
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
-              v-model:pagination="pagination"
+              :pagination="pagination"
+              :loading="isLoad"
             >
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ rows.length }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
               <template v-slot:header="props">
                 <q-tr :props="props">
                   <q-th
@@ -346,7 +310,6 @@ onMounted(async () => {
                 </div>
               </template>
             </d-table>
-            <SkeletonTable v-else :columns="columns" />
           </div>
         </q-card>
       </div>

src/modules/10_registry/01_Information/01_Information.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from "vue";
-import { is, useQuasar, type QTableProps } from "quasar";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";

src/modules/10_registry/01_Information/02_ChangeName.vue

@@ -10,9 +10,6 @@ import config from "@/app.config";
 import { useQuasar, type QTableProps } from "quasar";
 import type { ChangNameRows } from "@/modules/10_registry/interface/response/01_Information";
 
-/** import component */
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const dataStore = useDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
@@ -194,23 +191,21 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <div v-if="isLoading">
+    <div class="col-12">
-      <SkeletonTable :columns="columns" />
-    </div>
-
-    <div class="col-12" v-else>
       <d-table
         flat
         dense
         bordered
         virtual-scroll
+        row-key="id"
         :rows="rows.length !== 0 ? rows : []"
         :columns="columns"
         :grid="!mode"
         :rows-per-page-options="[10, 25, 50, 100]"
         :visible-columns="visibleColumns"
         :virtual-scroll-sticky-size-start="48"
-        v-model:pagination="pagination"
+        :pagination="pagination"
+        :loading="isLoading"
       >
         <template v-slot:header="props">
           <q-tr :props="props">

src/modules/10_registry/01_Information/05_Educations.vue

@@ -10,7 +10,6 @@ import { useCounterMixin } from "@/stores/mixin";
 import type { EducationProfile } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const link = ref<string>("");
 const $q = useQuasar();
@@ -530,7 +529,7 @@ function onHistory(id: string) {
 
 /** get history */
 async function getHistory() {
-  isLoadingHistory.value = true
+  isLoadingHistory.value = true;
   rowsHistory.value = [];
   rowsHistoryData.value = [];
   await http
@@ -601,9 +600,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -611,9 +608,12 @@ onMounted(async () => {
       :rows="rows.length !== 0 ? rows : []"
       :columns="columns"
       :grid="!mode"
-      :rows-per-page-options="[10, 25, 50, 100]"
+      :rows-per-page-options="[1, 10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      :loading="isLoading"
+      row-key="id"
+      :pagination="{ page: 1, rowsPerPage: 10 }"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/01_Information/06_Ability.vue

@@ -12,7 +12,6 @@ import type { AbilityRows } from "@/modules/10_registry/interface/index/Main";
 
 /** import components */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataStore = useDataStore();
@@ -317,9 +316,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -330,7 +327,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/02_Government/02_Discipline.vue

@@ -11,7 +11,6 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 import type { DisciplineDetail } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataStore = useDataStore();
@@ -254,9 +253,8 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <SkeletonTable v-if="isLoading" :columns="columns" />
+
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -267,7 +265,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -321,6 +321,7 @@ onMounted(async () => {
           </q-td>
         </q-tr>
       </template>
+
       <template v-else v-slot:item="props">
         <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
           <q-card bordered flat>

src/modules/10_registry/02_Government/03_Leave.vue

@@ -10,7 +10,6 @@ import { useDataStore } from "@/stores/data";
 import type { LeaveFormType } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataStore = useDataStore();
@@ -396,9 +395,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -409,7 +406,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/02_Government/04_Duty.vue

@@ -11,7 +11,6 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataStore = useDataStore();
@@ -358,9 +357,8 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <SkeletonTable v-if="isLoading" :columns="columns" />
+
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -371,7 +369,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/02_Government/05_Actposition.vue

@@ -11,7 +11,6 @@ import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
 
 /** import components */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataStore = useDataStore();
@@ -287,9 +286,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -300,7 +297,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/02_Government/06_Assistance.vue

@@ -11,7 +11,6 @@ import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
 
 /** import components */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 
@@ -368,9 +367,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -381,7 +378,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/02_Government/07_Position.vue

@@ -14,7 +14,6 @@ import type {
 
 /**import components*/
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -526,9 +525,7 @@ onMounted(async () => {
     </div>
 
     <div class="col-12 q-mt-sm">
-      <SkeletonTable v-if="isLoading.position" :columns="columns" />
       <d-table
-        v-else
         flat
         dense
         bordered
@@ -539,6 +536,9 @@ onMounted(async () => {
         :rows-per-page-options="[10, 25, 50, 100]"
         :visible-columns="visibleColumns"
         :virtual-scroll-sticky-size-start="48"
+        :isLoading="isLoading.position"
+        row-key="id"
+        :pagination="{ page: 1, rowsPerPage: 10 }"
       >
         <template v-slot:header="props">
           <q-tr :props="props">

src/modules/10_registry/03_Salary/01_Salary.vue

@@ -10,7 +10,6 @@ import { useDataStore } from "@/stores/data";
 import type { SalaryFormType } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -729,19 +728,20 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
       virtual-scroll
+      row-key="id"
       :rows="rows.length !== 0 ? rows : []"
       :columns="columns"
       :grid="!mode"
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      :loading="isLoading"
+      :pagination="{ page: 1, rowsPerPage: 10 }"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -765,7 +765,11 @@ onMounted(async () => {
             <div v-else-if="col.name == 'status'">
               {{ props.row.status ? props.row.status : "-" }}
             </div>
-            <div v-else-if="col.name == 'organization'" class="text-html">
+            <div
+              v-else-if="col.name == 'organization'"
+              class="text-html"
+              style="width: 200px"
+            >
               {{
                 props.row
                   ? findOrgNameHtml({

src/modules/10_registry/03_Salary/02_Nopaid.vue

@@ -11,7 +11,6 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 import type { NopaidFormType } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -340,9 +339,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -353,7 +350,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/04_Achievement/01_Certificate.vue

@@ -11,7 +11,6 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 import type { CertificateDetail } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -338,10 +337,8 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <SkeletonTable v-if="isLoading" :columns="columns" />
 
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -352,7 +349,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/04_Achievement/02_Training.vue

@@ -11,7 +11,6 @@ import type { TrainingFormType } from "@/modules/10_registry/interface/index/Mai
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -447,9 +446,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -460,7 +457,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/04_Achievement/03_Insignia.vue

@@ -11,7 +11,6 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 import type { InsigniaFormType } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -555,9 +554,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -568,7 +565,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/04_Achievement/04_Honor.vue

@@ -12,7 +12,6 @@ import type { HonorFormData } from "@/modules/10_registry/interface/index/Main";
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -339,9 +338,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -352,7 +349,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/04_Achievement/05_Assessments.vue

@@ -13,7 +13,6 @@ import type {
 } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -473,9 +472,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -486,7 +483,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue

@@ -8,7 +8,6 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
 import DialogDevelop from "@/modules/10_registry/Dialog/DialogDevelopmant.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -209,9 +208,8 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <SkeletonTable v-if="isLoading" :columns="columns" />
+
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -222,6 +220,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      :pagination="{ page: 1, rowsPerPage: 10 }"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/05_Other/01_Other.vue

@@ -10,7 +10,6 @@ import { useDataStore } from "@/stores/data";
 import type { OtherFormType } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const dataPerson = useDataStore();
@@ -232,9 +231,7 @@ onMounted(async () => {
       />
     </q-toolbar>
 
-    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
-      v-else
       flat
       dense
       bordered
@@ -245,7 +242,9 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
+      :pagination="pagination"
+      :loading="isLoading"
+      row-key="id"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -276,6 +275,7 @@ onMounted(async () => {
           </q-td>
         </q-tr>
       </template>
+
       <template v-else v-slot:item="props">
         <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
           <q-card bordered flat>
@@ -308,13 +308,6 @@ onMounted(async () => {
           </q-card>
         </div>
       </template>
-      <template v-slot:no-data>
-        <div
-          class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
-        >
-          <span> ไม่พบข้อมูล </span>
-        </div>
-      </template>
     </d-table>
   </div>
 

src/modules/10_registry/Dialog/DialogHistory.vue

@@ -8,7 +8,6 @@ import type { QTableProps } from "quasar";
 
 /** import component */
 import DialogHeader from "@/components/DialogHeader.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const { date2Thai, onSearchDataTable, findOrgNameHtml } = useCounterMixin();
 
@@ -129,11 +128,8 @@ watch(
             />
           </div>
         </div>
-        <div v-if="isLoading">
-          <SkeletonTable :columns="columns" />
-        </div>
 
-        <div v-else class="col-12">
+        <div class="col-12">
           <d-table
             flat
             dense
@@ -144,7 +140,9 @@ watch(
             :rows-per-page-options="[10, 25, 50, 100]"
             :visible-columns="visibleColumns"
             :virtual-scroll-sticky-size-start="48"
-            v-model:pagination="pagination"
+            :pagination="pagination"
+            :loading="isLoading"
+            row-key="id"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -262,13 +260,6 @@ watch(
                 </q-card>
               </div>
             </template>
-            <template v-slot:no-data>
-              <div
-                class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
-              >
-                <span> ไม่พบข้อมูล </span>
-              </div>
-            </template>
           </d-table>
         </div>
       </q-card-section>

src/modules/10_registry/views/requestEditMain.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -11,15 +11,12 @@ import { useCounterMixin } from "@/stores/mixin";
 
 /**importType*/
 import type { QTableProps } from "quasar";
-import type {
+import type { PropsTable } from "@/interface/PropsTable";
-  DataOption,
+import type { DataOption } from "@/modules/10_registry/interface/index/Main";
-  NewPagination,
-} from "@/modules/10_registry/interface/index/Main";
 import type { DataRequest } from "@/modules/10_registry/interface/response/Main";
 
 /** importComponents*/
 import DialogAddRequestEdit from "@/modules/10_registry/components/DialogAddRequestEdit.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 /** use */
 const $q = useQuasar();
@@ -38,10 +35,6 @@ const isLoading = ref<boolean>(false);
 
 /** Table*/
 const rows = ref<DataRequest[]>([]);
-const page = ref<number>(1);
-const pageSize = ref<number>(10);
-const rowsTotal = ref<number>(0);
-const maxPage = ref<number>(0);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -110,10 +103,11 @@ const visibleColumns = ref<string[]>([
   "status",
   "remark",
 ]);
-const pagination = ref({
+const pagination = ref<PropsTable.Pagination>({
   descending: true,
-  page: page.value,
+  page: 1,
-  rowsPerPage: pageSize.value,
+  rowsPerPage: 10,
+  rowsNumber: 0,
 });
 
 /** function กลับไปหน้าทะเบียนประวัติ*/
@@ -129,8 +123,8 @@ function onClickAdd() {
 /** function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล*/
 async function fetchListRequset() {
   let queryParams = {
-    page: page.value,
+    page: pagination.value.page,
-    pageSize: pageSize.value,
+    pageSize: pagination.value.rowsPerPage,
     status: status.value,
     keyword: keyword.value,
   };
@@ -140,10 +134,9 @@ async function fetchListRequset() {
       params: queryParams,
     })
     .then((res) => {
-      const data = res.data.result;
+      const result = res.data.result;
-      maxPage.value = Math.ceil(data.total / pageSize.value);
+      pagination.value.rowsNumber = result.total;
-      rowsTotal.value = data.total;
+      rows.value = result.data;
-      rows.value = data.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -155,7 +148,7 @@ async function fetchListRequset() {
 
 /** function เลือกสถานะคำร้อง*/
 function updateStatusValue() {
-  page.value = 1;
+  pagination.value.page = 1;
   fetchListRequset();
 }
 
@@ -180,21 +173,16 @@ function filterOption(val: string, update: Function) {
 }
 
 /**
- * function อัพเดทขนาดหน้าใน pagination
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
- * @param newPagination ข้อมูลใหม่ของ pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
  */
-function updatePageSizePagination(newPagination: NewPagination) {
+function onTableRequest(requestProps: PropsTable.RequestProps) {
-  page.value = 1;
+  const newPagination = requestProps?.pagination || requestProps;
-  pageSize.value = newPagination.rowsPerPage;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  fetchListRequset();
 }
 
-watch(
-  () => pageSize.value,
-  () => {
-    fetchListRequset();
-  }
-);
-
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
   fetchListRequset();
@@ -298,17 +286,16 @@ onMounted(async () => {
           </div>
         </div>
         <div class="col-12">
-          <SkeletonTable v-if="isLoading" :columns="columns" />
           <d-table
-            v-else
             :columns="columns"
             :rows="rows"
             row-key="id"
             :rows-per-page-options="[10, 25, 50, 100]"
             :paging="true"
             :visible-columns="visibleColumns"
-            @update:pagination="updatePageSizePagination"
             v-model:pagination="pagination"
+            :loading="isLoading"
+            @request="onTableRequest"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -338,20 +325,6 @@ onMounted(async () => {
                 </q-td>
               </q-tr>
             </template>
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ rowsTotal }} รายการ
-              <q-pagination
-                v-model="page"
-                active-color="primary"
-                color="dark"
-                :max="Number(maxPage)"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-                @update:model-value="fetchListRequset()"
-              ></q-pagination>
-            </template>
           </d-table>
         </div>
       </q-card>

src/modules/11_probation/views/mainDetail.vue

@@ -14,18 +14,10 @@ import type {
   ProbationFormType,
 } from "@/modules/11_probation/interface/index/main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
+const { messageError, findOrgName, hideLoader, date2Thai, onSearchDataTable } =
-  messageError,
+  mixin;
-  findOrgName,
-  showLoader,
-  hideLoader,
-  date2Thai,
-  onSearchDataTable,
-} = mixin;
 
 const profileId = ref<string>("");
 const rows = ref<ListMain[]>([]);
@@ -312,7 +304,10 @@ onMounted(async () => {
             </div>
             <q-resize-observer @resize="onResize" />
             <q-card-section>
-              <div class="text-center q-mt-md" style="display: flex;justify-content: center;">
+              <div
+                class="text-center q-mt-md"
+                style="display: flex; justify-content: center"
+              >
                 <q-avatar v-if="!isLoad" :size="sizeImg" rounded>
                   <img
                     :src="profileImg"
@@ -397,7 +392,6 @@ onMounted(async () => {
             </div>
             <div class="q-mt-sm">
               <d-table
-                v-if="!isLoad"
                 flat
                 dense
                 bordered
@@ -409,6 +403,8 @@ onMounted(async () => {
                 :rows-per-page-options="[10, 25, 50, 100]"
                 :visible-columns="visibleColumns"
                 :virtual-scroll-sticky-size-start="48"
+                :pagination="{ page: 1, rowsPerPage: 10 }"
+                :loading="isLoad"
               >
                 <template v-slot:header="props">
                   <q-tr :props="props">
@@ -471,15 +467,7 @@ onMounted(async () => {
                     </q-card>
                   </div>
                 </template>
-                <template v-slot:no-data>
-                  <div
-                    class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
-                  >
-                    <span> ไม่พบข้อมูล </span>
-                  </div>
-                </template>
               </d-table>
-              <SkeletonTable v-else :columns="columns" />
             </div>
           </q-card>
         </div>

src/modules/13_portfolio/views/Main.vue

@@ -10,8 +10,6 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import type { PortfolioRowsType } from "@/modules/13_portfolio/interface/Main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -115,7 +113,6 @@ function onDelete(id: string) {
   });
 }
 
-
 /** ฟังก์ชั่นค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
@@ -125,6 +122,10 @@ function onSearch() {
   );
 }
 
+function onTableRequest() {
+  console.log(1111);
+}
+
 /** Hook Lifecycle */
 onMounted(async () => {
   await fecthList();
@@ -199,35 +200,21 @@ onMounted(async () => {
             </div>
           </div>
 
-          <SkeletonTable v-if="isLoading" :columns="columns" />
+          <div class="col-12">
-          <div class="col-12" v-else>
             <d-table
               flat
               bordered
               dense
               :paging="true"
               row-key="id"
-              class="custom-table2"
-              style="max-height: 80vh"
               :rows="rows"
               :columns="columns"
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
-              v-model:pagination="pagination"
+              :pagination="pagination"
+              :loading="isLoading"
+              @request="onTableRequest"
             >
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ rows.length }} รายการ
-                <q-pagination
-                  v-model="pagination.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
-              </template>
               <template v-slot:header="props">
                 <q-tr :props="props">
                   <q-th

src/modules/14_IDP/views/main.vue

@@ -8,10 +8,9 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useIndividualDevelopmentPlan } from "@/modules/14_IDP/store"; // ดึง store IDP
 
+import type { PropsTable } from "@/interface/PropsTable";
 import type { DataOption, RowsListMain } from "@/modules/14_IDP/interface/Main";
 
-import SkeletonTable from "@/components/SkeletonTable.vue";
-
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -23,13 +22,12 @@ const filterKeyword = ref<string>("");
 const status = ref<string>("ALL"); // สถานะคำร้อง
 const statusOptions = ref<DataOption[]>(store.optionStatus);
 const rows = ref<RowsListMain[]>([]);
-const total = ref<number>(0);
+const pagination = ref<PropsTable.Pagination>({
-const totalList = ref<number>(1);
-const pagination = ref({
   sortBy: "createdAt",
   descending: true,
   page: 1,
   rowsPerPage: 10,
+  rowsNumber: 0,
 });
 const visibleColumns = ref<string[]>([
   "no",
@@ -186,11 +184,9 @@ async function getListData() {
   `
     )
     .then(async (res) => {
-      const data = await res.data.result.data;
+      const result = await res.data.result;
-      const dataTotal = await res.data.result.total;
+      pagination.value.rowsNumber = result.total;
-      totalList.value = Math.ceil(dataTotal / pagination.value.rowsPerPage);
+      rows.value = result.data;
-      total.value = dataTotal;
-      rows.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -245,10 +241,15 @@ async function downloadUrl(id: string, fileName: string) {
     });
 }
 
-/** เมื่อมีการเปลี่ยน แถว ดึงข้อมูลใหม่ */
+/**
-function updatePagination(newPagination: any) {
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
-  pagination.value.page = 1;
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+ */
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  getListData();
 }
 
 /**
@@ -264,13 +265,6 @@ function getSerach() {
   getListData();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    await getListData();
-  }
-);
-
 onMounted(async () => {
   await getListData();
 });
@@ -366,17 +360,16 @@ onMounted(async () => {
           </div>
 
           <div class="col-12">
-            <SkeletonTable v-if="isLoading" :columns="columns" />
             <d-table
-              v-else
               :columns="columns"
               :rows="rows"
               row-key="id"
               :paging="true"
               :visible-columns="visibleColumns"
               :rows-per-page-options="[10, 25, 50, 100]"
-              @update:pagination="updatePagination"
+              @request="onTableRequest"
               v-model:pagination="pagination"
+              :loading="isLoading"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
@@ -459,20 +452,6 @@ onMounted(async () => {
                   </q-td>
                 </q-tr>
               </template>
-              <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="getListData()"
-                ></q-pagination>
-              </template>
             </d-table>
           </div>
         </q-card>