kede-client/js/component/manageCenter/customer/NEW/signCustomer/intentionDetail/detail/visitDetail.jsx

import React from 'react'
import $ from 'jquery/src/ajax';
import {Modal, Form, Button, Spin, Table, message, Tag, Tooltip} from 'antd';
import {getfllowSituation,getcustomerStatue,getClockState,splitUrl,getContactType} from '@/tools.js';
import ImgList from "../../../../../../common/imgList";
const FormItem =Form.Item;

const VisitDetail = React.createClass({
	getInitialState(){
		return{
			visitModul:false,
			loading:false,
			data:[],
			publicReleaseLog:[],
			followDtails:{},
			enclosure:[],
			intentionPublicReleaseLog:[
				{
					title: '状态',
					dataIndex: 'status',
					key: 'status',
					render: (text) => (
						<Tag color={getClockState(text,true).color}>{getClockState(text,true).title}</Tag>
					)
				},
				{
					title: '操作人',
					dataIndex: 'aname',
					key: 'aname',
				},
				{
					title: '操作时间',
					dataIndex: 'createTimes',
					key: 'createTimes',
				},
				{
					title: '备注',
					width:120,
					dataIndex: 'remarks',
					key: 'remarks',
					render: (text) => {
						return (
							<Tooltip placement="topLeft" title={text}>
								<div style={{
									maxWidth:'120px',
									overflow:'hidden',
									textOverflow: "ellipsis",
									whiteSpace:'nowrap',
								}}>{text}</div>
							</Tooltip>
						)
					}
				},
				{
					title: '操作',
					width:120,
					dataIndex: 'photoUrl',
					key: 'photoUrl',
					render: (text) => {
						let arr = splitUrl(
							text,
							",",
							globalConfig.avatarHost + "/upload"
						)
						return (
							arr.length !== 0 ? <Button ype="primary" onClick={()=>{
								// console.log(arr)
								this.setState({
									visitImgModul:true,
									enclosure:arr
								})
							}}>
								查看附件
							</Button> : null
						)
					}
				},
			],
			//业务意向列表
			intentionList:[
				{
					title: '业务名称',
					dataIndex: 'businessVarietiesName',
					width:120,
					key: 'businessVarietiesName'
				},
				{
					title: '项目名称',
					dataIndex: 'businessProjectName',
					key:'businessProjectName',
					width:120
				},
				{
					title: '最新进度',
					width:120,
					dataIndex: 'followSituation',
					key: 'followSituation',
					render: (text, record, index) => {
						return <div>

	                               <span>{getfllowSituation(text)}</span>
                               </div>
					}
				}, {
					title: '最新状态',
					width:120,
					dataIndex: 'customerStatus',
					key: 'customerStatus',
					render: (text, record, index) => {
						return <div>

	                                <span>{getcustomerStatue(text)}</span>
                               </div>
					}
				}, {
					title: '跟进说明',
					width:120,
					dataIndex: 'remarks',
					key: 'remarks',
					render: (text, record, index) => {
						return <div>
	                           		  <span title={text}>{text&&text.length>8?text.substr(0,8)+'…':text}</span>

	                             </div>
					}
				}
			],
		}
	},
	//进入修改拜访记录
	visitModify(e) {
		this.setState({
			visitModul: true,
			loading: true
		});
		$.ajax({
			method: "get",
			dataType: "json",
			url: globalConfig.context + '/api/admin/customer/toUpdateFollow',
			data: {
				followId: e,
			},
			success: function(data) {
				let theArr = [];
				let thedata = data.data;
				if(!thedata) {
					if(data.error && data.error.length) {
						message.warning(data.error[0].message);
					};
					thedata = {};
				};

				for(let i = 0; i < data.data.userBusinessList.length; i++) {
					let thisdata = data.data.userBusinessList[i];
					theArr.push({
						key:i,
						readOnly:this.props.followData.readOnly,
						id: thisdata.ufbId,
						businessName:thisdata.businessProjectId,
						businessVarietiesName:thisdata.businessVarietiesName,
						businessProjectName:thisdata.businessProjectName,
						followSituation: thisdata.followSituation==null?undefined : String(thisdata.followSituation),
						customerStatus: thisdata.customerStatus==null?undefined : String(thisdata.customerStatus),
						remarks: thisdata.remarks,
					});
				};
				this.setState({
					followIds: thedata.followId,
					contacts: thedata.contacts,
					uid: thedata.uid,
					data: theArr,
					result: thedata.result,
					contactMobile:thedata.contactMobile,
					contactType:getContactType(thedata.contactType),
					followTime: thedata.followTime,
					followSituation: thedata.followSituation,
					customerStatus: thedata.customerStatus,
				});
			}.bind(this),
		}).always(function() {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	//拜访意向服务列表单个删除
	intentionDelet(e, index) {
		let detId = this.state.followIds;
		if(e.id) {
			this.setState({
				selectedRowKeys: [],
			});
			$.ajax({
				method: "get",
				dataType: "json",
				crossDomain: false,
				url: globalConfig.context + "/api/admin/customer/deleteFollowOneBusiness",
				data: {
					ufbId: e.id
				}
			}).done(function(data) {
				if(!data.error.length) {
					message.success('删除成功');
					this.setState({
						loading: false,
					});
				} else {
					message.warning(data.error[0].message);
				};
				this.visitModify(detId);
			}.bind(this));
		} else {
			this.visitModify(detId);
		}
	},
	//拜访modul函数
	visitOk(e) {
		this.setState({
			addcontactModul:false,
			visitModul: false
		});
	},
	visitCancel(e) {
		this.setState({
			addcontactModul:false,
			visitModul: false
		});
	},

	//详情保存
	visitSubmit(e){
		e.preventDefault();
		this.setState({
			loading: true
		});
		let contactsId = '';
		if(this.state.keys) {
			let conts = this.state.lastName;
			contactsId = this.state.contactsIdArr[conts].id;
		}
		let GlossoryId=false;
		this.state.data.map(function(item) {
			if(!item.followSituation||!item.customerStatus||!item.businessName) {
				GlossoryId = true
			}
		})
		if(this.state.data.length&&GlossoryId) {
			message.warning("项目名称/最新进度/最新状态不能为空!")
			return false;
		};
		let dataList=this.state.data,
			idsList=[];
		dataList.map((item,index) => {
			idsList.push({
				ufbId:item.id||'',
				businessProjectId:item.businessName,
				customerStatus:item.customerStatus,
				followSituation:item.followSituation,
				remarks:item.remarks||''
			})
		});
		//新增
		$.ajax({
			method: "post",
			dataType: "json",
			url: globalConfig.context + '/api/admin/customer/updateFollow',
			data: {
				followId: this.state.followIds,
				userBusinessList: JSON.stringify(idsList),
				uid: this.state.uid,
				contactType: this.state.contactType,
				result: this.state.result,
				followTime: this.state.followTime,
			}
		}).done(function(data) {
			this.setState({
				loading: false
			});
			if(!data.error.length) {
				message.success('保存成功！');
				this.props.closeDesc(false,true);
				this.visitCancel();
			} else {
				message.warning(data.error[0].message);
			}
		}.bind(this));

	},
	getFollowDtails(e) {
		this.setState({
			loading: true
		});
		$.ajax({
			method: "get",
			dataType: "json",
			url: globalConfig.context + '/api/admin/release/followDtails',
			data: {
				id: e,
			},
			success: function(data) {
				if(data.error.length === 0){
					this.setState({
						followDtails:data.data || {}
					})
				}else{
					message.warning(data.error[0].message)
				}
			}.bind(this),
		}).always(function() {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	getListPublicReleaseLog(e) {
		this.setState({
			loading: true
		});
		$.ajax({
			method: "get",
			dataType: "json",
			url: globalConfig.context + '/api/admin/release/listPublicReleaseLog',
			data: {
				ufid: e,
			},
			success: function(data) {
				if(data.error.length === 0){
					this.setState({
						publicReleaseLog:data.data || []
					})
				}else{
					message.warning(data.error[0].message)
				}
			}.bind(this),
		}).always(function() {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	componentWillReceiveProps(nextProps) {
        if (nextProps.visitModul && nextProps.followData.followId) {
            this.setState({
				visitModul: true,
				loading: true,
			})
			if(nextProps.followData.contactType === "5"){
				this.getListPublicReleaseLog(nextProps.followData.followId);
				this.getFollowDtails(nextProps.followData.followId);
			}
			this.visitModify(nextProps.followData.followId)
        };
    },
	render() {
		const formItemLayout = {
			labelCol: { span: 8 },
			wrapperCol: { span: 14 },
		};
		const followData= this.props.followData || []
		return(
			<div>
				<Modal
				      className="customeDetails"
				      footer=''
			          title="客户跟进详情"
			          width='1200px'
			          visible={this.state.visitModul}
			          onOk={this.visitOk}
					  onCancel={this.visitCancel}
			        >
					    <Form layout="horizontal" id="demand-form" onSubmit={this.visitSubmit}>
			    			<Spin spinning={this.state.loading}>
			    			   	<div className="clearfix">
									{!(this.state.contactType === '公出打卡' && Object.keys(this.state.followDtails).length > 0) ?
									<div>
			    			   		<FormItem
			                            labelCol={{ span:4 }}
										wrapperCol={{ span: 20 }}
			                            label="跟进方式" >
						                <span>{this.state.contactType}</span>
					                </FormItem>
					                <div className="clearfix">
						               	{!followData.readOnly&&<FormItem className="half-item"
				                            {...formItemLayout}
				                             label="当前联系人"
				                             >
						                    <span>{this.state.contacts}</span>
						                </FormItem>}
						                <FormItem className="half-item"
				                            {...formItemLayout}
				                             label="跟进时间"
				                             >
						                	<span>{this.state.followTime}</span>
						                </FormItem>
						                {!followData.readOnly&&<FormItem className="half-item"
				                            {...formItemLayout}
				                             label="联系电话"
				                             >
						                	<span>{this.state.contactMobile}</span>
						                </FormItem>}
					                </div>
					                <div className="clearfix">
					                	<FormItem
					                        labelCol={{ span: 4 }}
							                wrapperCol={{ span: 16 }}
					                        label="跟进备注" >
					                           	{
					                              <span style={{wordWrap: 'breakWord'}}>{this.state.result}</span>
					                            }
					                    </FormItem>
					                </div>
									</div>: null}
									{this.state.contactType === '公出打卡' && Object.keys(this.state.followDtails).length > 0 ? <div>
										<div className="clearfix">
											<FormItem
												labelCol={{ span: 4 }}
												wrapperCol={{ span: 16 }}
												label="公出企业" >
												<span>{this.state.followDtails.nickname}</span>
											</FormItem>
											<FormItem
												labelCol={{ span: 4 }}
												wrapperCol={{ span: 16 }}
												label="公出时间" >
												<span>{this.state.followDtails.releaseStarts + '~' + this.state.followDtails.releaseEnds}</span>
											</FormItem>
											<FormItem
												labelCol={{ span: 4 }}
												wrapperCol={{ span: 16 }}
												label="公出地点" >
												<span>{this.state.followDtails.districtName}</span>
											</FormItem>
											<FormItem
												labelCol={{ span: 4 }}
												wrapperCol={{ span: 16 }}
												label="当前状态" >
												<span>
													<Tag color={getClockState(this.state.followDtails.status).color}>{getClockState(this.state.followDtails.status).title}</Tag>
												</span>
											</FormItem>
										</div>
										<div className="clearfix">
											<div style={{fontSize:'18px',marginLeft:'100px',marginTop:'15px',marginBottom:'10px'}}>公出日志</div>
											<Table
												pagination={false}
												columns={this.state.intentionPublicReleaseLog}
												dataSource={this.state.publicReleaseLog}
											/>
										</div>
									</div> : null}
									{!(this.state.contactType === '公出打卡' && Object.keys(this.state.followDtails).length > 0) ? <div className="clearfix">
					                 	<div style={{fontSize:'18px',marginLeft:'100px',marginTop:'15px',marginBottom:'10px'}}>业务意向</div>
					                 	<div className="clearfix" >
		                    			    <Spin spinning={this.state.loading}>
										      <Table
												 size="middle"
										         rowKey={record => record.id}
								            	 pagination={false}
								            	 columns={this.state.intentionList}
								            	 dataSource={this.state.data}
								            	 />
										    </Spin>
										</div>
					                </div> : null}
			    			   	</div>
			    			   	{!followData.readOnly&&<FormItem wrapperCol={{ span: 12, offset: 6 }}>
								    {/* <Button  type="primary" size="large" htmlType="submit" style={{marginRight:'150px',marginTop:'20px'}}>保存</Button>
						           	<Button  size="large" onClick={this.visitCancel}>取消</Button> */}
					   			</FormItem>}
					   		</Spin>
					    </Form>
				</Modal>
				{this.state.visitImgModul ? <Modal
					className="customeDetails"
					footer=''
					title="附件"
					width='600px'
					visible={this.state.visitImgModul}
					onOk={()=>{
						this.setState({
							visitImgModul:false,
							enclosure:[],
						})
					}}
					onCancel={()=>{
						this.setState({
							visitImgModul:false,
							enclosure:[]
						})
					}}
				>
					<ImgList fileList={this.state.enclosure} domId={'visitDetail'}/>
				</Modal> : null}
			</div>
		)
	}
})
export default VisitDetail;