| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 | 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;
 |