feat: add pagination

src/pages/05_quotation/MainPage.vue

@@ -225,10 +225,6 @@ const pageState = reactive({
   quotationModal: false,
   employeeModal: false,
   productServiceModal: false,
-
-  currentMaxPage: 1,
-  currentPage: 1,
-  pageSize: 30,
 });
 
 const statData = ref<
@@ -445,33 +441,32 @@ onMounted(async () => {
   flowStore.rotate();
 });
 
-watch(
-  () => pageState.currentTab,
-  async () => {
-    const ret = await quotationStore.getQuotationList({
-      page: quotationPage.value,
-      pageSize: quotationPageSize.value,
-      payCondition:
-        pageState.currentTab !== 'all'
-          ? (
-              {
-                fullAmountCash: 'Full',
-                installmentsCash: 'Split',
-                fullAmountBill: 'BillFull',
-                installmentsBill: 'BillSplit',
-              } as const
-            )[pageState.currentTab]
-          : undefined,
-    });
+async function fetchQuotationList() {
+  const ret = await quotationStore.getQuotationList({
+    page: quotationPage.value,
+    pageSize: quotationPageSize.value,
+    payCondition:
+      pageState.currentTab !== 'all'
+        ? (
+            {
+              fullAmountCash: 'Full',
+              installmentsCash: 'Split',
+              fullAmountBill: 'BillFull',
+              installmentsBill: 'BillSplit',
+            } as const
+          )[pageState.currentTab]
+        : undefined,
+  });
 
-    if (ret) {
-      quotationData.value = ret.result;
-      quotationPageMax.value = Math.floor(ret.total / quotationPageSize.value);
-    }
+  if (ret) {
+    quotationData.value = ret.result;
+    quotationPageMax.value = Math.floor(ret.total / quotationPageSize.value);
+  }
 
-    flowStore.rotate();
-  },
-);
+  flowStore.rotate();
+}
+
+watch(() => pageState.currentTab, fetchQuotationList);
 </script>
 
 <template>
@@ -804,10 +799,10 @@ watch(
           </div>
           <nav class="col-4 row justify-end">
             <PaginationComponent
-              v-model:current-page="pageState.currentPage"
-              v-model:max-page="pageState.currentMaxPage"
+              v-model:current-page="quotationPage"
+              v-model:max-page="quotationPageMax"
+              :fetch-data="fetchQuotationList"
             />
-            <!-- :fetch-data="async () => await fetchUserList()" -->
           </nav>
         </footer>
       </div>