paging

src/modules/04_registry/components/TableProfile.vue

@@ -11,19 +11,19 @@
     dense
     virtual-scroll
     :virtual-scroll-sticky-size-start="48"
-    :rows-per-page-options="[10, 25, 50, 100]"
+    :pagination-label="paginationLabel"
     v-model:pagination="pagination"
   >
-    <template v-slot:pagination="scope">
+  <template v-slot:pagination="scope">
       <q-pagination
         v-model="currentPage"
         active-color="primary"
         color="dark"
-        :max="Number(maxPage)"
+        :max="Number(props.maxPage)"
         size="sm"
         boundary-links
         direction-links
-      ></q-pagination>
+        ></q-pagination>
     </template>
 
     <template v-slot:top="props">
@@ -458,7 +458,7 @@ import PopupADdEmployee from "@/components/DialogAddEmployee.vue";
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
+const rowsPerPage = ref<number>(20);
 
 
 const attrs = ref<any>(useAttrs());
@@ -519,6 +519,18 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  maxPage: {
+    type: Number,
+    require: true,
+  },
+  rowsPerPage: {
+    type: Number,
+    require: true,
+  },
+  page: {
+    type: Number,
+    require: true,
+  },
 });
 
 const emit = defineEmits([
@@ -543,6 +555,7 @@ const emit = defineEmits([
   "update:reportYear",
   "update:reportNo",
   "update:reportType",
+  "update:pagination",
 ]);
 
 const updateInput = (value: string | number | null) => {
@@ -643,26 +656,31 @@ function ocClickAddEmployee() {
   modalEmployee.value = !modalEmployee.value;
 }
 
-function getList(){
-  console.log('GETok')
+function updateProp(newPagination: any, page: number) {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:pagination", newPagination, page);
 }
+
 watch(
   () => currentPage.value,
   () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
-    getList();
+    updateProp(pagination.value.rowsPerPage, currentPage.value);
   }
 );
 
 watch(
   () => pagination.value.rowsPerPage,
   () => {
-    rowsPerPage.value = pagination.value.rowsPerPage;
     currentPage.value = 1;
-    getList();
+    updateProp(pagination.value.rowsPerPage, currentPage.value);
   }
 );
 
+watch(()=>props.page,()=>{
+  if(props.page){
+    currentPage.value = props.page
+  }
+})
 </script>
 <style lang="scss">
 .icon-color {