fix: สรรหา ปรับ pagin /โครงสร้าง ปิดดาวโหลดได้เเค่ root ปรับข้อความ

src/modules/03_recruiting/components/Table.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { checkPermission } from "@/utils/permissions";
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, watch } from "vue";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 
 const attrs = ref<any>(useAttrs());
@@ -8,13 +8,17 @@ const table = ref<any>(null);
 const filterRef = ref<any>(null);
 
 const filter = defineModel<string>("filter", { required: true });
-const pagination = defineModel<Pagination>('pagination',{required:true})
+const pagination = defineModel<Pagination>("pagination", { required: true });
 
 const props = defineProps({
   onSearch: Function,
+  fetchData: Function,
   count: Number,
+  totalList: Number,
   pass: Number,
   notpass: Number,
+  missed_exam: Number,
+  other: Number,
 
   inputfilter: String,
   name: String,
@@ -44,9 +48,7 @@ const emit = defineEmits([
   "update:inputvisible",
   "update:editvisible",
 ]);
-const updateInput = (value: string | number | null) => {
-  emit("update:inputfilter", value);
-};
+
 const updateVisible = (value: []) => {
   emit("update:inputvisible", value);
 };
@@ -66,11 +68,23 @@ function checkAdd() {
   props.add();
 }
 
-/** reset ฟิลเตอร์ ที่ ค้นหา */
-function resetFilter() {
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
+function updatePagination(newPagination: any) {
+  if (!props.nornmalData) {
+    pagination.value.page = 1;
+    pagination.value.rowsPerPage = newPagination.rowsPerPage;
+  }
 }
+
+function getList() {
+  props.fetchData?.();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getList();
+  }
+);
 </script>
 <template>
   <div class="q-pb-sm row q-col-gutter-sm">
@@ -96,8 +110,8 @@ function resetFilter() {
           <q-space />
           <q-badge
             color="white"
-            class="text-weight-bold text-subtitle1 text-primary"
-            :label="`${count}`"
+            class="text-weight-bold text-subtitle1 text-blue-7"
+            :label="`${count?.toLocaleString()}`"
             rounded
           />
         </div>
@@ -108,8 +122,8 @@ function resetFilter() {
           <q-space />
           <q-badge
             color="white"
-            class="text-weight-bold text-subtitle1 text-blue"
-            :label="`${pass}`"
+            class="text-weight-bold text-subtitle1 text-primary"
+            :label="`${pass?.toLocaleString()}`"
             rounded
           />
         </div>
@@ -122,7 +136,41 @@ function resetFilter() {
           <q-badge
             color="white"
             class="text-weight-bold text-subtitle1 text-pink"
-            :label="`${notpass}`"
+            :label="`${notpass?.toLocaleString()}`"
+            rounded
+          />
+        </div>
+      </q-card>
+      <q-card
+        v-if="missed_exam && missed_exam !== 0"
+        bordered
+        flat
+        class="q-px-md no-wrap row"
+      >
+        <div class="col-12 text-subtitle2 row items-center">
+          <span class="text-weight-medium text-dark">ขาดสอบ</span>
+          <q-space />
+          <q-badge
+            color="white"
+            class="text-weight-bold text-subtitle1 text-orange"
+            :label="`${missed_exam?.toLocaleString()}`"
+            rounded
+          />
+        </div>
+      </q-card>
+      <q-card
+        v-if="other && other !== 0"
+        bordered
+        flat
+        class="q-px-md no-wrap row"
+      >
+        <div class="col-12 text-subtitle2 row items-center">
+          <span class="text-weight-medium text-dark">อื่น ๆ</span>
+          <q-space />
+          <q-badge
+            color="white"
+            class="text-weight-bold text-subtitle1 text-info"
+            :label="`${other?.toLocaleString()}`"
             rounded
           />
         </div>
@@ -175,8 +223,8 @@ function resetFilter() {
     :virtual-scroll-sticky-size-start="48"
     dense
     :pagination-label="paginationLabel"
-    v-model:pagination="pagination"
-    :rows-per-page-options="[0]"
+    :rows-per-page-options="nornmalData ? [0] : [1, 25, 50, 100]"
+    @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -189,6 +237,20 @@ function resetFilter() {
     <template #body="props">
       <slot v-bind="props" name="columns"></slot>
     </template>
+    <template v-if="!nornmalData" v-slot:pagination="scope">
+      ทั้งหมด {{ props.count && props.count.toLocaleString() }} รายการ
+      <q-pagination
+        v-model="pagination.page"
+        active-color="primary"
+        color="dark"
+        :max="totalList"
+        size="sm"
+        boundary-links
+        direction-links
+        :max-pages="5"
+        @update:model-value="getList"
+      ></q-pagination>
+    </template>
   </d-table>
 </template>