kede-HN-officialWeb-client/js/component/account/setAccount/contacts.jsx

/* 
	@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;