done don-vi-chu-quan page

src/components/pagination/index.vue

@@ -18,6 +18,7 @@
     <q-pagination
       :model-value="currentPage"
       :max="totalPage"
+      :max-pages="maxPages"
       direction-links
       boundary-links
       unelevated
@@ -41,7 +42,7 @@ export default defineComponent({
     },
     maxPages: {
       type: Number,
-      default: 5,
+      default: 10,
     },
     pageSize: {
       type: Number,

src/pages/don-vi-chu-quan/ManagingUnit.ts

@@ -4,6 +4,7 @@ import Pagination from 'components/pagination/index.vue';
 import { API_PATHS } from 'src/assets/configurations.example';
 import { AxiosResponse } from 'axios';
 import { api, BaseResponseBody } from 'src/boot/axios';
+
 export default defineComponent({
   components: {
     Pagination,
@@ -93,6 +94,7 @@ export default defineComponent({
       { id: 2, text: 'Âm nhạc' },
       { id: 1, text: 'Thể thao' },
     ]);
+    const totalPage = ref(10);
     const fieldSelected: Ref<number | undefined> = ref();
     const getListUnits = () => {
       //   const response = (await api({
@@ -116,6 +118,20 @@ export default defineComponent({
       ];
       managingUnitTableRows.value = fakeData;
     };
+    const filterListUnit = () => {
+      //   const response = (await api({
+      //     url: API_PATHS.filterListUnit,
+      //     method: 'GET',
+      //     params: {
+      //       unitName: unitNameKeyword.value,
+      //       fieldName: fieldSelected.value,
+      //     },
+      //   })) as AxiosResponse<BaseResponseBody<unknown>>;
+    };
+    const changePageSize = () => {
+      pageIndex.value = 1;
+      void getListUnits();
+    };
     onMounted(() => {
       void getListUnits();
     });
@@ -128,6 +144,9 @@ export default defineComponent({
       unitNameKeyword,
       fieldOptions,
       fieldSelected,
+      filterListUnit,
+      totalPage,
+      changePageSize,
     };
   },
 });

src/pages/don-vi-chu-quan/index.vue

@@ -20,7 +20,12 @@
       ></q-select>
     </div>
     <div class="col-auto">
-      <q-btn color="primary" no-caps :label="$t('crudActions.search')"> </q-btn>
+      <q-btn
+        color="primary"
+        no-caps
+        :label="$t('crudActions.search')"
+        @click="filterListUnit"
+      ></q-btn>
     </div>
     <div class="col-auto">
       <q-btn color="primary" no-caps :label="$t('crudActions.add')"> </q-btn>
@@ -37,6 +42,15 @@
       >
       </q-table>
     </div>
+    <div class="col-12 q-mt-sm">
+      <Pagination
+        v-model:currentPage="pageIndex"
+        v-model:pageSize="pageSize"
+        :totalPage="totalPage"
+        @update:pageSize="changePageSize"
+        @update:currentPage="getListUnits"
+      />
+    </div>
   </div>
 </template>