ablt.jsx 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  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. abltArr: data.data.abilityLabel ? data.data.abilityLabel.split(",") : [],
  96. intellectRight: data.data.intellectRight,
  97. scienceAchievement: data.data.scienceAchievement,
  98. researchInnovation: data.data.researchInnovation,
  99. personnel: data.data.personnel
  100. });
  101. };
  102. }.bind(this),
  103. }).always(function () {
  104. this.setState({
  105. loading: false
  106. });
  107. }.bind(this));
  108. },
  109. getTagsArr(e) {
  110. this.state.tags = e.slice(1);
  111. },
  112. submit() {
  113. let theTags = this.state.tags.join(",");
  114. this.setState({
  115. loading: true
  116. })
  117. $.ajax({
  118. method: "POST",
  119. dataType: "json",
  120. crossDomain: false,
  121. url: globalConfig.context + "/api/user/userAbility",
  122. data: {
  123. 'abilityLabel': theTags,
  124. "intellectRight": this.state.intellectRight,
  125. "scienceAchievement": this.state.scienceAchievement,
  126. "researchInnovation": this.state.researchInnovation,
  127. "personnel": this.state.personnel
  128. }
  129. }).done(function (data) {
  130. if (!data.error.length) {
  131. message.success('保存成功!');
  132. } else {
  133. message.warning(data.error[0].message);
  134. }
  135. }.bind(this)).always(function () {
  136. this.setState({
  137. loading: false
  138. })
  139. }.bind(this));
  140. },
  141. render() {
  142. return (
  143. <Spin spinning={this.state.loading} className='spin-box'>
  144. <div className="set-ablt">
  145. <div className="acc-detail">
  146. <p className="acc-title">能力标签</p>
  147. <p className="tips-title">最多可设置10个标签。请用简洁明确的关键词来展示你的职业能力。</p>
  148. <EditableTagGroup abltArr={this.state.abltArr} tagsArr={this.getTagsArr} />
  149. </div>
  150. {userData.type == "1" ? <div className="acc-detail clearfix">
  151. <p className="acc-title">能力标签</p>
  152. <div className="acc-area">
  153. <p>知识产权对企业竞争力的作用 (限400字) </p>
  154. <Input type="textarea" rows={6}
  155. value={this.state.intellectRight}
  156. onChange={(e) => {
  157. if (e.target.value.length > 400) {
  158. message.warning("长度超过400字!");
  159. return;
  160. };
  161. this.setState({ intellectRight: e.target.value });
  162. }} />
  163. </div>
  164. <div className="acc-area">
  165. <p>科技成果转化情况 (限400字) </p>
  166. <Input type="textarea" rows={6}
  167. value={this.state.scienceAchievement}
  168. onChange={(e) => {
  169. if (e.target.value.length > 400) {
  170. message.warning("长度超过400字!");
  171. return;
  172. };
  173. this.setState({ scienceAchievement: e.target.value })
  174. }} />
  175. </div>
  176. <div className="acc-area">
  177. <p>研究开发与技术创新组织管理情况 (限400字) </p>
  178. <Input type="textarea" rows={6}
  179. value={this.state.researchInnovation}
  180. onChange={(e) => {
  181. if (e.target.value.length > 400) {
  182. message.warning("长度超过400字!");
  183. return;
  184. };
  185. this.setState({ researchInnovation: e.target.value })
  186. }} />
  187. </div>
  188. <div className="acc-area">
  189. <p>管理与科技人员情况 (限400字) </p>
  190. <Input type="textarea" rows={6}
  191. value={this.state.personnel}
  192. onChange={(e) => {
  193. if (e.target.value.length > 400) {
  194. message.warning("长度超过400字!");
  195. return;
  196. };
  197. this.setState({ personnel: e.target.value })
  198. }} />
  199. </div>
  200. </div> : <div></div>}
  201. <Button className="set-submit" type="primary" onClick={this.submit}>保存</Button>
  202. </div>
  203. </Spin>
  204. )
  205. }
  206. });
  207. export default Base;