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

import React, { Component } from "react";
import TabelContent from "../../../common/tabelContent";
import {
  Button,
  Modal,
  Tag,
  Form,
  DatePicker,
  Input,
  message,
  Upload,
  Icon,
  Radio,
  Popconfirm,
} from "antd";
import $ from "jquery/src/ajax";
import DunningRecord from "./dunningRecord";
import ImgList from "../../../common/imgList";
import { splitUrl } from "../../../tools.js";
import download from "downloadjs";
import LegalRecd from "../../legalAffairs/collectioning/legalRecd";
import TablePopup from "../../legalAffairs/collectioning/tablePopup";
const confirm = Modal.confirm;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
class PressMoney extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        {
          title: "序号",
          dataIndex: "key",
          key: "key",
          width: 35,
        },
        {
          title: "合同编号",
          dataIndex: "contractNo",
          key: "contractNo",
          width: 90,
        },
        {
          title: "客户名称",
          dataIndex: "buyerName",
          key: "buyerName",
          width: 150,
        },
        {
          title: "订单负责人",
          dataIndex: "salesmanName",
          key: "salesmanName",
          width: 100,
        },
        {
          title: "订单部门",
          dataIndex: "depName",
          key: "depName",
          width: 120,
        },
        {
          title: "签单金额(万元)",
          dataIndex: "totalAmount",
          key: "totalAmount",
          width: 80,
        },
        {
          title: "已收款(万元)",
          dataIndex: "settlementAmount",
          key: "settlementAmount",
          width: 80,
        },
        {
          title: "应收款(万元)",
          dataIndex: "orderReceivables",
          key: "orderReceivables",
          width: 80,
        },
        {
          title: "欠款(万元)",
          dataIndex: "orderArrears",
          key: "orderArrears",
          width: 80,
        },
        {
          title: "催款启动日期",
          dataIndex: "dunStartTimes",
          key: "dunStartTimes",
          width: 100,
        },
        {
          title: "自动移交法务(天)",
          dataIndex: "daysRemaining",
          key: "daysRemaining",
          width: 90,
          render: (text) => {
            return text === 0 ? "已移交法务" : text + "天";
          },
        },
        {
          title: "操作",
          dataIndex: "id",
          key: "id",
          width: 250,
          render: (text, record, index) => {
            let _this = this;
            return (
              <div style={{ display: "flex", alignItems: "center" }}>
                <Button
                  disabled={record.daysRemaining === 0}
                  type="primary"
                  style={{ marginRight: "10px" }}
                  onClick={(e) => {
                    this.setState({
                      visibleTransfer: true,
                      orderNoTransfer: record.orderNo,
                    });
                    // e.stopPropagation();
                    // confirm({
                    //   title: "提醒",
                    //   content: "你确定移交法务吗?",
                    //   okText: "转交",
                    //   cancelText: "取消",
                    //   onOk() {
                    //     _this.transfer(record.orderNo);
                    //   },
                    // });
                  }}
                >
                  移交法务
                </Button>
                <Button
                  type="primary"
                  style={{ marginRight: "10px" }}
                  onClick={(e) => {
                    e.stopPropagation();
                    this.setState({
                      visible: true,
                      dataInfor: record,
                    });
                    // console.log(record);
                  }}
                >
                  催款记录
                </Button>
                <Button
                  type="primary"
                  style={{ marginRight: "10px" }}
                  onClick={(e) => {
                    this.setState({
                      visibleTwo: true,
                      dataInfor: record,
                    });
                    e.stopPropagation();
                  }}
                >
                  法务记录
                </Button>
              </div>
            );
          },
        },
      ],
      searchList: [
        {
          type: "text",
          dataKey: "contractNo",
          placeholder: "请输入合同编号",
        },
        {
          type: "text",
          dataKey: "userName",
          placeholder: "请输入客户名称",
        },
        {
          type: "autoComplete",
          dataKey: "aid",
          api: "/api/admin/customer/listAdminByName",
          search: "adminName",
          placeholder: "请输入营销人名称",
        },
        // {
        //   type: "departmentSelect",
        //   dataKey: "depId",
        //   placeholder: "请选择订单部门",
        // },
        {
          type: "newDepartmentSelect",
          dataKey: "deps",
          placeholder: "请选择订单部门",
        },
        {
          type: "select",
          dataKey: "legalAffairs",
          placeholder: "请选择是否移交法务",
          selectList: [
            {
              value: "1",
              label: "已移交法务",
            },
            {
              value: "0",
              label: "未移交法务",
            },
          ],
        },
        {
          type: "times",
          title: "催款启动",
          dataKey: ["startTime", "endTime"],
        },
      ],
      columnsTwo: [
        {
          title: "序号",
          dataIndex: "key",
          key: "key",
          width: 45,
        },
        {
          title: "操作人名称",
          dataIndex: "adminName",
          key: "adminName",
          width: 140,
        },
        {
          title: "客户名称",
          dataIndex: "userName",
          key: "userName",
          width: 140,
        },
        {
          title: "法务时间",
          dataIndex: "operationDate",
          key: "operationDate",
          width: 140,
        },
        {
          title: "详细",
          dataIndex: "remarks",
          key: "remarks",
          width: 140,
        },
        {
          title: "法务类型",
          dataIndex: "type",
          key: "type",
          width: 140,
        },
        {
          title: "操作时间",
          dataIndex: "createDate",
          key: "createDate",
          width: 140,
        },
        {
          title: "操作",
          dataIndex: "attachmentUrl",
          key: "attachmentUrl",
          width: 100,
          render: (text, record) => {
            return (
              <Button
                type="primary"
                disabled={record.name === 0}
                onClick={(attachmentUrl) => {
                  // alert(1)
                  let data = JSON.parse(text);
                  this.setState({
                    visibleTree: true,
                    downloadList: data,
                  });
                  // console.log(data);
                }}
              >
                下载凭证
              </Button>
            );
          },
        },
      ],
      visible: false,
      visibleRest: false,
      date: "",
      remarks: "",
      mainModalKeys: 0,
      voucher: "下载凭证",
      loading: false,
      downloadList: [],
      visibleLegal: false,
      LegalKeys: 10,
      visibleTwo: false,
      visibleTree: false,
      visibleTransfer: false,
      orderNoTransfer: "",
      transferKey: 0,
    };
    // this.tabelContentRef = null;
    this.transfer = this.transfer.bind(this);
    this.formRef = {};
    this.downloadAll = this.downloadAll.bind(this);
    // this.tabelContentRef = null;
    this.addLegal = this.addLegal.bind(this);
  }

  transfer(orderNo) {
    this.setState({
      transferLoading: true,
    });
    if (this.state.remarks == "") {
      message.warning("请填写原因");
    }
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/lagalAffairs/transfer",
      data: {
        orderNo,
        remarks: this.state.remarks,
      },
      success: function (data) {
        if (data.error.length) {
          message.warning(data.error[0].message);
        } else {
          message.success("移交成功");
          this.setState({
            visibleTransfer: false,
            transferKey: this.state.transferKey + 13
          });
          this.tabelContentRef && this.tabelContentRef.onRefresh();
        }
      }.bind(this),
    }).done(
      function () {
        this.setState({
          transferLoading: false,
        });
      }.bind(this)
    );
  }
  downloadAll() {
    let list = this.state.downloadList;
    list.forEach((element, key) => {
      // console.log(element);
      setTimeout(() => {
        const a = document.createElement("a");
        a.style.display = "none";
        a.href = `${window.window.globalConfig.context}/open/download?fileName=${element.url}&delete=false&attName=${element.name}`;
        // console.log(a.href);
        document.body.appendChild(a);
        a.click(); // 自动触发点击a标签的click事件
        document.body.removeChild(a);
      }, key * 100);
    });
  }
  // getUrl(e, n) {
  //   let url = splitUrl(e, ",", globalConfig.avatarHost + "/upload");
  //   url.forEach((element) => {
  //     download(element.url, n);
  //     console.log(element.url, n);
  //   });
  // }
  addLegal() {
    let theorgCodeUrl = [];
    if (!this.state.fileList) {
      message.warning("请上传凭证");
      return;
    } else {
      let picArr = [];
      this.state.fileList.map(function (item) {
        if (item.response && item.response.data && item.response.data.length) {
          picArr.push({ name: item.name, url: item.response.data });
        }
      });
      theorgCodeUrl = JSON.stringify(picArr);
      // console.log(theorgCodeUrl);
    }
    if (!this.state.date) {
      message.warning("请选择时间");
      return;
    }
    this.setState({
      addDunOrderLoading: true,
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/lagalAffairs/addLagalAffairsLog",
      data: {
        orderNo: this.state.dataInfor.orderNo,
        type: this.state.type,
        status: this.state.status ? this.state.status : 0,
        date: this.state.date,
        remarks: this.state.remarks,
        attachmentUrl: theorgCodeUrl.length ? theorgCodeUrl : "",
      },
      success: function (data) {
        if (data.error.length) {
          this.setState({
            loading: false,
          });
          message.warning(data.error[0].message);
        } else {
          this.setState({
            loading: false,
            visibleLegal: false,
            LegalKeys: this.state.LegalKeys + 10,
            fileList: undefined,
          });
          // this.props.visible = false
          message.success("添加成功");
          this.tabelContentRef && this.tabelContentRef.onRefresh();
          // console.log(this.tabelContentRef);
        }
      }.bind(this),
    }).done(
      function () {
        this.setState({
          addDunOrderLoading: false,
        });
      }.bind(this)
    );
  }
  render() {
    let downloadList = this.state.downloadList;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 12 },
    };
    // console.log(this.props.visibleRest);
    // console.log(this.props.infor);
    return (
      <div className="user-content signatureStatistics">
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>催款记录</span>
        </div>
        <TabelContent
          ref={(ref) => (this.tabelContentRef = ref)}
          scroll={{ x: 0, y: 1000 }}
          changeFn={this.state.columns}
          searchList={this.state.searchList}
          columns={this.state.columns}
          tabelApi={"/api/admin/lagalAffairs/orderList"}
          exportApi={"/api/admin/lagalAffairs/orderList/Exprot"}
          query={{ type: 0 }}
          exportExecProcessing={(data) => {
            data.type = 0;
            return data;
          }}
          dataProcessing={(data) => {
            let theArr = [];
            for (let i = 0; i < data.data.list.length; i++) {
              let thisdata = data.data.list[i];
              thisdata.key = i + 1;
              theArr.push(thisdata);
            }
            return theArr;
          }}
        />

        {this.state.visibleTwo ? (
          <Modal
            visible={this.state.visibleTwo}
            onOk={() => {
              this.setState({
                visibleTwo: false,
              });
            }}
            onCancel={() => {
              this.setState({
                visibleTwo: false,
              });
            }}
            width="1100px"
            title={
              <span
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  paddingRight: "10px",
                }}
              >
                <span>
                  <span style={{ marginRight: "5px" }}>法务记录列表</span>
                  <Tag color="pink">
                    客户名称：{this.state.dataInfor.buyerName}
                  </Tag>
                </span>
                {/* <Button
                  type="primary"
                  onClick={(e) => {
                    e.stopPropagation();
                    this.setState({
                      visibleLegal: true,
                    });
                  }}
                >
                  添加法务记录
                </Button> */}
              </span>
            }
            footer=""
            className="admin-desc-content"
          >
            <TablePopup
              ref={(ref) => (this.tabelContentRef = ref)}
              columns={this.state.columnsTwo}
              tabelApi={"/api/admin/lagalAffairs/lagalAffairsLogList"}
              query={{ orderNo: this.state.dataInfor.orderNo }}
              dataProcessing={(data) => {
                // console.log(this.state);
                // console.log(data.data);
                let theArr = [];
                for (let i = 0; i < data.data.length; i++) {
                  let thisdata = data.data[i];
                  thisdata.key = i + 1;
                  //   console.log(thisdata.attachmentUrl);
                  //   console.log(this.state.voucher);
                  if (!thisdata.attachmentUrl) {
                    thisdata.name = 0;
                  }
                  let status;
                  if (thisdata.status == 0) {
                    status = "否";
                  } else if (thisdata.status == 1) {
                    status = "已回款";
                  } else if (thisdata.status == 2) {
                    status = "已诉讼";
                  } else if (thisdata.status == 3) {
                    status = "已坏账处理";
                  }
                  if (thisdata.type == 0) {
                    thisdata.type = "法务催收中";
                  } else if (thisdata.type == 1) {
                    thisdata.type = "延期法务";
                  } else if (thisdata.type == 2) {
                    thisdata.type = `已完成法务/${status}`;
                  } else if (thisdata.type == 3) {
                    thisdata.type = "自动转交";
                  } else if (thisdata.type == 4) {
                    thisdata.type = "营销转交";
                  }
                  // console.log(thisdata);
                  theArr.push(thisdata);
                }
                return theArr;
              }}
            />
            {/*  */}
            <div>
              <Modal
                maskClosable={false}
                visible={this.state.visibleLegal}
                key={this.state.LegalKeys + 10}
                onCancel={() => {
                  this.setState({
                    visibleLegal: false,
                    LegalKeys: this.state.LegalKeys + 10,
                  });
                }}
                width="1200px"
                title="新增法务数据"
                footer=""
                className="admin-desc-content"
              >
                <Form
                  onSubmit={this.handleSubmit}
                  ref={this.formRef}
                  style={{ marginRight: "100px" }}
                >
                  <Form.Item
                    {...formItemLayout}
                    label="法务类型"
                    name="type"
                    hasFeedback
                  >
                    <RadioGroup
                      onChange={(e) => {
                        this.setState({
                          type: e.target.value,
                        });
                      }}
                    >
                      <Radio value="0">法务催收中</Radio>
                      <Radio value="1">延期法务</Radio>
                      <Radio value="2">法务已完成</Radio>
                    </RadioGroup>
                  </Form.Item>
                  {this.state.type == 2 ? (
                    <Form.Item
                      {...formItemLayout}
                      label="完成状态"
                      name="status"
                      hasFeedback
                    >
                      <RadioGroup
                        onChange={(e) => {
                          this.setState({
                            status: e.target.value,
                          });
                        }}
                      >
                        <Radio value="1">已回款</Radio>
                        <Radio value="2">以诉讼</Radio>
                        <Radio value="3">以坏账处理</Radio>
                      </RadioGroup>
                    </Form.Item>
                  ) : (
                    ""
                  )}
                  <Form.Item
                    name="date"
                    {...formItemLayout}
                    label="延期时间"
                    hasFeedback
                  >
                    <DatePicker
                      onChange={(date, dateString) => {
                        this.setState({
                          date: dateString,
                        });
                      }}
                    />
                  </Form.Item>
                  <Form.Item
                    name="remarks"
                    {...formItemLayout}
                    label="法务情况"
                    hasFeedback
                  >
                    <TextArea
                      rows={4}
                      onChange={(e) => {
                        this.setState({
                          remarks: e.target.value,
                        });
                      }}
                    />
                  </Form.Item>
                  <Form.Item
                    name="fileList"
                    {...formItemLayout}
                    label="附件"
                    hasFeedback
                  >
                    <ImgList
                      accept="application/pdf,image/png,application/msword"
                      domId="nowProjectStatus"
                      uploadConfig={{
                        action:
                          globalConfig.context +
                          "/api/admin/newOrder/uploadDunLogFile",
                        data: { sign: "dun_log_attachment" },
                        multiple: true,
                        listType: "text",
                      }}
                      onChange={(info) => {
                        let fileList = info.fileList;
                        this.setState({ fileList });
                      }}
                      fileList={this.state.fileList}
                    />
                  </Form.Item>
                </Form>
                <div style={{ display: "flex", justifyContent: "center" }}>
                  <Button type="primary" loading={this.state.loading}>
                    <Popconfirm
                      title="您确定此订单提交法务数据?"
                      onConfirm={this.addLegal}
                      onCancel={() => {
                        this.setState({
                          loading: false,
                        });
                      }}
                      okText="确定"
                      cancelText="取消"
                      loading={this.state.loading}
                    >
                      <a href="#">提交</a>
                    </Popconfirm>
                  </Button>
                  <Button
                    type="dashed"
                    style={{ marginLeft: "15px" }}
                    onClick={() => {
                      this.setState({
                        visibleLegal: false,
                        LegalKeys: this.state.LegalKeys + 10,
                      });
                    }}
                  >
                    取消
                  </Button>
                </div>
              </Modal>
            </div>
            <Modal
              visible={this.state.visibleTree}
              onCancel={(e) =>
                this.setState({
                  visibleTree: false,
                  mainModalKeys: this.state.mainModalKeys + 10,
                })
              }
              width="1200px"
              title="下载凭证"
              footer=""
              className="admin-desc-content"
            >
              <ul style={{ margin: "0 0 10px 0" }}>
                {downloadList.map((item, key) => (
                  <li key={key}>
                    <span style={{ fontSize: "18px" }}>{item.name}</span>
                    <div
                      style={{
                        marginLeft: "10px",
                        color: "#333",
                        display: "inline-block",
                        cursor: "pointer",
                        fontSize: "18px",
                      }}
                    // onClick={() => this.getUrl(item.url, item.name)}
                    >
                      <a href={`${window.window.globalConfig.context}/open/download?fileName=${item.url}&delete=false&attName=${item.name}`}>下载附件</a>
                    </div>
                  </li>
                ))}
              </ul>
              <div style={{ display: "flex", justifyContent: "right" }}>
                <Button
                  type="primary"
                  onClick={this.downloadAll}
                  loading={this.state.loading}
                >
                  下载全部
                </Button>
                <Button
                  type="dashed"
                  style={{ marginLeft: "15px" }}
                  onClick={(e) => {
                    this.setState({
                      visibleTree: false,
                      mainModalKeys: this.state.mainModalKeys + 10,
                    });
                  }}
                >
                  取消
                </Button>
              </div>
            </Modal>
          </Modal>
        ) : (
          ""
        )}
        {this.state.visible ? (
          <DunningRecord
            dataInfor={this.state.dataInfor}
            visible={this.state.visible}
            onCancel={() => {
              this.setState({
                visible: false,
                dataInfor: {},
              });
            }}
          />
        ) : (
          ""
        )}
        <Modal
          visible={this.state.visibleTransfer}
          key={this.state.transferKey + 13}
          onCancel={() => {
            this.setState({
              visibleTransfer: false,
              transferKey: this.state.transferKey + 13
            });
          }}
          width="500px"
          style={{ color: "red" }}
          footer=""
          className="admin-desc-content"
        >
          <div>
            {" "}
            <Icon
              type="exclamation-circle-o"
              style={{ color: "red", fontSize: "16px" }}
            />
            <span
              style={{
                color: "red",
                fontSize: "16px",
                display: "inline-block",
                marginLeft: "10px",
              }}
            >
              您确定移交法务？
            </span>
          </div>
          <div style={{ margin: "30px 0" }}>
            <Form onSubmit={this.handleSubmit} ref={this.formRef}>
              <Form.Item
                {...formItemLayout}
                label="请填写移交法务的原因"
                name="type"
                hasFeedback
              >
                <TextArea
                  rows={4}
                  onChange={(e) => {
                    this.setState({
                      remarks: e.target.value,
                    });
                  }}
                />
              </Form.Item>
            </Form>
          </div>
          <div style={{ display: "flex", justifyContent: "right" }}>
            <Button
              type="primary"
              loading={this.state.loading}
              onClick={() => this.transfer(this.state.orderNoTransfer)}
            >
              提交
            </Button>
            <Button
              type="dashed"
              style={{ marginLeft: "15px" }}
              onClick={() => {
                this.setState({
                  visibleTransfer: false,
                  transferKey: this.state.transferKey + 13
                });
              }}
            >
              取消
            </Button>
          </div>
        </Modal>
      </div>
    );
  }
}

export default PressMoney;