import React from 'react'; import { Icon, Modal, message, Spin, Input, Select, Button, Form ,Col,Cascader} 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'; const AchievementDetailForm = Form.create()(React.createClass({ getInitialState() { return { loading: false, data: {}, detailApi:'' }; }, 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; }; if (/.*[\u4e00-\u9fa5]+.*$/.test(values.content)) { } 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 (!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' } }).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.telnum=''; this.state.societyTagt='0'; this.state.customerSource='0' }, componentWillReceiveProps(nextProps) { if (!this.props.visible && nextProps.visible) { this.state.name=''; this.state.content=''; this.state.telnum=''; this.state.societyTagt='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}> <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('telnum', { rules: [{ required: true, message: '此项为必填项!' }], initialValue: this.state.telnum })( <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> <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;