kede-client/js/component/account/services/evaluate/steps.jsx

import React from 'react';
import { Steps, Spin } from 'antd';
import './steps.less';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';
import Step1 from './steps/step1';
import Step2 from './steps/step2';
import Step3 from './steps/step3';
import Step4 from './steps/step4';
import Step5 from './steps/step5';
import Step6 from './steps/step6';
import Step7 from './steps/step7';
import Step8 from './steps/step8';

const Step = Steps.Step;
const steps = [{
  title: '基本信息',
  content: Step1
}, {
  title: '法律状况评估',
  content: Step2
}, {
  title: '技术状况评估',
  content: Step3
}, {
  title: '历史收入',
  content: Step4
}, {
  title: '收入预估',
  content: Step5
}, {
  title: '所得税预估',
  content: Step6
}, {
  title: '风险预估',
  content: Step7
}, {
  title: '评估值',
  content: Step8
}];

const EvaluateSteps = React.createClass({
  getInitialState() {
    return {
      current: 0,
      loading: true,
      steps: null,
      value: 0,
      step: 0
    };
  },
  next(values) {
    if (this.state.current == 7) {
      this.state.value = values;
      return;
    } else {
      this.state.value = 0;
    }
    const current = this.state.current + 1;
    this.state.steps[this.state.current] = values;
    if (this.state.current === 0 && this.props.title) {
      this.props.title(values.name);
    }
    this.setState({
      current: current,
      steps: this.state.steps
    });
  },
  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  },
  componentWillMount() {
    $.ajax({
      url: globalConfig.context + '/api/user/evaluate/info/' + this.props.id
    }).done(function (res) {
      if (res && res.data) {
        this.setState({
          steps: res.data.steps || {},
          current: res.data.step || 0,
          step: res.data.step || 0,
          value: res.data.value || 0,
          loading: false
        })
        if (this.props.title) {
          this.props.title(res.data.name || '');
        }
      }
    }.bind(this)).fail(function () {
      this.setState({
        loading: false
      })
    }.bind(this));
    this.setState({
      current: this.props.step || 0
    })
  },
  progressDot(dot, { index }) {
    return <span style={{ cursor: 'pointer' }} onClick={() => {
      if (index == this.state.step || !!this.state.steps[index]) {
        this.setState({
          current: index
        })
      }
    }}>{dot}</span>
  },
  render() {
    this.state.StepContent = steps[this.state.current].content;
    let loadContent = !!this.state.steps
    return (
      <Spin spinning={this.state.loading} >
        <div style={{ marginTop: 10 }}>
          <Steps current={this.state.current} progressDot={this.progressDot} value={this.state.value}>
            {steps.map(item => <Step key={item.title} title={item.title} />)}
          </Steps>
          <div className="steps-content">{
            loadContent ? <this.state.StepContent next={this.next} prev={this.prev} id={this.props.id} data={this.state.steps[this.state.current]} record={this.state.steps} value={this.state.value} />
              : <div />
          }</div>
        </div>
      </Spin >
    )
  },
});

export default EvaluateSteps;