| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 | 
							- import React from 'react';
 
- import './ablt.less';
 
- import ajax from 'jquery/src/ajax/xhr.js'
 
- import $ from 'jquery/src/ajax';
 
- import { Tag, Input, Tooltip, Button, Spin, message } from 'antd';
 
- class EditableTagGroup extends React.Component {
 
-     constructor(props) {
 
-         super(props);
 
-         this.state = {
 
-             tags: ['我的标签:', '标签1', '标签2'],
 
-             inputVisible: false,
 
-             inputValue: '',
 
-             propsBool: true
 
-         }
 
-     }
 
-     handleClose(removedTag) {
 
-         const tags = this.state.tags.filter(tag => tag !== removedTag);
 
-         this.props.tagsArr(tags);
 
-         this.setState({ tags });
 
-     }
 
-     showInput() {
 
-         this.setState({ inputVisible: true }, () => this.input.focus());
 
-     }
 
-     handleInputChange(e) {
 
-         this.setState({ inputValue: e.target.value });
 
-     }
 
-     handleInputConfirm() {
 
-         const state = this.state;
 
-         const inputValue = state.inputValue;
 
-         let tags = state.tags;
 
-         if (inputValue && tags.indexOf(inputValue) === -1) {
 
-             tags = [...tags, inputValue];
 
-         }
 
-         this.props.tagsArr(tags);
 
-         this.setState({
 
-             tags,
 
-             inputVisible: false,
 
-             inputValue: '',
 
-         });
 
-     }
 
-     componentWillReceiveProps(nextProps) {
 
-         if (nextProps.abltArr && this.state.propsBool) {
 
-             nextProps.abltArr.unshift("我的标签:");
 
-             this.state.tags = nextProps.abltArr;
 
-             this.state.propsBool = false;
 
-         };
 
-     }
 
-     render() {
 
-         const { tags, inputVisible, inputValue } = this.state;
 
-         return (
 
-             <div className="ablt-tips">
 
-                 {tags.map((tag, index) => {
 
-                     const isLongTag = tag.length > 11;
 
-                     const tagElem = (
 
-                         <Tag key={tag} closable={index !== 0} afterClose={() => this.handleClose(tag)}>
 
-                             {isLongTag ? `${tag.slice(0, 11)}...` : tag}
 
-                         </Tag>
 
-                     );
 
-                     return isLongTag ? <Tooltip title={tag}>{tagElem}</Tooltip> : tagElem;
 
-                 })}
 
-                 {inputVisible && (
 
-                     <Input
 
-                         ref={input => this.input = input}
 
-                         type="text"
 
-                         style={{ width: 78 }}
 
-                         value={inputValue}
 
-                         onChange={this.handleInputChange.bind(this)}
 
-                         onBlur={this.handleInputConfirm.bind(this)}
 
-                         onPressEnter={this.handleInputConfirm.bind(this)}
 
-                     />
 
-                 )}
 
-                 {!inputVisible && <Button className="addtips" type="dashed" disabled={tags.length > 10 ? true : false} onClick={this.showInput.bind(this)}>+ 新标签</Button>}
 
-             </div>
 
-         );
 
-     }
 
- };
 
