gt_client_pad/src/pages/TaskManage/index.tsx

import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import { MandateType } from '@/pages/TaskManage/constent';
import styles from '@/pages/TaskManage/index.less';
import { getMandateList } from '@/services/TaskManage';
import { RightOutlined } from '@ant-design/icons';
import { useParams } from '@umijs/max';
import { List, Spin } from "antd";
import { BaseOptionType } from 'rc-select/es/Select';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'umi';

const TaskManage = () => {
  const { projectID } = useParams();
  const project_id = Number(projectID === '' ? '0' : projectID);
  const navigate = useNavigate();

  const [mandateCount, setMandateCount] = useState<number[]>([0, 0, 0]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const requests = [];
    for (let i = 0; i < 3; i++) {
      requests.push(
        getMandateList({
          project_id,
          pageSize: 1,
          currentPage: 1,
          mandate_type: i + 1,
        }),
      );
    }
    setLoading(true)
    Promise.all(requests)
      .then((resList) => {
        if (resList.filter((item) => item.code !== 200).length) {
          throw new Error('请求错误');
        }
        const typeCount = [0, 0, 0];
        resList.forEach((item, index) => {
          typeCount[index] = item.data.pagination?.total;
        });
        setMandateCount(typeCount);
      })
      .catch((err) => {
        console.log(err);
      }).finally(()=>{
        setLoading(false)
    });
  }, []);

  const goTaskList = (item: number) => {
    navigate(`/task-manage/list?project_id=${project_id}&mandateType=${item}`);
  };

  const makeList = (item: BaseOptionType, index: number) => {
    return (
      <List.Item
        className={styles.listItem}
        onClick={() => {
          goTaskList(item.value);
        }}
      >
        <List.Item.Meta
          title={<span className={styles.fontS28}>{item.label}</span>}
        />
        <div className={styles.itemCount}>
          <div className={styles.countNumber}>{mandateCount[index]}</div>
          <div className={styles.fontS22}>任务数量</div>
        </div>
        <RightOutlined />
      </List.Item>
    );
  };

  return (
    <PageContent>
      <PageTitle clo>任务管理</PageTitle>
      <Spin spinning={loading}>
        <List
          className={styles.taskList}
          bordered
          itemLayout="horizontal"
          dataSource={MandateType}
          renderItem={makeList}
          pagination={false}
        />
      </Spin>

    </PageContent>
  );
};

export default TaskManage;

// export default connect(
//   ({
//     mandate,
//     loading,
//   }: any): { mandateList: IMandateType[]; loading: boolean } => {
//     return {
//       mandateList: mandate.mandateList,
//       loading: loading.models['mandate'],
//     };
//   },
// )(TaskManage);