| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703 | import React from 'react';import { Radio,Icon, Popconfirm,Button, AutoComplete ,Input,Select,Spin,Table, Switch, message, DatePicker, Modal,Form ,Row,Col,TimePicker} from 'antd';import ajax from 'jquery/src/ajax/xhr.js';import $ from 'jquery/src/ajax';import moment from 'moment';const Option = AutoComplete.Option;const OptGroup = AutoComplete.OptGroup;import './myClient.less';import { areaSelect} from '../../../NewDicProvinceList';const { Column, ColumnGroup } = Table;import {socialAttribute,newFollow,lvl, customerStatus,intentionalService} from '../../../dataDic.js';import {getcustomerStatue,getprovince,getStatusFollow,getCompanyIntention,getfllowSituation,getContactType } from '../../../tools.js';const ServiceQuery= Form.create()(React.createClass({	    loadData(pageNo, apiUrl) {        this.state.data = [];        this.setState({            loading: true        });              $.ajax({            method: "post",            dataType: "json",            crossDomain: false,                      url:globalConfig.context + '/api/admin/customer/listBusiness',            data: { 				                pageNo: pageNo || 1,                pageSize: this.state.pagination.pageSize,                               businessGlossoryId: this.state.businessIdS, //业务意向                  identifyName:this.state.identifyNameS,                followSituation:this.state.followSituationS,                customerStatus:this.state.customerStatusS,			    adminName: this.state.adminNameS,				startDate: this.state.releaseDate[0],                endDate: this.state.releaseDate[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.list.length; i++) {                        let thisdata = data.data.list[i];                                                theArr.push({                            key: i,                                                       id: thisdata.id,                                                                              businessId:thisdata.businessId,                            businessName:thisdata.businessName,                            identifyName:thisdata.identifyName,                            followSituation:thisdata.followSituation,                            customerStatus:thisdata.customerStatus,                            adminName:thisdata.adminName,                   			createTime:thisdata.createTime			                                        });                    };                    this.state.pagination.current = data.data.pageNo;                    this.state.pagination.total = data.data.totalCount;                };                               this.setState({                    dataSource: theArr,                    pagination: this.state.pagination                });            }.bind(this),        }).always(function () {            this.setState({                loading: false            });        }.bind(this));    },          getInitialState() {        return {         	dataSources:[],        	customerName:[],        	orgCodeUrl:[],            companyLogoUrl:[],        	visible: false ,            searchMore: true,                       releaseDate: [],                        releaseDate: [],            selectedRowKeys: [],            selectedRowKey: [],            selectedRows: [],            loading: false,            pagination: {                defaultCurrent: 1,                defaultPageSize: 10,                showQuickJumper: true,                pageSize: 10,                onChange: function (page) {                    this.loadData(page);                }.bind(this),                showTotal: function (total) {                    return '共' + total + '条数据';                }            },            paginations: {                defaultCurrent: 1,                defaultPageSize: 10,                showQuickJumper: true,                pageSize: 10,                onChange: function (page) {                    this.loadVisit(page);                }.bind(this),                showTotal: function (total) {                    return '共' + total + '条数据';                }            },	          businessFollowList: [                               {                    title: '跟进时间',                    dataIndex: 'followTime',                    key: 'followTime',                                                        }, {                    title: '营销员',                    dataIndex: 'adminName',                    key: 'adminName',                }, {                    title: '意向进度',                    dataIndex: 'followSituation',                    key: 'followSituation',                     render:text=>{return getfllowSituation(text)}                }, {                    title: '客户状态',                    dataIndex: 'customerStatus',                    key: 'customerStatus',                      render:text=>{return getcustomerStatue(text)}                },                 {                    title: '拜访方式',                    dataIndex: 'contactType',                    key:'contactType',                    render:text=>{return getContactType(text)}                }, {                    title: '联系人',                    dataIndex: 'contacts',                    key: 'contacts',                                    },                 {                    title: '联系电话',                    dataIndex: 'contactMobile',                    key:'contactMobile',                                   },                ],            columns: [                               {                    title: '业务名称',                    dataIndex: 'businessName',                    key: 'businessName',                                                        }, {                    title: '意向时间',                    dataIndex: 'createTime',                    key: 'createTime',                }, {                    title: '客户名称',                    dataIndex: 'identifyName',                    key: 'identifyName',                 }, {                    title: '营销员',                    dataIndex: 'adminName',                    key: 'adminName',                                    },                 {                    title: '意向进度',                    dataIndex: 'followSituation',                    key:'followSituation',                      render: text => { return getfllowSituation(text) }                },                 {                    title: '客户状态',                    dataIndex: 'customerStatus',                    key: 'customerStatus',                    render: text => { return getcustomerStatue(text) }                },            ],            dataSource: [],            searchTime: [,]        };    },        componentWillMount() {                              //意向服务        let intentionalArr = [];        newFollow.map(function (item) {            intentionalArr.push(                <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>            )        });           //客户状态        let customerStatusArr = [];        customerStatus.map(function (item) {            customerStatusArr.push(                <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>            )        });        this.state.intentionalOption = intentionalArr;        this.state.customerStatusArrOption = customerStatusArr;        this.loadData();            },    search() {        this.loadData();    },    reset() {    	this.state.businessIdS=undefined; //名称1           this.state.identifyNameS='';                this.state.followSituationS=undefined;        this.state.customerStatusS=undefined;        this.state.adminNameS='';	    this.state.releaseDate[0]=undefined;        this.state.releaseDate[1]=undefined;        this.loadData();     },    searchSwitch() {        this.setState({            searchMore: !this.state.searchMore        });    },    //查看基本详情基本信息    loadInformation(record){    	$.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + '/api/admin/customer/toUpdateBusiness',            data: {                businessId: record            },            success: function (data) {                let thisData = data.data;                                if (!thisData) {                    if (data.error && data.error.length) {                        message.warning(data.error[0].message);                    };                    thisData = {};                };                 this.setState({                	uids:thisData.uid,                	dataInformation:thisData,                	followSituation:thisData.followSituation,                	businessGlossoryId:thisData.businessGlossoryId,                	customerStatus:thisData.customerStatus,                	remarks:thisData.remarks,	                });                              }.bind(this),        }).always(function () {        	this.loadVisit();            this.setState({            	                loading: false            });        }.bind(this));           },   	detailsModalOk(e) {  	  this.setState({ modal5Visible:true });//需要一个请求数据  	  this.loadInformation(e.businessId)    },    //点击消失函数	  detailsModal(e) {			    this.setState({ 	    	modal5Visible:false	    });	 	   	  },	businessFollowOk(){		this.setState({ 	    	businessFollowModul:false	    });	},	businessFollowCancel(){		this.setState({ 	    	businessFollowModul:false	    });	},	//进入修改时	listFollowUp(e){			$.ajax({             method: "get",             dataType: "json",             crossDomain: false,             url: globalConfig.context + "/api/admin/customer/toUpdateFollowOneBusiness",             data:{            	ufbId:e.ufbId             },             success: function (data) {                	  				       let thedata=data.data;				    if (!thedata) {                    if (data.error && data.error.length) {                        message.warning(data.error[0].message);                    };	                    thedata = {};             }; 					this.setState({						businessGlossoryId:thedata.businessGlossoryId,						followSituation:thedata.followSituation,						customerStatus:thedata.customerStatus,						followTime:thedata.followTime,						createTime:thedata.createTime,						identifyName:thedata.identifyName,						contactType:parseInt(thedata.contactType),						result:thedata.result,						remarks:thedata.remarks,						adminName:thedata.adminName,						contacts:thedata.contacts,						contactMobile:thedata.contactMobile,						ufbId:thedata.ufbId,						followId:thedata.followId,                    });				}.bind(this),			}).always(function () {            this.setState({            	ufbIds:e.ufbId,                loading: false            });       }.bind(this));   	},	//新建HTTP获取数据	addTime(){        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + "/api/admin/customer/toAddBusinessAndFollow",            data:{            	            },            success: function (data) {                	              		let theArr = [];				    let thedata=data.data;				    if (!thedata) {	                    if (data.error && data.error.length) {	                        message.warning(data.error[0].message);	                    };		                    thedata = {}; 	              };   						let creatMent=thedata.createTime.substr(10,9); 				    let createYear=thedata.createTime.substr(0,10);					this.setState({							createTime:thedata.createTime,						creatMent:creatMent,						createYear:createYear,						followTime:thedata.followTime,	                    adminName: thedata.adminName,                    });				}.bind(this),			}).always(function () {            this.setState({                loading: false            });        }.bind(this));  	},	//获取拜访详情ajax	loadVisit(pageNo) {        this.setState({            loading: true        });              $.ajax({            method: "get",            dataType: "json",            crossDomain: false,                      url:globalConfig.context + '/api/admin/customer/listFollowHistory',            data: {            	pageNo: pageNo || 1,                pageSize: this.state.paginations.pageSize,                uid: this.state.uids, //名称1                businessGlossoryId:this.state.businessGlossoryId,            },            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.list.length; i++) {                        let thisdata = data.data.list[i];                                                theArr.push({                            followId:thisdata.followId,                            followTime:thisdata.followTime,                            identityName:thisdata.identityName,                             contacts:thisdata.contacts,                            contactMobile:thisdata.contactMobile,                            result:thisdata.result,                            ufbId:thisdata.ufbId,                            adminName:thisdata.adminName,                            followSituation:thisdata.followSituation,                            customerStatus:thisdata.customerStatus,                            contactType:thisdata.contactType                        });                    };                    this.state.paginations.current = data.data.pageNo;                    this.state.paginations.total = data.data.totalCount;                };                               this.setState({                    visitArrList: theArr,                    paginations: this.state.paginations                });            }.bind(this),        }).always(function () {            this.setState({	                loading: false            });        }.bind(this));    },    componentWillReceiveProps(nextProps) {        if (!this.props.visible && nextProps.visible) {            if (nextProps.data && nextProps.data.id) {                this.loadData(nextProps.data.id, nextProps.detailApiUrl);            };            this.state.data = {};            this.state.companyLogoUrl = [];            this.state.orgCodeUrl = [];         };    },    tableRowClick(record, index) {         this.state.RowData = record;         this.detailsModalOk(record);        this.setState({        	selectedRowKeys:[],        	rowId:record.businessId,        })        },    followRowClick(record, index) {     	console.log(record)        this.state.RowData = record;         this.listFollowUp(record);        this.setState({            businessFollowModul: true,             selectedRowKeys:[],        });        },    render() {    	const FormItem = Form.Item        const rowSelection = {            selectedRowKeys: this.state.selectedRowKeys,            onChange: (selectedRowKeys, selectedRows) => {                this.setState({                    selectedRows: selectedRows.slice(-1),                    selectedRowKeys: selectedRowKeys.slice(-1)                });            },            onSelect: (recordt, selected, selectedRows) => {			   			    this.setState({			    	recordt:recordt.id			    })			},        };        const rowSelections = {         	selectedRowKeys: this.state.selectedRowKey,            onChange: (selectedRowKey, selectedRow) => {                this.setState({                    selectedRow: selectedRow.slice(-1),                    selectedRowKey: selectedRowKey.slice(-1)                });                            },            onSelect: (records, selected, selectedRow) => {			   			    this.setState({			    	selectedRow: selectedRow.slice(-1),			    	records:records.id,			    				    })			  			},			        };		        const hasSelected = this.state.selectedRowKeys.length > 0;        const { RangePicker } = DatePicker;  	      	const { getFieldDecorator } = this.props.form;    	  const formItemLayout = {            labelCol: { span: 8 },            wrapperCol: { span: 14 },       };        const theInformation=this.state.dataInformation || {}      	const contactsOption="";    	        	        const formItemLayput = {            labelCol: { span: 10 },            wrapperCol: { span: 14 },        };         const businessIds=this.state.businessId||'';        const dataSources=this.state.customerArr || [];        const options = dataSources.map((group) =>				      <Option key={group.id} value={group.name}>{group.name}</Option>				     )        return (            <div className="user-content" >                <div className="content-title">                                      <span>我的业务</span>                </div>                <div className="user-search">                                        <Input placeholder="客户名称"                        value={this.state.identifyNameS}                        onChange={(e) => { this.setState({ identifyNameS: e.target.value }); }} />                    <Select placeholder="服务意向" value={this.state.businessIdS} onChange={(e) => {								        this.setState({businessIdS:e})}} style={{width:'150px'}}>	                      {	                        intentionalService.map(function (item) {	                            return <Select.Option key={item.value} >{item.key}</Select.Option>	                        })	                      }                    </Select>                    <Button type="primary" onClick={this.search}>搜索</Button>                    <Button onClick={this.reset}>重置</Button> 	                <span style={{marginLeft:'10px',marginRight:'20px'}}>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span>                    <div className='clearfix' style={{marginTop:'5px'}}>	                  <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>                    			                  			                <RangePicker		                        value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,		                        this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}		                        onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />   	                        <Select placeholder="客户状态"	                            style={{ width: 150 }}	                            value={this.state.customerStatusS}	                            onChange={(e) => { this.setState({ customerStatusS: e }) }}>	                            {this.state.customerStatusArrOption}	                        </Select>	                        <Select placeholder="业务进度"	                            style={{ width: 150 }}	                            value={this.state.followSituationS}	                            onChange={(e) => { this.setState({ followSituationS: e }) }}>	                            {this.state.intentionalOption}	                        </Select>	                        <Input placeholder="营销员" style={{width:'150px'}}		                        value={this.state.adminNameS}		                        onChange={(e) => { this.setState({ adminNameS: e.target.value }); }} />				            </div>  		            </div>                </div>                                                               <div className="patent-table">                    <Spin spinning={this.state.loading}>                        <Table columns={this.state.columns}                            dataSource={this.state.dataSource}                                rowSelection={rowSelection}                            pagination={this.state.pagination}                            onRowClick={this.tableRowClick}                           />                    </Spin>                </div>                			<Modal					      className="customeDetails"				      			          title="我的业务意向详情"			          width='1000px'			          visible={this.state.modal5Visible}			          onOk={this.detailsModal}			          onCancel={this.detailsModal}			          footer=''			        >				    			        <Form horizontal onSubmit={this.newSubmit} id="demand-form">		                <Spin spinning={this.state.loading}>			               	<div className="clearfix">		                    	<FormItem className="half-item"				                   {...formItemLayout}				                    label="意向名称"			                        >			                        <span>{getCompanyIntention(theInformation.businessGlossoryId)}</span>			                    </FormItem>			                    <FormItem className="half-item"				                    {...formItemLayout}				                    label="意向时间"			                        >			                        <span>{theInformation.createTime}</span>			                    </FormItem>			                    <FormItem className="half-item"				                    {...formItemLayout}				                    label="客户名称"			                        >			                        <span>{theInformation.identifyName}</span>			                    </FormItem>			                    <FormItem className="half-item"				                   {...formItemLayout}				                    label="营销员"			                        >			                        <span>{theInformation.adminName}</span>			                    </FormItem>								<FormItem className="half-item" 		                           {...formItemLayout}		                           label="意向进度"	                               > 	                                <span>{getfllowSituation(theInformation.followSituation)}</span>    	                   		    </FormItem>				    			<FormItem className="half-item" 			                           {...formItemLayout}			                           label="客户状态"		                               >                                     <span>{getcustomerStatue(theInformation.customerStatus)}</span>   	                   		    </FormItem>		                   		<div className="clearfix">		                   		    <FormItem				                        labelCol={{ span: 4 }}				                        wrapperCol={{ span: 16 }}				                        label="意向说明" >					                          				                        <span>{this.state.remarks}</span>   				                    </FormItem>				                </div>		                  </div>			                  <div className="clearfix">		                  		<div style={{fontSize:'18px',marginLeft:'40px',marginBottom:'20px'}}>业务跟进</div>	                        	<div className="clearfix" style={{paddingLeft:'40px',paddingRight:'40px'}}>	                			    <Spin spinning={this.state.loading}>								      <Table 						            	 pagination={this.state.paginations}						            	 columns={this.state.businessFollowList} 						            	 dataSource={this.state.visitArrList}						            	 onRowClick={this.followRowClick}						            	 />								    </Spin> 								</div>			                  </div>					    </Spin>					</Form>						</Modal>			        			<Modal					      footer=''			          title="业务跟进详情"			          width='1000px'			          visible={this.state.businessFollowModul}			          onOk={this.businessFollowOk}					  onCancel={this.businessFollowCancel}							          							          			        >				    					    <div className="clearfix">			    			<Form horizontal id="demand-form" >			    			<Spin spinning={this.state.loading}>			    			   	<div className="clearfix">			    			   		<FormItem className="half-item"						                            {...formItemLayout}						                             label="意向名称"						                             >					    			    <span>{getCompanyIntention(this.state.businessGlossoryId)}</span>					    			</FormItem>			    			    	<FormItem className="half-item"				                            {...formItemLayout}				                             label="意向时间"				                             >			    			     		<span>{this.state.createTime}</span>			    			    	</FormItem>			    			    	<FormItem className="half-item"				                            {...formItemLayout}				                             label="客户名称"				                             >			    			     		<span>{this.state.identifyName}</span>			    			    	</FormItem>			    			     	<FormItem className="half-item"				                            {...formItemLayout}				                             label="营销员"				                             >			    			     		<span>{this.state.adminName}</span>			    			    	</FormItem>			    			   		<FormItem className="half-item" 			                           {...formItemLayout}			                           label="意向进度"		                               > 									    <span>{getfllowSituation(this.state.followSituation)}</span>   		                   		    </FormItem>					    			<FormItem className="half-item" 			                           {...formItemLayout}			                           label="客户状态"	                                   > 									    <span>{getcustomerStatue(this.state.customerStatus)}</span>                                  		                   		    </FormItem>		                   		    <div className="clearfix">			                   		    <FormItem					                        labelCol={{ span: 4 }}					                        wrapperCol={{ span: 16 }}					                        label="意向说明" >					                        					                        <span>{this.state.remarks}</span>   					                    </FormItem>					                </div>    		                   		    <div style={{fontSize:'18px',marginLeft:'30px'}}>拜访情况</div>				    			   		<FormItem className="half-item"				                            labelCol={{ span: 8 }}					                        wrapperCol={{ span: 16 }}				                            label="拜访方式" >							                  <span>{getContactType(parseInt(this.state.contactType))}</span>						                </FormItem> 			                   		    <FormItem className="half-item" 				                           {...formItemLayout}				                           label="当前联系人"			                               > 					                        <span>{this.state.contacts}</span>			                   		    </FormItem>						                <FormItem className="half-item"				                            {...formItemLayout}				                             label="拜访人"				                            >						                	<span>{this.state.adminName}</span>						                </FormItem>						                <FormItem className="half-item"				                            {...formItemLayout}				                            label="拜访时间" >			                                				                              <span>{this.state.followTime}</span>		            					</FormItem>					                	<FormItem					                        labelCol={{ span: 4 }}							                wrapperCol={{ span: 16 }}					                        label="拜访备注" >				                    					                   		<span>{this.state.result}</span>					                   </FormItem>			    			   	</div>					   		</Spin>					      </Form> 						</div>	                        			</Modal>          </div >        );    }}));export default ServiceQuery;
 |