流水线卡片列表添加翻页

src/forge/DevOps/cardList/index.jsx

@@ -1,4 +1,4 @@
-import { message, Popover, Button, Divider, Switch, Modal } from "antd";
+import { message, Popover, Button, Divider, Switch, Modal, Pagination } from "antd";
 import React, { useEffect, useState } from "react";
 import './index.scss';
 import { secondsToTimeFormat, timeAgo } from "../../../common/DateUtil";
@@ -13,13 +13,15 @@ function CardDevops(props) {
   const {owner, projectsId} = match.params;
   const [list, setList] = useState([])
   const [ visible , setVisible ] = useState(false);
+  const [ pageNum , setPageNum ] = useState(1);
+  const [ total , setTotal ] = useState(0);
+  const pageSize = 20;
 
-let settings = JSON.parse(localStorage.chromesetting);
-let pipelineUrl = settings && settings.common.pipeline;
+  let settings = JSON.parse(localStorage.chromesetting);
+  let pipelineUrl = settings && settings.common.pipeline;
 
 
   useEffect(() => {
-    const { author, name } = project || {}
     document.title = `流水线-${owner}/${projectsId}`;
   }, [])
 
@@ -29,15 +31,16 @@ let pipelineUrl = settings && settings.common.pipeline;
       getList();
     }, 10000);
     return () => clearInterval(intervalId);
-  }, [])
+  }, [pageNum])
 
   function getList(){
-    getCardList(owner, projectsId).then(res => {
+    getCardList(owner, projectsId, { limit: pageSize, page: pageNum }).then(res => {
       if (res.status === 0) {
         setList(res.pipelines.map(e => {
           e.run_data = e.run_data || {}
           return e
         }))
+        setTotal(res.count)
       }
     })
   }
@@ -151,6 +154,18 @@ let pipelineUrl = settings && settings.common.pipeline;
       })}
       {list && !list.length && <div style={{margin: '100px auto'}}><Nodata _html="暂无数据"/></div>}
     </div>
+    {
+      total > pageSize &&
+      <div style={{textAlign:'right',paddingTop:20}}>
+        <Pagination
+          simple
+          defaultCurrent={pageNum}
+          total={total}
+          pageSize={pageSize}
+          onChange={setPageNum}
+        ></Pagination>
+      </div>
+    }
   </div>
 }