kede-client/js/component/manageCenter/channelList/channelunit/detail/visitDetail.jsx

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.js
import 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="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">
                {!(
                  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.districtName}</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;