import React from 'react'; import { Radio, Icon, Button, Input, Select, Spin, Table, Switch, message, DatePicker, Modal, Upload,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'; import TechAchievementDesc from './myClientDesc.jsx'; import { achievementCategoryList, techAuditStatusList,cityArr,customerStatus,intentionalService,newFollow ,contact} from '../../dataDic.js'; import { beforeUploadFile, companySearch, getAchievementCategory, getSearchUrl, getTechAuditStatus,getcustomerTyp,getcityArr,getcustomerStatue,getCompanyIntention,getfllowSituation,getcontact} from '../../tools.js'; import BatchImport from './batchImport'; //图片组件 const PicturesWall = React.createClass({ getInitialState() { return { previewVisible: false, previewImage: '', fileList: [], } }, handleCancel() { this.setState({ previewVisible: false }) }, handlePreview(file) { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true, }); }, handleChange(info) { let fileList = info.fileList; this.setState({ fileList }); this.props.fileList(fileList); }, componentWillReceiveProps(nextProps) { this.state.fileList = nextProps.pictureUrl; }, render() { const { previewVisible, previewImage, fileList } = this.state; const uploadButton = (
点击上传
); return (
{fileList.length >= 5 ? null : uploadButton} example
); } }); const AchievementList = Form.create()(React.createClass({ loadData(pageNumber, apiUrl) { this.state.data = []; this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url:globalConfig.context + '/api/admin/customer/listPrivateCustomer', data: { pageNumber: pageNumber || 1, pageSize: this.state.pagination.pageSize, customerName: this.state.customerName, //名称1 shareTyp: this.state.shareTyp, //客户类型1 province:this.state.province,//地区 customerStatus:this.state.customerStatus,//客户状态1 contactName:this.state.contactName,//联系人姓名1 adminName:this.state.adminName,//跟单人1 companyIntention:this.state.companyIntention,//意向服务 followSituation:this.state.followSituation,//最新跟进 //releaseDateStartDate: this.state.releaseDate[0], //releaseDateEndDate: this.state.releaseDate[1], }, success: function (data) { let theArr = []; if (!data.data || !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, companyName:thisdata.companyName,//公司名称 _shareType:thisdata._shareType,//客户类型 locationProvince:thisdata.locationProvince,//地区 contactName:thisdata.contactName, //联系人姓名 telNum:thisdata.telNum,//手机号 _customerStatus:thisdata._customerStatus,//客户状态 _companyIntention:thisdata._companyIntention,//意向服务 _followSituation:thisdata._followSituation,//最新跟进 adminName:thisdata.adminName, //跟进人 followDate:thisdata.followDate }); }; this.state.pagination.current = data.data.pageNumber; 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)); }, //点击便捷记录 setModal1Visible(modal1Visible) { this.setState({ modal1Visible }); this.setState({ showDesc: false }); }, setModal2Visible(modal2Visible) { this.setState({ modal2Visible }); }, //点击修改 setModal3Visible(modal3Visible) { this.setState({ modal3Visible }); this.setState({ showDesc: false }); alert("22233") }, //历史记录中点击跟进人模板出现 setModal4Visible(modal4Visible) { this.setState({ modal4Visible }); //需要一个请求数据 }, getPictureUrl(e) { this.setState({pictureUrl: e }); }, componentWillReceiveProps(nextProps) { if (!this.props.visible && nextProps.visible) { if (nextProps.data && nextProps.data.id) { this.loadData(nextProps.data.id, nextProps.detailApiUrl); }; this.state.technicalPictureUrl = []; }; }, //快捷设置保存提交 handleSubmit(e) { e.preventDefault(); let deletedIds; for (let idx = 0; idx < this.state.selectedRows.length; idx++) { let rowItem = this.state.selectedRows[idx]; if (rowItem.id) { deletedIds=rowItem.id }; }; this.setState({ selectedRowKeys: [], }); this.props.form.validateFields((err, values) => { //url转化 let theTechnicalPictureUrl = []; if (this.state.technicalPictureUrl.length) { let picArr = []; this.state.technicalPictureUrl.map(function (item) { picArr.push(item); }); theTechnicalPictureUrl = picArr.join(","); }; if (!err) { this.setState({ loading: true }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url:globalConfig.context + '/api/admin/achievement/apply', data: { id: deletedIds,//编号id // serialNumber: values.serialNumber,//联系方式 // serialNumber: values.serialNumber,//更新的客户状态 // serialNumber: values.serialNumber,//最新跟进状态 // serialNumber: values.serialNumber,//跟进结果 TechnicalPictureUrl: theTechnicalPictureUrl,//上传的图片 // ownerEmail: this.state.switchValue ? values.ownerEmail : undefined,//开关控制下详细资料 } }).done(function (data) { this.setState({ loading: false }); if (!data.error.length) { message.success('保存成功!'); this.setModal1Visible(false) } else { message.warning(data.error[0].message); } this.loadData(); }.bind(this)); } }); }, submitcontact(e){ let deletedIds; for (let idx = 0; idx < this.state.selectedRows.length; idx++) { let rowItem = this.state.selectedRows[idx]; if (rowItem.id) { deletedIds=rowItem.id }; }; this.setState({ selectedRowKeys: [], }); e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { this.setState({ loading: true }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/customer/addCustomer', data: { id: deletedIds,//编号id // serialNumber: values.serialNumber,//联系方式 // serialNumber: values.serialNumber,//更新的客户状态 // serialNumber: values.serialNumber,//最新跟进状态 // serialNumber: values.serialNumber,//跟进结果 // ownerEmail: this.state.switchValue ? values.ownerEmail : undefined,//开关控制下详细资料 } }).done(function (data) { this.setState({ loading: false }); if (!data.error.length) { message.success('保存成功!'); this.setModal2Visible(false) } else { message.warning(data.error[0].message); } this.loadData(); }.bind(this)); } }); }, getTechnicalPictureUrl(e) { this.setState({ technicalPictureUrl: e }); }, //新建联系人modal框显示 showModal(){ this.setState({ visible: true, }); }, //指定转交人的点击函数 showModa(){ alert("点击开始转交"); this.setState({ visible: true, }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/achievement/offShelf", data: { "id": '' } }).done(function (data) { if (data.error && data.error.length) { message.warning(data.error[0].message); } else { let theAssigne = []; if (!data.data || !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]; //处理数据 进行循环 theAssigne.push({ key: i, id: thisdata.id, }); }; }; this.setState({ dataid: theAssigne, }); } }.bind(this)); }, //选择了指定人之后的保存点击函数,需要修改函数 changeAssigner() { alert("选好了开始转交"); this.setState({ visible: false, }); let changeIds; for (let idx = 0; idx < this.state.selectedRows.length; idx++) { let rowItem = this.state.selectedRows[idx]; if (rowItem.id) { changeIds=rowItem.id }; }; $.ajax({ method: "GET", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/customer/deleteCustomer", data: { id: changeIds } }).done(function (data) { if (!data.data.error.length) { message.success('转交成功!'); this.setState({ loading: false, }); } else { message.warning(data.error[0].message); }; this.loadData(); }.bind(this)); }, handleOk(e){ this.setState({ visible: false, }); }, handleCancel(e){ this.setState({ visible: false, }); }, getInitialState() { return { technicalPictureUrl: [], modal1Visible: false, modal2Visible: false, visible: false , searchMore: true, searchType: 0, validityPeriodDate: [], releaseDate: [], selectedRowKeys: [], 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 + '条数据'; } }, columns: [ { title: '公司名称', dataIndex: 'companyName', key: 'companyName', render: text => { return ( ) } }, { title: '客户类型', dataIndex: '_shareType', key: '_shareType' // render: text => { return getcustomerTyp(text); } }, { title: '地区', dataIndex: 'locationProvince', key: 'locationProvince', render: text => { return getcityArr(text); } }, { title: '联系人姓名', dataIndex: 'contactName', key: 'contactName', }, { title: '手机号', dataIndex: 'telNum', key:'telNum', }, { title: '客户状态', dataIndex: '_customerStatus', key: '_customerStatus' //render: text => { return getcustomerStatue(text) } }, { title: '意向服务', dataIndex: '_companyIntention', key: '_companyIntention' //render: text => { return getCompanyIntention(text) } }, { title: '最新跟进', dataIndex: '_followSituation', key: '_followSituation', render:text => { const theData = this.props.data || {}; const FormItem = Form.Item; const { getFieldDecorator } = this.props.form; const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 }, }; const formItemLayput = { labelCol: { span: 10 }, wrapperCol: { span: 14 }, }; return (
this.setModal4Visible(false)} onCancel={() => this.setModal4Visible(false)} >
{theData.id} {theData.id} {theData.id} {theData.id} {theData.id} {theData.id} {theData.id} {theData.id} {theData.id}
this.setModal3Visible(false)} onCancel={() => this.setModal3Visible(false)} >
历史记录 {theData.category} this.setModal4Visible(true)}>{theData.category} {theData.category} {theData.category}
{theData.category}
{theData.category}
{ this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true, }); }} > { this.setState({ previewVisible: false }) }}>
this.setModal1Visible(false)} onCancel={() => this.setModal1Visible(false)} >
{getcustomerTyp(theData.customerTyp)} {getcustomerTyp(theData.customerTyp)} this.setModal2Visible(false)} onCancel={() => this.setModal2Visible(false)} > {theData.id} { this.setState({ hots: e.target.value }) }}> { this.setState({ hot: e.target.value }) }}> *姓名: { this.setState({ paymentId: e.target.value }) }} /> QQ号: { this.setState({ entId: e.target.value }) }} /> *手机号: { this.setState({ pay: e.target.value }) }} /> 座机号: { this.setState({ paym: e.target.value }) }} /> 部门: { this.setState({ paytId: e.target.value }) }} /> 职位: { this.setState({ paentId: e.target.value }) }} /> 微信号: { this.setState({ payId: e.target.value }) }} /> {theData.customerTyp} {getFieldDecorator('contact', { initialValue: getcontact(theData.contact) })( )} {getFieldDecorator('contacts', { initialValue: getcontact(theData.contacts) })( )} {getcustomerStatue(theData.customerStatue)}
{getFieldDecorator('customerStatue', { initialValue: getcustomerStatue(theData.customerStatue) })( )}
{getFieldDecorator('fllowSituation', { initialValue: getfllowSituation(theData.fllowSituation) })( )}
{getFieldDecorator('remarks', { initialValue: theData.remarks })( )}

