| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409 | 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="1000px"        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="900px"          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="900px"          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;
 |