步骤式逻辑

记录一下
constant/index.ts

// 完整链路步骤
export const inspectionStepsLink: {
  key: string;
  prev: string | undefined;
  next: string | undefined;
  name: string;
  nextTitle: string;
}[] = [
  {
    key: FilesTypeEnum.house,
    prev: undefined,
    next: FilesTypeEnum.marriage,
    name: 'rpcFiles',
    nextTitle: '上传证件照2',
  },
  {
    key: FilesTypeEnum.marriage,
    prev: FilesTypeEnum.house,
    next: undefined,
    name: 'mcFiles',
    nextTitle: '',
  },
];

// 点证件照2编辑进入
export const marriageStepsLink: {
  key: string;
  prev: string | undefined;
  next: string | undefined;
  name: string;
}[] = [
  {
    key: FilesTypeEnum.marriage,
    prev: undefined,
    next: undefined,
    name: 'mcFiles',
  },
];

// 上次合同
export const contractStepsLink: {
  key: string;
  prev: string | undefined;
  next: string | undefined;
}[] = [
  {
    key: FilesTypeEnum.contract,
    prev: undefined,
    next: undefined,
  },
];

index.tsx

class UploadFiles extends React.Component<IProps, IState> {
  constructor(props) {
    super(props);
    const { dispatch } = props;
    const { type = FilesTypeEnum.marriage } = queryParams || ({} as any);
    const stepsLink = type === FilesTypeEnum.house ? inspectionStepsLink : marriageStepsLink;
    const currentStep = find(stepsLink, { key: type }); // lodash
    let currentImages;
    try {
      currentImages = queryParams[currentStep?.name]?.split(',') || [];
    } catch (error) {
      currentImages = [];
    }
    dispatch({
      type: 'uploadFiles/updateImages',
      payload: {
        type,
        images: currentImages,
      },
    });

    const { title } = renderPageText(type);
    setTitle(title);
    this.state = {
      stepsLink: type === FilesTypeEnum.house ? inspectionStepsLink : marriageStepsLink,
      fileType: type,
    };
  }

  public componentDidMount() {
    // 初始化页面配置
  }

  moveNext(doNext?: () => void) {
    const { fileType, stepsLink } = this.state;
    const currentStep = find(stepsLink, { key: fileType });
    let nextStep = currentStep?.next;

    if (nextStep) {
      this.setState({
        ...this.state,
        fileType: nextStep,
        showList: queryParams[currentStep.name] || [],
      });
      setTitle(currentStep.nextTitle);
    } else if (!nextStep && fileType !== FilesTypeEnum.contract) {
      doNext && doNext();
    }
  }

  jumpToInspectionApp() {
    // TODO: 跳转小程序
    const { dispatch } = this.props;
    const { subApplyNo } = queryParams || ({} as any);
    // 创建工单
    dispatch({
      type: 'uploadFiles/createHouseOrder',
      payload: {
        subApplyNo,
      },
    });
  }

  moveBack() {
    // goback()
  }

  render() {
    const { fileType } = this.state;
    const { imgMap } = this.props;
    const { sampleText, sampleEncText, bgImg, modalTitle, modalText, sampleImgArr, btnText } = renderPageText(fileType);
    const imgs = imgMap[fileType] || [];
    // className
    const prefixCls = 'uploadFiles';
    return (
      <div className={prefixCls}>
        {imgs?.length ? (
          <Submit btnText={btnText} type={fileType} onSubmit={() => {this.moveNext(() => {this.jumpToInspectionApp()})}} />
        ) : (
          <Home
            type={fileType}
            sampleText={sampleText}
            sampleEncText={sampleEncText}
            bgImg={bgImg}
            modalTitle={modalTitle}
            modalText={modalText}
            sampleImgArr={sampleImgArr}
          />
        )}
      </div>
    );
  }
}

export default UploadFiles;