From 04184c0d70b9913e01228621a08788b3bb7d3830 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 6 Aug 2025 14:40:36 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B9=82=E0=B8=AB=E0=B8=A5=E0=B8=94=20=E0=B8=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B9=82=E0=B8=AD=E0=B8=99=20=E0=B8=AD=E0=B8=B8=E0=B8=97?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=93=E0=B9=8C/=E0=B8=A3=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=97=E0=B8=B8=E0=B8=81=E0=B8=82=E0=B9=8C=20?=
 =?UTF-8?q?=E0=B8=82=E0=B8=AD=E0=B8=A5=E0=B8=B2=E0=B8=AD=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/02_transfer/views/AddTransfer.vue | 29 ++++++++-----
 src/modules/02_transfer/views/Main.vue        | 15 ++++---
 src/modules/03_retire/views/addRetire.vue     | 43 +++++++++++++------
 src/modules/03_retire/views/main.vue          | 37 ++++++++++------
 src/modules/07_appealComplain/views/Add.vue   |  8 +++-
 src/modules/07_appealComplain/views/Edit.vue  | 11 ++---
 src/modules/07_appealComplain/views/Form.vue  |  9 ++++
 src/modules/07_appealComplain/views/Main.vue  | 17 +++++---
 8 files changed, 113 insertions(+), 56 deletions(-)

