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

import React, { Component } from "react";
import TabelContent from "../../../common/tabelContent";
import { Button, Modal, Tag, Form, DatePicker, Input, message } from "antd";
import ImgList from "../../../common/imgList";
import $ from "jquery/src/ajax";
import { splitUrl } from "../../../tools.js";
import TablePopup from "../../legalAffairs/collectioning/tablePopup";
import download from "downloadjs";
const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
  },
};

class DunningRecord extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        {
          title: "序号",
          dataIndex: "key",
          key: "key",
          width: 45,
        },
        {
          title: "操作人名称",
          dataIndex: "dumBy",
          key: "dumBy",
          width: 140,
        },
        {
          title: "客户名称",
          dataIndex: "userName",
          key: "userName",
          width: 140,
        },
        {
          title: "催款时间",
          dataIndex: "dumDate",
          key: "dumDate",
          width: 140,
        },
        {
          title: "情况",
          dataIndex: "remarks",
          key: "remarks",
          width: 140,
        },
        {
          title: "操作时间",
          dataIndex: "createDate",
          key: "dumTime",
          width: 140,
        },
        {
          title: "操作",
          dataIndex: "attachmentUrl",
          key: "attachmentUrl",
          width: 100,
          render: (text, record) => {
            return (
              <Button
                type="primary"
                disabled={record.name === 0}
                onClick={(attachmentUrl) => {
                  let data = JSON.parse(text);
                  this.setState({
                    visibleDownload: true,
                    downloadList: data,
                  });
                  // console.log(data);
                }}
              >
                {this.state.voucher}
              </Button>
            );
          },
        },
      ],
      visible: false,
      date: "",
      remarks: "",
      mainModalKeys: 0,
      voucher: "下载凭证",
      loading: false,
      downloadList: [],
      visibleDownload: false,
    };
    this.formRef = {};
    this.downloadAll = this.downloadAll.bind(this);
    this.addDunOrder = this.addDunOrder.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);
  //   });
  // }
  addDunOrder() {
    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);
    }
    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/addDunOrder",
      data: {
        orderNo: this.props.dataInfor.orderNo,
        date: this.state.date,
        remarks: this.state.remarks,
        attUrl: theorgCodeUrl.length ? theorgCodeUrl : "",
      },
      success: function (data) {
        if (data.error.length) {
          message.warning(data.error[0].message);
        } else {
          this.setState({
            visible: false,
            mainModalKeys: this.state.mainModalKeys + 1,
            loading: false,
            fileList: undefined,
          });
          message.success("添加成功");
          this.tabelContentRef && this.tabelContentRef.onRefresh();
        }
      }.bind(this),
    }).done(
      function () {
        this.setState({
          addDunOrderLoading: false,
        });
      }.bind(this)
    );
  }
  // onCancel() {
  //     console.log(this.state.visible);
  // }
  render() {
    const { visibleDownload, downloadList } = this.state;
    // console.log(this.props.dataInfor);
    return (
      <Modal
        maskClosable={false}
        visible={this.props.visible}
        onOk={this.props.onCancel}
        onCancel={this.props.onCancel}
        width="1200px"
        title={
          <span
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              paddingRight: "10px",
            }}
          >
            <span>
              <span style={{ marginRight: "5px" }}>催款记录列表</span>
              <Tag color="pink">
                初始客户名称：{this.props.dataInfor.buyerName}
              </Tag>
            </span>
            <Button
              style={{ display: this.props.hid || "inline-block" }}
              type="primary"
              onClick={(e) => {
                e.stopPropagation();
                this.setState({
                  visible: true,
                });
              }}
            >
              添加催款记录
            </Button>
          </span>
        }
        footer=""
        className="admin-desc-content"
      >
        <TablePopup
          ref={(ref) => (this.tabelContentRef = ref)}
          columns={this.state.columns}
          tabelApi={"/api/admin/lagalAffairs/dunOrderList"}
          query={{ orderNo: this.props.dataInfor.orderNo }}
          dataProcessing={(data) => {
            // 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;
              }
              //   console.log(thisdata);
              theArr.push(thisdata);
            }
            return theArr;
          }}
        />
        <Modal
          maskClosable={false}
          visible={this.state.visible}
          onOk={(e) =>
            this.setState({
              visible: false,
            })
          }
          onCancel={(e) =>
            this.setState({
              visible: false,
              mainModalKeys: this.state.mainModalKeys + 1,
              fileList: undefined,
            })
          }
          key={this.state.mainModalKeys}
          width="1200px"
          title="新增催款记录"
          footer=""
          className="admin-desc-content"
        >
          <Form onSubmit={this.handleSubmit} ref={this.formRef}>
            <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>
            <div style={{ display: "flex", justifyContent: "center" }}>
              <Button
                type="primary"
                onClick={this.addDunOrder}
                loading={this.state.loading}
              >
                提交
              </Button>
              <Button
                type="dashed"
                style={{ marginLeft: "15px" }}
                onClick={(e) => {
                  this.setState({
                    visible: false,
                    mainModalKeys: this.state.mainModalKeys + 1,
                    fileList: undefined,
                  });
                }}
              >
                取消
              </Button>
            </div>
          </Form>
        </Modal>
        {/*  */}
        <Modal
          maskClosable={false}
          visible={visibleDownload}
          onOk={(e) =>
            this.setState({
              visibleDownload: false,
            })
          }
          onCancel={(e) =>
            this.setState({
              visibleDownload: false,
            })
          }
          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({
                  visibleDownload: false,
                });
              }}
            >
              取消
            </Button>
          </div>
        </Modal>
      </Modal>
    );
  }
}

export default DunningRecord;