fix: load skeleton

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

@@ -598,19 +598,20 @@ async function uploadFileDoc(uploadUrl: string, file: any) {
 }
 
 /** ดึงข้อมูล */
+const isLoadUpload = ref<boolean>(false);
 async function getData() {
-  showLoader();
+  isLoadUpload.value = true;
   await http
     .get(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value))
     .then((res) => {
       fileList.value = res.data;
+      isLoadUpload.value = false;
     })
     .catch((e) => {
       messageError($q, e);
+      isLoadUpload.value = false;
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
 }
 
 /**
@@ -1355,7 +1356,11 @@ onMounted(async () => {
             </q-file>
           </div>
 
-          <div v-if="fileList.length > 0" class="col-xs-12 row">
+          <div class="col-12" v-if="isLoadUpload">
+            <q-skeleton height="50px" />
+          </div>
+
+          <div v-else-if="fileList.length > 0" class="col-xs-12 row">
             <q-list class="full-width rounded-borders" bordered separator>
               <q-item
                 clickable

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

@@ -162,9 +162,11 @@ const pagination = ref({
  * ดึงข้อมูลรอบการประเมิน
  * @param type
  */
+const isLoadDialog = ref<boolean>(false);
 async function fetchRoundOption(type: string) {
   const y = type === "main" ? year.value : yearDialog.value;
-  isLoadOp.value = true;
+  type == "main" && (isLoadOp.value = true);
+  type == "dialog" && (isLoadDialog.value = true);
   await http
     .get(
       config.API.kpiPeriod + `?page=${1}&pageSize=${10}&keyword=${""}&year=${y}`
@@ -199,7 +201,8 @@ async function fetchRoundOption(type: string) {
       messageError($q, err);
     })
     .finally(() => {
-      isLoadOp.value = false;
+      type == "main" && (isLoadOp.value = false);
+      type == "dialog" && (isLoadDialog.value = false);
     });
 }
 
@@ -207,7 +210,7 @@ async function fetchRoundOption(type: string) {
  *  fetch รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
  */
 async function fetchList() {
-  isLoad.value = true
+  isLoad.value = true;
   let queryParams = {
     page: formQuery.page,
     pageSize: formQuery.pageSize,
@@ -225,10 +228,10 @@ async function fetchList() {
       total.value = data.total;
       totalList.value = Math.ceil(data.total / formQuery.pageSize);
       rows.value = data.data;
-      isLoad.value = false
+      isLoad.value = false;
     })
     .catch((err) => {
-      isLoad.value = false
+      isLoad.value = false;
       messageError($q, err);
     })
     .finally(() => {});
@@ -612,7 +615,7 @@ onMounted(async () => {
 
             <div class="col-12">
               <d-table
-              v-if="!isLoad"
+                v-if="!isLoad"
                 ref="table"
                 :columns="columns"
                 :rows="rows"
@@ -743,6 +746,7 @@ onMounted(async () => {
 
             <div class="col-12">
               <q-select
+              v-if="!isLoadDialog"
                 :readonly="yearDialog === null"
                 v-model="formRound.kpiPeriodId"
                 outlined
@@ -756,6 +760,7 @@ onMounted(async () => {
                 :rules="[(val:DataOptions) => !!val.id || `${'กรุณาเลือกรอบการประเมิน'}`]"
                 @update:model-value="checkClosed"
               />
+              <q-skeleton type="QInput" height="40px" v-else/>
             </div>
 
             <div class="col-12">