From 67221e7f70e9861510855b28a5296acb220b00aa Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <31820853+zhengkunwang223@users.noreply.github.com>
Date: Sun, 25 Jun 2023 22:20:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BA=94=E7=94=A8=E5=95=86=E5=BA=97?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=88=86=E9=A1=B5=20(#1447)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/app-store/apps/index.vue | 24 +++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
index 4ba86cec2..5cfe557ef 100644
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@@ -99,6 +99,15 @@
                     </div>
                 </el-col>
             </el-row>
+            <div class="page-button">
+                <fu-table-pagination
+                    v-model:current-page="paginationConfig.currentPage"
+                    v-model:page-size="paginationConfig.pageSize"
+                    v-bind="paginationConfig"
+                    @change="search(req)"
+                    :layout="'total, sizes, prev, pager, next, jumper'"
+                />
+            </div>
         </template>
     </LayoutContent>
     <Detail v-if="showDetail" :id="appId"></Detail>
@@ -116,6 +125,12 @@ import { useI18n } from 'vue-i18n';
 
 const language = useI18n().locale.value;
 
+const paginationConfig = reactive({
+    currentPage: 1,
+    pageSize: 50,
+    total: 0,
+});
+
 const req = reactive({
     name: '',
     tags: [],
@@ -138,9 +153,12 @@ const getColor = (index: number) => {
 
 const search = async (req: App.AppReq) => {
     loading.value = true;
+    req.pageSize = paginationConfig.pageSize;
+    req.page = paginationConfig.currentPage;
     await SearchApp(req)
         .then((res) => {
             apps.value = res.data.items;
+            paginationConfig.total = res.data.total;
         })
         .finally(() => {
             loading.value = false;
@@ -260,4 +278,10 @@ onMounted(() => {
         border: none;
     }
 }
+
+.page-button {
+    float: right;
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
 </style>