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 && inputValue.replace(/(^\s*)|(\s*$)/g, "").length != 0) { tags = [...tags, inputValue.replace(/(^\s*)|(\s*$)/g, "")]; } 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: [] }; }, loadData() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", url: globalConfig.context + "/api/user/ability", success: function (data) { if (data.data) { this.setState({ id: data.data.id || null, 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)); }, componentWillMount() { this.loadData(); }, 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: { 'id': this.state.id, '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('保存成功!'); this.loadData(); } 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;