steps.jsx 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. import React from 'react';
  2. import { Steps, Spin } from 'antd';
  3. import './steps.less';
  4. import ajax from 'jquery/src/ajax/xhr.js';
  5. import $ from 'jquery/src/ajax';
  6. import Step1 from './steps/step1';
  7. import Step2 from './steps/step2';
  8. import Step3 from './steps/step3';
  9. import Step4 from './steps/step4';
  10. import Step5 from './steps/step5';
  11. import Step6 from './steps/step6';
  12. import Step7 from './steps/step7';
  13. import Step8 from './steps/step8';
  14. const Step = Steps.Step;
  15. const steps = [
  16. {
  17. title: '基本信息',
  18. content: Step1
  19. },
  20. {
  21. title: '法律状况评估',
  22. content: Step2
  23. },
  24. {
  25. title: '技术状况评估',
  26. content: Step3
  27. },
  28. {
  29. title: '历史收入',
  30. content: Step4
  31. },
  32. {
  33. title: '收入预估',
  34. content: Step5
  35. },
  36. {
  37. title: '所得税预估',
  38. content: Step6
  39. },
  40. {
  41. title: '风险预估',
  42. content: Step7
  43. },
  44. {
  45. title: '评估值',
  46. content: Step8
  47. }
  48. ];
  49. const EvaluateSteps = React.createClass({
  50. getInitialState() {
  51. return {
  52. current: 0,
  53. loading: true,
  54. steps: null,
  55. value: 0,
  56. step: 0
  57. };
  58. },
  59. next(values) {
  60. if (this.state.current == 7) {
  61. this.state.value = values;
  62. return;
  63. } else {
  64. this.state.value = 0;
  65. }
  66. const current = this.state.current + 1;
  67. this.state.steps[this.state.current] = values;
  68. if (this.state.current === 0 && this.props.title) {
  69. this.props.title(values.name);
  70. }
  71. this.setState({
  72. current: current,
  73. steps: this.state.steps
  74. });
  75. },
  76. prev() {
  77. const current = this.state.current - 1;
  78. this.setState({ current });
  79. },
  80. loadData(id) {
  81. this.state.step=0;
  82. $.ajax({
  83. url: globalConfig.context + '/api/user/evaluate/info/' + id
  84. })
  85. .done(
  86. function(res) {
  87. if (res && res.data) {
  88. this.setState({
  89. steps: res.data.steps || {},
  90. current: res.data.step || 0,
  91. step: res.data.step || 0,
  92. value: res.data.value || 0,
  93. loading: false
  94. });
  95. if (this.props.title) {
  96. this.props.title(res.data.name || '');
  97. }
  98. }
  99. }.bind(this)
  100. )
  101. .fail(
  102. function() {
  103. this.setState({
  104. loading: false
  105. });
  106. }.bind(this)
  107. );
  108. this.setState({
  109. current: this.props.step || 0
  110. });
  111. },
  112. componentWillMount() {
  113. this.loadData(this.props.id);
  114. },
  115. componentWillReceiveProps(nextProps) {
  116. if (!this.props.visible && nextProps.visible) {
  117. if (nextProps.id) {
  118. this.loadData(nextProps.id);
  119. }
  120. }
  121. },
  122. progressDot(dot, { index }) {
  123. return (
  124. <span
  125. style={{ cursor: 'pointer' }}
  126. onClick={() => {
  127. if (index == this.state.step || !!this.state.steps[index]) {
  128. this.setState({
  129. current: index
  130. });
  131. }
  132. }}
  133. >
  134. {dot}
  135. </span>
  136. );
  137. },
  138. render() {
  139. this.state.StepContent = steps[this.state.current].content;
  140. let loadContent = !!this.state.steps;
  141. console.log(this.state.step)
  142. return (
  143. <Spin spinning={this.state.loading}>
  144. <div style={{ marginTop: 10 }}>
  145. <Steps current={this.state.current} progressDot={this.progressDot} value={this.state.value}>
  146. {steps.map((item) => <Step key={item.title} title={item.title} />)}
  147. </Steps>
  148. <div className="steps-content">
  149. {loadContent ? (
  150. <this.state.StepContent
  151. next={this.next}
  152. prev={this.prev}
  153. id={this.props.id}
  154. visible={this.props.visible}
  155. data={(this.state.step)?this.state.steps[this.state.current]:{}}
  156. record={this.state.steps}
  157. value={this.state.value}
  158. />
  159. ) : (
  160. <div />
  161. )}
  162. </div>
  163. </div>
  164. </Spin>
  165. );
  166. }
  167. });
  168. export default EvaluateSteps;