kede-client/js/component/manageCenter/customer/statistics/departmentStatistics/index.jsx

import React, { Component } from 'react';
import {
  Button, DatePicker,
  Input,
  message,
  Select,
  Spin,
  Table, Tabs,
} from "antd";
import './index.less';
import $ from "jquery/src/ajax";
import CustomerDetails from './customerDetails';
import moment from "moment";
import { ChooseList } from "../../../order/orderNew/chooseList";

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

class DepartmentStatistics extends Component {
  constructor(props) {
    super(props);
    this.state = {
      superId: undefined,
      nameSearch: '',
      releaseDate: [moment(Date.now() - 777600000).format('YYYY-MM-DD'), moment(Date.now()).format('YYYY-MM-DD')],
      columns: [
        {
          title: "部门",
          dataIndex: "name",
          key: "name",
          width: '25%',
        },
        {
          title: "私有数",
          dataIndex: "userCount",
          key: "userCount",
          className: 'tableRowStyle',
          width: 120,
          render: (text, record) => {
            return (
              <div
                className={record.aid ? 'receiveCount' : ''}
                onClick={(e) => {
                  if (record.aid) {
                    e.stopPropagation();
                    this.setState({
                      customerVisible: true,
                      aid: record.aid,
                      aName: record.aName,
                      type: 0,
                    })
                  }
                }}>
                {text}
              </div>
            );
          },
        },
        {
          title: "私有领取数",
          dataIndex: "receiveCount",
          key: "receiveCount",
          className: 'tableRowStyle',
          width: 120,
          render: (text, record) => {
            return (
              <div
                className={record.aid ? 'receiveCount' : ''}
                onClick={(e) => {
                  if (record.aid) {
                    e.stopPropagation();
                    this.setState({
                      customerVisible: true,
                      aName: record.aName,
                      aid: record.aid,
                      type: 7,
                    })
                  }
                }}>
                {text}
              </div>
            );
          },
        },
        {
          title: "私有新增数",
          dataIndex: "newCount",
          key: "newCount",
          className: 'tableRowStyle',
          width: 120,
          render: (text, record) => {
            return (
              <div
                className={record.aid ? 'receiveCount' : ''}
                onClick={(e) => {
                  if (record.aid) {
                    e.stopPropagation();
                    this.setState({
                      customerVisible: true,
                      aName: record.aName,
                      aid: record.aid,
                      type: 3,
                    })
                  }
                }}>
                {text}
              </div>
            );
          },
        },
        {
          title: "私有转交数",
          dataIndex: "transferCount",
          key: "transferCount",
          className: 'tableRowStyle',
          width: 120,
          render: (text, record) => {
            return (
              <div
                className={record.aid ? 'receiveCount' : ''}
                onClick={(e) => {
                  if (record.aid) {
                    e.stopPropagation();
                    this.setState({
                      customerVisible: true,
                      aName: record.aName,
                      aid: record.aid,
                      type: 8,
                    })
                  }
                }}>
                {text}
              </div>
            );
          },
        },
        {
          title: "外联数",
          dataIndex: "channelCount",
          key: "channelCount",
          className: 'tableRowStyle',
          width: 120,
          render: (text, record) => {
            return (
              <div
                className={record.aid ? 'receiveCount' : ''}
                onClick={(e) => {
                  if (record.aid) {
                    e.stopPropagation();
                    this.setState({
                      customerVisible: true,
                      aid: record.aid,
                      aName: record.aName,
                      type: 1,
                    })
                  }
                }}>
                {text}
              </div>
            );
          },
        },
        {
          title: "签单数",
          dataIndex: "signCount",
          key: "signCount",
          className: 'tableRowStyle',
          width: 120,
          render: (text, record) => {
            return (
              <div
                className={record.aid ? 'receiveCount' : ''}
                onClick={(e) => {
                  if (record.aid) {
                    e.stopPropagation();
                    this.setState({
                      customerVisible: true,
                      aName: record.aName,
                      aid: record.aid,
                      type: 2,
                    })
                  }
                }}>
                {text}
              </div>
            );
          },
        },
        {
          title: "外联新增数",
          dataIndex: "channelNewCount",
          key: "channelNewCount",
          className: 'tableRowStyle',
          width: 120,
          render: (text, record) => {
            return (
              <div
                className={record.aid ? 'receiveCount' : ''}
                onClick={(e) => {
                  if (record.aid) {
                    e.stopPropagation();
                    this.setState({
                      customerVisible: true,
                      aName: record.aName,
                      aid: record.aid,
                      type: 4,
                    })
                  }
                }}>
                {text}
              </div>
            );
          },
        },
        {
          title: "私有面谈数",
          dataIndex: "completeCount",
          key: "completeCount",
          className: 'tableRowStyle',
          width: 120,
          render: (text, record) => {
            return (
              <div
                className={record.aid ? 'receiveCount' : ''}
                onClick={(e) => {
                  if (record.aid) {
                    e.stopPropagation();
                    this.setState({
                      customerVisible: true,
                      aName: record.aName,
                      aid: record.aid,
                      type: 5,
                    })
                  }
                }}>
                {text}
              </div>
            );
          },
        },
        {
          title: "外联面谈数",
          dataIndex: "channelCompleteCount",
          key: "channelCompleteCount",
          className: 'tableRowStyle',
          width: 120,
          render: (text, record) => {
            return (
              <div
                className={record.aid ? 'receiveCount' : ''}
                onClick={(e) => {
                  if (record.aid) {
                    e.stopPropagation();
                    this.setState({
                      customerVisible: true,
                      aName: record.aName,
                      aid: record.aid,
                      type: 6,
                    })
                  }
                }}>
                {text}
              </div>
            );
          },
        },
        {
          title: <div style={{ color: 'red' }}>
            <div>重点客户</div>
            <div>（一个月内预签）</div>
          </div>,
          dataIndex: "keynoteCount",
          key: "keynoteCount",
          className: 'tableRowStyle',
          width: 120,
        },
        {
          title: <div style={{ color: 'orange' }}>
            <div>意向客户</div>
            <div>（半年内预签）</div>
          </div>,
          dataIndex: "intentionCount",
          key: "intentionCount",
          className: 'tableRowStyle',
          width: 120,
        },
        {
          title: <div style={{ color: 'green' }}>
            <div>一般客户</div>
            <div>（一年以上预签）</div>
          </div>,
          dataIndex: "generalCount",
          key: "generalCount",
          className: 'tableRowStyle',
          width: 120,
        },
      ],
      contactsOption: null,
      loading: false,
      ispage: 1,
      aid: '',
      type: '',
      visible: false,
      exportPendingLoading: false,
    };
    this.loadData = this.loadData.bind(this);
    this.reset = this.reset.bind(this);
    this.selectSuperId = this.selectSuperId.bind(this);
    this.changeList = this.changeList.bind(this);
    this.exportExec = this.exportExec.bind(this);
  }

