kede-HN-officialWeb-client/js/component/account/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,
			dottList:[]
		};
	},
	next(values) {
		console.log(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);
		}
		if(!this.state.current){
			this.loadData(this.props.id)
		}
		this.setState({
			current: current,
			steps: this.state.steps
		});
	},
	prev() {
		const current = this.state.current - 1;
		this.setState({ current });
	},
	loadData(id) {
		this.state.dottList=[];
		this.state.step=0;
		$.ajax({
			url: globalConfig.context + '/api/user/evaluate/info/' + 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
		});
	},
	componentWillMount() {
		this.loadData(this.props.id);
	},
	componentWillReceiveProps(nextProps) {
		if (!this.props.visible && nextProps.visible) {
			if (nextProps.id) {
				this.loadData(nextProps.id);
			}
		}
	},
	progressDot(dot, { index }) {
		return (
			<span
				style={{ cursor: 'pointer' }}
				onClick={() => {
					let dottList=this.state.dottList;
					if(index>0){
						dottList.push(index)
					}
					if (index == this.state.step || !!this.state.steps[index]) {
						this.setState({
							current: index,
							dottList:dottList
						});
					}
				}}
			>
				{dot}
			</span>
		);
	},
	render() {
		this.state.StepContent = steps[this.state.current].content;
		let loadContent = !!this.state.steps;
		let dottList =this.state.dottList;
		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}
								visible={this.props.visible}
								data={this.state.step||dottList.length?this.state.steps[this.state.current]:{}}
								record={this.state.steps}
								value={this.state.value}
							/>
						) : (
							<div />
						)}
					</div>
				</div>
			</Spin>
		);
	}
});

export default EvaluateSteps;