kede-client/js/component/manageCenter/customer/NEW/signCustomer/followDetail.jsx

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, getfllowSituation, getcustomerStatue } from '@/tools.js';
const FormItem = Form.Item;
import AddContact from './followDetail/addContact.jsx';
import BusName from '../intentionCustomer/followDetail/businessName';


const FollowDetail = React.createClass({
  getInitialState() {
    return {
      visitModul: false,
      loading: false,
      data: [],
      busModul: false,
      intentionList: [
        {
          title: '业务名称',
          dataIndex: 'businessVarietiesName',
          width: 120,
          key: 'businessVarietiesName',
          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: 'businessProjectName',
          key: 'businessProjectName',
          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>
              ) :
                <Popconfirm title="再次签单?" onConfirm={(e) => { this.againProjectTask(record, index) }} okText="再次签单" cancelText="取消">
                  <Button style={{ marginRight: '10px', color: '#ffffff', background: '#58a3ff', 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: [],
    });
  },
  //签单
  againProjectTask(e, index) {
    this.setState({
      loading: true,
      selectedRowKeys: [],
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/againProjectTask",
      data: {
        uid: e.uids,
        projectId: e.businessName,
      }
    }).done(function (data) {
      if (!data.error.length) {
        message.success('签单成功');
        if (this.props.isFlag) {
          this.deletelist(this.props.followData.id)
        } else {
          this.props.loadData();
        }
        this.setState({
          loading: false,
        });
      } else {
        message.warning(data.error[0].message);
      };
      //this.deletelist(this.props.followData.id)
    }.bind(this));

  },
  //拜访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/toAddFollowOnLock',
      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 = {};
        };
        if (data.data.userBusinessList[0] != null) {
          for (let i = 0; i < data.data.userBusinessList.length; i++) {
            let thisdata = data.data.userBusinessList[i];
            if (thisdata != null) {
              listArr.push({
                key: i,
                id: thisdata.businessId,
                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,
                uid: thisdata.uid,
                uids: data.data.uid

              });
            }
          };
        }

        this.setState({
          contacts: thedata.contacts,
          uids: data.data.uid,
          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;
    };
    this.setState({
      loading: true
    });
    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 || ''
      })
    });
    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();
        this.props.loadData();
      } 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="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">
                <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>
                    <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"
                        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;