วินัย => แสดงรายการทั้งหมด , ตัวชี้วัดตามแผน => ปรับ tree

src/modules/11_discipline/components/1_Complaint/MainPage.vue

@@ -28,6 +28,7 @@ const filterKeyword = ref<string>("");
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(10);
+const toptitle = ref<number>(0);
 const statusFilter = ref<string>("NEW");
 
 async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
@@ -50,6 +51,7 @@ async function getList() {
     //
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      toptitle.value = res.data.result.total;
       const data = res.data.result.data;
       fetchComplainst(data);
     })
@@ -166,6 +168,7 @@ onMounted(async () => {
         :page="page"
         :maxPage="maxPage"
         @update:pagination="updatePagingProp"
+        :toptitle="toptitle"
       />
     </div>
   </q-card>

src/modules/11_discipline/components/1_Complaint/TableComplaint.vue

@@ -27,6 +27,10 @@ const props = defineProps({
     type: Number,
     require: true,
   },
+  toptitle: {
+    type: Number,
+    require: true,
+  },
 });
 
 /** หัวข้อที่เเสดงในตาราง */
@@ -178,17 +182,6 @@ onMounted(() => {
     v-model:pagination="pagination"
     :rows-per-page-options="[10, 25, 50, 100]"
   >
-    <template v-slot:pagination="scope">
-      <q-pagination
-        v-model="currentPage"
-        active-color="primary"
-        color="dark"
-        :max="Number(props.maxPage)"
-        size="sm"
-        boundary-links
-        direction-links
-      ></q-pagination>
-    </template>
     <template v-slot:header="props">
       <q-tr :props="props">
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -220,6 +213,18 @@ onMounted(() => {
         </q-td>
       </q-tr>
     </template>
+    <template v-slot:pagination="scope">
+      ทั้งหมด {{ props.toptitle }}รายการ
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(props.maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
   </d-table>
 </template>