kede-client/js/component/manageCenter/customer/managementFollow/followUpSummary/index.jsx

import React, { Component } from "react";
import {
  Button,
  DatePicker,
  Form,
  Input,
  message,
  Select,
  Spin,
  Table,
  Tabs,
  Tooltip
} from "antd";
import moment from "moment";
import ShowModalDiv from "@/showModal.jsx";
import { ShowModal, getContactType } from "@/tools.js";
import { ChooseList } from "../../../order/orderNew/chooseList";
import $ from "jquery/src/ajax";
import IntentionDetail from "../../NEW/intentionCustomer/intentionDetail/intentionDetail";
import { getProvince } from '@/NewDicProvinceList';
import Cascaders from "../../../../common/cascaders";

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;

class FollowUpSummary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      changeList: undefined,// 子组件改变的表格title数组
      columns: [
        {
          title: "客户名称",
          dataIndex: "nickname",
          key: "nickname",
          render: text => {
            return (
              <Tooltip title={text}>
                <div
                // style={{
                //   maxWidth: '150px',
                //   overflow: 'hidden',
                //   textOverflow: "ellipsis",
                //   whiteSpace: 'nowrap',
                // }}
                >{text}</div>
              </Tooltip>
            )
          }
        },
        {
          title: '客户类型',
          dataIndex: 'shareType',
          key: 'shareType',
          render: text => {
            //    0-私有 1-公共 2 签单 3外联
            return (
              text === 0 ? '私有客户' :
                text === 1 ? '公共客户' :
                  text === 2 ? '签单客户' :
                    text === 3 ? '外联客户' : ''
            )
          }

        },
        {
          title: '客户初始时间',
          dataIndex: 'startTimes',
          key: 'startTimes',
        },
        {
          title: "跟进方式",
          dataIndex: "contactType",
          key: "contactType",
          render: (text) => {
            return getContactType(text);
          },
        },
        {
          title: "限定项目名称",
          dataIndex: "projectName",
          key: "projectName",
          width: 160,
        },
        {
          title: "跟进人",
          dataIndex: "followName",
          key: "followName",
        },
        {
          title: "跟进类型",
          dataIndex: "type",
          key: "type",
          render: (text, record) => {
            return (
              <div>
                {["客户跟进", "限定项目跟进"][text]}
              </div>
            );
          },
        },
        {
          title: "跟进部门",
          dataIndex: "followDep",
          key: "followDep",
        },
        {
          title: "跟进说明",
          dataIndex: "result",
          key: "result",
          render: (text, record) => {
            return (
              <Tooltip placement="topLeft" title={<div style={{ wordBreak: "break-all" }}>{text}</div>}>
                <div
                  style={{
                    // cursor: "pointer",
                    // width: '150px',
                    // whiteSpace: 'nowrap',
                    // overflow: 'hidden',
                    // textOverflow: 'ellipsis',
                  }}
                >
                  {text}
                </div>
              </Tooltip>
            );
          },
        },
        {
          title: "跟进时间",
          dataIndex: "followTimes",
          key: "followTimes",
        },
        {
          title: "次数",
          dataIndex: "followCount",
          key: "followCount",
        },
        {
          title: "指导意见",
          dataIndex: "guidance",
          key: "guidance",
          render: (text, record) => {
            return (
              <Tooltip placement="topLeft" title={<div style={{ wordBreak: "break-all" }}>{(record.guidanceName ? '(' + record.guidanceName + ')' : '') + text}</div>}>
                <div
                  style={{
                    // cursor: "pointer",
                    // width: '150px',
                    // whiteSpace: 'nowrap',
                    // overflow: 'hidden',
                    // textOverflow: 'ellipsis',
                  }}
                >
                  {record.guidanceName ? '(' + record.guidanceName + ')' : null}
                  {text}
                </div>
              </Tooltip>
            );
          },
        },
        {
          title: "指导时间",
          dataIndex: "guidanceTimes",
          key: "guidanceTimes",
          render: (text) => {
            return (
              <span>{text ? text : ''}</span>
            )
          }
        }
      ],
      dataSource: [],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },

      releaseDate: [],
      releaseDate1: [],
      releaseDate2: [],

      userName: undefined,
      followName: undefined,
      userType: undefined,
      contactType: undefined,
      deps: undefined,

      shiroType: props.shiroType,
    }
    this.reset = this.reset.bind(this);
    this.loadData = this.loadData.bind(this);
    this.selectSuperId = this.selectSuperId.bind(this);
    this.category = this.category.bind(this);
    this.closeDesc = this.closeDesc.bind(this);
    this.tableRowClick = this.tableRowClick.bind(this);
    this.export = this.export.bind(this);
    this.changeList = this.changeList.bind(this);
  }

  componentWillReceiveProps(prevProps) {
    if (prevProps.shiroType !== this.state.shiroType) {
      this.setState({
        shiroType: prevProps.shiroType
      }, () => {
        this.reset();
        // this.selectSuperId();
      })
    }
  }

  componentDidMount() {
    this.props.shiroType != 2 && this.loadData();
    // this.selectSuperId();
  }

  loadData(pageNo) {
    if (this.state.userName == undefined &&
      this.state.followName == undefined &&
      this.state.userType == undefined &&
      this.state.contactType == undefined &&
      this.state.deps == undefined &&
      this.state.releaseDate.length == 0 &&
      this.state.releaseDate1.length == 0 &&
      this.state.releaseDate2.length == 0 &&
      this.props.shiroType == 2
    ) {
      message.warning("请先填写筛选条件！");
      return
    }
    let data = {
      pageNo: pageNo || 1,
      pageSize: this.state.pagination.pageSize,
      userName: this.state.userName || undefined,
      followName: this.state.followName || undefined,
      userType: isNaN(parseInt(this.state.userType)) ? undefined : this.state.userType,
      contactType: isNaN(parseInt(this.state.contactType)) ? undefined : this.state.contactType,
      deps: this.state.deps || undefined,
      followStartTime: this.state.releaseDate[0] ? this.state.releaseDate[0] : undefined,
      followEndTime: this.state.releaseDate[1] ? this.state.releaseDate[1] : undefined,
      createStartTime: this.state.releaseDate1[0] ? this.state.releaseDate1[0] : undefined,
      createEndTime: this.state.releaseDate1[1] ? this.state.releaseDate1[1] : undefined,
      guidanceStartTime: this.state.releaseDate2[0] ? this.state.releaseDate2[0] : undefined,
      guidanceEndTime: this.state.releaseDate2[1] ? this.state.releaseDate2[1] : undefined,
      shiroType: this.state.shiroType
    };
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + '/api/admin/userFollowList',
      data,
      success: function (data) {
        ShowModal(this);
        if (data.error.length === 0) {
          let theArr = [];
          for (let i = 0; i < data.data.list.length; i++) {
            let thisdata = data.data.list[i];
            let diqu = getProvince(thisdata.province, thisdata.city, thisdata.area)
            thisdata.key = i;
            thisdata.lastFollowTime = thisdata.lastFollowTime && thisdata.lastFollowTime.split(" ")[0];
            thisdata.transferTime = thisdata.transferTime && thisdata.transferTime.split(" ")[0];
            thisdata.surplusFollowTime = thisdata.surplusFollowTime && thisdata.surplusFollowTime.split(" ")[0];
            thisdata.surplusSignTime = thisdata.surplusSignTime && thisdata.surplusSignTime.split(" ")[0];
            thisdata.locationProvince = diqu;
            thisdata.uid = thisdata.id;
            theArr.push(thisdata);
          }
          this.state.pagination.current = data.data.pageNo;
          this.state.pagination.total = data.data.totalCount;
          this.setState({
            pageNo: data.data.pageNo,
            dataSource: theArr,
            pagination: this.state.pagination,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  };

  selectSuperId() {
    this.state.data = []
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/organization/selectSuperId",
      data: {},
      success: function (data) {
        if (data.error.length === 0) {
          let theArr = [];
          for (let i = 0; i < data.data.length; i++) {
            let theData = data.data[i];
            theArr.push(
              <Select.Option value={theData.id} key={theData.name}>{theData.name}</Select.Option>
            );
          }
          this.setState({
            contactsOption: theArr,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(function () { }.bind(this));
  }

  //品类数据获取
  category() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/Varieties/getSuperList",
      data: {},
      success: function (data) {
        let thedata = data.data;
        let theArr = [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          thedata.map(function (item, index) {
            theArr.push({
              value: item.id,
              key: item.cname,
            });
          });
        }
        this.setState({
          categoryArr: theArr,
        });
      }.bind(this),
    });
  }

  tableRowClick(record) {
    this.category();
    this.setState({
      rowData: record,
      modalVisible: true,
      modalName: record.nickname,
    })
  }

  closeDesc(e, s) {
    this.setState({
      visitModul: e,
      modalVisible: e,
      showDesc: e,
      tabsKey: '',
    })
    if (s) {
      this.props.shiroType != 2 && this.loadData(this.state.pageNo);
    }
  }

  export() {
    this.setState({
      exportExecLoading: true
    })
    let loading = message.loading('加载中...');
    let data = {
      userName: this.state.userName || undefined,
      followName: this.state.followName || undefined,
      userType: isNaN(parseInt(this.state.userType)) ? undefined : this.state.userType,
      contactType: isNaN(parseInt(this.state.contactType)) ? undefined : this.state.contactType,
      deps: this.state.deps || undefined,
      followStartTime: this.state.releaseDate[0] ? this.state.releaseDate[0] : undefined,
      followEndTime: this.state.releaseDate[1] ? this.state.releaseDate[1] : undefined,
      createStartTime: this.state.releaseDate1[0] ? this.state.releaseDate1[0] : undefined,
      createEndTime: this.state.releaseDate1[1] ? this.state.releaseDate1[1] : undefined,
      guidanceStartTime: this.state.releaseDate2[0] ? this.state.releaseDate2[0] : undefined,
      guidanceEndTime: this.state.releaseDate2[1] ? this.state.releaseDate2[1] : undefined,
      shiroType: this.state.shiroType
    };
    for (let i in data) {
      if (typeof data[i] === "undefined") {
        delete data[i]
      }
    }
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/userFollowListExport",
      data,
      success: function (data) {
        if (data.error.length === 0) {
          this.download(data.data);
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(function () {
      loading();
      this.setState({
        exportExecLoading: false
      })
    }.bind(this));
  }

  download(fileName) {
    window.location.href = globalConfig.context + "/open/download?fileName=" + fileName
  }

  reset() {
    this.setState({
      userName: undefined,
      followName: undefined,
      userType: undefined,
      contactType: undefined,
      deps: undefined,
      releaseDate: [],
      releaseDate1: [],
      releaseDate2: [],
      dataSource: [],
    }, () => {
      this.Cascaders.empty();
      this.props.shiroType != 2 && this.loadData();
    })
  }

  // 更改表格显示数据
  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach((item) => {
      arr.forEach((val) => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr,
    });
  }

  render() {
    return (
      <div className="user-content">
        <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>客户跟进汇总</span>
        </div>
        <Tabs defaultActiveKey="1" className="test">
          <TabPane tab="搜索" key="1">
            <div className="user-search">
              <Form layout="inline">
                <Form.Item style={{ marginTop: '10px' }}>
                  <Input
                    placeholder="客户名称"
                    value={this.state.userName}
                    style={{ width: 150, }}
                    onChange={(e) => {
                      this.setState({ userName: e.target.value });
                    }}
                  />
                </Form.Item>
                <Form.Item style={{ marginTop: '10px' }}>
                  <Input
                    placeholder="跟进人名称"
                    value={this.state.followName}
                    style={{ width: 150 }}
                    onChange={(e) => {
                      this.setState({ followName: e.target.value });
                    }}
                  />
                </Form.Item>
                <Form.Item>
                  <Select
                    placeholder="选择客户类型"
                    style={{ width: 100, }}
                    value={this.state.userType}
                    onChange={
                      (e) => {
                        this.setState({ userType: e })
                      }}
                  >
                    {/*0所有 1私有客户2 公共客户 3签单客户4外联客户*/}
                    <Select.Option value={0}>所有</Select.Option>
                    <Select.Option value={1}>私有客户</Select.Option>
                    <Select.Option value={2}>公共客户</Select.Option>
                    <Select.Option value={3}>签单客户</Select.Option>
                    <Select.Option value={4}>外联客户</Select.Option>
                    <Select.Option value={5}>限定项目客户</Select.Option>
                  </Select>
                </Form.Item>
                <Form.Item>
                  <Select
                    placeholder="选择跟进方式"
                    style={{ width: 100, }}
                    value={this.state.contactType}
                    onChange={(e) => { this.setState({ contactType: e }) }}
                  >
                    <Select.Option value={0}>外出</Select.Option>
                    <Select.Option value={1}>电话</Select.Option>
                    <Select.Option value={2}>QQ</Select.Option>
                    <Select.Option value={3}>微信</Select.Option>
                    <Select.Option value={4}>邮箱</Select.Option>
                    <Select.Option value={5}>公出打卡</Select.Option>
                  </Select>
                </Form.Item>
                <Form.Item style={{ marginTop: '8px' }}>
                  <Cascaders
                    ref={ref => this.Cascaders = ref}
                    placeholder="选择跟进部门"
                    id="id"
                    name="name"
                    children="list"
                    height={32}
                    onSel={(e) => {
                      this.setState({
                        deps: JSON.stringify(e)
                      })
                    }}
                  />
                  {/* <Select
                                        placeholder="选择跟进部门"
                                        style={{ width: '200px', marginRight: '10px' }}
                                        value={this.state.depId}
                                        onChange={
                                            (e) => {
                                                this.setState({ depId: e })
                                            }}
                                        notFoundContent="未获取到上级组织列表"
                                    >
                                        {this.state.contactsOption}
                                    </Select> */}
                </Form.Item>
                <Form.Item label='跟进时间:' style={{ marginTop: '10px' }}>
                  <RangePicker
                    style={{}}
                    value={[
                      this.state.releaseDate[0]
                        ? moment(this.state.releaseDate[0])
                        : null,
                      this.state.releaseDate[1]
                        ? moment(this.state.releaseDate[1])
                        : null,
                    ]}
                    onChange={(data, dataString) => {
                      this.setState({ releaseDate: dataString });
                    }}
                  />
                </Form.Item>
                <Form.Item label='客户初始时间:' style={{ marginTop: '10px' }}>
                  <RangePicker
                    style={{}}
                    value={[
                      this.state.releaseDate1[0]
                        ? moment(this.state.releaseDate1[0])
                        : null,
                      this.state.releaseDate1[1]
                        ? moment(this.state.releaseDate1[1])
                        : null,
                    ]}
                    onChange={(data, dataString) => {
                      this.setState({ releaseDate1: dataString });
                    }}
                  />
                </Form.Item>
                <Form.Item label='指导时间:' style={{ marginTop: '10px' }}>
                  <RangePicker
                    style={{}}
                    value={[
                      this.state.releaseDate2[0]
                        ? moment(this.state.releaseDate2[0])
                        : null,
                      this.state.releaseDate2[1]
                        ? moment(this.state.releaseDate2[1])
                        : null,
                    ]}
                    onChange={(data, dataString) => {
                      this.setState({ releaseDate2: dataString });
                    }}
                  />
                </Form.Item>
                <Form.Item style={{ marginTop: 10 }}>
                  <Button
                    type="primary"
                    style={{ marginLeft: 10, marginRight: 10 }}
                    onClick={() => {
                      this.loadData();
                    }}
                  >
                    搜索
                  </Button>
                  <Button onClick={this.reset}>重置</Button>
                </Form.Item>
              </Form>
            </div>
          </TabPane>
          <TabPane tab="更改表格显示数据" key="2">
            <div style={{ marginLeft: 10 }}>
              <ChooseList
                columns={this.state.columns}
                changeFn={this.changeList}
                changeList={this.state.changeList}
                top={55}
                margin={11}
              />
            </div>
          </TabPane>
          <TabPane tab="导出" key="3">
            <Button style={{ float: "left", margin: 10 }} onClick={this.export}>
              导出excel
            </Button>
          </TabPane>
        </Tabs>
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table
              columns={
                this.state.changeList == undefined
                  ? this.state.columns
                  : this.state.changeList
              }
              dataSource={this.state.dataSource}
              pagination={this.state.pagination}
              onRowClick={this.tableRowClick}
              style={{
                cursor: 'pointer',
              }}
            />
          </Spin>
        </div>
        <IntentionDetail
          isCustomerAdmin={this.props.isCustomerAdmin}
          categoryArr={this.state.categoryArr}
          IntentionData={this.state.rowData}
          modalVisible={this.state.modalVisible}
          isGuidanceLv={this.props.isGuidanceLv}
          isEditGuidanceLv={this.props.isEditGuidanceLv}
          name={this.state.modalName}
          closeDesc={this.closeDesc}
        />
      </div>
    )
  }
}

export default FollowUpSummary;