kede-client/js/component/manageCenter/customer/operationalData/finalFollowup/index.jsx

import React, { Component } from 'react';
import { AutoComplete, Button, DatePicker, Input, Spin, Table, Select, message, Tabs, Tag, Tooltip, } from "antd";
import $ from "jquery/src/ajax";
import ShowModalDiv from "@/showModal.jsx";
import { ChooseList } from "../../../order/orderNew/chooseList";
import moment from "moment";
import './index.less';

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
class FinalFollowup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageNo: 1,
      totalPage: 0,
      searchInfor: {},//查询条件
      loading: false,
      changeList: undefined,// 子组件改变的表格title数组
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.setState({
            pageNo: page,
          });
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      columns: [
        {
          title: "客户名称",
          dataIndex: "nickname",
          key: "nickname",
        },
        {
          title: "签单类型",
          dataIndex: "shareType",
          key: "shareType",
          render: (text) => (
            <div>{["私有", "公共", "签单", "外联", "渠道"][text]}</div>
          )
        },
        {
          title: "跟单人",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "最新跟进时间",
          dataIndex: "lastFollowTimeStr",
          key: "lastFollowTimeStr",
        },
        {
          title: "未跟进天数",
          dataIndex: "days",
          key: "days",
        }
      ],
      dataSource: [],
    };
    this.loadData = this.loadData.bind(this);
    this.exportAll = this.exportAll.bind(this);
    this.search = this.search.bind(this);
    this.reset = this.reset.bind(this);
    this.changeList = this.changeList.bind(this);
    this.selectSuperId = this.selectSuperId.bind(this);
    this.supervisor = this.supervisor.bind(this);
    this.httpChange = this.httpChange.bind(this);
    this.selectAuto = this.selectAuto.bind(this);
    this.blurChange = this.blurChange.bind(this);
  }

  componentWillMount() {
    this.loadData();
  }

  // 列表数据
  loadData(pageNo, pageSize) {
    const { searchInfor, pagination } = this.state
    this.setState({
      loading: true,
    });
    let datas = Object.assign(searchInfor, {
      pageNo: pageNo || 1,
      pageSize: pageSize || 10,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/selectUserLastSign",
      data: datas,
      success: function (data) {
        this.setState({
          loading: false,
        });
        if (data.error && data.error.length === 0) {
          if (data.data.list) {
            pagination.current = data.data.pageNo;
            pagination.total = data.data.totalCount;
            if (data.data && data.data.list && !data.data.list.length) {
              pagination.current = 0;
              pagination.total = 0;
            }
            this.setState({
              dataSource: data.data.list,
              pagination: this.state.pagination,
              pageNo: data.data.pageNo,
              totalPage: data.data.totalPage,
            });
          } else {
            this.setState({
              dataSource: data.data,
              pagination: false,
            });
          }
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }

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

  // 导出当前列表
  exportAll() {
    message.config({
      duration: 20,
    });
    let loading = message.loading("下载中...");
    this.setState({
      exportPendingLoading: true,
    });
    let obj1 = JSON.parse(JSON.stringify(this.state.searchInfor));
    // data = Object.assign(data, obj1);
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: "/api/admin/customer/selectUserLastSign/export",
      data: obj1,
      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({
          exportPendingLoading: false,
        });
      }.bind(this)
    );
  }

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

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

  supervisor(e) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/listAdminByName",
      data: {
        adminName: e,
        status: "2",
      },
      success: function (data) {
        if (data.error && data.error.length === 0) {
          this.setState({
            customerArr: data.data,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(function () { }.bind(this));
  }

  httpChange(e) {
    if (e.length >= 1) {
      this.supervisor(e);
    }
    this.setState({
      followAname: e,
    });
  }

  selectAuto(value, options) {
    this.setState({
      followAname: value,
    });
  }

  blurChange(e) {
    const { searchInfor } = this.state
    let theType = undefined;
    let contactLists = this.state.customerArr || [];
    if (e) {
      contactLists.map(function (item) {
        if (item.name == e.toString()) {
          theType = item.id;
        }
      });
    }
    this.setState({
      searchInfor: Object.assign(searchInfor, {
        aid: theType,
      }),
    });
  }

  // 搜索
  search() {
    this.setState({
      selectedRowKeys: []
    })
    this.loadData();
  }

  // 重置
  reset() {
    this.setState({
      searchInfor: JSON.parse(JSON.stringify({})),
      followAname: undefined
    }, () => {
      this.loadData();
    })
  }

  render() {
    const { searchInfor } = this.state
    const dataSources = this.state.customerArr || [];
    const options = dataSources.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    return (
      <div className="user-content finalfollowup">
        <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">
          <TabPane tab="搜索" key="1">
            <div
              className="user-search"
              style={{
                marginTop: "10px",
                marginLeft: "10px",
                marginRight: "10px",
              }}
            >
              <span style={{ marginRight: "10px" }}>
                <Input
                  style={{ width: 160 }}
                  placeholder="输入客户名称"
                  value={searchInfor.nickname}
                  onChange={e => {
                    this.setState({
                      searchInfor: Object.assign(searchInfor, {
                        nickname: e.target.value,
                      }),
                    });
                  }}
                />
              </span>
              <span style={{ marginRight: "10px" }}>
                <AutoComplete
                  className="certain-category-search"
                  dropdownClassName="certain-category-search-dropdown"
                  dropdownMatchSelectWidth={false}
                  style={{ width: 160 }}
                  dataSource={options}
                  placeholder="跟进人姓名"
                  value={this.state.followAname}
                  onChange={this.httpChange}
                  filterOption={true}
                  onBlur={this.blurChange}
                  onSelect={this.selectAuto}
                >
                  <Input />
                </AutoComplete>
              </span>

              <span style={{ marginRight: "10px" }}>
                <Select
                  style={{ width: 120 }}
                  placeholder="类型"
                  value={searchInfor.shareType}
                  onChange={(e) => {
                    this.setState({
                      searchInfor: Object.assign(searchInfor, {
                        shareType: e,
                      }),
                    });
                  }}
                >
                  <Option value={0}>私有</Option>
                  <Option value={2}>签单</Option>
                  <Option value={3}>外联</Option>
                  <Option value={4}>渠道</Option>
                </Select>
              </span>

              <span style={{ marginRight: "10px" }}>
                <Select
                  style={{ width: 120 }}
                  placeholder="未跟进天数"
                  value={searchInfor.daysType}
                  onChange={(e) => {
                    this.setState({
                      searchInfor: Object.assign(searchInfor, {
                        daysType: e,
                      }),
                    });
                  }}
                >
                  <Option value={0}>15天</Option>
                  <Option value={1}>30天</Option>
                  <Option value={2}>60天</Option>
                  <Option value={3}>90天</Option>
                  <Option value={4}>180天</Option>
                  <Option value={5}>1年</Option>
                  <Option value={6}>2年</Option>
                </Select>
              </span>

              <Button
                type="primary"
                onClick={this.search}
                style={{ marginRight: "10px", marginBottom: "10px" }}
              >
                搜索
              </Button>
              <Button
                onClick={this.reset}
                style={{ marginRight: "10px", marginBottom: "10px" }}
              >
                重置
              </Button>
            </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="导出Excel" key="3">
            <Button
              type="primary"
              style={{ margin: "11px 0px 10px 10px" }}
              onClick={this.exportAll}
            >
              导出当前列表
            </Button>
          </TabPane>
        </Tabs>
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table
              bordered
              columns={
                this.state.changeList == undefined
                  ? this.state.columns
                  : this.state.changeList
              }
              dataSource={this.state.dataSource}
              pagination={this.state.pagination}
            />
          </Spin>
        </div>
      </div>
    )
  }
}

export default FinalFollowup;