tech.jsx 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  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.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. componentDidMount() {
  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 theskill = _me.props.form.getFieldValue('skill')
  108. if (theskill !== undefined) {
  109. if (_me.state.skillArr.length > 0) {
  110. let thebool = true;
  111. _me.state.skillArr.map(function (item, i) {
  112. if (item === theskill) {
  113. thebool = false
  114. };
  115. });
  116. if (thebool) {
  117. _me.state.skillArr.push(theskill);
  118. }
  119. } else if (_me.state.skillArr.length === 0) {
  120. _me.state.skillArr.push(theskill);
  121. }
  122. this.setState({
  123. haveskill: _me.state.skillArr
  124. });
  125. };
  126. },
  127. deleteskill(e) {
  128. let _me = this.state;
  129. _me.skillArr.map(function (item, i) {
  130. if (item === e) {
  131. _me.skillArr.splice(i, 1);
  132. }
  133. });
  134. },
  135. render() {
  136. const FormItem = Form.Item;
  137. const Option = Select.Option;
  138. const { getFieldDecorator } = this.props.form;
  139. const formItemLayout = {
  140. labelCol: { span: 4 },
  141. wrapperCol: { span: 12 },
  142. };
  143. const _me = this;
  144. return (
  145. <Form horizontal onSubmit={this.handleSubmit} className="tech-form">
  146. <FormItem
  147. labelCol={{ span: 4 }}
  148. wrapperCol={{ span: 6 }}
  149. label="技术人员数量"
  150. >
  151. {getFieldDecorator('techpeople', {
  152. initialValue: this.state.techpeople
  153. })(
  154. <InputNumber />
  155. )}
  156. <span>人</span>
  157. </FormItem>
  158. <FormItem
  159. labelCol={{ span: 4 }}
  160. wrapperCol={{ span: 14 }}
  161. label="重点研究领域"
  162. >
  163. {getFieldDecorator('techzone')(
  164. <div>
  165. <TechSelect techzone={this.techzone} />
  166. <Button type="primary" onClick={this.addtechzone}>添加</Button>
  167. </div>
  168. )}
  169. </FormItem>
  170. <div className="set-explain">
  171. {
  172. this.state.techzoneArr.map(function (item, i) {
  173. return <Tag key={item} closable afterClose={_me.deletetechzone.bind(this, item)}>{item}</Tag>
  174. }.bind(this))
  175. }
  176. </div>
  177. <FormItem
  178. labelCol={{ span: 4 }}
  179. wrapperCol={{ span: 14 }}
  180. label="擅长能力"
  181. >
  182. {getFieldDecorator('skill')(
  183. <div>
  184. 擅长 <Input />的研究
  185. <Button type="primary" onClick={this.addskill}>添加</Button>
  186. </div>
  187. )}
  188. </FormItem>
  189. <div className="set-explain">
  190. {
  191. this.state.haveskill.map(function (item, i) {
  192. return <Tag key={item} closable onClose={_me.deleteskill.bind(this, item)}>{item}</Tag>
  193. }.bind(this))
  194. }
  195. </div>
  196. <FormItem wrapperCol={{ span: 12, offset: 3 }}>
  197. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  198. </FormItem>
  199. </Form >
  200. );
  201. },
  202. }));
  203. const Person = React.createClass({
  204. getInitialState() {
  205. return {
  206. loading: false
  207. };
  208. },
  209. spinChange(e) {
  210. this.setState({
  211. loading: e
  212. });
  213. },
  214. render() {
  215. return (
  216. <Spin spinning={this.state.loading} className='spin-box'>
  217. <div className="set-tech">
  218. <div className="acc-title">
  219. <p><span>完善研究领域与擅长能力可加入平台专家,承接技术难题!</span></p>
  220. </div>
  221. <TechFrom spinState={this.spinChange} />
  222. </div>
  223. </Spin>
  224. )
  225. }
  226. });
  227. export default Person;