withRouteTab 在这样的页面如何添加

[taoye-zhaoyu]

const Fundsy: ConnectRC<{
  loading: boolean;
  fundsy: FundsyModelState;
  dispatch: Dispatch;
}> = ({ loading, fundsy, dispatch }) => {}
export default connect(({ fundsy, loading }: { fundsy: FundsyModelState; loading: Loading }) => ({
  fundsy,
  loading: loading.models.fundsy,
}))(Fundsy);

[yunsii]

const Fundsy = withRouteTab({ loading, fundsy, dispatch }) => {})

or

export default withRouteTab(connect(/* ... */)(/* ... */));

这两种方式应该都可以，withRouteTab 不会过滤 props。

[taoye-zhaoyu]

useEffect切换时总是执行，useMemo如何优化，能给一个例子吗？

[yunsii]

呃，有个具体的例子吗？正常来说是不会了的

[taoye-zhaoyu]

withRouteTab加了，也没有用到useLocation，但是useEffect切换时总是执行，为什么呢？

[yunsii]

呃，你不贴代码我能有啥办法？:joy:

[taoye-zhaoyu]

import React, { useEffect, useCallback, useState } from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import { Card, Row, Col, Progress, Button, Modal, DatePicker } from 'antd';
import { Dispatch, Loading, connect, Link } from 'umi';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import moment from 'moment';
import { Money } from 'react-format';
import { withRouteTab } from '@/components/RouteTabs/utils';
import styles from '../style.less';
import { ProjectModelState } from './model';
import BaseList from './components/BaseList';
import ReceiveList from './components/ReceiveList';
import PreAmountList from './components/PreAmountList';
import PayAmountList from './components/PayAmountList';

const { RangePicker } = DatePicker;

interface ProjectProps {
  project: ProjectModelState;
  dispatch: Dispatch;
  loading: boolean;
}

const datas = [
  { isFinish: true, name: '宁波电厂开发区电厂项目', principal: '张西西', startData: '2020-07-09' },
  { isFinish: false, name: '锅炉排汽净化实验', principal: '王健康', startData: '2020-07-09' },
  { isFinish: false, name: '锅炉排汽净化实验', principal: '王健康', startData: '2020-07-09' },
  { isFinish: true, name: '宁波电厂开发区电厂项目', principal: '张西西', startData: '2020-07-09' },
  { isFinish: true, name: '宁波电厂开发区电厂项目', principal: '张西西', startData: '2020-07-09' },
];

