kede-client/js/component/manageCenter/customer/NEW/signCustomer/intentionDetail/detail/visit.jsx

import React from 'react';
import { Form, Button, Spin, message, Table, Popconfirm, Tooltip, Alert } from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import FollowDetail from '../../followDetail.jsx'
import { getContactType } from '@/tools.js';
import VisitDetail from './visitDetail.jsx';
import PublicSupplement from "../../../../../../publicSupplement";

const Visit = React.createClass({
  getInitialState() {
    return {
      visitArrList: [],
      loading: false,
      visitModul: false,
      visitModuls: false,
      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
                // style={{
                // 	maxWidth: '150px',
                // 	overflow: 'hidden',
                // 	textOverflow: "ellipsis",
                // 	whiteSpace: 'nowrap',
                // }}
                >{text}</div>
              </Tooltip>
            )
          },
        },
        {
          title: "跟进方式",
          dataIndex: "contactType",
          key: "contactType",
          width: 100,
          render: (text) => {
            return getContactType(text);
          },
        },
        {
          title: "联系人",
          dataIndex: "contacts",
          key: "contacts",
          width: 150,
          render: (text, record) => {
            return (
              <div>
                {record.readOnly ? <span>***</span> : <span>{text}</span>}
              </div>
            );
          },
        },
        {
          title: "联系电话",
          dataIndex: "contactMobile",
          key: "contactMobile",
          width: 120,
          render: (text, record) => {
            return (
              <div>
                {record.readOnly ? <span>***</span> : <span>{text}</span>}
              </div>
            );
          },
        },
        {
          title: "跟进人",
          dataIndex: "adminName",
          key: "adminName",
          width: 120
        },
        //   {
        //     title: "跟进说明",
        //     dataIndex: "result",
        //     key: "result",
        // width: 300,
        // render: (text, record) => {
        // 	return (
        // 		<div style={{wordBreak:"break-all"}}>
        // 			<div>{text}</div>
        // 			{
        // 				getContactType(record.contactType) === '公出打卡' && <div style={{
        // 					paddingTop: '15px',
        // 					wordBreak: "break-all",
        // 					display: "flex",
        // 					alignItems: 'flex-end'
        // 				}}>
        // 					补充说明：
        // 					{record.supplement}
        // 					<div style={{paddingLeft: '10px'}}>
        // 						<PublicSupplement infor={record} onCancel={() => {
        // 							this.loadVisit(this.state.ispage);
        // 						}}/>
        // 					</div>
        // 				</div>
        // 			}
        // 		</div>
        // 	)
        // }
        //   },
        {
          title: "跟进时间",
          dataIndex: "followTime",
          key: "followTime",
          width: 125
        },
        {
          title: "公出目标",
          dataIndex: "result",
          key: "result",
          width: 200,
          // render: (text, record) => {
          // 	return (
          // 		<div style={{wordBreak:"break-all"}}>
          // 			<div>{text}</div>
          // 			{
          // 				getContactType(record.contactType) === '公出打卡' && <div style={{
          // 					paddingTop: '15px',
          // 					wordBreak: "break-all",
          // 					display: "flex",
          // 					alignItems: 'flex-end'
          // 				}}>
          // 					{/* 补充说明：
          // 					{record.supplement} */}
          // 					<div style={{paddingLeft: '10px'}}>
          // 						<PublicSupplement infor={record} onCancel={() => {
          // 							this.loadVisit(this.state.ispage);
          // 						}}/>
          // 					</div>
          // 				</div>
          // 			}
          // 		</div>
          // 	)
          // }
        },
        {
          title: "公出计划",
          dataIndex: "plan",
          key: "plan",
          width: 200,
          render: (text) => {
            return (
              <div
              // style={{
              //   width: 50,
              //   overflow: "hidden",
              //   textOverflow: "ellipsis",
              //   whiteSpace: "nowrap",
              // }}
              // title={text}
              >
                {text}
              </div>
            );
          },
        },
        {
          title: "预计效果",
          dataIndex: "expectedEffect",
          key: "expectedEffect",
          width: 200,
          render: (text) => {
            return (
              <div
              // style={{
              //   width: 50,
              //   overflow: "hidden",
              //   textOverflow: "ellipsis",
              //   whiteSpace: "nowrap",
              // }}
              // title={text}
              >
                {text}
              </div>
            );
          },
        },
        {
          title: "本次公出目标总结",
          dataIndex: "supplement",
          key: "supplement",
          width: 200,
          render: (text, record) => {
            return (
              <div style={{ wordBreak: "break-all" }}>
                {
                  getContactType(record.contactType) === '公出打卡' && <div style={{
                    // paddingTop: '15px',
                    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
              // style={{
              //   width: 70,
              //   overflow: "hidden",
              //   textOverflow: "ellipsis",
              //   whiteSpace: "nowrap",
              // }}
              // title={text}
              >
                {text}
              </div>
            );
          },
        },
      ],
    };
  },
  //拜访记录删除
  visitDelet(e) {
    this.setState({
      visitModul: false,
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/deleteFollow",
      data: {
        followId: e.followId, //删除的ID
      }
    }).done(function (data) {
      if (!data.error.length) {
        message.success('删除成功！');
        this.setState({
          loading: false,
        });
      } else {
        message.warning(data.error[0].message);
      };
      this.loadVisit();
    }.bind(this));
  },
  //查看跟进记录列表
  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;
        };
        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();
  },
  detailsModal() {
    this.props.closeDetail(false, false)
  },
  closeModel() {
    this.setState({
      visitModul: false
    })
  },
  //点击整行
  VisitRowClick(record) {
    this.setState({
      followData: record,
      visitModul: true,
    })
  },
  //进入新增拜访记录
  visit() {
    let obj = {
      id: this.props.data.id
    }
    this.setState({
      followData: obj,
      visitModuls: true,
    })
  },
  closeDesc(e, s) {
    this.state.visitModul = e
    this.state.visitModuls = e
    if (s) {
      this.loadVisit()
    }
  },
  componentWillReceiveProps(nextProps) {
    if (nextProps.data.id && nextProps.visitState) {
      this.loadVisit()
    }
    this.setState({
      visitModul: false
    })
  },
  render() {
    return (
      <div className="clearfix">
        <Alert message="注:面谈公出补充,沟通完后记录今天交流的情况。计划下一次什么时候再面谈?该如何面谈?该如何跟进?" banner />
        <Button
          onClick={(e) => {
            e.stopPropagation()
            if (!this.props.data.orgCode) {
              message.warning(`请先完善"企业统一社会信用代码"`)
              return
            }
            this.visit();
          }}
          type="primary"
          style={{ marginTop: '10px', float: 'right' }}
        >
          客户跟进
        </Button>
        <Spin spinning={this.state.loading}>
          <Table
            size="middle"
            style={{ marginTop: '60px' }}
            pagination={this.state.paginations}
            columns={this.state.visitsList}
            dataSource={this.state.visitArrList}
            scroll={{ x: '120%', y: 440 }}
            onRowClick={this.VisitRowClick}
          />
        </Spin>
        <VisitDetail
          categoryArr={this.props.categoryArr}
          followData={this.state.followData}
          visitModul={this.state.visitModul}
          closeDesc={this.closeDesc}
          mid={this.props.data.id}
        />
        <FollowDetail
          categoryArr={this.props.categoryArr}
          followData={this.state.followData}
          isFlag={true}
          visitModul={this.state.visitModuls}
          closeDesc={this.closeDesc}
          loadData={this.props.loadData}
        />
      </div>
    )
  }
})
export default Visit;