step4.jsx 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. import React from 'react';
  2. import { Spin, Form, Button, message, Radio, Table, InputNumber } from 'antd';
  3. import './step4.less';
  4. import ajax from 'jquery/src/ajax/xhr.js'
  5. import $ from 'jquery/src/ajax';
  6. const RadioButton = Radio.Button;
  7. const RadioGroup = Radio.Group;
  8. const FormItem = Form.Item;
  9. const formItemLayout = {
  10. labelCol: { span: 4 },
  11. wrapperCol: { span: 10 },
  12. };
  13. const now = new Date();
  14. const EvaluateStep4 = Form.create({})(React.createClass({
  15. getInitialState() {
  16. return {
  17. loading: false,
  18. initialData: {},
  19. hasIncome: '1',
  20. dataSource: []
  21. };
  22. },
  23. componentWillMount() {
  24. let initialData = this.props.data || {}, dataSource = [];
  25. if (initialData.incomes) {
  26. dataSource = initialData.incomes;
  27. } else {
  28. let step1 = this.props.record && this.props.record[0];
  29. let year = Number(step1.benchmarkDate.split('-')[0]) || now.getFullYear();
  30. for (let i = 1; i < 4; i++) {
  31. dataSource.push({
  32. year: year - i,
  33. income: '',
  34. profit: ''
  35. })
  36. }
  37. }
  38. this.state.dataSource = dataSource;
  39. this.state.initialData = initialData;
  40. this.state.hasIncome = initialData.hasIncome || '1'
  41. },
  42. next() {
  43. if (this.state.loading) {
  44. return;
  45. }
  46. this.props.form.validateFields((err, values) => {
  47. if (!err) {
  48. this.setState({
  49. loading: true
  50. })
  51. let data = {
  52. id: this.props.id,
  53. hasIncome: values.hasIncome
  54. }
  55. if (data.hasIncome == 2) {
  56. let incomes = [], year = 0;
  57. for (let i = 0; i < 3; i++) {
  58. year = this.state.dataSource[i].year;
  59. incomes.push({
  60. year: year,
  61. income: values['income' + year],
  62. profit: values['profit' + year]
  63. })
  64. }
  65. data.incomes = JSON.stringify(incomes);
  66. }
  67. $.ajax({
  68. url: globalConfig.context + '/api/user/evaluate/step4',
  69. method: 'post',
  70. data: data
  71. }).done(function (res) {
  72. if (res.error && res.error.length) {
  73. message.error(res.error[0].message)
  74. } else {
  75. if (this.props.next) {
  76. this.props.next(values);
  77. }
  78. }
  79. }.bind(this)).fail(function () {
  80. this.setState({
  81. loading: false
  82. })
  83. }.bind(this));
  84. } else {
  85. for (let field in err) {
  86. if (err.hasOwnProperty(field)) {
  87. message.error(err[field].errors[0].message)
  88. break;
  89. }
  90. }
  91. }
  92. });
  93. },
  94. prev() {
  95. if (this.props.prev) {
  96. this.props.prev();
  97. }
  98. },
  99. onRadioChange(e) {
  100. this.setState({
  101. hasIncome: e.target.value,
  102. });
  103. },
  104. tableCols() {
  105. const { getFieldDecorator } = this.props.form;
  106. return [
  107. {
  108. title: '年份',
  109. dataIndex: 'year',
  110. key: 'year',
  111. render: (text, it) => {
  112. return <div>{text}</div>
  113. }
  114. },
  115. {
  116. title: '营收(元)',
  117. dataIndex: 'income',
  118. key: 'income',
  119. render: (text, it) => {
  120. return getFieldDecorator('income' + it.year, {
  121. initialValue: text,
  122. rules: [{ required: true, message: '请输入' + it.year + '营收情况!' }]
  123. })(<InputNumber placeholder="请输入营收情况" />);
  124. }
  125. },
  126. {
  127. title: '利润率(%)',
  128. dataIndex: 'profit',
  129. key: 'profit',
  130. render: (text, it) => {
  131. return getFieldDecorator('profit' + it.year, {
  132. initialValue: text,
  133. rules: [{ required: true, message: '请输入' + it.year + '利润率!' }]
  134. })(<InputNumber placeholder="请输入利润率" />);
  135. }
  136. },
  137. ]
  138. },
  139. stringify(val) {
  140. return val && String(val)
  141. },
  142. render() {
  143. let { loading, initialData } = this.state;
  144. const { getFieldDecorator } = this.props.form;
  145. return (
  146. <Spin spinning={loading}>
  147. <div style={{ marginBottom: 10 }}>若该技术曾被应用于生产活动并产生收益,可选择【有历史收入】,若否,请选择【无历史收入】。</div>
  148. <Form className="steps-form">
  149. <FormItem label="是否有历史收入" {...formItemLayout}>
  150. {getFieldDecorator('hasIncome', {
  151. initialValue: this.stringify(initialData.hasIncome) || '1'
  152. })(
  153. <RadioGroup size="large" onChange={this.onRadioChange}>
  154. <RadioButton value="1">无历史收入</RadioButton>
  155. <RadioButton value="2">有历史收入</RadioButton>
  156. </RadioGroup>
  157. )}
  158. </FormItem>
  159. {
  160. this.state.hasIncome == 1 ?
  161. <div style={{ marginTop: 10 }}>无历史收入, 请直接进入下一步</div> :
  162. <Table pagination={false} rowKey="year" columns={this.tableCols()} dataSource={this.state.dataSource} />
  163. }
  164. </Form>
  165. <div className="steps-action">
  166. <Button type="primary" onClick={() => this.next()}>保存,下一步</Button>
  167. <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>上一步</Button>
  168. </div>
  169. </Spin>
  170. )
  171. },
  172. }));
  173. export default EvaluateStep4;