ablt.jsx 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. import React from 'react';
  2. import './ablt.less';
  3. import ajax from 'jquery/src/ajax/xhr.js'
  4. import $ from 'jquery/src/ajax';
  5. import { Tag, Input, Tooltip, Button, Spin, message } from 'antd';
  6. class EditableTagGroup extends React.Component {
  7. constructor(props) {
  8. super(props);
  9. this.state = {
  10. tags: ['我的标签:', '标签1', '标签2'],
  11. inputVisible: false,
  12. inputValue: '',
  13. propsBool: true
  14. }
  15. }
  16. handleClose(removedTag) {
  17. const tags = this.state.tags.filter(tag => tag !== removedTag);
  18. this.props.tagsArr(tags);
  19. this.setState({ tags });
  20. }
  21. showInput() {
  22. this.setState({ inputVisible: true }, () => this.input.focus());
  23. }
  24. handleInputChange(e) {
  25. this.setState({ inputValue: e.target.value });
  26. }
  27. handleInputConfirm() {
  28. const state = this.state;
  29. const inputValue = state.inputValue;
  30. let tags = state.tags;
  31. if (inputValue && tags.indexOf(inputValue) === -1) {
  32. tags = [...tags, inputValue];
  33. }
  34. this.props.tagsArr(tags);
  35. this.setState({
  36. tags,
  37. inputVisible: false,
  38. inputValue: '',
  39. });
  40. }
  41. componentWillReceiveProps(nextProps) {
  42. if (nextProps.abltArr && this.state.propsBool) {
  43. nextProps.abltArr.unshift("我的标签:");
  44. this.state.tags = nextProps.abltArr;
  45. this.state.propsBool = false;
  46. };
  47. }
  48. render() {
  49. const { tags, inputVisible, inputValue } = this.state;
  50. return (
  51. <div className="ablt-tips">
  52. {tags.map((tag, index) => {
  53. const isLongTag = tag.length > 11;
  54. const tagElem = (
  55. <Tag key={tag} closable={index !== 0} afterClose={() => this.handleClose(tag)}>
  56. {isLongTag ? `${tag.slice(0, 11)}...` : tag}
  57. </Tag>
  58. );
  59. return isLongTag ? <Tooltip title={tag}>{tagElem}</Tooltip> : tagElem;
  60. })}
  61. {inputVisible && (
  62. <Input
  63. ref={input => this.input = input}
  64. type="text"
  65. style={{ width: 78 }}
  66. value={inputValue}
  67. onChange={this.handleInputChange.bind(this)}
  68. onBlur={this.handleInputConfirm.bind(this)}
  69. onPressEnter={this.handleInputConfirm.bind(this)}
  70. />
  71. )}
  72. {!inputVisible && <Button className="addtips" type="dashed" disabled={tags.length > 10 ? true : false} onClick={this.showInput.bind(this)}>+ 新标签</Button>}
  73. </div>
  74. );
  75. }
  76. };
  77. const Base = React.createClass({
  78. getInitialState() {
  79. return {
  80. loading: false,
  81. tags: []
  82. };
  83. },
  84. componentWillMount() {
  85. this.setState({
  86. loading: true
  87. });
  88. $.ajax({
  89. method: "get",
  90. dataType: "json",
  91. url: globalConfig.context + "/api/user/ability",
  92. success: function (data) {
  93. if (data.data) {
  94. this.setState({
  95. id: data.data.id || null,
  96. abltArr: data.data.abilityLabel ? data.data.abilityLabel.split(",") : [],
  97. intellectRight: data.data.intellectRight,
  98. scienceAchievement: data.data.scienceAchievement,
  99. researchInnovation: data.data.researchInnovation,
  100. personnel: data.data.personnel
  101. });
  102. };
  103. }.bind(this),
  104. }).always(function () {
  105. this.setState({
  106. loading: false
  107. });
  108. }.bind(this));
  109. },
  110. getTagsArr(e) {
  111. this.state.tags = e.slice(1);
  112. },
  113. submit() {
  114. let theTags = this.state.tags.join(",");
  115. this.setState({
  116. loading: true
  117. })
  118. $.ajax({
  119. method: "POST",
  120. dataType: "json",
  121. crossDomain: false,
  122. url: globalConfig.context + "/api/user/userAbility",
  123. data: {
  124. 'id': this.state.id,
  125. 'abilityLabel': theTags,
  126. "intellectRight": this.state.intellectRight,
  127. "scienceAchievement": this.state.scienceAchievement,
  128. "researchInnovation": this.state.researchInnovation,
  129. "personnel": this.state.personnel
  130. }
  131. }).done(function (data) {
  132. if (!data.error.length) {
  133. message.success('保存成功!');
  134. } else {
  135. message.warning(data.error[0].message);
  136. }
  137. }.bind(this)).always(function () {
  138. this.setState({
  139. loading: false
  140. })
  141. }.bind(this));
  142. },
  143. render() {
  144. return (
  145. <Spin spinning={this.state.loading} className='spin-box'>
  146. <div className="set-ablt">
  147. <div className="acc-detail">
  148. <p className="acc-title">能力标签</p>
  149. <p className="tips-title">最多可设置10个标签。请用简洁明确的关键词来展示你的职业能力。</p>
  150. <EditableTagGroup abltArr={this.state.abltArr} tagsArr={this.getTagsArr} />
  151. </div>
  152. {userData.type == "1" ? <div className="acc-detail clearfix">
  153. <p className="acc-title">能力标签</p>
  154. <div className="acc-area">
  155. <p>知识产权对企业竞争力的作用 (限400字) </p>
  156. <Input type="textarea" rows={6}
  157. value={this.state.intellectRight}
  158. onChange={(e) => {
  159. if (e.target.value.length > 400) {
  160. message.warning("长度超过400字!");
  161. return;
  162. };
  163. this.setState({ intellectRight: e.target.value });
  164. }} />
  165. </div>
  166. <div className="acc-area">
  167. <p>科技成果转化情况 (限400字) </p>
  168. <Input type="textarea" rows={6}
  169. value={this.state.scienceAchievement}
  170. onChange={(e) => {
  171. if (e.target.value.length > 400) {
  172. message.warning("长度超过400字!");
  173. return;
  174. };
  175. this.setState({ scienceAchievement: e.target.value })
  176. }} />
  177. </div>
  178. <div className="acc-area">
  179. <p>研究开发与技术创新组织管理情况 (限400字) </p>
  180. <Input type="textarea" rows={6}
  181. value={this.state.researchInnovation}
  182. onChange={(e) => {
  183. if (e.target.value.length > 400) {
  184. message.warning("长度超过400字!");
  185. return;
  186. };
  187. this.setState({ researchInnovation: e.target.value })
  188. }} />
  189. </div>
  190. <div className="acc-area">
  191. <p>管理与科技人员情况 (限400字) </p>
  192. <Input type="textarea" rows={6}
  193. value={this.state.personnel}
  194. onChange={(e) => {
  195. if (e.target.value.length > 400) {
  196. message.warning("长度超过400字!");
  197. return;
  198. };
  199. this.setState({ personnel: e.target.value })
  200. }} />
  201. </div>
  202. </div> : <div></div>}
  203. <Button className="set-submit" type="primary" onClick={this.submit}>保存</Button>
  204. </div>
  205. </Spin>
  206. )
  207. }
  208. });
  209. export default Base;