ablt.jsx 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  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. }
  14. }
  15. handleClose(removedTag) {
  16. const tags = this.state.tags.filter(tag => tag !== removedTag);
  17. this.props.tagsArr(tags);
  18. this.setState({ tags });
  19. }
  20. showInput() {
  21. this.setState({ inputVisible: true }, () => this.input.focus());
  22. }
  23. handleInputChange(e) {
  24. this.setState({ inputValue: e.target.value });
  25. }
  26. handleInputConfirm() {
  27. const state = this.state;
  28. const inputValue = state.inputValue;
  29. let tags = state.tags;
  30. if (inputValue && tags.indexOf(inputValue) === -1) {
  31. tags = [...tags, inputValue];
  32. }
  33. this.props.tagsArr(tags);
  34. this.setState({
  35. tags,
  36. inputVisible: false,
  37. inputValue: '',
  38. });
  39. }
  40. componentWillReceiveProps(nextProps) {
  41. if (nextProps.abltArr) {
  42. debugger
  43. this.state.value = nextProps.abltArr;
  44. };
  45. }
  46. render() {
  47. const { tags, inputVisible, inputValue } = this.state;
  48. return (
  49. <div className="ablt-tips">
  50. {tags.map((tag, index) => {
  51. const isLongTag = tag.length > 20;
  52. const tagElem = (
  53. <Tag key={tag} closable={index !== 0} afterClose={() => this.handleClose(tag)}>
  54. {isLongTag ? `${tag.slice(0, 20)}...` : tag}
  55. </Tag>
  56. );
  57. return isLongTag ? <Tooltip title={tag}>{tagElem}</Tooltip> : tagElem;
  58. })}
  59. {inputVisible && (
  60. <Input
  61. ref={input => this.input = input}
  62. type="text"
  63. style={{ width: 78 }}
  64. value={inputValue}
  65. onChange={this.handleInputChange.bind(this)}
  66. onBlur={this.handleInputConfirm.bind(this)}
  67. onPressEnter={this.handleInputConfirm.bind(this)}
  68. />
  69. )}
  70. {!inputVisible && <Button className="addtips" type="dashed" onClick={this.showInput.bind(this)}>+ 新标签</Button>}
  71. </div>
  72. );
  73. }
  74. };
  75. const Base = React.createClass({
  76. getInitialState() {
  77. return {
  78. loading: false,
  79. tags: []
  80. };
  81. },
  82. componentWillMount() {
  83. this.setState({
  84. loading: true
  85. });
  86. $.ajax({
  87. method: "get",
  88. dataType: "json",
  89. url: globalConfig.context + "/api/user/ability",
  90. success: function (data) {
  91. if (data.data.abilityLabel) {
  92. this.setState({
  93. abltArr: data.data.abilityLabel.split(","),
  94. });
  95. };
  96. }.bind(this),
  97. }).always(function () {
  98. this.setState({
  99. loading: false
  100. });
  101. }.bind(this));
  102. },
  103. getTagsArr(e) {
  104. this.state.tags = e.slice(1);
  105. },
  106. submit() {
  107. debugger
  108. let theTags = this.state.tags.join(",");
  109. this.setState({
  110. loading: true
  111. })
  112. $.ajax({
  113. method: "POST",
  114. dataType: "json",
  115. crossDomain: false,
  116. url: globalConfig.context + "/api/user/userAbility",
  117. data: {
  118. 'abilityLabel': theTags
  119. }
  120. }).done(function (data) {
  121. if (!data.error.length) {
  122. message.success('保存成功!');
  123. } else {
  124. message.warning(data.error[0].message);
  125. }
  126. }.bind(this)).always(function () {
  127. this.setState({
  128. loading: false
  129. })
  130. }.bind(this));
  131. },
  132. render() {
  133. return (
  134. <Spin spinning={this.state.loading} className='spin-box'>
  135. <div className="set-ablt">
  136. <div className="acc-detail">
  137. <p className="acc-title">能力标签</p>
  138. <p className="tips-title">最多可设置10个标签。请用简洁明确的关键词来展示你的职业能力。</p>
  139. <EditableTagGroup abltArr={this.state.abltArr} tagsArr={this.getTagsArr} />
  140. <Button className="set-submit" type="primary" onClick={this.submit}>保存</Button>
  141. </div>
  142. </div>
  143. </Spin>
  144. )
  145. }
  146. });
  147. export default Base;