paging

src/api/registry/api.profile.ts

@@ -212,4 +212,5 @@ export default {
   /**ปรับรายการเงินเดือนขึ้น-ลง*/
   salarySwap: (dierction: string, id: string) =>
     `${profile}salary/swap/${dierction}/${id}`,
+  listProfileNew:(id:string,page:number,pageSize:number)=>`${profile}search/new-page/oc/${id}/officer?page=${page}&pageSize=${pageSize}`
 };

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 {

src/modules/04_registry/views/Main.vue

@@ -83,6 +83,11 @@
             :doSearch="doSearch"
             :onExport="onExport"
             :onTab="changeTab"
+            :rowsPerPage="rowsPerPage"
+            :page="page"
+            :maxPage="maxPage"
+            @update:pagination="updatePagingProp"
+            :rows-per-page-options="[20, 50, 100, 200]"
           >
             <template #columns="props">
               <q-tr
@@ -92,7 +97,7 @@
               >
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
                   <div v-if="col.name == 'no'" class="table_ellipsis">
-                    {{ props.rowIndex + 1 }}
+                    {{ (page - 1) * Number(rowsPerPage) + props.rowIndex + 1 }}
                   </div>
                   <div v-else-if="col.name == 'isVerified'">
                     <q-icon
@@ -168,6 +173,10 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 const { changeTreeRegister, selectedRegister, expandedRegister } = dataStore;
 
+const maxPage = ref<number>(1);
+const rowsPerPage = ref<number>(20);
+const page = ref<number>(1);
+
 const mixin = useCounterMixin();
 const { date2Thai, messageError, typeRetire, showLoader, hideLoader } = mixin;
 const router = useRouter();
@@ -1204,6 +1213,8 @@ const changeTab = () => {
 };
 
 const onSelected = async (id: string) => {
+  rowsPerPage.value = 20;
+  page.value = 1;
   await clickTree();
   await doSearch();
 };
@@ -1355,12 +1366,15 @@ const doSearch = async () => {
   if (selected.value == null || selected.value == "") return;
   showLoader();
   await http
-    .post(config.API.searchProfileByOcId(selected.value, profileType.value), {
-      criterias: cirteria,
-    })
+    .post(
+      config.API.listProfileNew(selected.value, page.value, rowsPerPage.value),
+      {
+        criterias: cirteria,
+      }
+    )
     .then((res) => {
-      let data = res.data.result;
-
+      let data = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.totalRows / rowsPerPage.value);
       rows.value = [];
       data.map((e: ResponseObject) => {
         rows.value.push({
@@ -1451,6 +1465,12 @@ const onExport = () => {
 const next = (id: string) => {
   router.push(`/registry/${id}`);
 };
+
+function updatePagingProp(rowPerpage: number, pageCurrent: number) {
+  rowsPerPage.value = rowPerpage;
+  page.value = pageCurrent;
+  doSearch();
+}
 </script>
 
 <style lang="scss" scope>