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

import React, { Component } from 'react';
import {
  AutoComplete,
  Button,
  Cascader,
  DatePicker,
  Icon,
  Input,
  message,
  Modal,
  Select,
  Spin,
  Table,
  Tabs,
  Tag, Tooltip
} from "antd";
import { citySelect, provinceList } from '@/NewDicProvinceList';
import { getSocialAttribute, ShowModal } from "@/tools.js";
import ShowModalDiv from "@/showModal.jsx";
import moment from "moment";
import $ from "jquery/src/ajax";
import IntentionDetail from "../../NEW/intentionCustomer/intentionDetail/intentionDetail";
import { ChooseList } from "../../../order/orderNew/chooseList";

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

class CustomerFollow extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nameSearch: '',
      provinceSearch: undefined,
      addressSearch: '',
      level: undefined,
      releaseDate: [],
      selectedRowKeys: [],
      sortType: 0,

      filteredInfo: null,
      sortedInfo: null,

      columns: [
        {
          title: "客户名称",
          dataIndex: "name",
          key: "name",
          render: text => {
            return (
              <Tooltip title={text}>
                <div
                  // style={{
                  //   maxWidth: '150px',
                  //   overflow: 'hidden',
                  //   textOverflow: "ellipsis",
                  //   whiteSpace: 'nowrap',
                  // }}
                >{text}</div>
              </Tooltip>
            )
          }
        },
        {
          title: "地区",
          dataIndex: "locationProvince",
          key: "locationProvince",
        },
        // {
        //     title: "联系人",
        //     dataIndex: "contacts",
        //     key: "contacts",
        // },
        // {
        //     title: "联系电话",
        //     dataIndex: "contactMobile",
        //     key: "contactMobile",
        // },
        {
          title: "社会性质",
          dataIndex: "societyTag",
          key: "societyTag",
          render: (text) => {
            return getSocialAttribute(text);
          },
        },
        {
          title: "客户初始时间",
          dataIndex: "transferTime",
          key: "transferTime",
        },
        // {
        //     title: "剩余私有天数",
        //     dataIndex: "surplusFollowTime",
        //     key: "surplusFollowTime",
        // },
        // {
        //     title: "剩余签单天数",
        //     dataIndex: "surplusSignTime",
        //     key: "surplusSignTime",
        // },
        {
          title: "最新跟进时间",
          dataIndex: "lastFollowTime",
          key: "lastFollowTime",
          //0无 1转换倒序 2转换正序
          sorter: true,
          sortOrder: (this.sortedInfo || {}).columnKey === 'lastFollowTime' && (this.sortedInfo || {}).order,
          filteredValue: (this.filteredInfo || {}).lastFollowTime || null,
        },
        {
          title: "客户等级",
          dataIndex: "level",
          key: "level",
          render: (text) => {
            if (text === 0) {
              return <Tag color="#87d068">一般客户</Tag>;
            } else if (text === 1) {
              return <Tag color="#D2691E">意向客户</Tag>;
            } else if (text === 2) {
              return <Tag color="#FF0000">重点客户</Tag>;
            } else {
              return "";
            }
          },
        },
        {
          title: "跟进人",
          dataIndex: "aName",
          key: "aName",
        },
        {
          title: "跟进操作",
          dataIndex: "abc",
          key: "abc",
          render: (text, record, index) => {
            return (
              <div>
                <Button
                  onClick={(e) => {
                    e.stopPropagation();
                    this.setState({
                      tabsKey: "4",
                    }, () => {
                      this.tableRowClick(record)
                    })
                  }}
                  type="primary"
                >
                  {this.props.isEditGuidanceLv ? '指导' : '查看指导'}
                </Button>
              </div>
            );
          },
        },
      ],

      provinces: [],
      dataSource: [],
      categoryArr: [],
      modalName: '',
      modalVisible: false,
      basicState: false,
      contactState: false,
      rowData: {},
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      loading: false,
      ispage: 1,
      guidance: '',
      tabsKey: '',
    };
    this.callback = this.callback.bind(this);
    this.loadData = this.loadData.bind(this);
    this.reset = this.reset.bind(this);
    this.tableRowClick = this.tableRowClick.bind(this);
    this.closeDesc = this.closeDesc.bind(this);
    this.releaseGuidance = this.releaseGuidance.bind(this);
    this.changeList = this.changeList.bind(this);
  }

  componentDidMount() {
    this.loadData();
    this.category();
    //城市
    let Province = [];
    provinceList.map(function (item) {
      let id = String(item.id);
      Province.push(
        <Select.Option value={id} key={item.name}>
          {item.name}
        </Select.Option>
      );
    });
    this.setState({
      provinces: Province
    })
  }

  callback() {

  }

  loadData(pageNo) {
    this.setState({
      loading: true,
    });
    let api = '/api/admin/customer/listFollowManagement';
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + api,
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.pagination.pageSize,
        level: this.state.level ? this.state.level : undefined,
        name: this.state.nameSearch,
        province: !this.state.addressSearch.length
          ? this.state.provinceSearch
          : this.state.addressSearch[0],
        city: !this.state.addressSearch.length
          ? ""
          : this.state.addressSearch[1],
        startDate: this.state.releaseDate[0],
        endDate: this.state.releaseDate[1],
        sortType: this.state.sortType,
      },
      success: function (data) {
        ShowModal(this);
        let theArr = [];
        if (data.error.length !== 0) {
          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];
            let diqu =
              (thisdata.province == null ? "" : thisdata.province) +
              (thisdata.city == null ? "" : "-" + thisdata.city) +
              (thisdata.area == null ? "" : "-" + thisdata.area);
            thisdata.key = i;
            thisdata.id = thisdata.uid;
            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;
            theArr.push(thisdata);
          }
          this.state.pagination.current = data.data.pageNo;
          this.state.pagination.total = data.data.totalCount;
          if (data.data && data.data.list && !data.data.list.length) {
            this.state.pagination.current = 0;
            this.state.pagination.total = 0;
          }
          this.setState({
            ispage: data.data.pageNo,
            dataSource: theArr,
            pagination: this.state.pagination,
          });
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  };

  reset() {
    this.setState({
      nameSearch: '',
      provinceSearch: undefined,
      addressSearch: '',
      level: undefined,
      releaseDate: [],
      selectedRowKeys: [],
      sortType: 0,
      filteredInfo: null,
      sortedInfo: null,
    }, () => {
      this.loadData();
    });
  };

  //品类数据获取
  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) {      //key 控制弹窗初始显示第几级
    this.setState({
      selectedRowKeys: [],
      modalVisible: true,
      basicState: true,
      contactState: true,
      modalName: record.name,
      rowData: record,
    });
  };

  closeDesc(e, s) {
    this.setState({
      basicState: e,
      visitModul: e,
      modalVisible: e,
      showDesc: e,
      tabsKey: '',
    })
    if (s) {
      this.loadData(this.state.ispage);
    }
  }

  //发布指导意见
  releaseGuidance() {
    if (!this.state.guidance) {
      message.info('指导意见不能为空')
      return;
    }
    this.setState({
      loading: true,
    });
    let _this = this;
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/pushReleaseUser",
      data: {
        guidance: this.state.guidance,
      },
      success: function (data) {
        let thedata = data.data;
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          message.success("发布成功");
          _this.loadData(this.state.ispage);
        }

      }.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
    });
  }

  render() {
    let { sortedInfo, filteredInfo, columns } = this.state;
    return (
      <div className="user-content">
        <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
        <div className="content-title">
          <span>指导意见</span>
        </div>
        <Tabs defaultActiveKey="1" className="test">
          <TabPane tab="搜索" key="1">
            <div className="user-search">
              <Input
                placeholder="客户名称"
                value={this.state.nameSearch}
                style={{ width: 150, marginRight: 10, marginLeft: 10 }}
                onChange={(e) => {
                  this.setState({ nameSearch: e.target.value });
                }}
              />
              <Select
                placeholder="选择地区"
                style={{ width: 80 }}
                value={this.state.provinceSearch}
                onChange={(e) => {
                  this.setState({ provinceSearch: e });
                }}
              >
                {this.state.provinces}
              </Select>
              <span style={{ marginRight: "10px" }}>
                <Cascader
                  options={citySelect()}
                  value={this.state.addressSearch}
                  placeholder="选择城市"
                  onChange={(e, pre) => {
                    this.setState({ addressSearch: e });
                  }}
                />
              </span>
              <Select
                style={{ width: 120 }}
                value={this.state.level}
                onChange={(e) => {
                  this.setState({ level: e });
                }}
                placeholder="选择客户等级"
              >
                <Select.Option value="0">一般客户</Select.Option>
                <Select.Option value="1">意向客户</Select.Option>
                <Select.Option value="2">重点客户</Select.Option>
              </Select>
              <RangePicker
                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 });
                }}
              />
              <Button
                type="primary"
                style={{ marginLeft: "10px", marginRight: 10 }}
                onClick={() => {
                  this.loadData();
                }}
              >
                搜索
              </Button>
              <Button onClick={this.reset}>重置</Button>
            </div>
          </TabPane>
          <TabPane tab="更改表格显示数据" key="2">
            <div style={{ marginLeft: 10 }}>
              <ChooseList
                columns={columns}
                changeFn={this.changeList}
                changeList={this.state.changeList}
                top={55}
                margin={11}
              />
            </div>
          </TabPane>
        </Tabs>
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table
              columns={
                this.state.changeList
                  ? this.state.changeList
                  : columns
              }
              dataSource={this.state.dataSource}
              pagination={this.state.pagination}
              onRowClick={this.tableRowClick}
              style={{
                cursor: 'pointer',
              }}
              onChange={(pagination, filters, sorter) => {
                //0 正序 1倒序
                if (sorter.order === 'ascend') {              //倒序
                  this.setState({
                    sortType: 1
                  }, () => {
                    this.loadData(pagination.current)
                  });
                } else if (sorter.order === 'descend') {      //正序
                  this.setState({
                    sortType: 0
                  }, () => {
                    this.loadData(pagination.current)
                  });
                } else if (typeof sorter.order === 'undefined') {       //正常
                  this.setState({
                    sortType: 0
                  }, () => {
                    this.loadData(pagination.current)
                  });
                }
                this.setState({
                  filteredInfo: filters,
                  sortedInfo: sorter,
                });

              }
              }
            />
          </Spin>
        </div>
        <IntentionDetail
          isGuidanceLv={this.props.isGuidanceLv}
          isEditGuidanceLv={this.props.isEditGuidanceLv}
          categoryArr={this.state.categoryArr}
          detailApi={this.props.detailApi}
          IntentionData={this.state.rowData}
          modalVisible={this.state.modalVisible}
          tabsKey={this.state.tabsKey}
          name={this.state.modalName}
          closeDesc={this.closeDesc}
          basicState={this.state.basicState}
          contactState={this.state.contactState}
        />
        <Modal
          maskClosable={false}
          className="customeDetails"
          title="指导意见"
          width='500px'
          visible={this.state.guidanceVisible}
          onOk={() => {
            this.setState({
              guidanceVisible: false,
              guidance: '',
            }, () => {
              this.loadData(this.state.ispage);
            })
          }}
          onCancel={() => {
            this.setState({
              guidanceVisible: false,
              guidance: '',
            }, () => {
              this.loadData(this.state.ispage);
            })
          }}
          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={() => {
                  this.releaseGuidance();
                }}
              >
                确定
              </Button>
            </div>
          </Spin>
        </Modal>
      </div>
    )
  }
}

export default CustomerFollow;