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

import React from "react";
import {
  Button,
  Spin,
  message,
  Table,
  Tooltip,
  Input,
  Modal,
  Alert,
} from "antd";
import $ from "jquery/src/ajax";
import FollowDetail from "../../../../../component/manageCenter/customer/NEW/intentionCustomer/followDetail";
import { getContactType } from "@/tools.js";
import PublicSupplement from "../../../../../component/publicSupplement/index";
import VisitDetail from "./visitDetail";
const confirm = Modal.confirm;

const Visit = React.createClass({
  getInitialState() {
    return {
      visitArrList: [],
      loading: false,
      visitModul: false,
      visitModuls: false,
      followId: 0,
      ispage: 1,
      paginations: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadVisit(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      visitsList: [
        {
          title: "客户名称",
          dataIndex: "nickname",
          key: "nickname",
          width: 150,
          render: (text) => {
            return (
              <Tooltip title={text}>
                <div>{text}</div>
              </Tooltip>
            );
          },
        },
        {
          title: "跟进方式",
          dataIndex: "contactType",
          key: "contactType",
          width: 80,
          render: (text) => {
            return getContactType(text);
          },
        },
        {
          title: "联系人",
          dataIndex: "contacts",
          key: "contacts",
          width: 100,
          render: (text, record) => {
            return (
              <div>
                {record.readOnly ? <span>***</span> : <span>{text}</span>}
              </div>
            );
          },
        },
        {
          title: "联系电话",
          dataIndex: "contactMobile",
          key: "contactMobile",
          width: 100,
          render: (text, record) => {
            return (
              <div>
                {record.readOnly ? <span>***</span> : <span>{text}</span>}
              </div>
            );
          },
        },
        {
          title: "跟进人",
          dataIndex: "adminName",
          key: "adminName",
          width: 80,
        },
        {
          title: "跟进时间",
          dataIndex: "followTime",
          key: "followTime",
          width: 110,
        },
        {
          title: "公出目标",
          dataIndex: "result",
          key: "result",
          width: 200,
        },
        {
          title: "公出计划",
          dataIndex: "plan",
          key: "plan",
          width: 200,
          render: (text) => {
            return <div>{text}</div>;
          },
        },
        {
          title: "预计效果",
          dataIndex: "expectedEffect",
          key: "expectedEffect",
          width: 200,
          render: (text) => {
            return <div>{text}</div>;
          },
        },
        {
          title: "本次公出目标总结",
          dataIndex: "supplement",
          key: "supplement",
          width: 200,
          render: (text, record) => {
            return (
              <div style={{ wordBreak: "break-all" }}>
                {getContactType(record.contactType) === "公出打卡" && (
                  <div
                    style={{
                      wordBreak: "break-all",
                    }}
                  >
                    {text}
                    <div>
                      <PublicSupplement
                        closeModel={this.closeModel}
                        infor={record}
                        onCancel={() => {
                          this.loadVisit(this.state.ispage);
                        }}
                      />
                    </div>
                  </div>
                )}
              </div>
            );
          },
        },
        {
          title: "下一次公出计划",
          dataIndex: "nextPlan",
          key: "nextPlan",
          width: 200,
          render: (text) => {
            return <div>{text}</div>;
          },
        },
        {
          title: "指导时间",
          dataIndex: "guidanceTime",
          key: "guidanceTime",
          width: 105,
          render: (text, record) => {
            return <span>{text ? text : ""}</span>;
          },
        },
        {
          title: "指导意见",
          dataIndex: "abc",
          key: "abc",
          width: 200,
          render: (text, record) => {
            return (
              <div>
                {record.guidance ? (
                  <Tooltip
                    placement="topLeft"
                    title={
                      <div style={{ wordBreak: "break-all" }}>
                        {(record.guidanceName
                          ? "(" + record.guidanceName + ")"
                          : "") + record.guidance}
                      </div>
                    }
                  >
                    <div
                      style={{
                        cursor: "pointer",
                        width: "150px",
                        whiteSpace: "nowrap",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                      }}
                    >
                      {record.guidanceName
                        ? "(" + record.guidanceName + ")"
                        : null}
                      {record.guidance}
                    </div>
                  </Tooltip>
                ) : (
                  <span>暂未指导</span>
                )}
              </div>
            );
          },
        },
      ],
      guidanceVisible: false,
      guidance: "",
    };
  },
  closeModel() {
    this.setState({
      visitModul: false,
    });
  },
  //查看跟进记录列表
  loadVisit(pageNo) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/listFollowHistory",
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.paginations.pageSize,
        uid: this.props.data.id, //名称1
      },
      success: function (data) {
        let theArr = [];
        if (data.error.length || 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(thisdata);
          }
          this.state.paginations.current = data.data.pageNo;
          this.state.paginations.total = data.data.totalCount;
          this.setState({
            ispage: data.data.pageNo,
          });
        }
        if (data.data.list && !data.data.list.length) {
          this.state.paginations.current = 0;
          this.state.paginations.total = 0;
        }
        this.setState({
          visitArrList: theArr,
          paginations: this.state.paginations,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  componentWillMount() {
    this.loadVisit();
  },
  //点击整行
  VisitRowClick(record) {
    this.setState({
      followData: record,
      visitModul: true,
    });
  },
  //进入新增拜访记录
  visit() {
    let obj = {
      id: this.props.data.id,
    };
    this.setState({
      followData: obj,
      visitModuls: true,
    });
  },
  componentDidMount() {
    this.setState({
      visitModul: false,
    });
  },
  closeDesc(e, s) {
    this.state.visitModul = e;
    this.state.visitModuls = e;
    if (s) {
      this.loadVisit();
    }
  },

  componentWillReceiveProps(nextProps) {
    if (nextProps.data.id) {
      this.loadVisit();
    }
    this.setState({
      visitModul: false,
    });
  },
  render() {
    const { addbt = true } = this.props
    return (
      <div className="clearfix">
        <Alert
          message="注:面谈公出补充,沟通完后记录今天交流的情况。计划下一次什么时候再面谈?该如何面谈?该如何跟进?"
          banner
        />
        {
          addbt &&
          <Button
            onClick={(e) => {
              e.stopPropagation();
              this.visit();
            }}
            type="primary"
            style={{ marginTop: "10px", float: "right" }}
          >
            渠道跟进
          </Button>
        }
        <Spin spinning={this.state.loading}>
          <Table
            size="middle"
            style={{
              marginTop: "60px",
              cursor: "pointer",
            }}
            pagination={this.state.paginations}
            columns={this.state.visitsList}
            dataSource={this.state.visitArrList}
            onRowClick={this.VisitRowClick}
            scroll={{ x: "130%", y: 440 }}
          />
        </Spin>
        <FollowDetail
          categoryArr={this.props.categoryArr}
          followData={this.state.followData}
          visitModul={this.state.visitModuls}
          closeDesc={this.closeDesc}
          loadData={this.loadVisit}
        />
        <VisitDetail
          categoryArr={this.props.categoryArr}
          followData={this.state.followData}
          visitModul={this.state.visitModul}
          closeDesc={this.closeDesc}
          mid={this.props.data.id}
        />
      </div>
    );
  },
});
export default Visit;