kede-client/js/component/manageCenter/customer/customerService/serviceQuery.jsx

import React from 'react';
import {Button ,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';
import './myClient.less';


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/listAllBusiness',
            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,
                   			updateTime:thisdata.updateTime,
                        });
                    };
                    this.state.pagination.current = data.data.pageNo;
                    this.state.pagination.total = data.data.totalCount;
                };
                if(data.data&&data.data.list&&!data.data.list.length){
					this.state.pagination.current=0;
					this.state.pagination.total=0;
				}
                this.setState({
                    dataSource: theArr,
                    pagination: this.state.pagination,
                    selectedRowKeys:[]
                });
            }.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: 'updateTime',
                    key: 'updateTime',
                }, {
                    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:adminData.isSuperAdmin?true:false });//需要一个请求数据
  	  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,
                            identifyName:thisdata.identifyName, 
                            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) { 
        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='1200px'
			          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='1200px'
			          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;