kede-client/js/component/manageCenter/customer/signcustomer/detaillist.jsx

import React, { Component } from "react";
import {
  AutoComplete,
  Button,
  DatePicker,
  Input,
  message,
  Modal,
  Select,
  Spin,
  Table,
  Tabs,
  Tag,
  Tooltip,
} from "antd";
import {
  ShowModal,
  getProcessStatus,
  getLiquidationStatus,
  getNewOrderStatus
} from "@/tools";
import { salesList, } from "@/dataDic"
import { ChooseList } from "../../order/orderNew/chooseList";
import OrderDesc from "../../financialManage/orderDetail/orderDesc";
import $ from "jquery/src/ajax";
import "./index.less";
import moment from "moment";

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

class DetailList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageNo: 1,
      details: false,
      loading: false,
      changeList: undefined,
      columns: [
        {
          title: "销售类型",
          dataIndex: "salesType",
          key: "salesType",
          render: (text, record) => {
            return (
              <Tooltip
                title={salesList[text] + ((text == 3 || text == 4 || text == 5) ? (!record.other ? "" : "，" + record.other) : "")}
              >
                <span>
                  {salesList[text]}
                </span>
              </Tooltip>
            );
          },
        },
        {
          title: "合同编号",
          dataIndex: "contractNo",
          key: "contractNo",
        },
        {
          title: "订单编号",
          dataIndex: "orderNo",
          key: "orderNo",
        },
        {
          title: "客户名称",
          dataIndex: "userName",
          key: "userName",
        },
        {
          title: "订单部门",
          dataIndex: "depName",
          key: "depName",
        },
        {
          title: "营销员",
          dataIndex: "salesmanName",
          key: "salesmanName",
        },
        {
          title: "下单时间",
          dataIndex: "createDate",
          key: "createDate",
        },
        {
          title: "合同签订时间",
          dataIndex: "signDate",
          key: "signDate",
        },
        {
          title: "流程状态",
          dataIndex: "processStatus",
          key: "processStatus",
          render: (text, record) => {
            return getProcessStatus(text, record.examineName, record.approval);
          },
        },
        {
          title: "签单金额（万元）",
          dataIndex: "totalAmount",
          key: "totalAmount",
          render: (text, record) =>
            <span >
              {text}
            </span>
        },
        {
          title: "开单金额（万元）",
          dataIndex: "invoiceAmount",
          key: "invoiceAmount",
          render: (text, record) =>
            <span >
              {text}
            </span>
        },
        {
          title: "已收款（万元）",
          dataIndex: "settlementAmount",
          key: "settlementAmount",
          render: (text, record) =>
            <span >
              {text}
            </span>
        },
        {
          title: "结算状态",
          dataIndex: "liquidationStatus",
          key: "liquidationStatus",
          render: (text, record) =>
            <span >
              {getLiquidationStatus(text)}
            </span>
        },
        {
          title: "是否特批",
          dataIndex: "approval",
          key: "approval",
          render: (text, record) =>
            <span >
              {["非特批", "特批", "特批通过"][text]}
            </span>
        },
        {
          title: "订单状态",
          dataIndex: "orderStatus",
          key: "orderStatus",
          render: (text, record) =>
            <span >
              {getNewOrderStatus(text)}
            </span>
        },
      ],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      dataSource: [],
      searchInfor: {}
    };
    this.loadData = this.loadData.bind(this);
    this.resetAll = this.resetAll.bind(this);
    this.changeList = this.changeList.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,
    });
  }

  loadData(pageNo) {
    const { searchInfor, pagination } = this.state;
    this.setState({
      loading: true,
    });
    let prs = this.props.data;
    prs.pageNo = pageNo || 1;
    prs.pageSize = pagination.pageSize;
    delete prs.nickname
    let datas = Object.assign(searchInfor, prs);
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/statistis/signStatistics/orderList",
      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)
    );
  }

  resetAll() {
    this.setState(
      {
        searchInfor: JSON.parse(JSON.stringify({})),
        selectedRowKeys: [],
      },
      () => {
        this.loadData();
      }
    );
  }
  // 整行点击
  tableRowClick(record) {
    this.state.orderData = record;
    this.setState({
      details: true,
    });
  }
  // 详情弹窗
  closeDesc() {
    this.setState({
      details: false
    })
    this.loadData(this.state.pageNo);
  }

  componentWillMount() {
    this.loadData();
  }

  render() {
    const { searchInfor, details } = this.state
    return (
      <div>
        <div className="user-content">
          <Tabs defaultActiveKey="1" className="test">
            <TabPane tab="搜索" key="1">
              <div
                className="user-search"
                style={{
                  marginTop: "10px",
                  marginLeft: "10px",
                  marginRight: "10px",
                }}
              >

                <span style={{ marginRight: "10px" }}>
                  <Select
                    style={{ width: 160 }}
                    placeholder="签单金额"
                    value={searchInfor.amountType}
                    onChange={(e) => {
                      this.setState({
                        searchInfor: Object.assign(searchInfor, {
                          amountType: e,
                        }),
                      });
                    }}
                  >
                    <Option value="0">全部</Option>
                    <Option value="1">小于10万</Option>
                    <Option value="2">10-20万</Option>
                    <Option value="3">20-30万</Option>
                    <Option value="4">30万以上</Option>
                  </Select>
                </span>

                <span style={{ marginRight: "10px" }}>
                  <Select
                    style={{ width: 160 }}
                    placeholder="最新签单类型"
                    value={searchInfor.orderType}
                    onChange={(e) => {
                      this.setState({
                        searchInfor: Object.assign(searchInfor, {
                          orderType: e,
                        }),
                      });
                    }}
                  >
                    <Option value="0">所有</Option>
                    <Option value="1">新签</Option>
                    <Option value="2">复购</Option>
                    <Option value="3">渠道</Option>
                  </Select>
                </span>


                <span style={{ marginRight: "10px" }}>
                  <span style={{ marginRight: "5px", marginBottom: "10px" }}>
                    签单时间 :
                  </span>
                  <RangePicker
                    style={{ marginRight: "10px", marginBottom: "10px" }}
                    value={[
                      searchInfor.signTimeStart
                        ? moment(searchInfor.signTimeStart)
                        : null,
                      searchInfor.signTimeEnd
                        ? moment(searchInfor.signTimeEnd)
                        : null,
                    ]}
                    onChange={(data, dataString) => {
                      this.setState({
                        searchInfor: Object.assign(searchInfor, {
                          signTimeStart: dataString[0],
                          signTimeEnd: dataString[1],
                        }),
                      });
                    }}
                  />
                </span>

                <Button
                  type="primary"
                  onClick={() => {
                    this.loadData();
                  }}
                  style={{ marginRight: "10px", marginBottom: "10px" }}
                >
                  搜索
                </Button>
                <Button
                  onClick={this.resetAll}
                  style={{ marginRight: "10px", marginBottom: "10px" }}
                >
                  重置
                </Button>
              </div>
            </TabPane>
            <TabPane tab="更改表格显示数据" key="2">
              <div style={{ marginLeft: 10 }}>
                <Spin spinning={this.state.loading}>
                  <ChooseList
                    columns={this.state.columns}
                    changeFn={this.changeList}
                    changeList={this.state.changeList}
                    top={55}
                    margin={11}
                  />
                </Spin>
              </div>
            </TabPane>
          </Tabs>
          <div className="patent-table">
            <Spin spinning={this.state.loading}>
              <Table
                bordered
                size="middle"
                columns={
                  this.state.changeList
                    ? this.state.changeList
                    : this.state.columns
                }
                dataSource={this.state.dataSource}
                pagination={this.state.pagination}
                onRowClick={this.tableRowClick.bind(this)}
              />
            </Spin>
          </div>
        </div>
        {/* 订单详情 */}
        <OrderDesc
          data={this.state.orderData}
          showDesc={details}
          closeDesc={this.closeDesc.bind(this)}
        />
      </div>
    );
  }
}

export default DetailList;