kede-client/js/component/manageCenter/legalAffairs/collectioning/index.jsx

import React, { Component } from "react";
import TabelContent from "../../../common/tabelContent";
import {
  Form,
  Button,
  message,
  Modal,
  Spin,
  Input,
  DatePicker,
  Radio,
  Popconfirm,
} from "antd";
import LegalRecd from "./legalRecd";
import DunningRecord from "../../order/pressMoney/dunningRecord";
import ImgList from "../../../common/imgList";
import OrderDesc from "../../financialManage/orderDetail/orderDesc";
import $ from "jquery/src/ajax";
const { TextArea } = Input;
const RadioGroup = Radio.Group;
class Collectioningn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        {
          title: "序号",
          dataIndex: "key",
          key: "key",
          width: 45,
        },
        {
          title: "合同编号",
          dataIndex: "contractNo",
          key: "contractNo",
          width: 70,
        },
        {
          title: "客户名称",
          dataIndex: "buyerName",
          key: "buyerName",
          width: 150,
        },
        {
          title: "订单负责人",
          dataIndex: "salesmanName",
          key: "salesmanName",
          width: 120,
        },
        {
          title: "订单部门",
          dataIndex: "depName",
          key: "depName",
          width: 120,
        },
        {
          title: "签单金额（万元）",
          dataIndex: "totalAmount",
          key: "totalAmount",
          width: 80,
        },
        {
          title: "已收款（万元）",
          dataIndex: "settlementAmount",
          key: "settlementAmount",
          width: 80,
        },
        {
          title: "欠款（万元）",
          dataIndex: "orderArrears",
          key: "orderArrears",
          width: 80,
        },
        {
          title: "法务类型",
          dataIndex: "type",
          key: "type",
          width: 125,
        },
        {
          title: "法务时间",
          dataIndex: "operationDate",
          key: "operationDate",
          width: 125,
        },
        {
          title: "操作",
          dataIndex: "id",
          key: "id",
          width: 290,
          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) => {
                    // alert(123)
                    console.log(e);
                  }}
                >
                  查看催款凭证
                </Button> */}
                <Button
                  type="primary"
                  style={{ marginRight: "10px" }}
                  onClick={(e) => {
                    e.stopPropagation();
                    this.setState({
                      visible: true,
                      dataInfor: record,
                    });
                  }}
                >
                  催款记录
                </Button>
                <Button
                  type="primary"
                  style={{ marginRight: "10px",display:this.state.adminHid }}
                  onClick={(e) => {
                    e.stopPropagation();
                    this.setState({
                      visibleLegal: true,
                      dataInfor: record,
                    });
                  }}
                >
                  新增法务
                </Button>
                {/* 法务记录 */}
                <Button
                  type="primary"
                  style={{ marginRight: "10px" }}
                  onClick={(e) => {
                    e.stopPropagation();
                    this.setState({
                      visibleRecd: true,
                      dataInfor: record,
                    });
                  }}
                >
                  法务记录
                </Button>
              </div>
            );
          },
        },
      ],
      searchList: [
        {
          type: "text",
          dataKey: "userName",
          placeholder: "请输入客户名称",
        },
        {
          type: "text",
          dataKey: "contractNo",
          placeholder: "请输入合同编号",
        },
        {
          type: "autoComplete",
          dataKey: "aid",
          api: "/api/admin/customer/listAdminByName",
          search: "adminName",
          placeholder: "请输入营销人名称",
        },
        {
          type: "newDepartmentSelect",
          dataKey: "deps",
          placeholder: "请选择订单部门",
        },
        {
          type: "times",
          title: "法务时间",
          dataKey: ["startTime", "endTime"],
        },
      ],
      RowData: {},
      loading: false,
      visibleModel: false,
      visible: false,
      visibleLegal: false,
      loading: false,
      LegalKeys: 0,
      visibleRecd: false,
      showDesc:false,
      RowData:{},
      adminHid:"inline-block"
    };
    this.tableRowClick = this.tableRowClick.bind(this);
    this.modelBack = this.modelBack.bind(this);
    this.onFresh = this.onFresh.bind(this);
    this.addLegal = this.addLegal.bind(this);
    this.tabelContentRef = null;
  }
  componentDidMount() {
    if(!adminData.isLegal) {
      this.setState({
        adminHid:"none"
      })
      // console.log(adminData.isLegal);
    }
  }
  tableRowClick(record, index) {
    this.setState({
      showDesc: true,
      RowData: record,
    });
    // console.log(record);
  }
  closeDesc(e, s) {
    this.state.showDesc = e;
    if (s) {
      this.loadData(this.state.page);
    }
  }
  modelBack() {
    this.setState({
      visibleLegal: true,
    });
  }
  onCancel() {
    // console.log(1);
  }
  onFresh() {
    this.setState({
      visibleRecd: false,
    });
    this.tabelContentRef && this.tabelContentRef.onRefresh();
  }
  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 + 11,
            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() {
    const { visibleModel, loading, RowData } = this.state;
    const FormItem = Form.Item;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 12 },
    };
    return (
      <div className="user-content signatureStatistics">
        <div className="content-title">
          <span>法务催收中</span>
        </div>
        <TabelContent
          ref={(ref) => (this.tabelContentRef = ref)}
          scroll={{ x: 0, y: 1000 }}
          searchList={this.state.searchList}
          columns={this.state.columns}
          tabelApi={"/api/admin/lagalAffairs/orderList"}
          exportApi={"/api/admin/lagalAffairs/orderList/Exprot"}
          query={{ type: 1 }}
          //修改type类型
          exportExecProcessing={(data) => {
            data.type = 1;
            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;
              if (thisdata.type == 0) {
                thisdata.type = "法务催收中";
              } else if (thisdata.type == 1) {
                thisdata.type = "延期法务";
              } else if (thisdata.type == 2) {
                thisdata.type = "已完成法务";
              }
              theArr.push(thisdata);
            }
            return theArr;
          }}
          onRowClick={this.tableRowClick}
        />
        {this.state.visibleRecd && (
          <LegalRecd
            hid={this.state.adminHid}
            searchList={this.state.searchList}
            dataInfor={this.state.dataInfor}
            onFresh={this.onFresh}
            visibleRecd={this.state.visibleRecd}
            modelBack={this.modelBack}
            onCancel={() => {
              this.setState({
                visibleRecd: false,
                dataInfor: {},
              });
            }}
          />
        )}
        <div>
          <Modal
            maskClosable={false}
            visible={this.state.visibleLegal}
            key={this.state.LegalKeys + 11}
            onCancel={() => {
              this.setState({
                visibleLegal: false,
                LegalKeys: this.state.LegalKeys + 11,
              });
            }}
            width="1200px"
            title="新增法务数据"
            footer=""
            className="admin-desc-content"
          >
            <Form
              onSubmit={this.handleSubmit}
              ref={this.formRef}
              style={{ marginRight: "120px" }}
            >
              <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 + 11,
                  });
                }}
              >
                取消
              </Button>
            </div>
          </Modal>
        </div>
        {this.state.visible ? (
          <DunningRecord
            hid={"none"}
            dataInfor={this.state.dataInfor}
            visible={this.state.visible}
            onCancel={() => {
              this.setState({
                visible: false,
                dataInfor: {},
              });
            }}
          />
        ) : (
          ""
        )}
        <OrderDesc
          data={this.state.RowData}
          showDesc={this.state.showDesc}
          closeDesc={this.closeDesc.bind(this)}
        />
      </div>
    );
  }
}

export default Collectioningn;