ablt.jsx 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  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 && data.data.abilityLabel) {
  94. this.setState({
  95. abltArr: data.data.abilityLabel.split(","),
  96. });
  97. };
  98. }.bind(this),
  99. }).always(function () {
  100. this.setState({
  101. loading: false
  102. });
  103. }.bind(this));
  104. },
  105. getTagsArr(e) {
  106. this.state.tags = e.slice(1);
  107. },
  108. submit() {
  109. let theTags = this.state.tags.join(",");
  110. this.setState({
  111. loading: true
  112. })
  113. $.ajax({
  114. method: "POST",
  115. dataType: "json",
  116. crossDomain: false,
  117. url: globalConfig.context + "/api/user/userAbility",
  118. data: {
  119. 'abilityLabel': theTags
  120. }
  121. }).done(function (data) {
  122. if (!data.error.length) {
  123. message.success('保存成功!');
  124. } else {
  125. message.warning(data.error[0].message);
  126. }
  127. }.bind(this)).always(function () {
  128. this.setState({
  129. loading: false
  130. })
  131. }.bind(this));
  132. },
  133. render() {
  134. return (
  135. <Spin spinning={this.state.loading} className='spin-box'>
  136. <div className="set-ablt">
  137. <div className="acc-detail">
  138. <p className="acc-title">能力标签</p>
  139. <p className="tips-title">最多可设置10个标签。请用简洁明确的关键词来展示你的职业能力。</p>
  140. <EditableTagGroup abltArr={this.state.abltArr} tagsArr={this.getTagsArr} />
  141. <Button className="set-submit" type="primary" onClick={this.submit}>保存</Button>
  142. </div>
  143. </div>
  144. </Spin>
  145. )
  146. }
  147. });
  148. export default Base;