tech.jsx 7.9 KB

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