图片建议:图片要清晰。

) } }, { title: '跟单人', dataIndex: 'adminName', key: 'adminName', }, { title: '时间', dataIndex: 'followDate', key: 'followDate', } ], dataSource: [], searchTime: [,] }; }, componentWillMount() { let theArr = []; customerStatus.map(function (item) { theArr.push( {item.key} ) }); let auditArr = []; cityArr.map(function (item) { auditArr.push( {item.key} ) }); let intentionalArr = []; intentionalService.map(function (item) { intentionalArr.push( {item.key} ) }); let newArr = []; newFollow.map(function (item) { newArr.push( {item.key} ) }); this.state.customerStatuarr = theArr; this.state.auditStatusOption = auditArr; this.state.intentionalOption = intentionalArr; this.state.newOption = newArr; if (window.location.search) { let theObj = getSearchUrl(window.location.search); if (theObj.rid) { theObj.id = theObj.rid; if (theObj.rid != 'null') { this.tableRowClick(theObj); }; }; }; this.loadData(); }, tableRowClick(record, index) { this.state.RowData = record; this.setState({ showDesc: true }); }, //删除功能 delectRow() { let deletedIds; for (let idx = 0; idx < this.state.selectedRows.length; idx++) { let rowItem = this.state.selectedRows[idx]; if (rowItem.id) { deletedIds=rowItem.id }; }; this.setState({ selectedRowKeys: [], loading: deletedIds.length > 0 }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/customer/deleteCustomer", data: { id: deletedIds } }).done(function (data) { if (!data.error.length) { message.success('删除成功!'); this.setState({ loading: false, }); } else { message.warning(data.error[0].message); }; this.loadData(); }.bind(this)); }, //转为公共客户功能 changeRow() { let deletedIds; for (let idx = 0; idx < this.state.selectedRows.length; idx++) { let rowItem = this.state.selectedRows[idx]; if (rowItem.id) { deletedIds=rowItem.id }; }; this.setState({ selectedRowKeys: [], loading: deletedIds.length > 0 }); $.ajax({ method: "GET", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/customer/deleteCustomer", //等待接口 data: { id: deletedIds } }).done(function (data) { if (!data.data.error.length) { message.success('已转为公共客户!'); this.setState({ loading: false, }); } else { message.warning(data.error[0].message); }; this.loadData(); }.bind(this)); }, addClick() { this.state.RowData = {}; this.setState({ showDesc: true }); }, closeDesc(e, s) { this.state.showDesc = e; if (s) { this.loadData(); }; }, search() { this.loadData(); }, reset() { this.state.id = undefined; this.state.customerName = undefined; this.state.shareTyp = undefined; this.state.province = undefined; this.state.ownerType = undefined; this.state.customerStatus = undefined; this.state.auditStatus = undefined; this.state.adminName = undefined; this.state.contactName = undefined; this.state.releaseDate = []; this.loadData(); }, searchSwitch() { this.setState({ searchMore: !this.state.searchMore }); }, render() { const FormItem = Form.Item const rowSelection = { selectedRowKeys: this.state.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.setState({ selectedRows: selectedRows.slice(-1), selectedRowKeys: selectedRowKeys.slice(-1) }); } }; const hasSelected = this.state.selectedRowKeys.length > 0; const { RangePicker } = DatePicker; const theData = this.props.data || {}; const { getFieldDecorator } = this.props.form; const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 }, }; return (
客户管理
{ if (info.file.status !== 'uploading') { console.log(info.file, info.fileList); } if (info.file.status === 'done') { if (!info.file.response.error.length) { message.success(`${info.file.name} 文件上传成功!`); } else { message.warning(info.file.response.error[0].message); return; }; } else if (info.file.status === 'error') { message.error(`${info.file.name} 文件上传失败。`); }; }} >
{ this.setState({ customerName: e.target.value }); }} /> {/* {this.state.dataid.map((tag) => { return ; })} */} 更多搜索
{ this.setState({ adminName: e.target.value }); }} /> { this.setState({ contactName: e.target.value }); }} /> 发布时间 : { this.setState({ releaseDate: dataString }); }} />
); } })); export default AchievementList;