kede-client/js/component/manageCenter/financialManage/distribute/huiKuan.jsx

import React from "react";
import $ from "jquery/src/ajax";
import moment from "moment";
import "./public.less";
import {
  Form,
  Button,
  Input,
  Select,
  Spin,
  Table,
  message,
  Modal,
  Upload,
  DatePicker,
  Icon,
  Tabs,
  Popconfirm,
  Tag,
  Tooltip,
} from "antd";
import {
  getProvinceA,
  getInvoiceStatus,
  getprovince,
  getStatus,
  getPeople,
  splitUrl,
  moneyVerify
} from "@/tools";
import { ChooseList } from "../../../../component/manageCenter/order/orderNew/chooseList";
import "./huiKuan.less"
import LogPopup from "../../../common/logPopup";
import Cascaders from "../../../common/cascaders";

const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const { TextArea } = Input;
const { TabPane } = Tabs;

const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 19 }
};

const HuiKuan = React.createClass({
  loadData(pageNo, pageSize) {
    this.state.data = [];
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/receivables/listReceivables",
      data: {
        pageNo: pageNo || 1,
        pageSize: pageSize || this.state.pagination.pageSize,
        // 0 正常 1 待合并库
        mergeStatus: this.state.mergeStatus,
        // 订单状态 判断是否重复
        status: this.state.statusSearch,
        // 订单编号
        orderNo: this.state.orderNoSearch,
        // 合同编号
        contractNo: this.state.nameSearch,
        // 付款方
        corporateName: this.state.payFrom,
        // 营销员名字
        adminName: this.state.adminName,
        // 客户名称
        nickname: this.state.nickname,
        // 订单所属部门id
        orderDeps: this.state.orderDeps,
        // 管理员部门id
        adminDeps: this.state.adminDeps
      },
      success: function (data) {
        let theArr = [];
        if (!data.data || !data.data.pagination.list) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          for (let i = 0; i < data.data.pagination.list.length; i++) {
            let thisdata = data.data.pagination.list[i];
            theArr.push({
              key: thisdata.id,
              status: {
                first: thisdata.status,
                second: thisdata.inptStatus
              },
              orderNo: thisdata.orderNo,
              contractNo: thisdata.contractNo,
              corporateName: thisdata.corporateName,
              nickname: thisdata.nickname,
              totalAmount: thisdata.totalAmount,
              depName: thisdata.depName,
              amount: thisdata.amount,
              receivablesTimes: thisdata.receivablesTimes,
              createTimes: thisdata.createTimes,
              remarks: thisdata.remarks,
              financialPayNo: thisdata.financialPayNo,
              settlementAmount: thisdata.settlementAmount
            });
          }
        }
        this.state.pagination.current = data.data.pagination.pageNo;
        this.state.pagination.total = data.data.pagination.totalCount;
        if (
          data.data &&
          data.data.pagination.list &&
          !data.data.pagination.list.length
        ) {
          this.state.pagination.current = 0;
          this.state.pagination.total = 0;
        }
        this.setState({
          totalPage: data.data.pagination.totalPage,
          dataSource: theArr,
          pagination: this.state.pagination,
          totalHui: data.data.count ? data.data.count.totalAmount : 0,
          hui: data.data.count ? data.data.count.amount : 0
        });

        // console.log(this.state.dataSource);
      }.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);
          }
        } 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)
    );
  },

  getInitialState() {
    return {
      matching: "",
      matchList: [],
      mergeStatus: 0,
      mergeModal: false,
      visible: false,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      searchMore: true,
      assignVisible: false,
      releaseDate: [],
      totalPage: 0,
      boHuivisible: false,
      selectedRows: [],
      // 弹出层数据
      modalData: {},
      // userName: "",
      contractNo: "",
      reason: "",
      foo: 0,
      // 子组件改变的表格title数组
      changeList: undefined,
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        }
      },
      paginationModal: {
        pageSize: 100,
        showTotal: function (total) {
          return "共" + total + "条数据";
        }
      },
      columns: [
        {
          title: "合同编号",
          dataIndex: "contractNo",
          key: "contractNo",
          // fixed: "left"
          className: "title-table"
        },
        {
          title: "订单编号",
          dataIndex: "orderNo",
          key: "orderNo",
          className: "title-table"
        },
        {
          title: "流水编号",
          dataIndex: "financialPayNo",
          key: "financialPayNo",
          className: "title-table"
        },
        {
          title: "客户名称",
          dataIndex: "nickname",
          key: "nickname",
          className: "title-table",
          width: 150,
          render: (text) => {
            return (
              <Tooltip title={text}>
                <div
                // style={{
                //   maxWidth: '150px',
                //   overflow: 'hidden',
                //   textOverflow: "ellipsis",
                //   whiteSpace: 'nowrap',
                // }}
                >{text}</div>
              </Tooltip>
            )
          },
        },
        {
          title: "付款方",
          dataIndex: "corporateName",
          key: "corporateName",
          className: "title-table"
        },
        {
          title: "合同额(万元)",
          dataIndex: "totalAmount",
          key: "totalAmount",
          className: "title-table"
        },
        {
          title: "已收款(万元)",
          dataIndex: "settlementAmount",
          key: "settlementAmount",
          className: "title-table"
        },
        {
          title: "本次回款(万元)",
          dataIndex: "amount",
          key: "amount",
          className: "title-table"
        },
        {
          title: "回款时间",
          dataIndex: "receivablesTimes",
          key: "receivablesTimes",
          className: "title-table"
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          className: "title-table",
          render: status => {
            let str = "";
            let color = "";
            let str2 = "";
            let color2 = "";
            if (status.first == 0) {
              color = "#87d068";
              str = "正常"
              if (status.second == 1) {
                str = "内容缺失"
                color = "#000";
              } else if (status.second == 2) {
                str = "订单异常"
                color = "#000";
              } else if (status.second == 3) {
                str = "名称不一致"
                color = "#000";
              }
            } else if (status.first == 1) {
              str = "重复";
              color = "#f50";
              if (status.second == 1) {
                str2 = "内容缺失";
                color2 = "#000";
              } else if (status.second == 2) {
                str2 = "订单异常";
                color2 = "#000";
              } else if (status.second == 3) {
                str2 = "名称不一致";
                color2 = "#000";
              }
            } else {
              color = "#000";
              if (status.first == 2) {
                str = "订单异常";
              } else if (status.first == 3) {
                str = "金额异常";
              } else if (status.first == 4) {
                str = "名称异常";
              } else if (status.first == 5) {
                str = "已收款";
              } else if (status.first == 6) {
                str = "变更锁定";
              }
            }
            return (
              <div>
                <Tag color={color}>{str}</Tag>
                <Tag color={color2} style={{ display: status.first == 1 && status.second != 0 ? "inline-blcok" : "none" }}>{str2}</Tag>
              </div>
            );
          }
        },
        {
          title: "批量导入时间",
          dataIndex: "createTimes",
          key: "createTimes",
          className: "title-table"
        },
        {
          title: "备注",
          dataIndex: "remarks",
          key: "remarks",
          className: "title-table"
        }
      ],
      columnsDate: [
        {
          title: "编号",
          dataIndex: "id",
          key: "id"
        },
        {
          title: "订单编号",
          dataIndex: "orderno",
          key: "orderno"
        },
        {
          title: "开票金额(万元)",
          dataIndex: "amount",
          key: "amount"
        },
        {
          title: "申请时间",
          dataIndex: "createTime",
          key: "createTime"
        },
        {
          title: "开票状态",
          dataIndex: "status",
          key: "status",
          render: (text, record) => {
            return <div>{getInvoiceStatus(text, record)} <LogPopup id={record.id} /></div>;
          },
        }
      ],
      dataSource: [],

      upLoadFlag: false,
      upLoad: {
        name: "file",
        action: globalConfig.context + "/api/admin/receivables/import",
        headers: {
          authorization: "authorization-text"
        },
        onChange: info => {
          if (info.file.status == "done") {
            if (info.file.response.data == 1) {
              message.success("导入成功！");
              this.loadData();
            } else {
              message.warning(info.file.response.error[0].message);
            }
          }
        }
      }
    };
  },

  search() {
    this.setState({
      selectedRowKeys: []
    })
    this.loadData();
  },

  componentWillMount() {
    this.loadData();
    this.departmentList();

    // $("#rcDialogTitle0").on("click", function() {
    //   alert(123);
    //   console.log(123);
    // });
  },

  reset() {
    this.state.nameSearch = "";
    this.state.releaseDate = [];
    this.state.orderNoSearch = "";
    this.state.adminName = "";
    this.state.departmenttList = [];
    this.state.nickname = "";
    this.state.payFrom = "";
    this.state.statusSearch = [];
    this.state.adminDeps = undefined;
    this.state.orderDeps = undefined;
    this.state.statusSearch = [];
    this.Cascaders1.empty();
    this.Cascaders2.empty();
    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
    });
  },

  onSelectChange(selectedRowKeys) {
    // console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.setState({ selectedRowKeys });
  },

  showModal() {
    this.setState({
      visible: true,
      choose: true
    });
    this.state.dataSource.forEach((item) => {
      if (item.key == this.state.selectedRowKeys[0]) {
        this.setState({
          modalData: JSON.parse(JSON.stringify(item))
        })
        // console.log(this.state.modalData);
      }
    })
  },

  tableRowClick(record) {
    this.setState({
      visible: true,
      choose: true
    });
    this.setState({
      modalData: JSON.parse(JSON.stringify(record))
    });
  },

  handleOk() {
    if (moneyVerify(this.state.modalData.amount)) return
    this.setState({ loading: true });
    if (!this.state.choose) {
      $.ajax({
        method: "POST",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/receivables/addReceivables",
        data: {
          orderNo: this.state.modalData.orderNo,
          amount: this.state.modalData.amount,
          receivablesTimes: this.state.modalData.receivablesTimes,
          // totalAmount: this.state.modalData.totalAmount,
          // contractNo: this.state.modalData.contractNo,
          // nickname: this.state.modalData.nickname,
          remarks: this.state.modalData.remarks,
          corporateName: this.state.modalData.corporateName,
          financialPayNo: this.state.modalData.financialPayNo
        },
        success: function (data) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          } else {
            // console.log("成功", data);
            message.success("添加成功！")
            this.loadData();
            this.state.selectedRowKeys = [];
            this.setState({
              selectedRowKeys: this.state.selectedRowKeys
            });
            this.setState({ loading: false, visible: false });
          }
        }.bind(this)
      }).always(
        function () {
          this.setState({
            loading: false
          });
        }.bind(this)
      );
    } else {
      $.ajax({
        method: "POST",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/receivables/updateReceivables",
        data: {
          orderNo: this.state.modalData.orderNo,
          amount: this.state.modalData.amount,
          receivablesTimes: this.state.modalData.receivablesTimes,
          // totalAmount: this.state.modalData.totalAmount,
          // contractNo: this.state.modalData.contractNo,
          // nickname: this.state.modalData.nickname,
          corporateName: this.state.modalData.corporateName,
          financialPayNo: this.state.modalData.financialPayNo,
          remarks: this.state.modalData.remarks,
          id: this.state.modalData.key
        },
        success: function (data) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          } else {
            // console.log("成功",data);
            message.success("修改成功！")
            this.loadData()
            this.state.selectedRowKeys = [];
            this.setState({
              selectedRowKeys: this.state.selectedRowKeys
            });
            this.setState({ loading: false, visible: false });
          }
        }.bind(this)
      }).always(
        function () {
          this.setState({
            loading: false
          });
        }.bind(this)
      );
    }

    // this.setState({ loading: false, visible: false });

  },

  handleCancel() {
    // this.loadData()
    this.setState({ visible: false });
  },

  callback(key) {
    // console.log(key);
  },

  delChecked() {
    // console.log("被删除列表",this.state.selectedRowKeys);
    let ids = this.state.selectedRowKeys.join(",")
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/receivables/deleteReceivables",
      data: {
        ids,
        type: 0
      },
      success: function (data) {
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        }
        message.success("删除成功！")
      }.bind(this)
    }).always(
      function () {
        this.loadData()
        this.state.selectedRowKeys = [];
        this.setState({
          selectedRowKeys: this.state.selectedRowKeys
        });
      }.bind(this)
    );
    // this.loadData()

  },

  delAllChecked() {
    // console.log("删除全部");
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/receivables/deleteReceivables",
      data: {
        type: 1
      },
      success: function (data) {
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        }
        message.success("删除全部成功！")
      }.bind(this)
    }).always(
      function () {
        this.loadData();
        this.state.selectedRowKeys = [];
        this.setState({
          selectedRowKeys: this.state.selectedRowKeys
        });
      }.bind(this)
    );
    // this.loadData()
    // console.log("aaa", $(".ant-modal-content"));


  },

  mergeAll() {
    // console.log("合并全部");
    this.setState({
      confirmLoading: true
    })
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/receivables/batchImport",
      data: {
        mergeStatus: this.state.mergeStatus,
      },
      success: function (data) {
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          message.success("合并成功！请在收款列表中，查看已收款情况。");
          this.setState({
            mergeModal: false
          });
        }
      }.bind(this)
    }).always(
      function () {
        this.loadData();
        this.state.pagination.pageSize = 10
        this.state.selectedRowKeys = []
        this.setState({
          selectedRowKeys: this.state.selectedRowKeys,
          pagination: this.state.pagination,
          mergeModal: false,
          confirmLoading: false,
        })
        // window.location.reload();
      }.bind(this)
    );
    // message.success("合并成功！请在收款列表中，查看已收款情况。");
  },

  addModal() {
    this.state.modalData = {}
    this.setState({
      modalData: this.state.modalData,
      visible: true,
      choose: false
    })
  },

  download() {
    window.location.href =
      globalConfig.context +
      "/api/admin/receivables/downloadTemplate?" +
      "sign=receivbles_template";
  },
  // daoHui() {
  //   window.location.href =
  //     globalConfig.context +
  //     "/api/admin/receivables/exportReceivables"
  // },

  // 添加至待合并库
  waitingMerge() {
    this.setState({
      confirmLoading: true
    })
    let ids = this.state.selectedRowKeys.join(",")
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/receivables/waitingMerge",
      data: {
        ids,
      },
      success: function (data) {
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          message.success("添加成功！");
          this.setState({
            mergeModal: false
          });
        }
      }.bind(this)
    }).always(
      function () {
        this.loadData();
        this.state.selectedRowKeys = []
        this.setState({
          selectedRowKeys: this.state.selectedRowKeys,
          confirmLoading: false,
        })
      }.bind(this)
    );
  },
  // 匹配客户
  matchingUser(user) {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/receivables/matchingUser",
      data: {
        value: user
      },
      success: function (data) {
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {

          this.setState({
            matching: "orderno",
            matchList: data.data,
          })
        }

      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  },
  // 匹配订单
  matchingOrderNo(orderno) {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/receivables/matchingOrderNo",
      data: {
        value: orderno
      },
      success: function (data) {
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          this.setState({
            matching: "name",
            matchList: data.data,
          })
        }

      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  },
  selCancel() {
    this.setState({
      matching: "",
    })
  },

  render() {
    var departmentArr = this.state.departmentArr || [];
    const { loading, selectedRowKeys, visible } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      hideDefaultSelections: true
    };
    const radioStyle = {
      display: "flex",
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      padding: "5px",
      height: '30px',
      lineHeight: '30px',
      fontSize: "14px",
      borderBottom: "1px solid #e9e9e9",
    };
    var departmentArr = this.state.departmentArr || [];
    return (
      <div className="user-content" style={{ position: "relative" }}>
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>
            批量回款
          </span>
        </div>

        <Tabs defaultActiveKey="1" onChange={this.callback} className="test">
          <TabPane tab="搜索" key="1">
            <div className="user-search" style={{ marginLeft: 10 }}>
              <Input
                placeholder="订单编号"
                value={this.state.orderNoSearch}
                onChange={e => {
                  this.setState({ orderNoSearch: e.target.value });
                }}
              />
              <Input
                placeholder="合同编号"
                value={this.state.nameSearch}
                onChange={e => {
                  this.setState({ nameSearch: e.target.value });
                }}
              />
              <Input
                placeholder="客户名称"
                value={this.state.nickname}
                onChange={e => {
                  this.setState({ nickname: e.target.value });
                }}
              />
              <Select
                placeholder="状态"
                style={{ width: 150, marginRight: 10 }}
                value={this.state.statusSearch}
                onChange={e => {
                  this.setState({ statusSearch: e });
                  // console.log("状态", e);
                }}
              >
                <Select.Option key={0}>正常</Select.Option>
                <Select.Option key={1}>重复</Select.Option>
                <Select.Option key={2}>异常</Select.Option>
              </Select>

              <Input
                placeholder="订单负责人"
                value={this.state.adminName}
                onChange={e => {
                  this.setState({ adminName: e.target.value });
                }}
              />
              <Cascaders
                ref={node => this.Cascaders1 = node}
                placeholder="订单所属部门"
                id="id"
                name="name"
                children="list"
                height={28}
                onSel={(e) => {
                  this.setState({
                    orderDeps: JSON.stringify(e),
                  })
                }}
              />

              {/* <Select
                placeholder="订单所属部门"
                style={{ width: 150, marginRight: 10 }}
                value={this.state.orderBranch}
                onChange={e => {
                  this.setState({ orderBranch: e });
                }}
              >
                {departmentArr.map(function (item) {
                  return (
                    <Select.Option key={item.id}>{item.name}</Select.Option>
                  );
                })}
              </Select> */}

              <Cascaders
                ref={node => this.Cascaders2 = node}
                placeholder="负责人所属部门"
                id="id"
                name="name"
                children="list"
                height={28}
                onSel={(e) => {
                  this.setState({
                    adminDeps: JSON.stringify(e),
                  })
                }}
              />

              {/* <Select
                placeholder="负责人所属部门"
                style={{ width: 150, marginRight: 10 }}
                value={this.state.principalList}
                onChange={e => {
                  this.setState({ principalList: e });
                }}
              >
                {departmentArr.map(function (item) {
                  return (
                    <Select.Option key={item.id}>{item.name}</Select.Option>
                  );
                })}
              </Select> */}

              <Input
                placeholder="付款方"
                value={this.state.payFrom}
                onChange={e => {
                  this.setState({ payFrom: e.target.value });
                }}
              />
              <Button
                type="primary"
                onClick={this.search}
                style={{ marginLeft: 10 }}
              >
                搜索
              </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}
                display={"inline-block"}
                style={{ marginBottom: 17 }}
              />
            </div>
          </TabPane>
          <TabPane tab="操作" key="3">
            <div
              class={123}
              style={{
                position: "relative",
                top: 10,
                left: 10,
                // zIndex: 99,
                // left: 400,
                // transform: "translateX(-50%)",
                display: "inline-block",
                width: 122,
                height: 28,
                overflow: "hidden"
              }}
            >
              <Upload {...this.state.upLoad}>
                <Button
                  type="primary"
                  disabled={this.state.mergeStatus == 1 || this.state.dataSource.length != 0 || this.props.look}
                >
                  <Icon type="upload" />
                  导入回款列表
                </Button>
              </Upload>
            </div>

            <Button
              type="primary"
              style={{ marginBottom: 11, marginLeft: 25 }}
              onClick={this.download}
            >
              下载回款列表模板
            </Button>

            {/* <Button
              type="primary"
              style={{ marginBottom: 20, marginLeft: 15 }}
              onClick={this.daoHui}
            >
              导出回款列表
            </Button> */}

            <Button
              type="primary"
              style={{ marginBottom: 11, marginLeft: 15 }}
              disabled={this.state.selectedRowKeys.length == 1 ? false : true}
              onClick={this.showModal}
            >
              修改单条数据
            </Button>

            <Button
              type="primary"
              style={{ marginBottom: 11, marginLeft: 15 }}
              disabled={this.state.mergeStatus == 1}
              onClick={this.addModal}
            >
              添加单条数据
            </Button>

            <Popconfirm
              placement="top"
              title={"您确定要删除选中项的回款信息吗？删除后，不可以恢复！"}
              onConfirm={this.delChecked}
              okText="确定"
              cancelText="取消"
            >
              <Button
                primary
                type="danger"
                style={{ marginBottom: 11, marginLeft: 15 }}
                disabled={this.state.selectedRowKeys.length > 0 ? false : true}
              >
                删除选中项
              </Button>
            </Popconfirm>

            <Popconfirm
              placement="top"
              title={"您确定要删除全部的回款信息吗？删除后，不可以恢复！"}
              onConfirm={this.delAllChecked}
              okText="确定"
              cancelText="取消"
            >
              <Button
                type="danger"
                style={{ marginBottom: 11, marginLeft: 15 }}
                disabled={this.state.dataSource.length == 0}
              >
                删除全部
              </Button>
            </Popconfirm>

            <Button
              type="danger"
              style={{ marginBottom: 11, marginLeft: 15 }}
              disabled={this.state.dataSource.length == 0 || this.props.look}
              onClick={e => {
                this.loadData(1, 100);
                this.setState({
                  mergeModal: true
                });
              }}
            >
              确认合并回款
            </Button>

            <Button
              type="danger"
              style={{ marginBottom: 11, marginLeft: 15 }}
              disabled={this.state.dataSource.length == 0}
              onClick={e => {
                this.setState({
                  selectedRowKeys: []
                });
              }}
            >
              重置选项
            </Button>

            <Button
              type="primary"
              style={{ marginBottom: 11, marginLeft: 15 }}
              disabled={(this.state.mergeStatus == 1) || (this.state.selectedRowKeys.length > 0 ? false : true)}
              onClick={this.waitingMerge}
            >
              添加至待合并库
            </Button>

            <Button
              type="primary"
              style={{ marginBottom: 11, marginLeft: 15 }}
              onClick={() => {
                this.setState({
                  mergeStatus: this.state.mergeStatus == 0 ? 1 : 0
                }, () => {
                  this.loadData()
                })
              }}
            >
              {this.state.mergeStatus == 0 ? "切换至待合并库列表" : "切换至正常库列表"}
            </Button>

          </TabPane>
        </Tabs>
        <div
          style={{ marginBottom: 10, fontSize: 16 }}
        >{this.state.mergeStatus == 0 ? "正常库列表" : "待合并列表"}</div>
        <div className="patent-table" style={{ position: "relative" }}>
          <Spin spinning={this.state.loading}>
            <Table
              columns={
                this.state.changeList == undefined
                  ? this.state.columns
                  : this.state.changeList
              }
              scroll={{ x: "max-content" }}
              dataSource={this.state.dataSource}
              pagination={this.state.pagination}
              rowSelection={rowSelection}
              onRowDoubleClick={this.tableRowClick.bind(this)}
              bordered
              size="small"
            />
          </Spin>
          <p
            style={{ display: "inline-block", fontSize: "14px", color: "red" }}
          >
            {
              <span style={{ marginRight: 10 }}>
                {`回款金额总计(万元):${this.state.hui ? this.state.hui : "0"}`}
              </span>
            }
            {
              <span>
                {`合同额总计(万元):${this.state.totalHui ? this.state.totalHui : "0"}`}
              </span>
            }
          </p>
        </div>

        <Modal
          width={500}
          visible={visible}
          title="收款记录"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" onClick={this.handleCancel}>
              取消
            </Button>,
            <Button
              key="submit"
              type="primary"
              loading={loading}
              disabled={this.props.look}
              onClick={this.handleOk}
            >
              保存
            </Button>
          ]}
        >
          <p
            style={{
              marginBottom: 10,
              display: this.state.choose ? "block" : "none"
            }}
          >
            <FormItem
              // className="half-item"
              {...formItemLayout}
              label="合同编号"
            >
              <Input
                style={{ width: 180 }}
                disabled={this.state.choose}
                value={this.state.modalData.contractNo}
                onChange={e => {
                  let val = e.target.value;
                  this.state.modalData.contractNo = val;
                  this.setState({ modalData: this.state.modalData });
                }}
              />
            </FormItem>
          </p>
          <p style={{ marginBottom: 10 }}>
            <FormItem
              // className="half-item"
              {...formItemLayout}
              label="订单编号"
            >
              <Input
                style={{ width: 180 }}
                value={this.state.modalData.orderNo}
                onChange={e => {
                  let val = e.target.value;
                  this.state.modalData.orderNo = val;
                  this.setState({ modalData: this.state.modalData });
                }}
              />
              {
                this.state.modalData.corporateName != undefined &&
                <Button
                  type="primary"
                  style={{ marginLeft: 15 }}
                  onClick={() => { this.matchingUser(this.state.modalData.corporateName) }}
                >
                  智能匹配
                </Button>
              }
            </FormItem>
          </p>
          <p style={{ marginBottom: 10 }}>
            <FormItem
              // className="half-item"
              {...formItemLayout}
              label="流水编号"
            >
              <Input
                style={{ width: 180 }}
                value={this.state.modalData.financialPayNo}
                onChange={e => {
                  let val = e.target.value;
                  this.state.modalData.financialPayNo = val;
                  this.setState({ modalData: this.state.modalData });
                }}
              />
            </FormItem>
          </p>
          <p style={{ marginBottom: 10 }}>
            <FormItem
              // className="half-item"
              {...formItemLayout}
              label="付款方"
            >
              <Input
                style={{ width: 180 }}
                value={this.state.modalData.corporateName}
                onChange={e => {
                  let val = e.target.value;
                  this.state.modalData.corporateName = val;
                  this.setState({ modalData: this.state.modalData });
                }}
              />
              {
                this.state.modalData.orderNo != undefined &&
                <Button
                  type="primary"
                  style={{ marginLeft: 15 }}
                  onClick={() => { this.matchingOrderNo(this.state.modalData.orderNo) }}
                >
                  智能匹配
                </Button>
              }
            </FormItem>
          </p>
          <p
            style={{
              marginBottom: 10,
              display: this.state.choose ? "block" : "none"
            }}
          >
            <FormItem
              // className="half-item"
              {...formItemLayout}
              label="客户名称"
            >
              <Input
                style={{ width: 180 }}
                disabled={this.state.choose}
                value={this.state.modalData.nickname}
                onChange={e => {
                  let val = e.target.value;
                  this.state.modalData.nickname = val;
                  this.setState({ modalData: this.state.modalData });
                }}
              />
            </FormItem>
          </p>
          <p
            style={{
              marginBottom: 10,
              display: this.state.choose ? "block" : "none"
            }}
          >
            <FormItem
              // className="half-item"
              {...formItemLayout}
              label="合同额(万元)"
            >
              <Input
                style={{
                  width: 180,
                  display: this.state.choose ? "inline-block" : "none"
                }}
                disabled={this.state.choose}
                value={this.state.modalData.totalAmount}
                onChange={e => {
                  let val = e.target.value;
                  this.state.modalData.totalAmount = val;
                  this.setState({ modalData: this.state.modalData });
                }}
              />
            </FormItem>
          </p>
          <p style={{ marginBottom: 10 }}>
            <FormItem
              // className="half-item"
              {...formItemLayout}
              label="本次回款(万元)"
            >
              <Input
                style={{ width: 180 }}
                value={this.state.modalData.amount}
                onChange={e => {
                  let val = e.target.value;
                  this.state.modalData.amount = val;
                  this.setState({ modalData: this.state.modalData });
                }}
              />
            </FormItem>
          </p>
          <p style={{ marginBottom: 10 }}>
            <FormItem
              // className="half-item"
              {...formItemLayout}
              label="回款时间"
            >
              <DatePicker
                style={{ width: 180 }}
                showTime
                placeholder="选择回款时间"
                value={
                  this.state.modalData.receivablesTimes
                    ? moment(this.state.modalData.receivablesTimes, "YYYY-MM-DD")
                    : ""
                }
                onChange={(v, e) => {
                  this.state.modalData.receivablesTimes = e;
                  this.setState({ modalData: this.state.modalData });
                }}
                onOk={() => { }}
              />
            </FormItem>
          </p>
          <p
            style={{
              marginBottom: 10,
              display: this.state.choose ? "block" : "none"
            }}
          >
            <FormItem
              // className="half-item"
              {...formItemLayout}
              label="批量导入时间"
            >
              <Input
                style={{ width: 180 }}
                value={this.state.modalData.createTimes}
                disabled
                onChange={e => {
                  let val = e.target.value;
                  this.state.modalData.createTimes = val;
                  this.setState({ modalData: this.state.modalData });
                }}
              />
            </FormItem>
          </p>
          <p style={{ marginBottom: 10 }}>
            <FormItem
              // className="half-item"
              {...formItemLayout}
              label="备注"
            >
              <TextArea
                // style={{ width: 180, maxWidth: 180 }}
                value={this.state.modalData.remarks}
                onChange={e => {
                  this.state.modalData.remarks = e.target.value;
                  this.setState({ modalData: this.state.modalData });
                }}
                placeholder="请输入备注信息"
                autosize={{ minRows: 3, maxRows: 5 }}
              />
            </FormItem>
          </p>
        </Modal>
        <Modal
          title="确认合并列表"
          visible={this.state.mergeModal}
          width={1300}
          onOk={this.mergeAll}
          confirmLoading={this.state.confirmLoading}
          onCancel={() => {
            this.setState({
              mergeModal: false
            });
          }}
        >
          <div className="patent-table" style={{ position: "relative" }}>
            <Spin spinning={this.state.loading}>
              <Table
                columns={this.state.columns}
                scroll={{ x: "max-content" }}
                dataSource={this.state.dataSource}
                bordered
                size="small"
                pagination={this.state.paginationModal}
              />
            </Spin>
            <p
              style={{
                display: "inline-block",
                fontSize: "14px",
                color: "red"
              }}
            >
              {
                <span style={{ marginRight: 10 }}>
                  {`回款金额总计(万元):${this.state.hui ? this.state.hui : "0"}`}
                </span>
              }
              {
                <span>
                  {`合同额总计(万元):${this.state.totalHui ? this.state.totalHui : "0"}`}
                </span>
              }
            </p>
          </div>
        </Modal>

        {
          this.state.matching != "" &&
          <Modal
            title="请选择"
            width={400}
            visible={this.state.matching != ""}
            onCancel={this.selCancel}
            footer=""
          >
            <div>
              {
                this.state.matchList.map(item =>
                  <div
                    style={radioStyle}
                    key={this.state.matching == "name" ? item.uid : item.orderNo}
                  >
                    {this.state.matching == "name" ? item.userName : item.orderNo}
                    <Button
                      type="primary"
                      size="small"
                      onClick={() => {
                        this.state.modalData.corporateName = item.userName;
                        this.state.modalData.nickname = item.userName;
                        this.state.modalData.orderNo = item.orderNo;
                        this.setState({
                          matching: "",
                          modalData: this.state.modalData,
                        })
                      }}
                    >确定</Button>
                  </div>
                )
              }
            </div>
          </Modal>
        }
      </div>
    );
  }
});

export default HuiKuan;