const ProjectList: React.FC<ProjectProps> = withRouteTab(({ dispatch, project, loading }) => {
  const {
    dataCollect,
    fouceList,
    foucePagination,
    projectData,
    pagination,
    receiveData,
    recPagination,
    preAmountData,
    prePagination,
    payAmountData,
    payPagination,
  } = project;
  const scope = JSON.parse(sessionStorage.getItem('scope') || '');
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  const [receiveModalVisible, setReceiveModalVisible] = useState<boolean>(false);
  const [preAmountModalVisible, setPreAmountModalVisible] = useState<boolean>(false);
  const [payAmountModalVisible, setPayAmountModalVisible] = useState<boolean>(false);
  const [dateModalVisible, setDateModalVisible] = useState<boolean>(false);
  const [dateRanges, setDateRange] = useState<[]>([]);
  const [parameter, setParameter] = useState<[]>([]);

  useEffect(() => {
    dispatch({
      type: 'project/getStatistical',
      payload: {
        ...scope,
        notRefresh: true,
        isYear: false,
      },
    });
    setParameter({ ...scope, isYear: false, notRefresh: true });
    dispatch({
      type: 'project/getFouceList',
      payload: {
        pageSize: 5,
        data: { notRefresh: true },
        current: 1,
      },
    });
  }, []);

  const onChange = (date: any, dateString: any) => {
    setDateRange(dateString);
  };

  const onComplete = useCallback((dates: []) => {
    setDateModalVisible(false);
    const conditions = {
      ...scope,
      startTime: dates.length > 0 && dates[0],
      endTime: dates.length > 0 && dates[1],
      notRefresh: false,
    };
    setParameter(conditions);
    dispatch({
      type: 'project/getStatistical',
      payload: {
        data: { ...conditions },
      },
    });
  }, []);

  // 打开项目列表
  const openBaseList = useCallback(
    (parameters) => {
      console.log('打开：', parameters);
      setModalVisible(true);
      dispatch({
        type: 'project/getBaseInfoList',
        payload: {
          pageSize: 10,
          current: 1,
          data: { ...parameters },
        },
      });
    },
    [parameter],
  );

  const openReceiveList = useCallback((parameters) => {
    setReceiveModalVisible(true);
    dispatch({
      type: 'project/getReceiveList',
      payload: {
        pageSize: 10,
        current: 1,
        data: { ...parameters },
      },
    });
  }, []);

  const openPreAmountList = useCallback((parameters) => {
    setPreAmountModalVisible(true);
    dispatch({
      type: 'project/getPreAmountList',
      payload: {
        pageSize: 10,
        current: 1,
        data: { ...parameters },
      },
    });
  }, []);

  const openPayAmountList = useCallback((parameters) => {
    setPayAmountModalVisible(true);
    dispatch({
      type: 'project/getPayAmountList',
      payload: {
        pageSize: 10,
        current: 1,
        data: { ...parameters },
      },
    });
  }, []);

  const refresh = useCallback(() => {
    dispatch({
      type: 'project/getFouceList',
      payload: {
        pageSize: 5,
        data: { notRefresh: false },
        current: 1,
      },
    });
  }, []);

  const columns: ProColumns<API.ProjectList>[] = [
    {
      dataIndex: 'index',
      valueType: 'index',
      width: 60,
    },
    {
      title: '项目名称',
      key: 'projectName',
      width: 420,
      dataIndex: 'projectName',
      render: (_: any, record: API.ProjectList) => {
        return (
          <Link
            to={{
              pathname: `/project/details_x/${record.pid}`,
              state: { data: record },
            }}
          >
            {record.projectName}
          </Link>
        );
      },
    },
    {
      title: '负责人',
      key: 'pName',
      width: 120,
      dataIndex: 'pName',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '类型',
      key: 'type',
      width: 120,
      dataIndex: 'type',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '开始时间',
      key: 'startExecutTime',
      width: 120,
      dataIndex: 'startExecutTime',
      valueType: 'date',
      hideInSearch: true,
      align: 'center',
      render: (_: any, record: any) => {
        if (!record.startExecutTime) {
          return '-';
        }
        return moment(record.startExecutTime).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    {
      title: '截至时间',
      key: 'endExecutTime',
      width: 120,
      dataIndex: 'endExecutTime',
      valueType: 'date',
      hideInSearch: true,
      align: 'center',
      render: (_: any, record: any) => {
        if (!record.endExecutTime) {
          return '-';
        }
        return moment(record.endExecutTime).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    {
      title: '进度',
      key: 'progress',
      hideInSearch: true,
      dataIndex: 'progress',
      width: 120,
      align: 'center',
      render: (_: any, record: API.ProjectList, index: number) => {
        if (index < 3) {
          // eslint-disable-next-line no-param-reassign
          record.status = 'open';
          return <Progress percent={50} />;
        }
        if (index > 4 && index < 8) {
          // eslint-disable-next-line no-param-reassign
          record.status = 'processing';
          return <Progress percent={70} />;
        }
        // eslint-disable-next-line no-param-reassign
        record.status = 'closed';
        return <Progress percent={100} />;
      },
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      width: 100,
      hideInSearch: true,
      align: 'center',
      initialValue: 'all',
      // filters: true,
      valueEnum: {
        all: { text: '全部', status: 'Default' },
        open: {
          text: '未完成',
          status: 'Error',
        },
        processing: {
          text: '进行中',
          status: 'Processing',
        },
        closed: {
          text: '已完成',
          status: 'Success',
        },
      },
    },
  ];

  const handlePageChange = useCallback((page, pageSize) => {
    dispatch({
      type: 'project/getFouceList',
      payload: {
        data: {},
        pageSize,
        current: page,
      },
    });
  }, []);

  const initPagination = {
    showSizeChanger: true,
    showQuickJumper: true,
    onChange: handlePageChange,
    ...foucePagination,
  };

  const handlePageChangeBase = useCallback((page, pageSize, parameters) => {
    dispatch({
      type: 'project/getBaseInfoList',
      payload: {
        pageSize,
        current: page,
        data: { ...parameters },
      },
    });
  }, []);

  const initPaginationBase = {
    showSizeChanger: true,
    showQuickJumper: true,
    onChange: (page: any, pageSize: any) => handlePageChangeBase(page, pageSize, parameter),
    ...pagination,
  };

  const handlePageChangePre = useCallback((page, pageSize, parameters) => {
    dispatch({
      type: 'project/getPreAmountList',
      payload: {
        pageSize,
        current: page,
        data: { ...parameters },
      },
    });
  }, []);

  const initPaginationPre = {
    showSizeChanger: true,
    showQuickJumper: true,
    onChange: (page: any, pageSize: any) => handlePageChangePre(page, pageSize, parameter),
    ...prePagination,
  };

  const handlePageChangePay = useCallback((page, pageSize, parameters) => {
    dispatch({
      type: 'project/getPreAmountList',
      payload: {
        pageSize,
        current: page,
        data: { ...parameters },
      },
    });
  }, []);

  const initPaginationPay = {
    showSizeChanger: true,
    showQuickJumper: true,
    onChange: (page: any, pageSize: any) => handlePageChangePay(page, pageSize, parameter),
    ...payPagination,
  };

  const handlePageChangeRec = useCallback((page, pageSize, parameters) => {
    dispatch({
      type: 'project/getReceiveList',
      payload: {
        pageSize,
        current: page,
        data: { ...parameters },
      },
    });
  }, []);

  const initPaginationRec = {
    showSizeChanger: true,
    showQuickJumper: true,
    onChange: (page: any, pageSize: any) => handlePageChangeRec(page, pageSize, parameter),
    ...recPagination,
  };

  return (
    <div style={{ marginTop: '-24px' }}>
      <Card bordered={false} style={{ width: '100%' }}>
        <div style={{ fontSize: 18, marginLeft: 10, marginBottom: 15 }}>
          关注项目
          <Button style={{ float: 'right' }} onClick={refresh}>
            刷新
          </Button>
        </div>

        <ProTable<API.ProjectList>
          columns={columns}
          rowKey="index"
          pagination={initPagination}
          loading={loading}
          dataSource={fouceList}
          options={false}
          search={false}
          bordered
          className={styles.list}
        />
      </Card>
      <BaseList
        onCancel={() => setModalVisible(false)}
        modalVisible={modalVisible}
        projectData={projectData}
        initPagination={initPaginationBase}
        loading={loading}
      />
      <ReceiveList
        onCancel={() => setReceiveModalVisible(false)}
        modalVisible={receiveModalVisible}
        receiveData={receiveData}
        initPagination={initPaginationRec}
        loading={loading}
      />
      <PreAmountList
        onCancel={() => setPreAmountModalVisible(false)}
        modalVisible={preAmountModalVisible}
        preAmountData={preAmountData}
        initPagination={initPaginationPre}
        loading={loading}
      />
      <PayAmountList
        onCancel={() => setPayAmountModalVisible(false)}
        modalVisible={payAmountModalVisible}
        payAmountData={payAmountData}
        initPagination={initPaginationPay}
        loading={loading}
      />
      <Modal
        width={450}
        destroyOnClose
        title="选择时间范围"
        onCancel={() => {
          setDateModalVisible(false);
        }}
        visible={dateModalVisible}
        footer={null}
      >
        <RangePicker onChange={onChange} />
        <Button type="primary" onClick={() => onComplete(dateRanges)} style={{ marginLeft: 20 }}>
          确定
        </Button>
      </Modal>
    </div>
  );
});

export default connect(
  ({ project, loading }: { project: ProjectModelState; loading: Loading }) => ({
    project,
    loading: loading.models.project,
  }),
)(ProjectList);

这是我的代码，麻烦看一下，谢谢

[yunsii]

这不是 didMount 的效果吗？你不会是用的 umi@3 吧 🤨

[taoye-zhaoyu]

我用的是umi@3.2.24

[taoye-zhaoyu]

有没有解决办法，我的没办法降级到umi@2

[yunsii]

啊这。。。我 README 里写的 关于 umi 3.x 你没看嘛？

[yunsii]

@taoye-zhaoyu 刚搞定，现在升级到 umi@​3.3.8 以上可用了，参考 umijs/umi#4425