src/api/calculate.js

@@ -1,19 +1,19 @@
 import Vue from 'vue';
 
-async function getCalculateLive(startDate, endDate) {
+async function getCalculateLive(startDate, endDate, page, size) {
-    return Vue.axios.get('/admin/calculate/live?startDateStr=' + startDate + '&endDateStr=' + endDate);
+    return Vue.axios.get('/admin/calculate/live?startDateStr=' + startDate + '&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size);
 }
 
-async function getCalculateContent(startDate, endDate) {
+async function getCalculateContent(startDate, endDate, page, size) {
-    return Vue.axios.get('/admin/calculate/content-list?startDateStr=' + startDate + '&endDateStr=' + endDate);
+    return Vue.axios.get('/admin/calculate/content-list?startDateStr=' + startDate + '&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size);
 }
 
 async function getCumulativeSalesByContent(page, size) {
     return Vue.axios.get('/admin/calculate/cumulative-sales-by-content?page=' + (page - 1) + "&size=" + size);
 }
 
-async function getCalculateContentDonation(startDate, endDate) {
+async function getCalculateContentDonation(startDate, endDate, page, size) {
-    return Vue.axios.get('/admin/calculate/content-donation-list?startDateStr=' + startDate + '&endDateStr=' + endDate);
+    return Vue.axios.get('/admin/calculate/content-donation-list?startDateStr=' + startDate + '&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size);
 }
 
 async function getCalculateCommunityPost(startDate, endDate, page, size) {

src/views/Calculate/CalculateContent.vue

@@ -119,6 +119,16 @@
           </v-data-table>
         </v-col>
       </v-row>
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
     </v-container>
   </div>
 </template>
@@ -136,6 +146,9 @@ export default {
       is_loading: false,
       start_date: null,
       end_date: null,
+      page: 1,
+      page_size: 20,
+      total_page: 0,
       items: [],
       headers: [
         {
@@ -260,9 +273,10 @@ export default {
       this.is_loading = true
 
       try {
-        const res = await api.getCalculateContent(this.start_date, this.end_date)
+        const res = await api.getCalculateContent(this.start_date, this.end_date, this.page, this.page_size)
         if (res.status === 200 && res.data.success === true) {
-          this.items = res.data.data
+          this.items = res.data.data.items
+          this.total_page = Math.ceil(res.data.data.totalCount / this.page_size)
         } else {
           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         }
@@ -274,6 +288,10 @@ export default {
       }
     },
 
+    next() {
+      this.getCalculateContent()
+    },
+
     async downloadExcel() {
       try {
         const res = await api.downloadCalculateContentExcel(this.start_date, this.end_date)

src/views/Calculate/CalculateContentDonation.vue

@@ -111,6 +111,16 @@
           </v-data-table>
         </v-col>
       </v-row>
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
     </v-container>
   </div>
 </template>
@@ -128,6 +138,9 @@ export default {
       is_loading: false,
       start_date: null,
       end_date: null,
+      page: 1,
+      page_size: 20,
+      total_page: 0,
       items: [],
       headers: [
         {
@@ -246,9 +259,10 @@ export default {
       this.is_loading = true
 
       try {
-        const res = await api.getCalculateContentDonation(this.start_date, this.end_date)
+        const res = await api.getCalculateContentDonation(this.start_date, this.end_date, this.page, this.page_size)
         if (res.status === 200 && res.data.success === true) {
-          this.items = res.data.data
+          this.items = res.data.data.items
+          this.total_page = Math.ceil(res.data.data.totalCount / this.page_size)
         } else {
           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         }
@@ -260,6 +274,10 @@ export default {
       }
     },
 
+    next() {
+      this.getCalculateContentDonation()
+    },
+
     async downloadExcel() {
       try {
         const res = await api.downloadCalculateContentDonationExcel(this.start_date, this.end_date)

src/views/Calculate/CalculateLive.vue

@@ -119,6 +119,16 @@
           </v-data-table>
         </v-col>
       </v-row>
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
     </v-container>
   </div>
 </template>
@@ -136,6 +146,9 @@ export default {
       is_loading: false,
       start_date: null,
       end_date: null,
+      page: 1,
+      page_size: 20,
+      total_page: 0,
       items: [],
       headers: [
         {
@@ -254,9 +267,10 @@ export default {
       this.is_loading = true
 
       try {
-        const res = await api.getCalculateLive(this.start_date, this.end_date)
+        const res = await api.getCalculateLive(this.start_date, this.end_date, this.page, this.page_size)
         if (res.status === 200 && res.data.success === true) {
-          this.items = res.data.data
+          this.items = res.data.data.items
+          this.total_page = Math.ceil(res.data.data.totalCount / this.page_size)
         } else {
           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         }
@@ -268,6 +282,10 @@ export default {
       }
     },
 
+    next() {
+      this.getCalculateLive()
+    },
+
     async downloadExcel() {
       try {
         const res = await api.downloadCalculateLiveExcel(this.start_date, this.end_date)