| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655 | import React from 'react';import {Modal, message, Spin, Input, Select, Button, Form, Col, Cascader, Tag, Tooltip,AutoComplete} from 'antd';import ajax from 'jquery/src/ajax/xhr.js';import $ from 'jquery/src/ajax';import { citySelect, provinceList ,areaSelect} from '@/NewDicProvinceList';import {socialAttribute,customerSource} from '@/dataDic.js';import TextArea from "antd/es/input/TextArea";const Option = Select.Option;const AchievementDetailForm = Form.create()(React.createClass({    getInitialState() {        return {            loading: false,            data: {},            detailApi:'',            businessScope:[],            inputVisible:false,            cooperationProjects:[],            selectCooperationProjects:[]        };    },    handleSubmit(e) {        // if (/.*[\u4e00-\u9fa5]+.*$/.test(this.state.content)) {        // } else {        //   message.error("请填写正确的姓名,且至少包含一个汉字");        //   return;        // }    	e.preventDefault();        this.props.form.validateFields((err, values) => {        	if(values.name.length>64){    		message.warning('公司名称字数不超过64个')    		return false;            };        	let regu = /[`~!#$%^&*'_[\]+=<>?:"{}|~!#¥%……&*=-@-!{}|/《》?:“”【】、;;‘’,,.。、\s+]/g;        	if(regu.test(values.name)){                message.warning('公司名称不能存在特殊符号!')                return false;            }            if (/.*[\u4e00-\u9fa5]+.*$/.test(values.content)) {            } else {              message.error("请填写正确的联系人,且至少包含一个汉字");              return false;            };            if (/.*[\u4e00-\u9fa5]+.*$/.test(values.position)) {            } else {                message.error("请填写正确的职位,且至少包含一个汉字");                return false;            };	    	if(!values.ProvinceCity[1]) {			message.warning('请选择地区');			return false;			};	    	if(values.content.length>32){	    		message.warning('联系人字数不超过32个')	    		return false;	    	};	    	if(values.length>13){	    		message.warning('电话号码字数不超过13个')	    		return false;	    	};            if(this.state.businessScope.length === 0){                message.warning('请选择主营产品')                return false;            }	    	if(this.state.selectCooperationProjects.length === 0){                message.warning('请选择意向合作项目')                return false;            }	    	let arr = [];	    	for(let i of this.state.selectCooperationProjects){                arr.push(i.label)            }            if (!err) {                this.setState({                    loading: true                });                $.ajax({                    method: "POST",                    dataType: "json",                    crossDomain: false,                    url: globalConfig.context + '/api/admin/customer/addCustomer',                    data: {                        name: values.name,                        contacts:values.content,                        contactMobile:values.telnum,                        // societyTag:values.societyTagt,                        //source:values.customerSource,                        province:(values.ProvinceCity)[0],//省						city:(values.ProvinceCity)[1],//市						area:(values.ProvinceCity)[2],//区                        type:'1',                        intendedProject:arr.join(','),                        businessScope:this.state.businessScope.join(','),                        position:values.position,                    }                }).done(function (data) {                    this.setState({                        loading: false                    });                    if (!data.error.length) {                        message.success('保存成功!');                        this.props.handleOk();                    } else {                        message.warning(data.error[0].message);                    }                }.bind(this));            }        });    },    componentWillMount() {        this.state.name='';    	this.state.content='';    	this.state.position='';    	this.state.telnum='';    	// this.state.societyTagt='0';    	this.state.customerSource='0';        this.state.inputValue='';        this.state.businessScope = [];        this.state.inputVisible = false;        this.state.cooperationProjects = [];        this.state.selectCooperationProjects = [];    },    componentWillReceiveProps(nextProps) {        if (!this.props.visible && nextProps.visible) {            this.state.name='';	    	this.state.content='';	    	this.state.position = '';	    	this.state.telnum='';	    	this.state.inputValue='';            this.state.businessScope = [];            this.state.inputVisible = false;            this.state.cooperationProjects = [];            this.state.selectCooperationProjects = [];	    	// this.state.societyTagt='0';            this.props.form.resetFields();        };    },    handleClose(removedTag){        let businessScope = this.state.businessScope.filter(tag => {return tag !== removedTag});        this.setState({ businessScope });    },    handleCloseCooperation(removedTag){        let selectCooperationProjects = this.state.selectCooperationProjects.filter(tag => {return tag.value !== removedTag.value});        this.setState({ selectCooperationProjects });    },    showInput(){        let str = this.state.businessScope.join('/')        this.setState({            inputVisible: true,            inputValue: str        });    },    handleInputConfirm(){        let inputValue = this.state.inputValue;        let arr = inputValue.split('/');        let lv = true;        for(let i of arr){            if(i.length > 16){                message.warning('单个标签字数不能超过16个字符')                lv = false;                return;            }        }        if(lv){            arr = Array.from(new Set(arr));            arr = arr.filter(v=>v);            this.setState({                businessScope:arr,                inputVisible: false,                inputValue: '',            });        }    },    //加载(自动补全)    supervisor(value) {        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + '/api/admin/order/getBusinessProjectByName',            data: {                businessName: value            },            success: function (data) {                let thedata = data.data;                if (data.error.length === 0) {                    this.setState({                        cooperationProjects: thedata,                    });                }else{                    message.warning(data.error[0].message);                }            }.bind(this),        }).always(            function () {            }.bind(this)        );    },    onSelect(value){      let arr = this.state.cooperationProjects.filter(v=>v.id === value);      let arr1 = this.state.selectCooperationProjects.filter(v=>v.value === value);      if(arr.length > 0){          if(arr1.length > 0){              message.warning('选项已存在');          }else{              this.state.selectCooperationProjects.push({                  label: arr[0].bname,                  value: arr[0].id,              })              this.setState({                  selectCooperationProjects:this.state.selectCooperationProjects              })          }      }    },    render() {        const theData = this.state.data || {};        const { getFieldDecorator } = this.props.form;        const FormItem = Form.Item        const formItemLayout = {            labelCol: { span: 6 },            wrapperCol: { span: 14 },        };        return (        <div>            <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form">                <Spin spinning={this.state.loading}>                	<div>               	    	<Col style={{color:'red',marginBottom:'10px'}} span={12} offset={6}>注意:请录入真实有效的客户信息</Col>	                    <div className="clearfix">	                    	<FormItem className="mid-item"		                            {...formItemLayout}		                            label="公司名称" >	                    	     {getFieldDecorator('name', {	                                rules: [{ required: true, message: '此项为必填项!' }],	                                initialValue: this.state.name	                            })(	                                <Input placeholder="公司名称" />	                                )}		                    </FormItem>	                    </div>	                    <div className="clearfix">	                    	<FormItem	                            {...formItemLayout}	                           label="省-市-区"	                          >	                          {getFieldDecorator('ProvinceCity', {		                                rules: [{ required: true, message: '此项为必填项!' }],		                                initialValue: this.state.ProvinceCity	                                })(								   <Cascader options={areaSelect()}   placeholder="选择城市"  />	                            )}		                    </FormItem>	                    </div>	                    <div className="clearfix">	                    	<FormItem className="mid-item"		                            {...formItemLayout}		                            label="联系人" >		                            {getFieldDecorator('content', {		                                rules: [{ required: true, message: '此项为必填项!' }],		                                initialValue: this.state.content	                                })(	                                    <Input placeholder="联系人姓名" />	                                )}		                    </FormItem>	                    </div>                        <div className="clearfix">                            <FormItem className="mid-item"                                      {...formItemLayout}                                      label="职位" >                                {getFieldDecorator('position', {                                    rules: [{ required: true, message: '此项为必填项!' }],                                    initialValue: this.state.position                                })(                                    <Input placeholder="联系人职位" />                                )}                            </FormItem>                        </div>	                    <div className="clearfix">	                    	<FormItem className="mid-item"		                            {...formItemLayout}		                            label="联系电话" >		                            {getFieldDecorator('telnum', {		                                rules: [{ required: true, message: '此项为必填项!' }],		                                initialValue: this.state.telnum	                                })(	                               		<Input placeholder="请填写手机号,仅填座机号时,请后续补充手机号" />	                                )}		                    </FormItem>	                    </div>                        <div className="clearfix">                            <FormItem className="mid-item"                                      {...formItemLayout}                                      required                                      label="主营产品" >                                <div>                                    {this.state.businessScope.map((tag, index) => {                                        const isLongTag = tag.length > 20;                                        const tagElem = (                                            <Tag closable key={tag} afterClose={() => this.handleClose(tag)}>                                                {isLongTag ? `${tag.slice(0, 20)}...` : tag}                                            </Tag>                                        );                                        return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;                                    })}                                    {                                        !this.state.inputVisible &&                                        <Button                                            size="small"                                            type="primary"                                            onClick={this.showInput}>                                            + 新增主营产品                                        </Button>                                    }                                </div>                                {this.state.inputVisible && (<div>                                    <TextArea                                        style={{width:'300px',height:'100px'}}                                        value={this.state.inputValue}                                        onChange={(e)=>{                                            this.setState({                                                inputValue: e.target.value                                            })                                        }}/>                                    <div style={{color:'#f00'}}>提示:请用 / 符号隔开关键字</div>                                    <div>                                        <Button                                            size="small"                                            type="primary"                                            onClick={this.handleInputConfirm}>                                            确定                                        </Button>                                        <Button                                            size="small"                                            style={{marginLeft:'5px'}}                                            onClick={()=>{                                                this.setState({                                                    inputVisible: false,                                                    inputValue: ''                                                })                                            }}>                                            取消                                        </Button>                                    </div>                                </div>)}                            </FormItem>                        </div>                        <div className="clearfix">                            <FormItem                                className="mid-item"                                {...formItemLayout}                                required                                label="意向合作项目" >                                    <div>                                        <div style={{paddingBottom: this.state.selectCooperationProjects.length === 0 ? 0 : '10px'}}>                                            {this.state.selectCooperationProjects.map((tag, index) => {                                                const isLongTag = tag.label.length > 20;                                                const tagElem = (                                                    <Tag closable key={tag.label} afterClose={() => this.handleCloseCooperation(tag)}>                                                        {isLongTag ? `${tag.label.slice(0, 20)}...` : tag.label}                                                    </Tag>                                                );                                                return isLongTag ? <Tooltip title={tag.label} key={tag.label}>{tagElem}</Tooltip> : tagElem;                                            })}                                        </div>                                        <div>                                            <AutoComplete                                                style={{ width: 200 }}                                                onSearch={this.supervisor}                                                onSelect={this.onSelect}                                                placeholder="请输入关键字"                                            >                                                {                                                    this.state.cooperationProjects.map(function (item) {                                                        return  <Select.Option key={item.id} value={item.id}>{item.bname}</Select.Option>                                                    })                                                }                                            </AutoComplete>                                        </div>                                    </div>                            </FormItem>                        </div>	                    {/*<div className="clearfix">*/}	                    {/*	<FormItem className="mid-item"*/}	                    {/*      {...formItemLayout}*/}	                    {/*       label="社会属性"*/}	                    {/*     >*/}	                    {/*     {getFieldDecorator('societyTagt', {*/}		                {/*                rules: [{ required: true, message: '此项为必填项!' }],*/}		                {/*                initialValue: this.state.societyTagt*/}	                    {/*            })(*/}						{/*		  <Select placeholder="客户社会属性">*/}	                    {/*            {*/}	                    {/*                socialAttribute.map(function (item) {*/}	                    {/*                    return <Select.Option key={item.value} >{item.key}</Select.Option>*/}	                    {/*                })*/}	                    {/*            }*/}	                    {/*          </Select>*/}	                    {/*        )}*/}	                   	{/*	 </FormItem>*/}	                    {/*</div>*/}	                </div>                    <FormItem wrapperCol={{ span: 12, offset: 6 }}>                        <Button type="primary" htmlType="submit" style={{marginRight:'50px'}}>保存</Button>                        <Button type="ghost" onClick={this.props.closeDesc}>取消</Button>                    </FormItem>                </Spin>            </Form >    	</div>        )    }}));const AddPerson = Form.create()(React.createClass({    getInitialState() {        return {            loading: false,            data: {},            detailApi:''        };    },    handleSubmit(e) {        e.preventDefault();        this.props.form.validateFields((err, values) => {        	if(values.companyNamet.length>64){    		message.warning('联系人字数不超过64个')    		return false;            };	    	if(!values.ProvinceCity[1]) {			message.warning('请选择地区');			return false;			};	    	if(values.telnums.length>13){	    		message.warning('电话号码字数不超过13个')	    		return false;	    	};            if (!err) {                this.setState({                    loading: true                });                $.ajax({                    method: "POST",                    dataType: "json",                    crossDomain: false,                    url: globalConfig.context + '/api/admin/customer/addCustomer',                    data: {                        contacts:values.companyNamet,                        societyTag:values.societyTagt,                        name: values.companyNamet,                        contactMobile: values.telnums,                        source:values.customerSource,                        province:(values.ProvinceCity)[0],//省						city:(values.ProvinceCity)[1],//市						area:(values.ProvinceCity)[2],//区                        type:'0'                    }                }).done(function (data) {                    this.setState({                        loading: false                    });                    if (!data.error.length) {                        message.success('保存成功!');                        this.props.handleOk();                    } else {                        message.warning(data.error[0].message);                    }                }.bind(this));            }        });    },    componentWillMount() {        this.state.companyNamet='';    	this.state.telnum='';    	this.state.societyTagt='0';    	this.state.customerSource='0';    },    componentWillReceiveProps(nextProps) {        if (!this.props.visible && nextProps.visible) {            this.state.companyNamet='';	    	this.state.telnum='';	    	this.state.societyTagt='0';	    	this.state.customerSource='0';            this.props.form.resetFields();        };    },    render() {        const theData = this.state.data || {};        const { getFieldDecorator } = this.props.form;        const FormItem = Form.Item        const formItemLayout = {            labelCol: { span: 6 },            wrapperCol: { span: 14 },        };        return (        <div>            <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form">                <Spin spinning={this.state.loading}>               	    <Col style={{color:'red',marginBottom:'10px'}} span={12} offset={6}>注意:请录入真实有效的客户信息</Col>	                <div className="clearfix">                    	<FormItem className="mid-item"	                            {...formItemLayout}	                            label="客户姓名" >	                           {getFieldDecorator('companyNamet', {	                                rules: [{ required: true, message: '此项为必填项!' }],	                                initialValue: this.state.companyNamet                                })(                                    <Input placeholder="客户姓名" />                                )}	                    </FormItem>	                </div>	                <div className="clearfix">	                    	<FormItem	                            {...formItemLayout}	                           label="省-市-区"	                          >	                          {getFieldDecorator('ProvinceCity', {		                                rules: [{ required: true, message: '此项为必填项!' }],		                                initialValue: this.state.ProvinceCity	                                })(								   <Cascader options={areaSelect()}   placeholder="选择城市"  />	                            )}		                    </FormItem>	                    </div>	                <div className="clearfix">                    	<FormItem className="mid-item"	                            {...formItemLayout}	                            label="联系电话" >	                    		{getFieldDecorator('telnums', {	                                rules: [{ required: true, message: '此项为必填项!' }],	                                initialValue: this.state.telnums                                })(                                    <Input placeholder="联系电话" />                                )}	                    </FormItem>                    </div>                    <div className="clearfix">                    	<FormItem className="mid-item"                          {...formItemLayout}                           label="社会属性"                         >                         {getFieldDecorator('societyTagt', {	                                rules: [{ required: true, message: '此项为必填项!' }],	                                initialValue: this.state.societyTagt                                })(							  <Select placeholder="客户社会属性">                                {                                    socialAttribute.map(function (item) {                                        return <Select.Option key={item.value} >{item.key}</Select.Option>                                    })                                }                              </Select>                            )}                   		 </FormItem>                    </div>                    <div className="clearfix">                    	<FormItem className="mid-item"                          {...formItemLayout}                           label="客户来源"                         >                         {getFieldDecorator('customerSource', {	                                rules: [{ required: true, message: '此项为必填项!' }],	                                initialValue: this.state.customerSource                                })(							  <Select placeholder="客户来源">                                {                                    customerSource.map(function (item) {                                        return <Select.Option key={item.value} >{item.key}</Select.Option>                                    })                                }                              </Select>                            )}                   		 </FormItem>	                </div>                    <FormItem wrapperCol={{ span: 12, offset: 6 }}>                        <Button style={{marginRight:'50px'}} type="primary" htmlType="submit">保存</Button>                        <Button  type="ghost" onClick={this.props.closeDesc}>取消</Button>                    </FormItem>                </Spin>            </Form >    	</div>        )    }}));const AddIntention = React.createClass({    getInitialState() {        return {            visible: false,            tabsKey: 1,            loading: false,            dataSource: [],        };    },    handleCancel(e) {        this.setState({            visible: false,        });        this.props.closeDesc(false);    },    handleOk(e) {        this.setState({            visible: false,        });        this.props.closeDesc(false, true);    },    componentWillReceiveProps(nextProps) {        if (!this.state.visible && nextProps.showDesc) {            this.state.tabsKey = "1";        };        this.state.visible = nextProps.showDesc;    },    render() {            return (                <div className="patent-desc">                    <Modal maskClosable={false} visible={this.state.visible}                        onOk={this.checkPatentProcess} onCancel={this.handleCancel}                        width='600px'                        title='新建客户'                        footer=''                        className="admin-desc-content">                        <Spin spinning={this.state.loading}>                            {this.props.api.indexOf('Personal')<0?<AchievementDetailForm                                data={this.props.data}                                newmodal={this.props.newmodal}                                closeDesc={this.handleCancel}                                visible={this.state.visible}                                handleOk={this.handleOk} />:<AddPerson                                	data={this.props.data}	                                newmodal={this.props.newmodal}	                                closeDesc={this.handleCancel}	                                visible={this.state.visible}	                                handleOk={this.handleOk}                                />}                        </Spin>                    </Modal>                </div>            );    },});export default AddIntention;
 |