kede-client/js/component/manageCenter/order/source/index.jsx

import React, { Component } from "react";
import {
  Button,
  Modal,
  Form,
  DatePicker,
  message,
  Spin,
  Select,
  Tabs,
  Table,
} from "antd";
import $ from "jquery/src/ajax";
import { ShowModal, getPercentage } from "@/tools";
import { salesList } from "@/dataDic.js";
import moment from "moment";
import { provinceSelect, getProvince } from "../../../NewDicProvinceList";
import { ChooseList } from "../../../manageCenter/order/orderNew/chooseList";
import OrderList from "./order"; //客户订单列表
import './index.less';
import ShowModalDiv from "@/showModal.jsx";
import Cascaders from "../../../common/cascaders";

const { TabPane } = Tabs;
const FormItem = Form.Item;
const Option = Select.Option;
const { RangePicker } = DatePicker;

class Source extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cellData: {},
      searchValues: {},
      params: {},
      onelist: [
        {
          value: "0",
          label: "按签单金额",
        },
        {
          value: "1",
          label: "按签单数",
        },
      ],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      contactsOption: [],
      loading: false,
      changeList: undefined,
      dataSource: [],
      visible: false,
      columns: [
        {
          title: "序号",
          dataIndex: "key",
          key: "key",
          width: 45,
          render: (text, record, index) =>
            <span >
              {index + 1}
            </span>
        },
        {
          title: "省份",
          dataIndex: "province",
          key: "province",
          onCellClick: (r) => {
            let cellData = {};
            cellData["province"] = r.province
            this.setState({
              visible: true,
              datas: cellData,
            })
          },
          render: (text, record) =>
            <span >
              {getProvince(text)}
            </span>
        },
        {
          title: "签单数（个）",
          dataIndex: "counts",
          key: "counts",
          width: '9%',
          onCellClick: (r) => {
            let cellData = {};
            cellData["province"] = r.province
            this.setState({
              visible: true,
              datas: cellData,
            })
          },
        },
        {
          title: "签单金额（万元）",
          dataIndex: "totalAmount",
          key: "totalAmount",
          width: '9%',
          onCellClick: (r) => {
            let cellData = {};
            cellData["province"] = r.province
            this.setState({
              visible: true,
              datas: cellData,
            })
          },
        },
        {
          title: "电话新开发/占比",
          dataIndex: "dhxkfl",
          key: "dhxkfl",
          width: '9%',
          onCellClick: (r) => {
            let cellData = {};
            cellData["province"] = r.province
            cellData["salesType"] = 0
            this.setState({
              visible: true,
              datas: cellData,
            })
          },
          render: (text, record) =>
            <span >
              {record.dhxkf + "/" + getPercentage(text)}
            </span>
        },
        {
          title: "电话自带资源/占比",
          dataIndex: "dhzdzyl",
          key: "dhzdzyl",
          width: '9%',
          onCellClick: (r) => {
            let cellData = {};
            cellData["province"] = r.province
            cellData["salesType"] = 1
            this.setState({
              visible: true,
              datas: cellData,
            })
          },
          render: (text, record) =>
            <span >
              {record.dhzdzy + "/" + getPercentage(text)}
            </span>
        },
        {
          title: "网络/占比",
          dataIndex: "wll",
          key: "wll",
          width: '9%',
          onCellClick: (r) => {
            let cellData = {};
            cellData["province"] = r.province
            cellData["salesType"] = 2
            this.setState({
              visible: true,
              datas: cellData,
            })
          },
          render: (text, record) =>
            <span >
              {record.wl + "/" + getPercentage(text)}
            </span>
        },
        {
          title: "渠道/占比",
          dataIndex: "qdl",
          key: "qdl",
          width: '9%',
          onCellClick: (r) => {
            let cellData = {};
            cellData["province"] = r.province
            cellData["salesType"] = 3
            this.setState({
              visible: true,
              datas: cellData,
            })
          },
          render: (text, record) =>
            <span >
              {record.qd + "/" + getPercentage(text)}
            </span>
        },
        {
          title: "高新复购/占比",
          dataIndex: "gxfgl",
          key: "gxfgl",
          width: '9%',
          onCellClick: (r) => {
            let cellData = {};
            cellData["province"] = r.province
            cellData["salesType"] = 6
            this.setState({
              visible: true,
              datas: cellData,
            })
          },
          render: (text, record) =>
            <span >
              {record.gxfg + "/" + getPercentage(text)}
            </span>
        },
        {
          title: "其他复购/占比",
          dataIndex: "qtfgl",
          key: "qtfgl",
          width: '9%',
          onCellClick: (r) => {
            let cellData = {};
            cellData["province"] = r.province
            cellData["salesType"] = 7
            this.setState({
              visible: true,
              datas: cellData,
            })
          },
          render: (text, record) =>
            <span >
              {record.qtfg + "/" + getPercentage(text)}
            </span>
        },
        {
          title: "转介绍/占比",
          dataIndex: "zjsl",
          key: "zjsl",
          width: '9%',
          onCellClick: (r) => {
            let cellData = {};
            cellData["province"] = r.province
            cellData["salesType"] = 4
            this.setState({
              visible: true,
              datas: cellData,
            })
          },
          render: (text, record) =>
            <span >
              {record.zjs + "/" + getPercentage(text)}
            </span>
        },
        {
          title: "其他/占比",
          dataIndex: "qtl",
          key: "qtl",
          width: '9%',
          onCellClick: (r) => {
            let cellData = {};
            cellData["province"] = r.province
            cellData["salesType"] = 5
            this.setState({
              visible: true,
              datas: cellData,
            })
          },
          render: (text, record) =>
            <span >
              {record.qt + "/" + getPercentage(text)}
            </span>
        },
      ],
    };
  }

  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach((item) => {
      arr.forEach((val) => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr,
    });
  }
  // 重置
  resetAll() {
    this.setState(
      {
        searchValues: JSON.parse(JSON.stringify({})),
        params: JSON.parse(JSON.stringify({})),
        selectedRowKeys: [],
      },
      () => {
        this.Cascaders.empty();
        this.loadData();
      }
    );
  }
  // 搜索
  submit() {
    this.setState({
      params: this.state.searchValues
    })
    this.loadData()
  }
  // 列表接口
  loadData(pageNo) {
    const { searchValues, pagination } = this.state;
    this.setState({
      loading: true,
    });
    let datas = Object.assign(searchValues, {
      pageNo: pageNo || 1,
      pageSize: pagination.pageSize,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/statistis/orderSalesSource",
      data: datas,
      success: function (data) {
        ShowModal(this);
        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,
            });
          } 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)
    );
  }
  // 获取上级组织
  selectSuperId() {
    this.setState({
      departmentLoading: true,
    });
    $.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({
              value: theData.id,
              label: theData.name,
            });
          }
          this.setState({
            contactsOption: theArr,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          departmentLoading: false,
        });
      }.bind(this)
    );
  }
  // 导出excel
  exportExec() {
    message.config({
      duration: 20,
    });
    let loading = message.loading("下载中...");
    this.setState({
      exportPendingLoading: true,
    });
    let data = {};
    let obj1 = JSON.parse(JSON.stringify(this.state.searchValues));
    data = Object.assign(data, obj1);
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: "/api/admin/statistis/orderSalesSource/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;
  }

  getBarChartOption(data) {
    const wz = data.counts - data.qt - data.zjs - data.qtfg - data.gxfg - data.qd - data.wl - data.dhzdzy - data.dhxkf;
    return {
      title: {
        text: '湖南',
        subtext: '签单金额(万元): ' + data.totalAmount,
        left: 'center',
        padding: 20,
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}/占比 : {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '签单数: ' + data.counts,
          type: 'pie',
          radius: '60%',
          avoidLabelOverlap: true,
          data: [
            { value: data.dhxkf, name: '电话新开发' },
            { value: data.dhzdzy, name: '电话自带资源' },
            { value: data.wl, name: '网络' },
            { value: data.qd, name: '渠道' },
            { value: data.gxfg, name: '高新复购' },
            { value: data.qtfg, name: '其他复购' },
            { value: data.zjs, name: '转介绍' },
            { value: data.qt, name: '其他' },
            { value: wz, name: '未知' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            }
          }
        }
      ]
    }
  }

  componentWillMount() {
    // this.selectSuperId();
    this.loadData();
  }

  render() {
    const { searchValues, onelist, columns, changeList, contactsOption, visible, datas, params } = this.state;
    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, }}>销售来源统计表
            &nbsp;<spn style={{ color: "rgb(49,49,255)", fontSize: 15, }}>注：可通过签单数、签单金额查询统计</spn>
          </span>
        </div>
        <Tabs defaultActiveKey="1" onChange={() => { }}>
          <TabPane tab="搜索" key="1">
            <div style={{ paddingTop: 10 }}>
              <Form layout="inline">
                <FormItem>
                  <Cascaders
                    ref={node => this.Cascaders = node}
                    placeholder="请选择部门"
                    id="id"
                    name="name"
                    children="list"
                    height={28}
                    onSel={(e) => {
                      searchValues["deps"] = JSON.stringify(e);
                      this.setState({
                        searchValues: searchValues,
                      });
                    }}
                  />
                  {/* <Select
                    placeholder={"请选择部门"}
                    style={{ width: 200 }}
                    value={searchValues["depId"]
                      ? searchValues["depId"]
                      : undefined}
                    onChange={(e) => {
                      searchValues["depId"] = e;
                      this.setState({
                        searchValues: searchValues,
                      });
                    }}
                  >
                    {contactsOption.map((cit, index) => (
                      <Option key={cit.value}>{cit.label}</Option>
                    ))}
                  </Select> */}
                </FormItem>
                <FormItem>
                  <Select
                    placeholder={"请选择省份"}
                    style={{ width: 150 }}
                    value={searchValues["province"]
                      ? searchValues["province"]
                      : undefined}
                    onChange={(e) => {
                      searchValues["province"] = e;
                      this.setState({
                        searchValues: searchValues,
                      });
                    }}
                  >
                    {provinceSelect().map((cit, cin) => (
                      <Option key={cit.value}>{cit.label}</Option>
                    ))}
                  </Select>
                </FormItem>
                <FormItem>
                  <Select
                    placeholder={"请选择"}
                    style={{ width: 150 }}
                    value={searchValues["sort"]
                      ? searchValues["sort"]
                      : undefined}
                    onChange={(e) => {
                      searchValues["sort"] = e
                      this.setState({
                        searchValues: searchValues,
                      });
                    }}
                  >
                    {onelist.map((it, ins) => (
                      <Option key={it.value}>{it.label}</Option>
                    ))}
                  </Select>
                </FormItem>
                <FormItem>
                  <RangePicker
                    value={[
                      searchValues["startDate"]
                        ? moment(searchValues["startDate"])
                        : null,
                      searchValues["endDate"] ? moment(searchValues["endDate"]) : null,
                    ]}
                    onChange={(data, dataString) => {
                      searchValues["startDate"] = dataString[0],
                        searchValues["endDate"] = dataString[1],
                        this.setState({
                          searchValues: searchValues,
                        });
                    }}
                  />
                </FormItem>
                <Button
                  type="primary"
                  onClick={() => { this.submit() }}
                  style={{ marginRight: "10px" }}
                >
                  搜索
                </Button>
                <Button
                  onClick={() => { this.resetAll() }}
                  style={{ marginRight: "10px" }}
                >
                  重置
                </Button>
              </Form>
            </div>
          </TabPane>
          <TabPane tab="更改表格显示数据" key="2">
            <div style={{ marginLeft: 10 }}>
              <ChooseList
                columns={columns}
                changeFn={this.changeList.bind(this)}
                changeList={changeList}
                top={55}
                margin={11}
              />
            </div>
          </TabPane>
          <TabPane tab="导出" key="3">
            <div
              style={{
                marginLeft: 10,
                padding: "10px 0",
                display: "flex",
              }}
            >
              <Button
                type="primary"
                onClick={() => { this.exportExec() }}
                style={{ marginLeft: "10px" }}
              >
                导出excel
              </Button>
            </div>
          </TabPane>
        </Tabs>
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table
              bordered
              size="middle"
              columns={changeList ? changeList : columns}
              dataSource={this.state.dataSource}
              pagination={this.state.pagination}
            />
          </Spin>
          {
            // this.state.dataSource.length > 0 &&
            false &&
            <ReactEcharts
              style={{ height: "500px" }}
              option={this.getBarChartOption(this.state.dataSource[0])}
              echarts={echarts}
            />
          }

        </div>
        {
          visible &&
          <Modal
            visible={visible}
            title={
              <div>
                <span style={{ marginRight: 20 }}>客户订单列表</span>
                {!!salesList[datas["salesType"]] && <span style={{ color: "red", marginRight: 20 }}>销售类型：{salesList[datas["salesType"]]}</span>}
                <span style={{ color: "red" }}>省份：{getProvince(datas["province"])}</span>
              </div>}
            width="90%"
            footer={null}
            onCancel={() => {
              this.setState({
                visible: false,
                datas: {},
              });
            }}
          >
            <OrderList
              data={Object.assign(datas, params)}
            />
          </Modal>
        }
      </div>
    );
  }
}

export default Source;