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

import React, { Component } from "react";
import {
  Button,
  Form,
  Input,
  message,
  Spin,
  Select,
  Tabs,
  Table,
  Modal,
  Tooltip,
} from "antd";
import $ from "jquery/src/ajax";
import { ChooseList } from "../../../manageCenter/order/orderNew/chooseList";
// import OrderDetail from "../orderNew/changeComponent/orderDetail";
import OrderDesc from "../../financialManage/orderDetail/orderDesc";
import OrderRiZi from "@/orderRiZi.jsx";
import { salesList } from "@/dataDic.js";
import {
  getProcessStatus,
  getLiquidationStatus,
  getNewOrderStatus,
  ShowModal,
} from "@/tools.js";

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

class OrderList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      onelist: [
        {
          value: "0",
          label: "首付待付请",
        },
        {
          value: "1",
          label: "尾款待付清",
        },
        {
          value: "2",
          label: "已付请",
        },
      ],
      twolist: [
        {
          value: "0",
          label: "非特批",
        },
        {
          value: "1",
          label: "特批",
        },
      ],
      threelist: [
        {
          value: "0",
          label: "10万元以下",
        },
        {
          value: "1",
          label: "10万~20万",
        },
        {
          value: "2",
          label: "20万~30万",
        },
        {
          value: "3",
          label: "30万~40万",
        },
        {
          value: "4",
          label: "40万以上",
        },
      ],
      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 + "条数据";
        },
      },
      loading: false,
      changeList: undefined,
      searchValues: {},
      dataSource: [],
      details: false,
      orderData: {},
    };
  }

  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({})),
        selectedRowKeys: [],
      },
      () => {
        this.loadData();
      }
    );
  }
  // 列表接口
  loadData(pageNo) {
    const { searchValues, pagination } = this.state;
    this.setState({
      loading: true,
    });
    let prs = this.props.data;
    prs.pageNo = pageNo || 1;
    prs.pageSize = pagination.pageSize;
    let datas = Object.assign(searchValues, prs);
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/newOrder/statistics/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)
    );
  }
  // 整行点击
  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 { searchValues, onelist, twolist, threelist, columns, changeList, details } = this.state;
    return (
      <div className="user-content signatureStatistics">
        <Tabs defaultActiveKey="1">
          <TabPane tab="搜索" key="1">
            <div style={{ paddingTop: 10 }}>
              <Form layout="inline">
                <FormItem>
                  <Input
                    placeholder="请输入订单编号"
                    value={searchValues["orderNo"]}
                    onChange={(e) => {
                      searchValues["orderNo"] = e.target.value
                      this.setState({
                        searchValues: searchValues,
                      });
                    }}
                  />
                </FormItem>
                <FormItem>
                  <Input
                    placeholder="请输入客户姓名"
                    value={searchValues["name"]}
                    onChange={(e) => {
                      searchValues["name"] = e.target.value
                      this.setState({
                        searchValues: searchValues,
                      });
                    }}
                  />
                </FormItem>
                <FormItem>
                  <Input
                    placeholder="请输入合同编号"
                    value={searchValues["contractNo"]}
                    onChange={(e) => {
                      searchValues["contractNo"] = e.target.value
                      this.setState({
                        searchValues: searchValues,
                      });
                    }}
                  />
                </FormItem>
                <FormItem>
                  <Select
                    placeholder={"请选择结算状态"}
                    style={{ width: 150 }}
                    value={searchValues["liquidationStatus"]
                      ? searchValues["liquidationStatus"]
                      : undefined}
                    onChange={(e) => {
                      searchValues["liquidationStatus"] = e
                      this.setState({
                        searchValues: searchValues,
                      });
                    }}
                  >
                    {onelist.map((it, ins) => (
                      <Option key={it.value}>{it.label}</Option>
                    ))}
                  </Select>
                </FormItem>
                <FormItem>
                  <Select
                    placeholder={"请选择特批状态"}
                    style={{ width: 150 }}
                    value={searchValues["approval"]
                      ? searchValues["approval"]
                      : undefined}
                    onChange={(e) => {
                      searchValues["approval"] = e
                      this.setState({
                        searchValues: searchValues,
                      });
                    }}
                  >
                    {twolist.map((it, ins) => (
                      <Option key={it.value}>{it.label}</Option>
                    ))}
                  </Select>
                </FormItem>
                <FormItem>
                  <Select
                    placeholder={"请选择签单金额"}
                    style={{ width: 150 }}
                    value={searchValues["amountStatus"]
                      ? searchValues["amountStatus"]
                      : undefined}
                    onChange={(e) => {
                      searchValues["amountStatus"] = e
                      this.setState({
                        searchValues: searchValues,
                      });
                    }}
                  >
                    {threelist.map((it, ins) => (
                      <Option key={it.value}>{it.label}</Option>
                    ))}
                  </Select>
                </FormItem>
                <Button
                  type="primary"
                  onClick={() => { this.loadData() }}
                  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>
        </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}
              onRowClick={this.tableRowClick.bind(this)}
            />
          </Spin>
        </div>
        {/* 订单详情 */}
        <OrderDesc
          data={this.state.orderData}
          showDesc={details}
          closeDesc={this.closeDesc.bind(this)}
        />
      </div>
    );
  }
}

export default OrderList;