ADD:完成树状和单一状列表的分页功能

src/pages/bugs/components/BugSingleList/index.jsx

@@ -6,12 +6,12 @@ import { treeFilter } from 'enzyme/src/RSTTraversal';
 
 const BugSingleList = (props) => {
   const {dispatch,commonId,bugTreeList,bugSingleList,type} = props;
-  const [start,setStart] = useState(0);
   const [page,setPage] = useState('null');
+  const [currPage,setCurrPage] = useState(1);
   const [currentItem,setCurrentItem] = useState([]);
 
   const onPageChange = (num)=>{
-    console.log('page',num)
+    setCurrPage(num);
   }
 
   const handleSingleItemClick = (item)=>{
@@ -32,7 +32,6 @@ const BugSingleList = (props) => {
           id:currentItem[0]
         }
       }).then(res => {
-        console.log(res)
         dispatch({
           type: 'allBugs/saveBugItemDetail',
           payload:{
@@ -43,17 +42,21 @@ const BugSingleList = (props) => {
     }
   },[currentItem])
 
-  useEffect(()=>{
+  const getSingleBugList = ()=>{
     dispatch({
       type:'allBugs/getSingleList',
       payload:{
         case_take_id:`${commonId.caseId}-${commonId.examId}`,
-        start,
+        start:10*(currPage-1),
         count:"10",
         page
       }
     })
-  },[])
+  }
+
+  useEffect(()=>{
+    getSingleBugList();
+  },[currPage])
 
   return (
     <div>
@@ -78,7 +81,7 @@ const BugSingleList = (props) => {
         }
       </div>
       <div className={styles.pagination}>
-        <Pagination showQuickJumpe defaultCurrent={2} total={bugSingleList.Count} onChange={onPageChange} />
+        <Pagination showQuickJumper defaultCurrent={1} total={bugSingleList.Count} onChange={onPageChange} />
       </div>
     </div>
   );

src/pages/bugs/components/BugTreeList/index.jsx

@@ -5,66 +5,72 @@ import styles from './index.less';
 import { treeFilter } from 'enzyme/src/RSTTraversal';
 
 const BugTreeList = (props) => {
-  const {dispatch,commonId,bugTreeList,bugSingleList,type} = props;
-  const [start,setStart] = useState(0);
-  const [page,setPage] = useState('null');
-  const [currentTreeItem,setCurrentTreeItem] = useState([]);
+  const { dispatch, commonId, bugTreeList, bugSingleList, type } = props;
+  const [page, setPage] = useState('null');
+  const [currentTreeItem, setCurrentTreeItem] = useState([]);
+  const [currPage, setCurrPage] = useState(1);
 
-  const onPageChange = (num)=>{
-    console.log('page',num)
-  }
+  const onPageChange = (num) => {
+    setCurrPage(num);
+  };
 
-  const handleTreeItemClick = (item)=>{
-    const currItem = bugTreeList.TreeRoot.filter(i=>i[0]===item[0]);
+  const handleTreeItemClick = (item) => {
+    const currItem = bugTreeList.TreeRoot.filter(i => i[0] === item[0]);
     setCurrentTreeItem(currItem[0]);
-  }
+  };
 
-  useEffect(()=>{
-    bugTreeList.TreeRoot && setCurrentTreeItem(bugTreeList.TreeRoot[0])
-  },[bugTreeList])
+  useEffect(() => {
+    bugTreeList.TreeRoot && setCurrentTreeItem(bugTreeList.TreeRoot[0]);
+  }, [bugTreeList]);
 
-  useEffect(()=>{
-    if(JSON.stringify(currentTreeItem)!=='[]'){
+  useEffect(() => {
+    if (JSON.stringify(currentTreeItem) !== '[]') {
       //获取bug详情信息用于展示
       dispatch({
         type: 'editReport/getBugDetail',
-        payload:{
-          id:currentTreeItem[0]
-        }
+        payload: {
+          id: currentTreeItem[0],
+        },
       }).then(res => {
         dispatch({
           type: 'allBugs/saveBugItemDetail',
-          payload:{
-            ...res
-          }
-        })
-      })
+          payload: {
+            ...res,
+          },
+        });
+      });
     }
-  },[currentTreeItem])
+  }, [currentTreeItem]);
 
-  useEffect(()=>{
+  const getBugTreeList = ()=>{
     dispatch({
-      type:'allBugs/getTreeList',
-      payload:{
-        case_take_id:`${commonId.caseId}-${commonId.examId}`,
-        start,
-        count:"10",
-        page
-      }
-    })
-  },[])
+      type: 'allBugs/getTreeList',
+      payload: {
+        case_take_id: `${commonId.caseId}-${commonId.examId}`,
+        start: 10*(currPage-1),
+        count: '10',
+        page,
+      },
+    });
+  }
+
+  useEffect(() => {
+    getBugTreeList();
+  }, [currPage]);
 
   return (
     <div>
       <div className={styles.bugList}>
         {
-          bugTreeList&&bugTreeList.TreeRoot&&bugTreeList.TreeRoot.map((item,index)=>{
+          bugTreeList && bugTreeList.TreeRoot && bugTreeList.TreeRoot.map((item, index) => {
             return (
               <div key={item[0]}
-                className={`${styles.bugListItem} ${currentTreeItem[0] === item[0] ? styles.bugListItemActive : ''}`}
-                onClick={()=>{handleTreeItemClick(item)}}>
+                   className={`${styles.bugListItem} ${currentTreeItem[0] === item[0] ? styles.bugListItemActive : ''}`}
+                   onClick={() => {
+                     handleTreeItemClick(item);
+                   }}>
                 <span className={styles.bugListItemNum}>
-                  树{index+1}:
+                  树{index + 1}:
                 </span>
                 <div className={styles.bugListItemInfo}>
                   <span className={styles.bugListItemSummary}>
@@ -74,18 +80,18 @@ const BugTreeList = (props) => {
                   </div>
                 </div>
               </div>
-            )
+            );
           })
         }
       </div>
       <div className={styles.pagination}>
-        <Pagination showQuickJumper defaultCurrent={2} total={bugTreeList.Count} onChange={onPageChange} />
+        <Pagination showQuickJumper defaultCurrent={1} total={bugTreeList.Count} onChange={onPageChange} />
       </div>
     </div>
   );
 };
 
-export default connect(({ allBugs , editReport}) => ({
+export default connect(({ allBugs, editReport }) => ({
   data: allBugs.step,
   bugTreeList: allBugs.bugTreeList,
   reportCommonInfo: editReport.reportCommonInfo,