crowd-service-frontend/src/pages/bugs/components/BugTreeList/index.jsx

import { Pagination } from 'antd';
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import styles from './index.less';
import { treeFilter } from 'enzyme/src/RSTTraversal';

const BugTreeList = (props) => {
  const { dispatch, commonId, bugTreeList, bugSingleList, page } = props;
  const [currentTreeItem, setCurrentTreeItem] = useState([]);
  const [currPage, setCurrPage] = useState(1);

  const onPageChange = (num) => {
    setCurrPage(num);
  };

  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(() => {
    if (currentTreeItem&&JSON.stringify(currentTreeItem) !== '[]') {
      console.log(currentTreeItem)
      //获取bug详情信息用于展示
      dispatch({
        type: 'editReport/getBugDetail',
        payload: {
          id: currentTreeItem[0],
        },
      }).then(res => {
        dispatch({
          type: 'allBugs/saveBugItemDetail',
          payload: {
            ...res,
          },
        });
      });
    }
  }, [currentTreeItem]);

  const getBugTreeList = ()=>{
    dispatch({
      type: 'allBugs/getTreeList',
      payload: {
        case_take_id: `${commonId.caseId}-${commonId.examId}`,
        start: 10*(currPage-1),
        count: '10',
        page,
        roleId:commonId.roleId
      },
    });
  }

  useEffect(() => {
    getBugTreeList();
  }, [currPage,page]);

  return (
    <div>
      <div className={styles.bugList}>
        {
          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);
                   }}>
                <span className={styles.bugListItemNum}>
                  树{index + 1}:
                </span>
                <div className={styles.bugListItemInfo}>
                  <span className={styles.bugListItemSummary}>
                  高:{item[2]} 宽:{item[1]} 个数:{item[3]}</span>
                  <div className={styles.bugListItemTitle}>
                    {item[5]}
                  </div>
                </div>
              </div>
            );
          })
        }
      </div>
      <div className={styles.pagination}>
        <Pagination showQuickJumper defaultCurrent={1} total={bugTreeList.Count} onChange={onPageChange} />
      </div>
    </div>
  );
};

export default connect(({ allBugs, editReport }) => ({
  data: allBugs.step,
  bugTreeList: allBugs.bugTreeList,
  reportCommonInfo: editReport.reportCommonInfo,
  commonId: editReport.commonId,
}))(BugTreeList);