fix load Table

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 {
-  showLoader,
-  hideLoader,
-  messageError,
-  findPosMasterNoOld,
-  findOrgNameOld,
-  findOrgNameOldHtml,
-  date2Thai,
-} = mixin;
+const { messageError, 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>