- const Base = React.createClass({
 
-     getInitialState() {
 
-         return {
 
-             loading: false,
 
-             tags: []
 
-         };
 
-     },
 
-     componentWillMount() {
 
-         this.setState({
 
-             loading: true
 
-         });
 
-         $.ajax({
 
-             method: "get",
 
-             dataType: "json",
 
-             url: globalConfig.context + "/api/user/ability",
 
-             success: function (data) {
 
-                 if (data.data) {
 
-                     this.setState({
 
-                         abltArr: data.data.abilityLabel ? data.data.abilityLabel.split(",") : [],
 
-                         intellectRight: data.data.intellectRight,
 
-                         scienceAchievement: data.data.scienceAchievement,
 
-                         researchInnovation: data.data.researchInnovation,
 
-                         personnel: data.data.personnel
 
-                     });
 
-                 };
 
-             }.bind(this),
 
-         }).always(function () {
 
-             this.setState({
 
-                 loading: false
 
-             });
 
-         }.bind(this));
 
-     },
 
-     getTagsArr(e) {
 
-         this.state.tags = e.slice(1);
 
-     },
 
-     submit() {
 
-         let theTags = this.state.tags.join(",");
 
-         this.setState({
 
-             loading: true
 
-         })
 
-         $.ajax({
 
-             method: "POST",
 
-             dataType: "json",
 
-             crossDomain: false,
 
-             url: globalConfig.context + "/api/user/userAbility",
 
-             data: {
 
-                 'abilityLabel': theTags,
 
-                 "intellectRight": this.state.intellectRight,
 
-                 "scienceAchievement": this.state.scienceAchievement,
 
-                 "researchInnovation": this.state.researchInnovation,
 
-                 "personnel": this.state.personnel
 
-             }
 
-         }).done(function (data) {
 
-             if (!data.error.length) {
 
-                 message.success('保存成功!');
 
-             } else {
 
-                 message.warning(data.error[0].message);
 
-             }
 
-         }.bind(this)).always(function () {
 
-             this.setState({
 
-                 loading: false
 
-             })
 
-         }.bind(this));
 
-     },
 
-     render() {
 
-         return (
 
-             <Spin spinning={this.state.loading} className='spin-box'>
 
-                 <div className="set-ablt">
 
-                     <div className="acc-detail">
 
-                         <p className="acc-title">能力标签</p>
 
-                         <p className="tips-title">最多可设置10个标签。请用简洁明确的关键词来展示你的职业能力。</p>
 
-                         <EditableTagGroup abltArr={this.state.abltArr} tagsArr={this.getTagsArr} />
 
-                     </div>
 
-                     {userData.type == "1" ? <div className="acc-detail clearfix">
 
-                         <p className="acc-title">能力标签</p>
 
-                         <div className="acc-area">
 
-                             <p>知识产权对企业竞争力的作用 (限400字) </p>
 
-                             <Input type="textarea" rows={6}
 
-                                 value={this.state.intellectRight}
 
-                                 onChange={(e) => {
 
-                                     if (e.target.value.length > 400) {
 
-                                         message.warning("长度超过400字!");
 
-                                         return;
 
-                                     };
 
-                                     this.setState({ intellectRight: e.target.value });
 
-                                 }} />
 
-                         </div>
 
-                         <div className="acc-area">
 
-                             <p>科技成果转化情况 (限400字) </p>
 
-                             <Input type="textarea" rows={6}
 
-                                 value={this.state.scienceAchievement}
 
-                                 onChange={(e) => {
 
-                                     if (e.target.value.length > 400) {
 
-                                         message.warning("长度超过400字!");
 
-                                         return;
 
-                                     };
 
-                                     this.setState({ scienceAchievement: e.target.value })
 
-                                 }} />
 
-                         </div>
 
-                         <div className="acc-area">
 
-                             <p>研究开发与技术创新组织管理情况 (限400字) </p>
 
-                             <Input type="textarea" rows={6}
 
-                                 value={this.state.researchInnovation}
 
-                                 onChange={(e) => {
 
-                                     if (e.target.value.length > 400) {
 
-                                         message.warning("长度超过400字!");
 
-                                         return;
 
-                                     };
 
-                                     this.setState({ researchInnovation: e.target.value })
 
-                                 }} />
 
-                         </div>
 
-                         <div className="acc-area">
 
-                             <p>管理与科技人员情况 (限400字) </p>
 
-                             <Input type="textarea" rows={6}
 
-                                 value={this.state.personnel}
 
-                                 onChange={(e) => {
 
-                                     if (e.target.value.length > 400) {
 
-                                         message.warning("长度超过400字!");
 
-                                         return;
 
-                                     };
 
-                                     this.setState({ personnel: e.target.value })
 
-                                 }} />
 
-                         </div>
 
-                     </div> : <div></div>}
 
-                     <Button className="set-submit" type="primary" onClick={this.submit}>保存</Button>
 
-                 </div>
 
-             </Spin>
 
-         )
 
-     }
 
- });
 
- export default Base;
 
 
  |