  componentDidMount() {
    this.selectSuperId();
  }

  loadData() {
    if (!this.state.superId) {
      message.warning('请选择部门后再搜索')
      return;
    }
    this.setState({
      loading: true,
    });
    let api = '/api/admin/customer/selectAllUser';
    let data = {};
    if (this.state.superId) {
      data.depId = this.state.superId;
    }
    if (this.state.nameSearch) {
      data.aName = this.state.nameSearch;
    }
    if (this.state.releaseDate[0]) {
      data.startTime = this.state.releaseDate[0]
    }
    if (this.state.releaseDate[1]) {
      data.endTime = this.state.releaseDate[1]
    }
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + api,
      data: data,
      success: function (data) {
        let theArr = [];
        if (data.error.length !== 0) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          data.data.children = data.data.list;
          data.data.children = data.data.children.concat(data.data.aList);
          theArr.push(data.data);
          theArr = this.handleTabsInfor(theArr);
          this.setState({
            ispage: data.data.pageNo,
            dataSource: theArr,
          });
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  };

  exportExec() {
    message.config({
      duration: 20,
    });
    let loading = message.loading("下载中...");
    this.setState({
      exportPendingLoading: true,
    });

    let data = {
      depId: this.state.superId,
      aName: this.state.nameSearch,
      startTime: this.state.releaseDate[0],
      endTime: this.state.releaseDate[1],
    }
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: '/api/admin/customer/selectAllUser/export',
      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({
          exportPendingLoading: false,
        });
      }.bind(this)
    );
  }

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

  //表格数据处理
  handleTabsInfor(infor) {
    for (let i = 0; i < infor.length; i++) {
      if (!infor[i].key) {
        infor[i].key = infor[i].id ? infor[i].id : (infor[i].aid ? infor[i].aid : i)
      }
      if (infor[i].children) {
        for (let c = 0; c < infor[i].children.length; c++) {
          infor[i].children[c].key = infor[i].children[c].id;
          infor[i].children[c].children = infor[i].children[c].list;
          if (infor[i].children[c].aName) { infor[i].children[c].name = infor[i].children[c].aName }
          if (infor[i].children[c].aList && Array.isArray(infor[i].children[c].aList) && infor[i].children[c].aList.length) {
            if (infor[i].children[c].children && Array.isArray(infor[i].children[c].children)) {
              for (let t of infor[i].children[c].aList) {
                t.key = t.aid;
                t.name = t.aName;
              }
              infor[i].children[c].children = infor[i].children[c].children.concat(infor[i].children[c].aList);
            }
          }
          this.handleTabsInfor(infor[i].children);
        }
      }
    }
    return infor;
  }

  reset() {
    this.setState({
      nameSearch: '',
      releaseDate: [moment(Date.now() - 777600000).format('YYYY-MM-DD'), moment(Date.now()).format('YYYY-MM-DD')],
    }, () => {
      this.loadData();
    });
  };

  //获取上级组织
  selectSuperId() {
    this.state.data = []
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/organization/selectSuperId",
      data: {},
      success: function (data) {
        let theArr = [];
        let theId = [];//用于保存上级组织的ID和名称
        let thedata = data.data;
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          };
          thedata = {};
        };
        for (var 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>
          );
          theId.push(
            [theData.id, theData.name]
          );
        };
        this.setState({
          SuperArr: thedata,
          contactsOption: theArr,
          theId: theId,
          orderStatusOptions: data.data,
        });
        if (!this.state.superId) {
          this.setState({
            superId: data.data[0].id
          }, () => {
            this.loadData();
          })
        }

      }.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() {
    return (
      <div className="user-content">
        <div className="content-title">
          <span>部门统计</span>
        </div>
        <Tabs
          defaultActiveKey="1"
          className="test">
          <TabPane tab="搜索" key="1">
            <div className="user-search" style={{ display: 'flex', alignItems: 'center' }}>
              <div>
                <Select
                  showSearch
                  optionFilterProp="children"
                  placeholder="请选择部门"
                  style={{ width: 200, marginLeft: 10 }}
                  value={this.state.superId}
                  onChange={(e) => { this.setState({ superId: e }) }}
                  notFoundContent="未获取到上级组织列表">
                  {this.state.contactsOption}
                </Select>
              </div>
              <Input
                placeholder="客户名称"
                value={this.state.nameSearch}
                style={{ width: 150, marginRight: 10, marginLeft: 10 }}
                onChange={(e) => {
                  this.setState({ nameSearch: e.target.value });
                }}
              />
              <div style={{
                marginTop: '10px',
              }}>
                <RangePicker
                  allowClear={window.adminData.shiroList.indexOf("11") == -1}
                  disabledDate={(current) => {//“运营管理”角色只能查看部分时间段（暂时10天）的数据
                    let iskeep = window.adminData.shiroList.indexOf("11") != -1
                    return iskeep && current && current.valueOf() < Date.now() - 864000000;
                  }}
                  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 });
                  }}
                />
              </div>
              <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={this.state.columns}
                changeFn={this.changeList}
                changeList={this.state.changeList}
                top={55}
                margin={11}
              />
            </div>
          </TabPane>
          <TabPane tab="导出" key="3">
            <div style={{ float: "left" }}>
              <Button
                type='primary'
                loading={this.state.exportPendingLoading}
                onClick={this.exportExec}
                style={{ margin: 10 }}
              >
                导出excel
              </Button>
            </div>
          </TabPane>
        </Tabs>
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table
              size="middle"
              scroll={{ y: 550 }}
              columns={
                this.state.changeList
                  ? this.state.changeList
                  : this.state.columns
              }
              dataSource={this.state.dataSource}
              pagination={false}
            />
          </Spin>
        </div>
        {this.state.customerVisible ? <CustomerDetails
          aid={this.state.aid}
          type={this.state.type}
          aName={this.state.aName}
          startTime={this.state.releaseDate[0]}
          endTime={this.state.releaseDate[1]}
          visible={this.state.customerVisible}
          onCancel={() => {
            this.setState({
              customerVisible: false,
              aid: '',
              type: '',
            })
          }}
        /> : <div />}
      </div>
    )
  }
}

export default DepartmentStatistics;