kede-client/js/component/manageCenter/customer/NEW/intentionCustomer/intentionDetail/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 '../../followDetail.jsx'
import { getContactType } from '@/tools.js';
import VisitDetail from './visitDetail.jsx';

import PublicSupplement from '../../../../../../publicSupplement';

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
                // style={{
                // 	maxWidth: '100px',
                // 	overflow: 'hidden',
                // 	textOverflow: "ellipsis",
                // 	whiteSpace: 'nowrap',
                // }}
                >{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: 120,
          render: (text, record) => {
            return (
              <div>
                {record.readOnly ? <span>***</span> : <span>{text}</span>}
              </div>
            );
          },
        },
        {
          title: "限定项目名称",
          dataIndex: "projectName",
          key: "projectName",
          width: 160,
        },
        {
          title: "跟进人",
          dataIndex: "adminName",
          key: "adminName",
          width: 80
        },
        {
          title: "跟进类型",
          dataIndex: "type",
          key: "type",
          width: 100,
          render: (text, record) => {
            return (
              <div>
                {["客户跟进", "限定项目跟进"][text]}
              </div>
            );
          },
        },
        {
          title: "跟进时间",
          dataIndex: "followTime",
          key: "followTime",
          width: 75
        },
        {
          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>
            );
          },
        },
        {
          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> : (this.props.isEditGuidanceLv ? <Button
                    onClick={(e) => {
                      e.stopPropagation();
                      this.setState({
                        guidanceVisible: true,
                        visitModul: false,
                        followId: record.followId
                      })
                    }}
                    type="primary"
                  >
                    立即指导
                  </Button> : <span>暂未指导</span>)}
              </div>
            );
          },
        },
      ],
      guidanceVisible: false,
      guidance: ''
    };
  },
  closeModel() {
    this.setState({
      visitModul: false
    })
  },
  //拜访记录删除
  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;
          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();
  },
  detailsModal() {
    this.props.closeDetail(false, false)
  },
  //点击整行
  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()
    }
  },
  //发布指导意见
  releaseGuidance(e) {
    e.stopPropagation();
    if (!this.state.guidance) {
      message.info('指导意见不能为空')
      return;
    }
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/addGuidance",
      data: {
        guidance: this.state.guidance,
        followId: this.state.followId,
      },
    }).done(function (data) {
      if (!data.error.length) {
        message.success("发布成功");
        this.loadVisit(this.state.ispage);
        this.setState({
          loading: false,
          guidanceVisible: false,
        });
      } else {
        message.warning(data.error[0].message);
      }
    }.bind(this));
  },
  componentWillReceiveProps(nextProps) {
    if (nextProps.data.id && nextProps.visitState) {
      this.loadVisit()
    }
    this.setState({
      visitModul: false
    })
  },
  render() {
    const { isLimit = false } = this.props
    return (
      <div className="clearfix">
        <Alert message="注:面谈公出补充,沟通完后记录今天交流的情况。计划下一次什么时候再面谈?该如何面谈?该如何跟进?" banner />
        {!this.props.isGuidanceLv ?
          <Button
            onClick={(e) => {
              e.stopPropagation();
              // 是限定项目
              if (!isLimit) {
                if (!this.props.data.orgCode) {
                  message.warning(`请先完善"企业统一社会信用代码"`)
                  return
                }
              }
              this.visit();
            }}
            type="primary"
            style={{ marginTop: '10px', float: 'right' }}
          >
            客户跟进
          </Button> : <div />}
        <Spin spinning={this.state.loading}>
          <Table
            size="middle"
            style={{ marginTop: this.props.isGuidanceLv ? '0px' : '60px', cursor: 'pointer', }}
            pagination={this.state.paginations}
            columns={this.state.visitsList}
            dataSource={this.state.visitArrList}
            onRowClick={this.VisitRowClick}
            scroll={{ x: '140%', y: 440 }}
          />
        </Spin>
        <VisitDetail
          categoryArr={this.props.categoryArr}
          followData={this.state.followData}
          visitModul={this.state.visitModul}
          closeDesc={this.closeDesc}
          mid={this.props.data.id}
        />
        <FollowDetail
          isLimit={this.props.isLimit}
          details={this.props.data}
          categoryArr={this.props.categoryArr}
          followData={this.state.followData}
          visitModul={this.state.visitModuls}
          closeDesc={this.closeDesc}
          loadData={this.loadVisit}
        />
        {/*指导意见*/}
        {this.state.guidanceVisible ? <Modal
          className="customeDetails"
          title="指导意见"
          width='500px'
          visible={this.state.guidanceVisible}
          onOk={() => {
            this.setState({
              guidanceVisible: false,
              guidance: '',
            }, () => {
              this.loadVisit();
            })
          }}
          onCancel={() => {
            this.setState({
              guidanceVisible: false,
              guidance: '',
            }, () => {
              this.loadVisit();
            })
          }}
          footer=''
        >
          <Spin spinning={this.state.loading}>
            <div style={{
              display: 'flex',
              flexFlow: 'column',
            }}>
              <Input
                style={{ width: '400px', height: '50px' }}
                placeholder="请输入指导意见"
                type={'textarea'}
                onChange={(e) => {
                  this.setState({
                    guidance: e.target.value,
                  })
                }}
              />
              <Button
                type="primary"
                style={{ marginTop: "10px", marginBottom: '10px' }}
                onClick={(e) => {
                  let _this = this;
                  confirm({
                    title: '确定要提交本次指导意见吗?',
                    content: '指导意见提交成功后无法修改',
                    onOk() {
                      _this.releaseGuidance(e);
                    },
                    onCancel() { },
                  });
                }}
              >
                保存
              </Button>
            </div>
          </Spin>
        </Modal> : <div />}
      </div>
    )
  }
})
export default Visit;