| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602 | import React from "react";import $ from "jquery/src/ajax";import { Modal, Form, Button, Spin, Table, message, Tag, Tooltip } from "antd";import {  getfllowSituation,  getcustomerStatue,  getClockState,  splitUrl,  getContactType,} from "@/tools.js";// import ImgList from "../../../../../../common/imgList";//F:\developmentFile\kede-client\js\component\common\imgList\index.jsimport ImgList from "../../../../common/imgList/index";const FormItem = Form.Item;const VisitDetail = React.createClass({  getInitialState() {    return {      visitModul: false,      loading: false,      data: [],      publicReleaseLog: [],      followDtails: {},      enclosure: [],      intentionPublicReleaseLog: [        {          title: "状态",          dataIndex: "status",          key: "status",          render: (text) => (            <Tag color={getClockState(text, true).color}>              {getClockState(text, true).title}            </Tag>          ),        },        {          title: "操作人",          dataIndex: "aname",          key: "aname",        },        {          title: "操作时间",          dataIndex: "createTimes",          key: "createTimes",        },        {          title: "备注",          width: 120,          dataIndex: "remarks",          key: "remarks",          render: (text) => {            return (              <Tooltip placement="topLeft" title={text}>                <div                  style={{                    maxWidth: "120px",                    overflow: "hidden",                    textOverflow: "ellipsis",                    whiteSpace: "nowrap",                  }}                >                  {text}                </div>              </Tooltip>            );          },        },        {          title: "操作",          width: 120,          dataIndex: "photoUrl",          key: "photoUrl",          render: (text) => {            let arr = splitUrl(text, ",", globalConfig.avatarHost + "/upload");            return arr.length !== 0 ? (              <Button                ype="primary"                onClick={() => {                  console.log(arr);                  this.setState({                    visitImgModul: true,                    enclosure: arr,                  });                }}              >                查看附件              </Button>            ) : null;          },        },      ],      //业务意向列表      intentionList: [        {          title: "业务名称",          dataIndex: "businessVarietiesName",          width: 120,          key: "businessVarietiesName",        },        {          title: "项目名称",          dataIndex: "businessProjectName",          key: "businessProjectName",          width: 120,        },        {          title: "最新进度",          width: 120,          dataIndex: "followSituation",          key: "followSituation",          render: (text, record, index) => {            return (              <div>                <span>{getfllowSituation(text)}</span>              </div>            );          },        },        {          title: "最新状态",          width: 120,          dataIndex: "customerStatus",          key: "customerStatus",          render: (text, record, index) => {            return (              <div>                <span>{getcustomerStatue(text)}</span>              </div>            );          },        },        {          title: "跟进说明",          width: 120,          dataIndex: "remarks",          key: "remarks",          render: (text, record, index) => {            return (              <Tooltip placement="topLeft" title={text}>                <div>                  {text && text.length > 8 ? text.substr(0, 8) + "…" : text}                </div>              </Tooltip>            );          },        },      ],    };  },  //进入修改拜访记录  visitModify(e) {    this.setState({      visitModul: true,      loading: true,    });    $.ajax({      method: "get",      dataType: "json",      url: globalConfig.context + "/api/admin/customer/toUpdateFollow",      data: {        followId: e,      },      success: function (data) {        let theArr = [];        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];          theArr.push({            key: i,            readOnly: this.props.followData.readOnly,            id: thisdata.ufbId,            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,          });        }        this.setState({          followIds: thedata.followId,          contacts: thedata.contacts,          uid: thedata.uid,          data: theArr,          result: thedata.result,          contactMobile: thedata.contactMobile,          contactType: getContactType(thedata.contactType),          followTime: thedata.followTime,          followSituation: thedata.followSituation,          customerStatus: thedata.customerStatus,        });      }.bind(this),    }).always(      function () {        this.setState({          loading: false,        });      }.bind(this)    );  },  //拜访意向服务列表单个删除  intentionDelet(e, index) {    let detId = this.state.followIds;    if (e.id) {      this.setState({        selectedRowKeys: [],      });      $.ajax({        method: "get",        dataType: "json",        crossDomain: false,        url:          globalConfig.context + "/api/admin/customer/deleteFollowOneBusiness",        data: {          ufbId: e.id,        },      }).done(        function (data) {          if (!data.error.length) {            message.success("删除成功");            this.setState({              loading: false,            });          } else {            message.warning(data.error[0].message);          }          this.visitModify(detId);        }.bind(this)      );    } else {      this.visitModify(detId);    }  },  //拜访modul函数  visitOk(e) {    this.setState({      addcontactModul: false,      visitModul: false,    });  },  visitCancel(e) {    this.setState({      addcontactModul: false,      visitModul: false,    });  },  //详情保存  visitSubmit(e) {    e.preventDefault();    this.setState({      loading: true,    });    let contactsId = "";    if (this.state.keys) {      let conts = this.state.lastName;      contactsId = this.state.contactsIdArr[conts].id;    }    let GlossoryId = false;    this.state.data.map(function (item) {      if (!item.followSituation || !item.customerStatus || !item.businessName) {        GlossoryId = true;      }    });    if (this.state.data.length && GlossoryId) {      message.warning("项目名称/最新进度/最新状态不能为空!");      return false;    }    let dataList = this.state.data,      idsList = [];    dataList.map((item, index) => {      idsList.push({        ufbId: item.id || "",        businessProjectId: item.businessName,        customerStatus: item.customerStatus,        followSituation: item.followSituation,        remarks: item.remarks || "",      });    });    //新增    $.ajax({      method: "post",      dataType: "json",      url: globalConfig.context + "/api/admin/customer/updateFollow",      data: {        followId: this.state.followIds,        userBusinessList: JSON.stringify(idsList),        uid: this.state.uid,        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)    );  },  getFollowDtails(e) {    this.setState({      loading: true,    });    $.ajax({      method: "get",      dataType: "json",      url: globalConfig.context + "/api/admin/release/followDtails",      data: {        id: e,      },      success: function (data) {        if (data.error.length === 0) {          this.setState({            followDtails: data.data || {},          });        } else {          message.warning(data.error[0].message);        }      }.bind(this),    }).always(      function () {        this.setState({          loading: false,        });      }.bind(this)    );  },  getListPublicReleaseLog(e) {    this.setState({      loading: true,    });    $.ajax({      method: "get",      dataType: "json",      url: globalConfig.context + "/api/admin/release/listPublicReleaseLog",      data: {        ufid: e,      },      success: function (data) {        if (data.error.length === 0) {          this.setState({            publicReleaseLog: data.data || [],          });        } else {          message.warning(data.error[0].message);        }      }.bind(this),    }).always(      function () {        this.setState({          loading: false,        });      }.bind(this)    );  },  componentWillReceiveProps(nextProps) {    if (nextProps.visitModul && nextProps.followData.followId) {      this.setState({        visitModul: true,        loading: true,      });      if (nextProps.followData.contactType === "5") {        this.getListPublicReleaseLog(nextProps.followData.followId);        this.getFollowDtails(nextProps.followData.followId);      }      this.visitModify(nextProps.followData.followId);    }  },  render() {    const formItemLayout = {      labelCol: { span: 8 },      wrapperCol: { span: 14 },    };    const followData = this.props.followData || [];    return (      <div>        <Modal          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">                {!(                  this.state.contactType === "公出打卡" &&                  Object.keys(this.state.followDtails).length > 0                ) ? (                  <div>                    <FormItem                      labelCol={{ span: 4 }}                      wrapperCol={{ span: 20 }}                      label="跟进方式"                    >                      <span>{this.state.contactType}</span>                    </FormItem>                    <div className="clearfix">                      {!followData.readOnly && (                        <FormItem                          className="half-item"                          {...formItemLayout}                          label="当前联系人"                        >                          <span>{this.state.contacts}</span>                        </FormItem>                      )}                      <FormItem                        className="half-item"                        {...formItemLayout}                        label="跟进时间"                      >                        <span>{this.state.followTime}</span>                      </FormItem>                      {!followData.readOnly && (                        <FormItem                          className="half-item"                          {...formItemLayout}                          label="联系电话"                        >                          <span>{this.state.contactMobile}</span>                        </FormItem>                      )}                    </div>                    <div className="clearfix">                      <FormItem                        labelCol={{ span: 4 }}                        wrapperCol={{ span: 16 }}                        label="跟进备注"                      >                        {                          <span style={{ wordWrap: "breakWord" }}>                            {this.state.result}                          </span>                        }                      </FormItem>                    </div>                  </div>                ) : null}                {this.state.contactType === "公出打卡" &&                Object.keys(this.state.followDtails).length > 0 ? (                  <div>                    <div className="clearfix">                      <FormItem                        labelCol={{ span: 4 }}                        wrapperCol={{ span: 16 }}                        label="公出企业"                      >                        <span>{this.state.followDtails.nickname}</span>                      </FormItem>                      <FormItem                        labelCol={{ span: 4 }}                        wrapperCol={{ span: 16 }}                        label="公出时间"                      >                        <span>                          {this.state.followDtails.releaseStarts +                            "~" +                            this.state.followDtails.releaseEnds}                        </span>                      </FormItem>                      <FormItem                        labelCol={{ span: 4 }}                        wrapperCol={{ span: 16 }}                        label="公出地点"                      >                        <span>{this.state.followDtails.userName}</span>                      </FormItem>                      <FormItem                        labelCol={{ span: 4 }}                        wrapperCol={{ span: 16 }}                        label="当前状态"                      >                        <span>                          <Tag                            color={                              getClockState(this.state.followDtails.status)                                .color                            }                          >                            {                              getClockState(this.state.followDtails.status)                                .title                            }                          </Tag>                        </span>                      </FormItem>                    </div>                    <div className="clearfix">                      <div                        style={{                          fontSize: "18px",                          marginLeft: "100px",                          marginTop: "15px",                          marginBottom: "10px",                        }}                      >                        公出日志                      </div>                      <Table                        pagination={false}                        columns={this.state.intentionPublicReleaseLog}                        dataSource={this.state.publicReleaseLog}                      />                    </div>                  </div>                ) : null}                {!(                  this.state.contactType === "公出打卡" &&                  Object.keys(this.state.followDtails).length > 0                ) ? (                  <div className="clearfix">                    <div                      style={{                        fontSize: "18px",                        marginLeft: "100px",                        marginTop: "15px",                        marginBottom: "10px",                      }}                    >                      业务意向                    </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>                ) : null}              </div>              {!followData.readOnly && (                <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>        {this.state.visitImgModul ? (          <Modal            className="customeDetails"            footer=""            title="附件"            width="600px"            visible={this.state.visitImgModul}            onOk={() => {              this.setState({                visitImgModul: false,                enclosure: [],              });            }}            onCancel={() => {              this.setState({                visitImgModul: false,                enclosure: [],              });            }}          >            <ImgList fileList={this.state.enclosure} domId={"visitDetail"} />          </Modal>        ) : null}      </div>    );  },});export default VisitDetail;
 |