fix: ปรับโหลด ขอโอน อุทรณ์/ร้องทุกข์ ขอลาออก

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"

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>