123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575 |
- import React from 'react'
- import ajax from 'jquery/src/ajax/xhr.js';
- import $ from 'jquery/src/ajax';
- import {Modal,Form,layout,Radio,Button,Input,Spin,Table,Select,Popconfirm,message} from 'antd';
- import {intentionalService,newFollow,customerStatus} from '@/dataDic.js';
- import {getCompanyIntention} from '@/tools.js';
- const FormItem =Form.Item;
- import AddContact from "../signCustomer/followDetail/addContact";
- import BusName from './followDetail/businessName.jsx';
- const FollowDetail = React.createClass({
- getInitialState(){
- return{
- visitModul:false,
- loading:false,
- data:[],
- businessName:'',
- projectName:'',
- busModul:false,
- intentionList:[{
- title: '业务名称',
- dataIndex: 'businessGlossoryId',
- width:120,
- key: 'businessGlossoryId',
- render: (text, record, index) => {
- return (
- <div>
- {!record.id?<Select placeholder="选择业务名称" value={record.businessGlossoryId} onChange={(e) => { record.businessGlossoryId = e; this.setState({ data: this.state.data }); }}>
- {
- this.props.categoryArr.map(function (item) {
- return <Select.Option key={item.value} >{item.key}</Select.Option>
- })
- }
- </Select>:
- <span>{record.businessVarietiesName}</span>}
- </div>
- )
- }
- },
- {
- title: '项目名称',
- dataIndex: 'businessName',
- key:'businessName',
- width:120,
- render:(text,record,index)=>{
- return(
- <div>
- {!record.id?<div>
- <Button onClick={(e)=>{e.stopPropagation(),this.businessFn(record,index)}} type="small">{record.projectName}</Button>
- </div>:
- <span>{record.businessProjectName}</span>
- }
- </div>
- )
- }
- },
- {
- title: '最新进度',
- width:120,
- dataIndex: 'followSituation',
- key: 'followSituation',
- render: (text, record, index) => {
- if(text == 5 && !record.isEdit) {
- return (
- newFollow.map(function (item) {
- if(item.value == text) {
- return item.key
- }
- })
- )
- }else {
- return <Select placeholder="选择最新进度" value={record.followSituation} onChange={(e) => { record.followSituation = e; record.isEdit=true; this.setState({ data: this.state.data }); }}>
- {
- newFollow.filter((v)=>{return v.value !== "5"}).map(function (item) {
- return <Select.Option key={item.value} >{item.key}</Select.Option>
- })
- }
- </Select>
- }
- }
- }, {
- title: '最新状态',
- width:120,
- dataIndex: 'customerStatus',
- key: 'customerStatus',
- render: (text, record, index) => {
- if(record.followSituation == 5 && !record.isEdit) {
- return (
- customerStatus.map(function (item) {
- if(item.value == text) {
- return item.key
- }
- })
- )
- }else {
- return <Select value={record.customerStatus} placeholder="选择最新状态" onChange={(e) => { record.customerStatus = e; this.setState({ data: this.state.data }); }}>
- {
- customerStatus.map(function (item) {
- return <Select.Option key={item.value} >{item.key}</Select.Option>
- })
- }
- </Select>
- }
- }
- }, {
- title: '跟进说明',
- width:120,
- dataIndex: 'remarks',
- key: 'remarks',
- render: (text, record, index) => {
- if(record.followSituation == 5 && !record.isEdit) {
- return (
- text
- )
- }else {
- return <Input value={record.remarks} placeholder="跟进说明"
- onChange={(e) => { record.remarks = e.target.value; this.setState({ data: this.state.data }); }}
- />
- }
- }
- }, {
- title: '操作',
- width:120,
- dataIndex: 'rrr',
- key: 'rrr',
- render: (text, record, index) => {
- return <div>
- {!record.id&&<Popconfirm title="是否删除?" onConfirm={(e)=>{this.intentionDelet(record,index)}} okText="删除" cancelText="不删除">
- <Button style={{marginRight:'10px',color:'#ffffff',background:'#f00',border:'none'}}>删除</Button>
- </Popconfirm>}
- </div>
- }
- }
- ],
- }
- },
- //选择子项目
- businessFn(record,index){
- if(!record.businessGlossoryId){
- message.warn('请先选择业务名称!');
- return;
- }
- this.setState({
- businessId:record.businessGlossoryId,
- busModul:true,
- index:index,
- addcontactModul:false
- })
- },
- closeBus(datas,e,s){
- this.state.addcontactModul=e;
- this.state.busModul=false;
- if(s){
- this.state.data[this.state.index].businessName=datas.id;
- this.state.data[this.state.index].projectName=datas.name;
- this.setState({
- busModul:false,
- data:this.state.data
- })
- }
- },
- //拜访意向服务列表单个删除
- intentionDelet(e, index) {
- let deteluserBusinessList = (this.state.data).splice(index, 1)
- this.setState({
- selectedRowKeys: [],
- });
- },
- //拜访modul函数
- visitOk(e) {
- this.setState({
- addcontactModul:false,
- visitModul: false
- });
- },
- visitCancel(e) {
- this.setState({
- addcontactModul:false,
- visitModul: false
- });
- this.props.closeDesc(false,false)
- },
- //获取联系人下拉框
- getNewWoman(ids) {
- this.state.data = []
- $.ajax({
- method: "get",
- dataType: "json",
- crossDomain: false,
- url: globalConfig.context + "/api/admin/customer/findCustomerContacts",
- data: {
- uid: ids,
- },
- success: function(data) {
- let theArr = [];
- let thedata = data.data;
- if(!thedata) {
- if(data.error && data.error.length) {
- message.warning(data.error[0].message);
- };
- thedata = {};
- };
- var telNum = [];
- var contactIds = [];
- thedata.map(function(item, index) {
- contactIds.push(thedata[index].id);
- telNum.push(thedata[index].mobile);
- });
- for(let item in data.data) {
- let theData = data.data[item];
- theArr.push(
- <Select.Option value={item} key={theData.name}>{theData.name}</Select.Option>
- );
- };
- this.setState({
- contactsIdArr: thedata,
- telNum: telNum,
- orderStatusOption: theArr,
- });
- }.bind(this),
- }).always(function() {
- this.setState({
- deletId: ids,
- loading: false
- });
- }.bind(this));
- },
- //刷新新增拜访记录刷新
- deletelist(e) {
- this.setState({
- loading:true
- });
- $.ajax({
- method: "get",
- dataType: "json",
- url: globalConfig.context + '/api/admin/customer/toAddFollowOnHistory',
- data: {
- uid: e,
- },
- success: function(data) {
- let listArr = [];
- 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];
- listArr.push({
- id: thisdata.businessId,
- businessName:thisdata.businessProjectId,
- businessGlossoryId:i,
- businessVarietiesName:thisdata.businessVarietiesName,
- businessProjectName:thisdata.businessProjectName,
- followSituation: String(thisdata.followSituation),
- customerStatus: String(thisdata.customerStatus),
- remarks: thisdata.remarks,
- });
- };
- this.setState({
- contacts: thedata.contacts,
- uid: thedata.uid,
- data: listArr,
- followTime: thedata.followTime,
- remarks: thedata.remarks,
- });
- }.bind(this),
- }).always(function() {
- this.setState({
- loading: false
- });
- }.bind(this));
- },
- //当选择联系人的列表变化时,则执行
- hundleName(e) {
- let changNub = this.state.telNum[e];
- this.setState({
- nub: this.state.telNum[e],
- lastName: e,
- });
- },
- //点击添加联系人
- newContacts() {
- this.setState({
- busModul:false,
- uids: this.state.uid,
- addcontactModul: true
- });
- },
- //页面刷新
- closeFollow(e, s) {
- this.state.addcontactModul=false;
- this.state.visitModul = true;
- if(s) {
- this.getNewWoman(this.props.followData.id);
- this.deletelist(this.props.followData.id)
- };
- },
- //详情保存
- visitSubmit(e){
- e.preventDefault();
- let GlossoryId=false;
- this.state.data.map(function(item) {
- if(!item.followSituation||!item.customerStatus||!item.businessName) {
- GlossoryId = true
- }
- })
- if(this.state.contactType == undefined) {
- message.warning('请选择拜访方式')
- return false;
- };
- if(this.state.lastName == undefined) {
- message.warning('请选择联系人')
- return false;
- }
- if (this.state.result.length<10) {
- message.warning("备注不少于10个字符!");
- return false;
- }
- if(this.state.data.length&&GlossoryId) {
- message.warning("项目名称/最新进度/最新状态不能为空!")
- return false;
- };
- let dataList=this.state.data,
- idsList=[];
- dataList.map((item,index) => {
- idsList.push({
- businessId:item.id||'',
- businessProjectId:item.businessName,
- customerStatus:item.customerStatus,
- followSituation:item.followSituation,
- remarks:item.remarks||''
- })
- })
- this.setState({
- loading: true
- });
- let contactsId = '';
- let conts = this.state.lastName;
- contactsId = this.state.contactsIdArr[conts].id;
- //新增
- $.ajax({
- method: "post",
- dataType: "json",
- url: globalConfig.context + '/api/admin/customer/addFollow',
- data: {
- userBusinessList: JSON.stringify(idsList),
- uid: this.state.uid,
- ocbId: contactsId,
- 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));
- },
- //添加新业务
- addNew(){
- this.state.data.push({
- isEdit: true,
- projectName:'选择',
- businessName:'',
- customerStatus: undefined,
- businessGlossoryId: undefined,
- followSituation: undefined,
- remarks: '',
- });
- this.setState({
- addcontactModul:false,
- data: this.state.data
- })
- },
- componentWillReceiveProps(nextProps) {
- if (nextProps.visitModul && nextProps.followData.id) {
- this.setState({
- result: '',
- contactType: undefined,
- visitModul: true,
- loading: true,
- lastName:undefined,
- nub:'',
- busModul:false,
- addcontactModul:false,
- })
- this.getNewWoman(nextProps.followData.id);
- this.deletelist(nextProps.followData.id)
- };
- },
- render() {
- const formItemLayout = {
- labelCol: { span: 8 },
- wrapperCol: { span: 14 },
- };
- return (
- <div>
- <Modal
- maskClosable={false}
- className="customeDetails"
- footer=""
- title="新增客户跟进"
- width="1000px"
- 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">
- <FormItem
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 20 }}
- label="跟进方式"
- >
- <Radio.Group
- value={this.state.contactType}
- onChange={(e) => {
- this.setState({ contactType: e.target.value });
- }}
- >
- {/*<Radio value={0}>外出</Radio>*/}
- <Radio value={1}>电话</Radio>
- <Radio value={2}>QQ</Radio>
- <Radio value={3}>微信</Radio>
- <Radio value={4}>邮箱</Radio>
- <Radio value={6}>来访面谈</Radio>
- </Radio.Group>
- <span className="mandatory">*</span>
- </FormItem>
- <div className="clearfix">
- {this.state.contacts ? (
- <span></span>
- ) : (
- <FormItem
- className="half-item"
- {...formItemLayout}
- label="联系人"
- >
- <Select
- placeholder="选择联系人"
- style={{ width: 140 }}
- value={this.state.lastName}
- onChange={this.hundleName}
- >
- {this.state.orderStatusOption}
- </Select>
- <span className="mandatory">*</span>
- </FormItem>
- )}
- <FormItem className="half-item" {...formItemLayout}>
- <Button
- type="primary"
- onClick={this.newContacts}
- style={{ marginLeft: "100px" }}
- >
- 添加新联系人
- </Button>
- </FormItem>
- <FormItem
- className="half-item"
- {...formItemLayout}
- label="联系电话"
- >
- <span>{this.state.nub}</span>
- </FormItem>
- <FormItem
- className="half-item"
- {...formItemLayout}
- label="跟进时间"
- >
- <span>{this.state.followTime}</span>
- </FormItem>
- </div>
- <div className="clearfix">
- <FormItem
- labelCol={{ span: 4 }}
- wrapperCol={{ span: 16 }}
- label="跟进备注"
- >
- <span className="mandatory">*<span style={{marginLeft:'10px'}}>客户跟进情况描述(企业上年度销售额,互动情况等.)</span></span>
- <Input
- type="textarea"
- rows={4}
- value={this.state.result}
- placeholder="请输入客户沟通情况与跟进信息,不少于10字"
- required="required"
- onChange={(e) => {
- this.setState({ result: e.target.value });
- }}
- />
- </FormItem>
- </div>
- <div className="clearfix">
- <div
- style={{
- fontSize: "18px",
- marginLeft: "100px",
- marginTop: "15px",
- marginBottom: "10px",
- }}
- >
- 业务意向
- <Button
- onClick={this.addNew}
- style={{
- marginLeft: "420px",
- background: "green",
- color: "#ffffff",
- }}
- >
- 添加新业务
- </Button>
- </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>
- </div>
- <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>
- <AddContact
- addcontactModul={this.state.addcontactModul}
- uids={this.state.uids}
- closeFollow={this.closeFollow}
- />
- <BusName
- businessId={this.state.businessId}
- mid={this.props.followData ? this.props.followData.id : ""}
- busModul={this.state.busModul}
- closeBus={this.closeBus}
- />
- </div>
- );
- }
- })
- export default FollowDetail;
|