tech.jsx 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  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. } else {
  62. message.warning(data.error[0].message);
  63. }
  64. }.bind(this)).always(function () {
  65. this.props.spinState(false);
  66. }.bind(this));
  67. }
  68. });
  69. },
  70. techzone(x, y, z) {
  71. this.state.selecttech = x + '/' + y + '/' + z;
  72. },
  73. addtechzone(e) {
  74. let _me = this;
  75. let newArr = _me.state.techzoneArr;
  76. if (this.state.selecttech !== undefined) {
  77. if (_me.state.techzoneArr.length > 0) {
  78. let thebool = true;
  79. _me.state.techzoneArr.map(function (item, i) {
  80. if (item === _me.state.selecttech) {
  81. thebool = false
  82. };
  83. });
  84. if (thebool) {
  85. newArr = _me.state.techzoneArr.concat(_me.state.selecttech);
  86. }
  87. } else if (_me.state.techzoneArr.length === 0) {
  88. newArr = _me.state.techzoneArr.concat(_me.state.selecttech);
  89. }
  90. this.setState({
  91. techzoneArr: newArr
  92. });
  93. };
  94. },
  95. deletetechzone(e) {
  96. let _me = this.state;
  97. let newArr = [];
  98. _me.techzoneArr.map(function (item, i) {
  99. if (item !== e) {
  100. newArr.push(item);
  101. }
  102. });
  103. this.setState({
  104. techzoneArr: newArr
  105. })
  106. },
  107. addskill(e) {
  108. let _me = this;
  109. let theSkillArr = _me.state.haveskill;
  110. let theskill = _me.props.form.getFieldValue('skill');
  111. if (theskill !== undefined) {
  112. if (_me.state.haveskill.length > 0) {
  113. let thebool = true;
  114. _me.state.haveskill.map(function (item, i) {
  115. if (item === theskill) {
  116. thebool = false
  117. };
  118. });
  119. if (thebool) {
  120. theSkillArr = _me.state.haveskill.concat(theskill);
  121. }
  122. } else if (_me.state.haveskill.length === 0) {
  123. theSkillArr = _me.state.haveskill.concat(theskill);
  124. };
  125. this.setState({
  126. haveskill: theSkillArr
  127. });
  128. };
  129. },
  130. deleteskill(e) {
  131. let _me = this.state;
  132. _me.haveskill.map(function (item, i) {
  133. if (item === e) {
  134. _me.haveskill.splice(i, 1);
  135. }
  136. });
  137. },
  138. render() {
  139. const FormItem = Form.Item;
  140. const Option = Select.Option;
  141. const { getFieldDecorator } = this.props.form;
  142. const formItemLayout = {
  143. labelCol: { span: 4 },
  144. wrapperCol: { span: 12 },
  145. };
  146. const _me = this;
  147. return (
  148. <Form horizontal onSubmit={this.handleSubmit} className="tech-form">
  149. <FormItem
  150. labelCol={{ span: 4 }}
  151. wrapperCol={{ span: 6 }}
  152. label="技术人员数量"
  153. >
  154. {getFieldDecorator('techpeople', {
  155. initialValue: this.state.techpeople
  156. })(
  157. <InputNumber />
  158. )}
  159. <span>人</span>
  160. </FormItem>
  161. <FormItem
  162. labelCol={{ span: 4 }}
  163. wrapperCol={{ span: 14 }}
  164. label="重点研究领域"
  165. >
  166. {getFieldDecorator('techzone')(
  167. <div>
  168. <TechSelect techzone={this.techzone} />
  169. <Button type="primary" onClick={this.addtechzone}>添加</Button>
  170. </div>
  171. )}
  172. </FormItem>
  173. <div className="set-explain">
  174. {
  175. this.state.techzoneArr.map(function (item, i) {
  176. return <Tag key={item} closable afterClose={_me.deletetechzone.bind(this, item)}>{item}</Tag>
  177. }.bind(this))
  178. }
  179. </div>
  180. <FormItem
  181. labelCol={{ span: 4 }}
  182. wrapperCol={{ span: 14 }}
  183. label="擅长能力"
  184. >
  185. {getFieldDecorator('skill')(
  186. <div>
  187. 擅长 <Input />的研究
  188. <Button type="primary" onClick={this.addskill}>添加</Button>
  189. </div>
  190. )}
  191. </FormItem>
  192. <div className="set-explain">
  193. {
  194. this.state.haveskill.map(function (item, i) {
  195. return <Tag key={item} closable onClose={_me.deleteskill.bind(this, item)}>{item}</Tag>
  196. }.bind(this))
  197. }
  198. </div>
  199. <FormItem wrapperCol={{ span: 12, offset: 3 }}>
  200. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  201. </FormItem>
  202. </Form >
  203. );
  204. },
  205. }));
  206. const Person = React.createClass({
  207. getInitialState() {
  208. return {
  209. loading: false
  210. };
  211. },
  212. spinChange(e) {
  213. this.setState({
  214. loading: e
  215. });
  216. },
  217. render() {
  218. return (
  219. <Spin spinning={this.state.loading} className='spin-box'>
  220. <div className="set-tech">
  221. <div className="acc-title">
  222. <p><span>完善研究领域与擅长能力可加入平台专家,承接技术难题!</span></p>
  223. </div>
  224. <TechFrom spinState={this.spinChange} />
  225. </div>
  226. </Spin>
  227. )
  228. }
  229. });
  230. export default Person;