/* @author:李霆 @update:2018/05/29 @descript:复制粘贴,拿起来就是干!! */ import React from 'react'; import './contacts.less'; import { Row, Col, Button, Card, Input, Form, message, Spin } from 'antd'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; const FormItem = Form.Item; class Contancts extends React.Component { constructor(props) { super(props); this.state = { loading: false, contactData: [], oldData: [] }; } loadData() { this.setState({ loading: true }); $.ajax({ method: 'get', dataType: 'json', crossDomain: false, url: globalConfig.context + '/api/user/getUserContacts', data: {}, success: function(data) { let theData=data.data, newData=[]; if (data.error.length) { if (data.error && data.error.length) { message.warning(data.error[0].message); } } else { theData.map(item=>{ newData.push({ id: item.id, name: item.name, edit: false, department:item.department, position: item.position, mobile:item.mobile, qq: item.qq, email: item.email, }) }) this.setState({ contactData: newData, }); } }.bind(this) }).always( function() { this.setState({ loading: false }); }.bind(this) ); } //添加联系人 addContact() { let contactData = this.state.contactData; contactData.push({ id: '', name: '', edit: true, department: '', position: '', mobile: '', qq: '', email: '', //remarks: '' }); this.setState({ contactData }); } //保存函数 saveFun(item, index) { let contactData = this.state.contactData; if(!item.name||!item.mobile){ message.warning('请填写带 * 号项!'); return; } let api = item.id?'/api/user/udpateUserContact':'/api/user/addUserContcat'; this.setState({ loading: true }); $.ajax({ method: 'post', dataType: 'json', url: globalConfig.context + api, data: { id: item.id||'', name: item.name, department: item.department, position: item.position, mobile: item.mobile, qq: item.qq, email: item.email, //remarks: item.remarks } }).done( function(data) { this.setState({ loading: false }); if (!data.error.length) { message.success('操作成功!'); this.loadData(); } else { message.warning(data.error[0].message); } }.bind(this) ); } //删除 delFun(item, index) { let contactData = this.state.contactData; if (!item.id) { contactData.splice(index, 1); this.setState(contactData); message.success('删除成功'); } else { this.setState({ loading: true }); $.ajax({ method: 'get', dataType: 'json', url: globalConfig.context + '/api/user/deleteUserContact', data: { id: item.id } }).done( function(data) { this.setState({ loading: false }); if (!data.error.length) { message.success('删除成功!'); this.loadData(); } else { message.warning(data.error[0].message); } }.bind(this) ); } } //编辑时 editFun(item, index) { this.state.contactData[index].edit = true; this.setState({ contactData: this.state.contactData }); } componentWillMount() { this.loadData(); } render() { const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } }; return ( <div className="contactWrap"> <Spin spinning={this.state.loading}> <Row> <Col span={4} offset={1}> <h4 style={{fontSize:20}}>常用联系人</h4> </Col> <Col span={6} offset={8}> <Button size="large" type="primary" onClick={this.addContact.bind(this)}> 添加常用联系人 </Button> </Col> </Row> {this.state.contactData.map((item, index) => { return ( <Row className="card" key={index}> <Card> <Row> <Col span={6}> <FormItem {...formItemLayout} label="姓名"> {item.edit && ( <Input style={{ width: '90%' }} placeholder="联系人姓名" value={item.name} onChange={(e) => { (item.name = e.target.value), this.setState({ contactData: this.state.contactData }); }} /> )} {item.edit ? ( <span className="color-red"> * </span> ) : ( <span>{item.name}</span> )} </FormItem> </Col> <Col span={6}> <FormItem {...formItemLayout} label="部门"> {item.edit ? ( <Input style={{ width: '90%' }} placeholder="联系人部门" value={item.department} onChange={(e) => { (item.department = e.target.value), this.setState({ contactData: this.state.contactData }); }} /> ) : ( <span>{item.department}</span> )} </FormItem> </Col> <Col span={6}> <FormItem {...formItemLayout} label="职务"> {item.edit ? ( <Input style={{ width: '90%' }} placeholder="联系人职务" value={item.position} onChange={(e) => { (item.position = e.target.value), this.setState({ contactData: this.state.contactData }); }} /> ) : ( <span>{item.position}</span> )} </FormItem> </Col> <Col span={6}> <FormItem {...formItemLayout} label="联系电话"> {item.edit && ( <Input style={{ width: '90%' }} placeholder="联系人电话号码" value={item.mobile} onChange={(e) => { (item.mobile = e.target.value), this.setState({ contactData: this.state.contactData }); }} /> )} {item.edit ? ( <span className="color-red"> * </span> ) : ( <span>{item.mobile}</span> )} </FormItem> </Col> </Row> <Row> <Col span={6}> <FormItem {...formItemLayout} label="QQ"> {item.edit ? ( <Input style={{ width: '90%' }} placeholder="联系人QQ" value={item.qq} onChange={(e) => { (item.qq = e.target.value), this.setState({ contactData: this.state.contactData }); }} /> ) : ( <span>{item.qq}</span> )} </FormItem> </Col> <Col span={6}> <FormItem {...formItemLayout} label="邮箱"> {item.edit ? ( <Input style={{ width: '90%' }} placeholder="联系人电子邮箱" value={item.email} onChange={(e) => { (item.email = e.target.value), this.setState({ contactData: this.state.contactData }); }} /> ) : ( <span>{item.email}</span> )} </FormItem> </Col> <Col span={11} style={{textAlign:'right'}}> {!item.edit ? ( <Button type="primary" icon="edit" size="large" style={{ marginRight: 20 }} onClick={() => { this.editFun(item, index); }} /> ) : ( <Button type="primary" size="large" style={{ marginRight: 20 }} onClick={() => { this.saveFun(item, index); }} > 保存 </Button> )} <Button type="danger" size="large" onClick={() => { this.delFun(item, index); }} > 删除 </Button> </Col> </Row> {/*<Row> <Col span={18}> <FormItem labelCol={{ span: 2 }} wrapperCol={{ span: 20 }} label="备注"> {item.edit ? ( <Input type="textarea" placeholder="输入备注" rows={4} value={item.remarks} onChange={(e, pre) => { (item.remarks = e.target.value), this.setState({ contactData: this.state.contactData }); }} /> ) : ( <span>{item.remarks}</span> )} </FormItem> </Col> </Row>*/} </Card> </Row> ); })} </Spin> </div> ); } } export default Contancts;