step3.jsx 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. import React from 'react';
  2. import { Spin, Form, Button, Select, message } from 'antd';
  3. import './step3.less';
  4. import ajax from 'jquery/src/ajax/xhr.js'
  5. import $ from 'jquery/src/ajax';
  6. const FormItem = Form.Item;
  7. const Option = Select.Option;
  8. const formItemLayout = {
  9. labelCol: { span: 4 },
  10. wrapperCol: { span: 10 },
  11. };
  12. const EvaluateStep3 = Form.create({})(React.createClass({
  13. getInitialState() {
  14. return {
  15. loading: false,
  16. initialData: {}
  17. };
  18. },
  19. componentWillMount() {
  20. this.state.initialData = this.props.data || {};
  21. },
  22. next() {
  23. if (this.state.loading) {
  24. return;
  25. }
  26. this.props.form.validateFields((err, values) => {
  27. if (!err) {
  28. this.setState({
  29. loading: true
  30. })
  31. values.id = this.props.id;
  32. $.ajax({
  33. url: globalConfig.context + '/api/user/evaluate/step3',
  34. method: 'post',
  35. data: values
  36. }).done(function (res) {
  37. if (res.error && res.error.length) {
  38. message.error(res.error[0].message)
  39. } else {
  40. if (this.props.next) {
  41. this.props.next(values);
  42. }
  43. }
  44. }.bind(this)).fail(function () {
  45. this.setState({
  46. loading: false
  47. })
  48. }.bind(this));
  49. }
  50. });
  51. },
  52. prev() {
  53. if (this.props.prev) {
  54. this.props.prev();
  55. }
  56. },
  57. stringify(val) {
  58. return val && String(val)
  59. },
  60. render() {
  61. let { loading, initialData } = this.state;
  62. const { getFieldDecorator } = this.props.form;
  63. return (
  64. <Spin spinning={loading}>
  65. <Form className="steps-form">
  66. <FormItem label="先进性" {...formItemLayout}>
  67. {getFieldDecorator('progressiveness', {
  68. rules: [{ required: true, message: '请选择技术的先进性!' }],
  69. initialValue: this.stringify(initialData.progressiveness)
  70. })(
  71. <Select placeholder="请选择技术的先进性">
  72. <Option value="1">填补了世界空白</Option>
  73. <Option value="2">填补了国内空白</Option>
  74. <Option value="3">国家级领先技术</Option>
  75. <Option value="4">省域级领先技术</Option>
  76. <Option value="5">市域级领先技术</Option>
  77. <Option value="6">先进性方面与类似技术相差不大</Option>
  78. </Select>
  79. )}
  80. </FormItem>
  81. <FormItem label="创新性" {...formItemLayout}>
  82. {getFieldDecorator('innovativeness', {
  83. rules: [{ required: true, message: '请选择技术的创新性!' }],
  84. initialValue: this.stringify(initialData.innovativeness)
  85. })(
  86. <Select placeholder="请选择技术的创新性">
  87. <Option value="1">具有突破性创新</Option>
  88. <Option value="2">非突破性创新,但功效有显著提升</Option>
  89. <Option value="3">非突破性创新,但功效有一定提升</Option>
  90. <Option value="4">有类似技术且功效差不多</Option>
  91. <Option value="5">功效差于现行类似技术</Option>
  92. <Option value="6">功效无法判定</Option>
  93. </Select>
  94. )}
  95. </FormItem>
  96. <FormItem label="成熟度" {...formItemLayout}>
  97. {getFieldDecorator('ripeness', {
  98. rules: [{ required: true, message: '请选择技术的成熟度!' }],
  99. initialValue: this.stringify(initialData.ripeness)
  100. })(
  101. <Select placeholder="请选择技术的成熟度">
  102. <Option value="1">技术成熟并已产业化多年</Option>
  103. <Option value="2">技术成熟,已产业化一年以下</Option>
  104. <Option value="3">技术成熟,已成功进行试生产,即将产业化</Option>
  105. <Option value="4">技术已研发完成,尚未投入生产</Option>
  106. <Option value="5">技术处于中试阶段</Option>
  107. <Option value="6">仅为概念或早期阶段、小试阶段</Option>
  108. </Select>
  109. )}
  110. </FormItem>
  111. <FormItem label="替代性" {...formItemLayout}>
  112. {getFieldDecorator('alternatives', {
  113. rules: [{ required: true, message: '请选择技术的替代性!' }],
  114. initialValue: this.stringify(initialData.alternatives)
  115. })(
  116. <Select placeholder="请选择技术的替代性">
  117. <Option value="1">具有不可替代性</Option>
  118. <Option value="2">与其他类似技术相比具有优势,较难被替代</Option>
  119. <Option value="3">有其他相同的替代技术</Option>
  120. <Option value="4">有其他更好的替代技术</Option>
  121. </Select>
  122. )}
  123. </FormItem>
  124. <FormItem label="技术防御力" {...formItemLayout}>
  125. {getFieldDecorator('defensive', {
  126. rules: [{ required: true, message: '请选择技术的防御力!' }],
  127. initialValue: this.stringify(initialData.defensive)
  128. })(
  129. <Select placeholder="请选择技术的防御力">
  130. <Option value="1">技术复杂程度高,所需资金量大</Option>
  131. <Option value="2">技术复杂程度较高,所需资金量较大</Option>
  132. <Option value="3">技术复杂程度较高,但所需资金量不大</Option>
  133. <Option value="4">技术复杂程度不高,所需资金量较大</Option>
  134. <Option value="5">技术复杂程度不高,所需资金量不大</Option>
  135. <Option value="6">技术简单,所需资金量小</Option>
  136. </Select>
  137. )}
  138. </FormItem>
  139. <FormItem label="技术领域发展前景" {...formItemLayout}>
  140. {getFieldDecorator('prospect', {
  141. rules: [{ required: true, message: '请选择技术领域发展前景!' }],
  142. initialValue: this.stringify(initialData.prospect)
  143. })(
  144. <Select placeholder="请选择技术领域发展前景">
  145. <Option value="1">技术产品所属领域发展前景好</Option>
  146. <Option value="2">技术产品所属领域发展前景较好</Option>
  147. <Option value="3">技术产品所属领域发展前景一般</Option>
  148. <Option value="4">技术产品所属领域发展前景较差</Option>
  149. <Option value="5">技术产品所属领域发展前景差</Option>
  150. </Select>
  151. )}
  152. </FormItem>
  153. <FormItem label="供求关系" {...formItemLayout}>
  154. {getFieldDecorator('supplyAndDemand', {
  155. rules: [{ required: true, message: '请选择技术的供求关系!' }],
  156. initialValue: this.stringify(initialData.supplyAndDemand)
  157. })(
  158. <Select placeholder="请选择技术的供求关系">
  159. <Option value="1">解决了行业的必需技术问题,为广大厂商所需要,具有一定垄断性</Option>
  160. <Option value="2">解决了行业的重要技术问题,供不应求</Option>
  161. <Option value="3">解决了行业一般技术问题,形成一定需求</Option>
  162. <Option value="4">解决了行业非重要技术问题,形成少量需求</Option>
  163. <Option value="5">解决了生产中某一附加技术问题或改进了某一技术环节,对于整体生产环节的改进有一定作用,形成一定潜在需求</Option>
  164. <Option value="6">解决了生产中某一附加技术问题或改进了某一技术环节,对于整体生产环节的改进并未产生作用</Option>
  165. </Select>
  166. )}
  167. </FormItem>
  168. <FormItem label="产品应用范围" {...formItemLayout}>
  169. {getFieldDecorator('rangeOfApplication', {
  170. rules: [{ required: true, message: '请选择技术的应用范围!' }],
  171. initialValue: this.stringify(initialData.rangeOfApplication)
  172. })(
  173. <Select placeholder="请选择技术的应用范围">
  174. <Option value="1">技术产品应用于全国</Option>
  175. <Option value="2">技术产品应用于省域或省级区域</Option>
  176. <Option value="3">技术产品应用范围较小</Option>
  177. <Option value="4">技术产品应用范围非常小</Option>
  178. </Select>
  179. )}
  180. </FormItem>
  181. <FormItem label="遭他人模仿可能性" {...formItemLayout}>
  182. {getFieldDecorator('imitable', {
  183. rules: [{ required: true, message: '请选择技术的模仿可能性!' }],
  184. initialValue: this.stringify(initialData.imitable)
  185. })(
  186. <Select placeholder="请选择技术的模仿可能性">
  187. <Option value="1">较低</Option>
  188. <Option value="2">中等</Option>
  189. <Option value="3">高</Option>
  190. </Select>
  191. )}
  192. </FormItem>
  193. <FormItem label="独立获利能力" {...formItemLayout}>
  194. {getFieldDecorator('profitability', {
  195. rules: [{ required: true, message: '请选择技术的独立获利能力!' }],
  196. initialValue: this.stringify(initialData.profitability)
  197. })(
  198. <Select placeholder="请选择技术的独立获利能力">
  199. <Option value="1">可以单独应用于产品,发挥技术作用</Option>
  200. <Option value="2">需要与其他相关技术或专利一起应用于产品,共同发挥作用,且占主要作用</Option>
  201. <Option value="3">需要与其他相关技术或专利一起应用于产品,共同发挥作用,只起次要作用</Option>
  202. </Select>
  203. )}
  204. </FormItem>
  205. </Form>
  206. <div className="steps-action">
  207. <Button type="primary" onClick={() => this.next()}>保存,下一步</Button>
  208. <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>上一步</Button>
  209. </div>
  210. </Spin>
  211. )
  212. },
  213. }));
  214. export default EvaluateStep3;