/* @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: [ { id: '12', edit: false, name: '李霆1', department: '平台事业发展', position: '前端', photo: '18320746285', mobile: '5551456', qq: '265478954', email: '125468@qq.com', remarks: '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字' }, { id: '123', edit: false, name: '李霆2', department: '平台事业发展', position: '前端', photo: '18320746285', mobile: '5551456', qq: '265478954', email: '125468@qq.com', remarks: '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字' } ], oldData: [ { id: '12', edit: false, name: '李霆1', department: '平台事业发展', position: '前端', photo: '18320746285', mobile: '5551456', qq: '265478954', email: '125468@qq.com', remarks: '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字' }, { id: '123', edit: false, name: '李霆2', department: '平台事业发展', post: '前端', position: '18320746285', mobile: '5551456', qq: '265478954', email: '125468@qq.com', remarks: '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字' } ] }; } 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 || data.data == '') { 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, remarks: item.remarks }) }) 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?'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 (