import React from 'react'; import {Form,Table,Button,Spin,message,Input,Popconfirm,Col} from 'antd'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; const ContactPerson = React.createClass({ getInitialState() { return { contactList:[], loading:false, ContactsLists: [{ title: '姓名', dataIndex: 'name', key: 'name', render: (text, record, index) => { return <Input value={record.name} placeholder="姓名(必填项)" key={record.id} required="required" onChange={(e) => { record.name = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/> } }, { title: '联系人部门', dataIndex: 'depatrment', key: 'depatrment', render: (text, record, index) => { return <Input value={record.depatrment} placeholder="联系人部门" key={record.id} onChange={(e) => { record.depatrment = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/> } }, { title: '联系人职务', dataIndex: 'position', key: 'position', render: (text, record, index) => { return <Input value={record.position} placeholder="联系人职务" key={record.id} onChange={(e) => { record.position = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/> } }, { title: '主要联系人', dataIndex: 'major', width:100, key: 'major', render:(text) => { return text?'是':"否" } },{ title: '手机号码', dataIndex: 'mobile', key: 'mobile', render: (text, record, index) => { return <Input value={record.mobile} placeholder="手机号码(必填项)" key={record.id} required="required" onChange={(e) => { record.mobile = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/> } }, { title: '微信', dataIndex: 'wechat', key: 'wechat', render: (text, record, index) => { return <Input value={record.wechat} placeholder="微信" key={record.id} onChange={(e) => { record.wechat = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/> } }, { title: '联系人QQ', dataIndex: 'qq', key: 'qq', render: (text, record, index) => { return <Input value={record.qq} placeholder="联系人QQ" key={record.id} onChange={(e) => { record.qq = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/> } }, { title: '电子邮箱', dataIndex: 'email', key: 'email', render: (text, record, index) => { return <Input value={record.email} placeholder="电子邮箱" key={record.id} onChange={(e) => { record.email = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/> } }, { title: '操作', dataIndex: 'dels', key: 'dels', render: (text, record, index) => { return <div>{adminData.isSuperAdmin ? <Popconfirm title="是否删除?" onConfirm={(e)=>{this.confirmDelet(record)}} okText="删除" cancelText="不删除"> <Button style={{marginRight:'10px',color:'#ffffff',background:'#f00',border:'none'}}>删除</Button> </Popconfirm> :''} {record.name?<Button style={{marginRight:'10px',color:'#ffffff',background:'green',border:'none'}} onClick={(e)=>{e.stopPropagation(),this.mainContact(record)}}>设为主要联系人</Button>:''} </div> } } ], } }, //tab2删除 confirmDelet(e) { this.setState({ loading: true }); if(e.id) { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/customer/deleteOneContact", data: { ocbId: e.id, //删除的ID } }).done(function(data) { if(!data.error.length) { message.success('删除成功!'); this.setState({ loading: false, }); } else { message.warning(data.error[0].message); }; this.contactLists(); }.bind(this)); } else { this.contactLists(); } }, //选择主要联系人 mainContact(record){ this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/customer/updateMainContact", data: { uid:this.props.data.id, ocbId: record.id } }).done(function(data) { if(!data.error.length) { message.success('设为主要联系人成功!'); this.setState({ loading: false, }); } else { message.warning(data.error[0].message); }; this.contactLists(); }.bind(this)); }, //tab2获取联系人详情 contactLists(ids) { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/customer/findCustomerContacts', data: { uid: ids||this.props.data.id, //名称1 }, success: function(data) { let theArr = []; if(data.error.length || data.data.list == "") { if(data.error && data.error.length) { message.warning(data.error[0].message); }; } else { for(let i = 0; i < data.data.length; i++) { let thisdata = data.data[i]; theArr.push({ id: thisdata.id, name: thisdata.name, mobile: thisdata.mobile, email: thisdata.email, qq: thisdata.qq, wechat: thisdata.wechat, depatrment: thisdata.depatrment, position: thisdata.position, major:thisdata.major }); }; }; this.setState({ contactList: theArr, }); }.bind(this), }).always(function() { this.setState({ loading: false }); }.bind(this)); }, //新增 //tab2新增联系人 addcontact() { this.state.contactList.push({ id: null, name: '', mobile: '', email: '', qq: '', wechat: '', depatrment: '', position: '', }); this.setState({ contactList: this.state.contactList }) }, //tab2联系人保存 contactSave(e) { e.preventDefault(); this.setState({ loading: true }); $.ajax({ url: globalConfig.context + '/api/admin/customer/updateCustomerContacts', method: 'post', data: { uid: this.props.data.id, contactList: JSON.stringify(this.state.contactList) } }).done(function(data) { this.setState({ loading: false }); if(!data.error.length) { message.success('保存成功!'); this.props.closeDetail(false,true) } else { message.warning(data.error[0].message); } }.bind(this)); }, componentWillMount(){ this.contactLists(this.props.data.id); }, detailsModal(){ this.props.closeDetail(false, false) }, componentWillReceiveProps(nextProps) { if(nextProps.data.id&&nextProps.contactState){ this.contactLists(nextProps.data.id) } }, render() { return( <div> <div className="clearfix" > <Button className="ContactsList" type="primary" onClick={this.addcontact}>新增</Button> </div> <div className="clearfix"> <Spin spinning={this.state.loading}> <Form layout="horizontal" id="demand-form" onSubmit={this.contactSave} > <Table pagination={false} columns={this.state.ContactsLists} dataSource={this.state.contactList} /> <Col span={24} offset={9} style={{marginTop:'15px'}}> <Button type="primary" htmlType="submit">保存</Button> <Button type="ghost" onClick={this.detailsModal} style={{marginLeft:'100px'}}>取消</Button> </Col> </Form> </Spin> </div> </div> ) } }) export default ContactPerson;