tech.jsx 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. import React from 'react';
  2. import { Input, Button, Form, Select, Icon, Spin, InputNumber, Tag, message } from 'antd';
  3. import './tech.less';
  4. import ajax from 'jquery/src/ajax/xhr.js';
  5. import $ from 'jquery/src/ajax';
  6. import TechSelect from './techSelect.jsx';
  7. const TechFrom = Form.create()(React.createClass({
  8. getInitialState() {
  9. return {
  10. loading: false,
  11. techzoneArr: [],
  12. havetechzone: [],
  13. skillArr: [],
  14. haveskill: []
  15. };
  16. },
  17. getData() {
  18. this.props.spinState(true);
  19. $.ajax({
  20. method: "get",
  21. dataType: "json",
  22. url: globalConfig.context + "/api/user/job",
  23. success: function (data) {
  24. if (data.data) {
  25. this.setState({
  26. id:data.data.id,
  27. techpeople: data.data.technicalPeopleNum,
  28. techzoneArr: data.data.searchAreaCategory ? data.data.searchAreaCategory.split(",") : [],
  29. haveskill: data.data.specialty ? data.data.specialty.split(",") : []
  30. });
  31. };
  32. }.bind(this),
  33. }).always(function () {
  34. this.props.spinState(false);
  35. }.bind(this));
  36. },
  37. componentWillMount() {
  38. this.getData();
  39. },
  40. handleSubmit(e) {
  41. e.preventDefault();
  42. let searchArea = this.state.techzoneArr.join(",");
  43. let specialty = this.state.haveskill.join(",");
  44. this.props.form.validateFields((err, values) => {
  45. if (!err) {
  46. this.props.spinState(true);
  47. $.ajax({
  48. method: "POST",
  49. dataType: "json",
  50. crossDomain: false,
  51. url: globalConfig.context + "/api/user/orgTech",
  52. data: {
  53. "id":this.state.id,
  54. "technicalPeopleNum": values.techpeople,
  55. "searchAreaCategory": searchArea,
  56. "specialty": specialty
  57. }
  58. }).done(function (data) {
  59. if (!data.error.length) {
  60. message.success('保存成功!');
  61. this.getData();
  62. } else {
  63. message.warning(data.error[0].message);
  64. }
  65. }.bind(this)).always(function () {
  66. this.props.spinState(false);
  67. }.bind(this));
  68. }
  69. });
  70. },
  71. techzone(x, y, z) {
  72. this.state.selecttech = x + '/' + y + '/' + z;
  73. },
  74. addtechzone(e) {
  75. let _me = this;
  76. let newArr = _me.state.techzoneArr;
  77. if (this.state.selecttech !== undefined) {
  78. if (_me.state.techzoneArr.length > 0) {
  79. let thebool = true;
  80. _me.state.techzoneArr.map(function (item, i) {
  81. if (item === _me.state.selecttech) {
  82. thebool = false
  83. };
  84. });
  85. if (thebool) {
  86. newArr = _me.state.techzoneArr.concat(_me.state.selecttech);
  87. }
  88. } else if (_me.state.techzoneArr.length === 0) {
  89. newArr = _me.state.techzoneArr.concat(_me.state.selecttech);
  90. }
  91. this.setState({
  92. techzoneArr: newArr
  93. });
  94. };
  95. },
  96. deletetechzone(e) {
  97. let _me = this.state;
  98. let newArr = [];
  99. _me.techzoneArr.map(function (item, i) {
  100. if (item !== e) {
  101. newArr.push(item);
  102. }
  103. });
  104. this.setState({
  105. techzoneArr: newArr
  106. })
  107. },
  108. addskill(e) {
  109. let _me = this;
  110. let theSkillArr = _me.state.haveskill;
  111. let theskill = _me.props.form.getFieldValue('skill');
  112. if (theskill !== undefined) {
  113. if (_me.state.haveskill.length > 0) {
  114. let thebool = true;
  115. _me.state.haveskill.map(function (item, i) {
  116. if (item === theskill) {
  117. thebool = false
  118. };
  119. });
  120. if (thebool) {
  121. theSkillArr = _me.state.haveskill.concat(theskill);
  122. }
  123. } else if (_me.state.haveskill.length === 0) {
  124. theSkillArr = _me.state.haveskill.concat(theskill);
  125. };
  126. this.setState({
  127. haveskill: theSkillArr
  128. });
  129. };
  130. },
  131. deleteskill(e) {
  132. let _me = this.state;
  133. _me.haveskill.map(function (item, i) {
  134. if (item === e) {
  135. _me.haveskill.splice(i, 1);
  136. }
  137. });
  138. },
  139. render() {
  140. const FormItem = Form.Item;
  141. const Option = Select.Option;
  142. const { getFieldDecorator } = this.props.form;
  143. const formItemLayout = {
  144. labelCol: { span: 4 },
  145. wrapperCol: { span: 12 },
  146. };
  147. const _me = this;
  148. return (
  149. <Form horizontal onSubmit={this.handleSubmit} className="tech-form">
  150. <FormItem
  151. labelCol={{ span: 4 }}
  152. wrapperCol={{ span: 6 }}
  153. label="技术人员数量"
  154. >
  155. {getFieldDecorator('techpeople', {
  156. initialValue: this.state.techpeople
  157. })(
  158. <InputNumber />
  159. )}
  160. <span>人</span>
  161. </FormItem>
  162. <FormItem
  163. labelCol={{ span: 4 }}
  164. wrapperCol={{ span: 14 }}
  165. label="重点研究领域"
  166. >
  167. {getFieldDecorator('techzone')(
  168. <div>
  169. <TechSelect techzone={this.techzone} />
  170. <Button type="primary" onClick={this.addtechzone}>添加</Button>
  171. </div>
  172. )}
  173. </FormItem>
  174. <div className="set-explain">
  175. {
  176. this.state.techzoneArr.map(function (item, i) {
  177. return <Tag key={item} closable afterClose={_me.deletetechzone.bind(this, item)}>{item}</Tag>
  178. }.bind(this))
  179. }
  180. </div>
  181. <FormItem
  182. labelCol={{ span: 4 }}
  183. wrapperCol={{ span: 14 }}
  184. label="擅长能力"
  185. >
  186. {getFieldDecorator('skill')(
  187. <div>
  188. 擅长 <Input />的研究
  189. <Button type="primary" onClick={this.addskill}>添加</Button>
  190. </div>
  191. )}
  192. </FormItem>
  193. <div className="set-explain">
  194. {
  195. this.state.haveskill.map(function (item, i) {
  196. return <Tag key={item} closable onClose={_me.deleteskill.bind(this, item)}>{item}</Tag>
  197. }.bind(this))
  198. }
  199. </div>
  200. <FormItem wrapperCol={{ span: 12, offset: 3 }}>
  201. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  202. </FormItem>
  203. </Form >
  204. );
  205. },
  206. }));
  207. const Person = React.createClass({
  208. getInitialState() {
  209. return {
  210. loading: false
  211. };
  212. },
  213. spinChange(e) {
  214. this.setState({
  215. loading: e
  216. });
  217. },
  218. render() {
  219. return (
  220. <Spin spinning={this.state.loading} className='spin-box'>
  221. <div className="set-tech">
  222. <div className="acc-title">
  223. <p><span>完善研究领域与擅长能力可加入平台专家,承接技术难题!</span></p>
  224. </div>
  225. <TechFrom spinState={this.spinChange} />
  226. </div>
  227. </Spin>
  228. )
  229. }
  230. });
  231. export default Person;