diff --git a/src/modules/02_transfer/views/AddTransfer.vue b/src/modules/02_transfer/views/AddTransfer.vue
index 0d013b1..10adab8 100644
--- a/src/modules/02_transfer/views/AddTransfer.vue
+++ b/src/modules/02_transfer/views/AddTransfer.vue
@@ -15,7 +15,7 @@ const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
+const { success, messageError, dialogConfirm ,showLoader,hideLoader} = mixin;
 
 const id = ref<string>(
   router.currentRoute.value.name === "addTransfer"
@@ -23,6 +23,7 @@ const id = ref<string>(
     : route.params.id.toString()
 ); //id path
 
+const isLoading = ref<boolean>(false);
 const files = ref<any>(); //ไฟล์
 const tranferOrg = ref<string>(""); //ชื่อหน่วยงานที่ขอโอนไป
 const noteReason = ref<string>(""); //เหตุผล
@@ -42,7 +43,7 @@ async function saveData() {
 
 /** ฟังก์ชั่นสร้างขอโอน */
 async function createTransfer() {
-  showLoader();
+  showLoader()
   const formData = new FormData();
   formData.append("Organization", tranferOrg.value);
   formData.append("Reason", noteReason.value);
@@ -51,14 +52,14 @@ async function createTransfer() {
     .post(config.API.listtransfer(), formData)
     .then((res) => {
       router.push(`/transfer/` + res.data.result);
+      hideLoader()
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
+      hideLoader()
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /**
@@ -66,7 +67,7 @@ async function createTransfer() {
  * @param id ไอดีของข้อมูล
  */
 async function fecthDataTransfer(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.transferByid(id))
     .then((res: any) => {
@@ -74,13 +75,13 @@ async function fecthDataTransfer(id: string) {
       tranferOrg.value = data.organization;
       noteReason.value = data.reason;
       files.value = data.docs;
+      isLoading.value = false;
     })
     .catch((e: any) => {
       messageError($q, e);
+      isLoading.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /**
@@ -129,6 +130,7 @@ onMounted(() => {
             <div class="row">
               <div class="col-12 row q-col-gutter-sm">
                 <q-input
+                  v-if="!isLoading"
                   :class="
                     routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
                   "
@@ -140,8 +142,11 @@ onMounted(() => {
                   :readonly="routeName != 'addTransfer'"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
                 />
-
+                <div class="col-12" v-else>
+                  <q-skeleton type="QInput" height="40px" />
+                </div>
                 <q-input
+                  v-if="!isLoading"
                   :class="
                     routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
                   "
@@ -154,7 +159,9 @@ onMounted(() => {
                   :readonly="routeName != 'addTransfer'"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
                 />
-
+                <div class="col-12" v-else>
+                  <q-skeleton type="QInput" height="120px" />
+                </div>
                 <div class="col-12 row" v-if="routeName == 'addTransfer'">
                   <q-file
                     v-model="files"
diff --git a/src/modules/02_transfer/views/Main.vue b/src/modules/02_transfer/views/Main.vue
index 5d4c3b5..d8c01f5 100644
--- a/src/modules/02_transfer/views/Main.vue
+++ b/src/modules/02_transfer/views/Main.vue
@@ -14,14 +14,15 @@ import type {
   TransferMain,
 } from "@/modules/02_transfer/interface/Main";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
 const transferData = useTransferDataStore();
 
 const { statusText } = transferData;
-const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
-  mixin;
+const { date2Thai, messageError, onSearchDataTable } = mixin;
 
 const pagination = ref({
   sortBy: "desc",
@@ -30,6 +31,7 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+const isLoading = ref<boolean>(false);
 const rows = ref<TransferMain[]>([]);
 const rowsData = ref<TransferMain[]>([]);
 const filter = ref<string>("");
@@ -120,7 +122,7 @@ const columns = ref<QTableProps["columns"]>([
 
 //นำข้อมูลมาแสดง
 async function fecthListTransfer() {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.listUserTransfer())
     .then((res) => {
@@ -139,12 +141,11 @@ async function fecthListTransfer() {
       }));
       rows.value = listData;
       rowsData.value = listData;
+      isLoading.value = false;
     })
     .catch((e: any) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -246,6 +247,7 @@ onMounted(async () => {
           </div>
           <div>
             <d-table
+              v-if="!isLoading"
               flat
               bordered
               dense
@@ -339,6 +341,7 @@ onMounted(async () => {
                 </div>
               </template>
             </d-table>
+            <SkeletonTable v-else :columns="columns" />
           </div>
         </q-card>
       </div>
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index 64080f6..1715d4f 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
+import { is, useQuasar } from "quasar";
 import type { QForm, QTableProps } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
@@ -20,6 +20,8 @@ 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();
 const router = useRouter();
@@ -44,6 +46,7 @@ const id = ref<string>(
     ? route.params.id.toString()
     : ""
 ); //เก็บ id path
+const isLoad = ref<boolean>(false);
 const rowsApprover = ref<RowsType>();
 const myform = ref<QForm | null>(null); //form
 const tranferOrg = ref(""); //สถานที่ยื่นขอลาออกจากราชการ
@@ -201,7 +204,7 @@ function cancelResing() {
  * @param id ไอดีของข้อมูล
  */
 async function fectDataresign(id: string) {
-  showLoader();
+  isLoad.value = true;
   await http
     .get(config.API.resingByidType(link.value, id))
     .then((res) => {
@@ -225,13 +228,12 @@ async function fectDataresign(id: string) {
       };
       files.value = data.docs;
       dataDetail.value = data;
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /**
@@ -318,6 +320,7 @@ onMounted(async () => {
 
           <div class="col-12 row q-col-gutter-sm q-pa-md">
             <q-input
+              v-if="!isLoad"
               :class="
                 routeName !== 'AddRetire'
                   ? 'col-md-9 col-xs-12'
@@ -332,7 +335,9 @@ onMounted(async () => {
               :readonly="routeName != 'AddRetire'"
               :rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
             />
-
+            <div class="col-md-9 col-xs-12 inputgreen" v-else>
+              <q-skeleton type="QInput" height="40px" />
+            </div>
             <!-- <datepicker
                     :class="
                       routeName !== 'AddRetire'
@@ -383,6 +388,7 @@ onMounted(async () => {
                   </datepicker> -->
 
             <datepicker
+              v-if="!isLoad"
               :class="
                 routeName !== 'AddRetire'
                   ? 'col-md-3 col-xs-12'
@@ -428,7 +434,11 @@ onMounted(async () => {
                 </q-input>
               </template>
             </datepicker>
+            <div v-else class="col-md-3 col-xs-12">
+              <q-skeleton type="QInput" height="40px" />
+            </div>
             <q-select
+              v-if="!isLoad"
               v-model="noteReason"
               :class="
                 routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
@@ -448,6 +458,9 @@ onMounted(async () => {
                     ]"
             >
             </q-select>
+            <div v-else class="col-12">
+              <q-skeleton type="QInput" height="40px" />
+            </div>
             <q-input
               :class="
                 routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
@@ -595,6 +608,7 @@ onMounted(async () => {
                     <q-separator />
                     <div class="col-12 q-pa-sm">
                       <d-table
+                        v-if="!isLoad"
                         ref="table"
                         :columns="columnsCommanders"
                         :rows="rowsApprover?.commanders ?? []"
@@ -643,11 +657,11 @@ onMounted(async () => {
                           </q-tr>
                         </template>
                       </d-table>
+                      <SkeletonTable v-else :columns="columnsCommanders" />
                     </div>
                   </q-card>
                 </div>
 
-                <!-- ผลการพิจารณาของผู้มีอำนาจ -->
                 <div class="col-12 row" v-if="routeName != 'AddRetire'">
                   <q-card bordered class="row col-12 text-dark q-mt-sm">
                     <div
@@ -662,7 +676,7 @@ onMounted(async () => {
                       <div class="col-12 row bg-white q-col-gutter-md">
                         <div class="col-xs-6 row items-start">
                           <div class="col-12 text-top">ชื่อ - นามสกุล</div>
-                          <div class="col-12 text-detail">
+                          <div class="col-12 text-detail" v-if="!isLoad">
                             {{
                               rowsApprover &&
                               rowsApprover.approvers &&
@@ -671,10 +685,11 @@ onMounted(async () => {
                                 : "-"
                             }}
                           </div>
+                          <q-skeleton v-else type="text" width="150px" />
                         </div>
                         <div class="col-xs-6 row items-start">
                           <div class="col-12 text-top">สถานะ</div>
-                          <div class="col-12 text-detail">
+                          <div v-if="!isLoad" class="col-12 text-detail">
                             {{
                               rowsApprover &&
                               rowsApprover.approvers &&
@@ -685,12 +700,13 @@ onMounted(async () => {
                                 : "-"
                             }}
                           </div>
+                          <q-skeleton v-else type="text" width="150px" />
                         </div>
                         <div class="col-xs-6 row items-start">
                           <div class="col-12 text-top">
                             วันสุดท้ายที่ยับยั้ง
                           </div>
-                          <div class="col-12 text-detail">
+                          <div v-if="!isLoad" class="col-12 text-detail">
                             {{
                               rowsApprover &&
                               rowsApprover.approvers &&
@@ -701,12 +717,13 @@ onMounted(async () => {
                                 : "-"
                             }}
                           </div>
+                          <q-skeleton v-else type="text" width="150px" />
                         </div>
                         <div class="col-xs-12 row items-start">
                           <div class="col-12 text-top">
                             ความคิดเห็นและเหตุผล
                           </div>
-                          <div class="col-12 text-detail">
+                          <div v-if="!isLoad" class="col-12 text-detail">
                             {{
                               rowsApprover &&
                               rowsApprover.approvers &&
@@ -715,6 +732,7 @@ onMounted(async () => {
                                 : "-"
                             }}
                           </div>
+                          <q-skeleton v-else type="text" width="150px" />
                         </div>
                       </div>
                     </div>
@@ -751,6 +769,7 @@ onMounted(async () => {
                     <q-separator />
                     <div class="col-12 q-pa-sm">
                       <d-table
+                        v-if="!isLoad"
                         ref="table"
                         :columns="columnsCommanders"
                         :rows="rowsApprover?.cancelCommanders ?? []"
@@ -799,11 +818,11 @@ onMounted(async () => {
                           </q-tr>
                         </template>
                       </d-table>
+                      <SkeletonTable v-else :columns="columnsCommanders" />
                     </div>
                   </q-card>
                 </div>
 
-                <!-- ผลการพิจารณาของผู้มีอำนาจ -->
                 <div class="col-12 row" v-if="routeName != 'AddRetire'">
                   <q-card bordered class="row col-12 text-dark q-mt-sm">
                     <div
diff --git a/src/modules/03_retire/views/main.vue b/src/modules/03_retire/views/main.vue
index 5ef5e4b..d4dacae 100644
--- a/src/modules/03_retire/views/main.vue
+++ b/src/modules/03_retire/views/main.vue
@@ -15,16 +15,21 @@ 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 } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
+  mixin;
 const RestData = useRestDataStore();
 const { statusText } = RestData; //Func แปลง status to text
 
+const isLoad = ref<boolean>(false);
 const rows = ref<MainList[]>([]);
+const rowsData = ref<MainList[]>([]);
 const filter = ref<string>("");
 const pagination = ref({
   sortBy: "desc",
@@ -91,11 +96,12 @@ const columns = ref<QTableProps["columns"]>([
 
 /** ดึงข้อมูล */
 async function fectListleave() {
+  isLoad.value = true;
   await http
     .get(config.API.listUserByType(link.value))
     .then(async (res) => {
       let data = await res.data.result;
-      rows.value = data.map((e: MainListResponse) => ({
+      const list = data.map((e: MainListResponse) => ({
         id: e.id,
         placeLeave: e.location,
         dateStartLeave: date2Thai(e.sendDate),
@@ -103,9 +109,13 @@ async function fectListleave() {
         status: e.status,
         statustext: statusText(e.status),
       }));
+      rowsData.value = list;
+      rows.value = list;
+      isLoad.value = false;
     })
     .catch((e: any) => {
       messageError($q, e);
+      isLoad.value = false;
     })
     .finally(() => {});
 }
@@ -117,10 +127,13 @@ async function clickAdd() {
   router.push(`/retire/add`);
 }
 
-/** ทำก่อน mounted */
-onBeforeMount(() => {
-  showLoader();
-});
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
@@ -128,7 +141,6 @@ onBeforeMount(() => {
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
   await fectListleave();
-  hideLoader();
 });
 </script>
 <template>
@@ -161,15 +173,10 @@ onMounted(async () => {
                 debounce="300"
                 placeholder="ค้นหา"
                 style="max-width: 200px"
+                @keydown.enter.prevent="onSearch"
               >
                 <template v-slot:append>
-                  <q-icon v-if="filter == ''" name="search" />
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
+                  <q-icon name="search" />
                 </template>
               </q-input>
               <!-- แสดงคอลัมน์ใน table -->
@@ -193,6 +200,7 @@ onMounted(async () => {
           </div>
           <div>
             <d-table
+              v-if="!isLoad"
               flat
               bordered
               dense
@@ -272,6 +280,7 @@ onMounted(async () => {
                 </div>
               </template>
             </d-table>
+            <SkeletonTable v-else :columns="columns" />
           </div>
         </q-card>
       </div>
diff --git a/src/modules/07_appealComplain/views/Add.vue b/src/modules/07_appealComplain/views/Add.vue
index dba72b8..b486884 100644
--- a/src/modules/07_appealComplain/views/Add.vue
+++ b/src/modules/07_appealComplain/views/Add.vue
@@ -21,6 +21,7 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const storeData = useDataStore();
 
+const isLoad = ref<boolean>(false)
 const { findOrgName, success, messageError, showLoader, hideLoader } = mixin;
 
 const formProfile = reactive<FormProfile>({
@@ -34,15 +35,18 @@ const formProfile = reactive<FormProfile>({
 /** ดึงข้อมูลจาก keycloak*/
 async function getProFile() {
   try {
-    showLoader();
+    isLoad.value = true
     if (!storeData.dataprofilePosition) {
       const res = await http.get(config.API.profilePosition());
       await updateFormProfile(res.data.result);
+      isLoad.value = false
     } else {
       await updateFormProfile(storeData.dataprofilePosition);
+      isLoad.value = false
     }
   } catch (error) {
     messageError($q, error);
+    isLoad.value = false
   } finally {
     hideLoader();
   }
@@ -113,7 +117,7 @@ onMounted(() => {
         />
         เพิ่มอุทธรณ์/ร้องทุกข์
       </div>
-      <Form :on-submit="onSubmit" :form-profile="formProfile" />
+      <Form :on-submit="onSubmit" :form-profile="formProfile" v-model:isLoad="isLoad"/>
     </div>
   </div>
 </template>
diff --git a/src/modules/07_appealComplain/views/Edit.vue b/src/modules/07_appealComplain/views/Edit.vue
index 4cdcf58..9b80d58 100644
--- a/src/modules/07_appealComplain/views/Edit.vue
+++ b/src/modules/07_appealComplain/views/Edit.vue
@@ -22,6 +22,7 @@ const route = useRoute();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader } = mixin;
 
+const isLoad = ref<boolean>(false);
 const id = ref<string>(route.params.id as string);
 const historyStatusOb = reactive<HistoryStatusType>({
   status: "",
@@ -53,7 +54,7 @@ const data = reactive<EditDataList>({
 
 /** ดึงข้อมูล */
 function getData() {
-  showLoader();
+  isLoad.value = true;
   http
     .get(config.API.appealByID(id.value))
     .then((res) => {
@@ -73,13 +74,13 @@ function getData() {
       data.disciplineComplaint_Appeal_Docs =
         dataList.disciplineComplaint_Appeal_Docs;
       data.historyStatus = dataList.historyStatus;
+      isLoad.value = false;
     })
     .catch((e) => {
       messageError($q, e);
+      isLoad.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /** ดึงข้อมูลหน้า แก้ไขอุทธรณ์/ร้องทุกข์
@@ -122,7 +123,7 @@ onMounted(() => {
         />
         แก้ไขอุทธรณ์/ร้องทุกข์
       </div>
-      <Form :data="data" :get-report="getReport" />
+      <Form :data="data" :get-report="getReport" v-model:is-load="isLoad"/>
     </div>
   </div>
 </template>
diff --git a/src/modules/07_appealComplain/views/Form.vue b/src/modules/07_appealComplain/views/Form.vue
index 124d744..85ce7cd 100644
--- a/src/modules/07_appealComplain/views/Form.vue
+++ b/src/modules/07_appealComplain/views/Form.vue
@@ -17,6 +17,7 @@ const mixin = useCounterMixin();
 const { dialogConfirm } = mixin;
 const dataStore = useAppealComplainStore();
 
+const isLoad = defineModel<boolean>("isLoad", { required: true });
 const printForm = ref<string>("");
 const isReadOnly = ref<boolean>(false);
 const historyStatusOb = reactive<HistoryStatusType>({
@@ -237,6 +238,7 @@ watch(
               <div class="row q-col-gutter-sm">
                 <div class="col-xs-12 col-md-3">
                   <q-select
+                    v-if="!isLoad"
                     :class="inputEdit(isReadOnly)"
                     :readonly="isReadOnly"
                     ref="typeRef"
@@ -253,9 +255,11 @@ watch(
                     lazy-rules
                     hide-bottom-space
                   />
+                  <q-skeleton v-else type="QSelect" height="40px" />
                 </div>
                 <div class="col-xs-12 col-md-3">
                   <q-input
+                    v-if="!isLoad"
                     :class="inputEdit(isReadOnly)"
                     :readonly="isReadOnly"
                     ref="titleRef"
@@ -268,11 +272,13 @@ watch(
                     label="เรื่องอุทธรณ์/ร้องทุกข์"
                     hide-bottom-space
                   />
+                  <q-skeleton v-else type="QInput" height="40px" />
                 </div>
               </div>
               <div class="row">
                 <div class="col-12">
                   <q-input
+                    v-if="!isLoad"
                     :class="inputEdit(isReadOnly)"
                     :readonly="isReadOnly"
                     ref="descriptionRef"
@@ -287,11 +293,13 @@ watch(
                     rows="5"
                     hide-bottom-space
                   />
+                  <q-skeleton v-else type="QInput" height="120px" />
                 </div>
               </div>
               <div class="row" v-if="!isReadOnly">
                 <div class="col-12">
                   <q-file
+                    v-if="!isLoad"
                     ref="fileRef"
                     v-model="formData.files"
                     label="อัปโหลดเอกสารหลักฐาน"
@@ -301,6 +309,7 @@ watch(
                     hide-bottom-space
                     bg-color="white"
                   />
+                  <q-skeleton v-else type="QInput" height="40px" />
                 </div>
               </div>
               <q-card bordered class="col-12 row" v-if="isReadOnly">
diff --git a/src/modules/07_appealComplain/views/Main.vue b/src/modules/07_appealComplain/views/Main.vue
index a526a1d..64e231d 100644
--- a/src/modules/07_appealComplain/views/Main.vue
+++ b/src/modules/07_appealComplain/views/Main.vue
@@ -13,6 +13,8 @@ import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
 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();
@@ -25,6 +27,7 @@ const type = ref<DataOption[]>([
   ...dataStore.typeOptions,
 ]);
 
+const isload = ref<boolean>(false);
 const total = ref<number>(0);
 const totalList = ref<number>(1);
 const pagination = ref({
@@ -154,7 +157,7 @@ const columns = ref<QTableProps["columns"]>([
 
 //นำข้อมูลมาแสดง
 async function getData() {
-  showLoader();
+  isload.value = true;
   await http
     .get(
       config.API.appealMainList(
@@ -166,20 +169,20 @@ async function getData() {
         filterKeyword.value
       )
     )
-    .then((res) => {
+    .then(async (res) => {
       totalList.value = Math.ceil(
         res.data.result.total / pagination.value.rowsPerPage
       );
       total.value = res.data.result.total;
       let data = res.data.result.data;
-      dataStore.fetchAppealComplain(data);
+      await dataStore.fetchAppealComplain(data);
+      isload.value = false;
     })
     .catch((e: any) => {
       messageError($q, e);
+      isload.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /**
@@ -374,7 +377,9 @@ onMounted(async () => {
             />
 
             <div class="col-12">
+              <SkeletonTable v-if="isload" :columns="dataStore.columns" />
               <d-table
+                v-else
                 flat
                 bordered
                 dense