kede-client/js/component/manageCenter/customer/customerManagement/adminCustomerStatistics.jsx

"use strict";
import React from 'react';
import ReactDom from 'react-dom';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import {
  Form,
  Radio,
  Icon,
  Button,
  Input,
  Select,
  Spin,
  Table,
  Switch,
  message,
  DatePicker,
  Modal,
  Upload,
  Popconfirm,
  Tabs, Tag
} from 'antd';
import moment from 'moment';
import '../../order/userMangagement.less';
import { orderState, orderChannel, orderType } from '../../../dataDic.js';
import { getProjectState, getOrderChannel, getOrderType, getOrderState, getPaymentState, getApprovedState } from '../../../tools.js';
import { ChooseList } from "../../order/orderNew/chooseList";

const { TabPane } = Tabs

const AdminCustomerStatistics = Form.create()(React.createClass({
  loadData(pageNo) {
    this.state.data = [];
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + '/api/admin/customer/selectAdminCustomerStatistics',
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.pagination.pageSize,
        depId: this.state.departmenttSearch, //部门
        startTime: this.state.releaseDate[0],
        endTime: this.state.releaseDate[1],
      },
      success: function (data) {
        let theArr = [];
        if (!data.data) {
          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({
              key: pageNo ? (i + 1 + (pageNo - 1) * 10) : i + 1,
              aid: thisdata.aid,
              aName: thisdata.aName,
              depName: thisdata.depName,
              userCount: thisdata.userCount,
              signCount: thisdata.signCount,
              newCount: thisdata.newCount,
              receiveCount: thisdata.receiveCount,
              transferCount: thisdata.transferCount,
            });
          };
          this.state.pagination.current = data.data.pageNo;
          this.state.pagination.total = data.data.totalCount;
        };
        if (!data.data.list.length) {
          this.state.pagination.current = 0
          this.state.pagination.total = 0
        }
        this.setState({
          pageNo: pageNo,
          dataSource: theArr,
          pagination: this.state.pagination,
          // 					selectedRowKeys: [],
          // 					signBillVisible: false
        });
      }.bind(this),
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  },
  //部门
  departmentList() {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/organization/selectSuperId",
      data: {

      },
      success: function (data) {
        let thedata = data.data;
        let theArr = [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          };
          thedata = {};
        } else {
          thedata.map(function (item, index) {
            theArr.push({
              key: index,
              name: item.name,
              id: item.id,
            })
          })
        }
        this.setState({
          departmentArr: theArr,
        })
      }.bind(this),
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  },

  //操作分配
  confirmDelet(index) {
    this.setState({
      orderNot: index.orderNo,
      userDetaile: false,
      distributionVisible: true
    });
  },
  distributionCancel() {
    this.setState({
      distributionVisible: false
    })
  },
  distributionOk() {
    this.setState({
      distributionVisible: false
    })
  },
  //分配对象列表
  contactList() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + '/api/admin/superviser/adminList',
      data: {
        pageNo: 1,
        pageSize: 99,
        departmentId: this.state.departmenttList,
        name: this.state.financeNameSearch,
      },
      success: function (data) {
        let theArr = [];
        if (!data.data) {
          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({
              key: i,
              id: thisdata.id,
              userNo: thisdata.userNo,
              name: thisdata.name,
              departmentName: thisdata.departmentName,
              departmentId: thisdata.departmentId,
              position: thisdata.position,
              mobile: thisdata.mobile,
            });
          };

        };

        this.setState({
          distributionList: theArr,
        });
      }.bind(this),
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  },
  //选定对象
  confirmSelect(record) {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/order/distributionOrder",
      data: {
        orderNo: this.state.orderNot,
        financeId: record.id
      }
    }).done(function (data) {
      if (!data.error.length) {
        message.success('分派成功！');
        this.setState({
          loading: false,
        });
        this.distributionOk();
      } else {
        message.warning(data.error[0].message);
      };
      this.loadData(this.state.pageNo);
    }.bind(this));
  },
  componentWillMount() {
    this.departmentList();
    this.loadData();
  },

  getInitialState() {
    return {
      rowKey: 0,
      datauser: {},
      selectedRowKeys: [],
      releaseDate: [],
      selectedRows: [],
      departmentArr: [],
      searchMore: true,
      loading: false,
      distributionVisible: false,
      visible: false,
      showDesc: false,
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return '共' + total + '条数据';
        }
      },
      paginationX: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.xiangmu(page, this.state.rowKey, this.state.type);
        }.bind(this),
        showTotal: function (total) {
          return '共' + total + '条数据';
        }
      },
      columns: [{
        title: '编号',
        dataIndex: 'key',
        key: 'key',
        align: 'center',
      },
      {
        title: '营销员名称',
        dataIndex: 'aName',
        key: 'aName',
        align: 'center',
      },
      {
        title: '部门名称',
        dataIndex: 'depName',
        key: 'depName',
        align: 'center',
      },
      {
        title: '私有客户数',
        dataIndex: 'userCount',
        key: 'userCount',
        align: 'center',
        render: (text, record, index) => {
          return <div style={{ padding: "10px 8px" }} onClick={() => {
            this.userCount(record, index)
          }} className="single">{text}</div>
        }
      },
      {
        title: '签单客户数量',
        dataIndex: 'signCount',
        key: 'signCount',
        render: (text, record, index) => {
          return <div style={{ padding: "10px 8px" }} onClick={() => {
            this.signedQuantity(record, index)
          }} className="single">{text}</div>
        }
      },
      {
        title: '时间内新增客户数',
        dataIndex: 'newCount',
        key: 'newCount',
        render: (text, record, index) => {
          return <div style={{ padding: "10px 8px" }} onClick={() => {
            this.inputCount(record, index)
          }} className="single">{text}</div>
        }
      },
      {
        title: '时间内领取客户数',
        dataIndex: 'receiveCount',
        key: 'receiveCount',
        render: (text, record, index) => {
          return <div style={{ padding: "10px 8px" }} onClick={() => {
            this.receiveCount(record, index)
          }} className="single">{text}</div>
        }
      },
      {
        title: '时间内转交客户数',
        dataIndex: 'transferCount',
        key: 'transferCount',
        render: (text, record, index) => {
          return <div style={{ padding: "10px 8px" }} onClick={() => {
            this.transferCount(record, index)
          }} className="single">{text}</div>
        }
      }
      ],
      dataSource: [],
      dataSourceX: [],
      columnsX: [{
        title: '客户名称',
        dataIndex: 'name',
        key: 'name'
      }, {
        title: '来源',
        dataIndex: 'sourceName',
        key: 'sourceName'
      }, {
        title: '联系人',
        dataIndex: 'contacts',
        key: 'contacts'
      }, {
        title: '联系人电话',
        dataIndex: 'contactMobile',
        key: 'contactMobile'
      }, {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
      }, {
        title: '跟进时间',
        dataIndex: 'followTime',
        key: 'followTime',
      }]

    };
  },
  // 私有客户数
  userCount(record, index) {
    this.tableRowClick(record, index, 0)
  },
  // 签单客户数量
  signedQuantity(record, index) {
    this.tableRowClick(record, index, 2)
  },
  // 时间内新增客户数
  inputCount(record, index) {
    this.tableRowClick(record, index, 3)
  },
  // 时间内领取客户数
  receiveCount(record, index) {
    this.tableRowClick(record, index, 7)
  },
  // 时间内转交客户数
  transferCount(record, index) {
    this.tableRowClick(record, index, 8)
  },

  tableRowClick(record, index, type) {
    this.xiangmu(1, record, type);
    this.setState({
      visible: true,
      rowKey: record,
      type: type,
      aName: record.aName
    });
  },
  xiangmu(pageNo, record, type) {
    this.state.data = [];
    this.setState({
      loading: true
    })
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/selectAdminCustomerList",
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.paginationX.pageSize,
        startTime: this.state.releaseDate[0],
        endTime: this.state.releaseDate[1],
        aid: record.aid,
        type: type,
      },
      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({
              key: i,
              id: thisdata.id,
              name: thisdata.name,
              sourceName: thisdata.sourceName,
              contacts: thisdata.contacts,
              contactMobile: thisdata.contactMobile,
              createTime: thisdata.createTime,
              followTime: thisdata.followTime,
            });
          };
          this.state.paginationX.current = pageNo;
          this.state.paginationX.total = data.data.totalCount;
        };
        if (!data.data.list.length) {
          this.state.paginationX.current = 0
          this.state.paginationX.total = 0
        }
        this.setState({
          dataSourceX: theArr,
          paginationX: this.state.paginationX,
          // 					selectedRowKeys: [],
          // 					signBillVisible: false
        });
      }.bind(this),
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  },
  visitCancel(e) {
    this.setState({
      visible: false
    })
  },
  visitOk(e) {
    this.setState({
      visible: false
    })
  },
  closeDesc(e, s) {
    this.state.userDetaile = false;
    this.state.showDesc = e;
    if (s) {
      this.loadData(this.state.pageNo);
    };
  },
  searchSwitch() {
    this.setState({
      searchMore: !this.state.searchMore
    });
  },
  search() {
    this.loadData();
  },
  //分配时搜索
  searchOrder() {
    this.contactList();
  },
  //分配时重置
  resetOrder() {
    this.setState({
      departmenttList: undefined,
      financeNameSearch: ''
    })
  },
  reset() {
    this.state.releaseDate[0] = undefined;
    this.state.releaseDate[1] = undefined;
    this.state.departmenttSearch = undefined;
    this.state.approved = undefined;
    this.state.isDistributionFinance = undefined;
    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() {
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRows: selectedRows.slice(-1),
          selectedRowKeys: selectedRowKeys.slice(-1)
        });
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        this.setState({
          selectedRowKeys: []
        })
      },
    };
    let departmentArr = this.state.departmentArr || [];
    const hasSelected = this.state.selectedRowKeys.length > 0;
    const {
      RangePicker
    } = DatePicker;
    return (
      <div className="user-content" >
        <div className="content-title">
          <span>部门客户统计</span>
          <Tabs
            defaultActiveKey="1"
            onChange={this.callback}
            className="test"
          >
            <TabPane tab="搜索" key="1">
              <div className="user-search">
                {/*<Input placeholder="客户名称" style={{width:'150px'}}
 	                        value={this.state.buyerNameSearch}
	                        onChange={(e) => { this.setState({ buyerNameSearch: e.target.value }); }} />
						*/}
                <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 }); }} />
                <Select placeholder="订单部门"
                  style={{ width: 150, marginRight: '10px', marginLeft: '10px' }}
                  value={this.state.departmenttSearch}
                  onChange={(e) => { this.setState({ departmenttSearch: e }) }}>
                  {
                    departmentArr.map(function (item) {
                      return <Select.Option key={item.id} >{item.name}</Select.Option>
                    })
                  }
                </Select>
                <Button type="primary" onClick={this.search} style={{ marginLeft: '10px' }}>搜索</Button>
                <Button onClick={this.reset}>重置</Button>
                {/*<span style={{marginLeft:'10px',marginRight:'20px'}}>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span>
						*/}
              </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>
          </Tabs>
          <div className="patent-table">
            <Spin spinning={this.state.loading}>
              <Table
                size="middle"
                columns={
                  this.state.changeList
                    ? this.state.changeList
                    : this.state.columns
                }
                dataSource={this.state.dataSource}
                pagination={this.state.pagination} />
            </Spin>
          </div>
          <Modal maskClosable={false} visible={this.state.visible}
            onOk={this.visitOk} onCancel={this.visitCancel}
            width='1200px'
            title={
              <span>
                <span style={{ marginRight: '15px' }}>客户详情</span>
                <Tag color="#f50">{this.state.aName}</Tag>
                <Tag color="#108ee9">
                  {
                    this.state.type === 0 ?
                      '私有客户数' :
                      this.state.type === 2 ?
                        '签单客户数量' :
                        this.state.type === 3 ?
                          '时间内新增客户数' :
                          this.state.type === 7 ?
                            '时间内领取客户数' :
                            this.state.type === 8 ?
                              '时间内转交客户数' : '未知'
                  }
                </Tag>
              </span>
            }
            footer=''
            className="admin-desc-content">
            <div className="patent-table">
              <Spin spinning={this.state.loading}>
                <Table columns={this.state.columnsX}
                  dataSource={this.state.dataSourceX}
                  pagination={this.state.paginationX}
                />
              </Spin>
            </div>
          </Modal>
        </div >
      </div>
    );
  }
}));

export default AdminCustomerStatistics;