kede-client/js/component/manageCenter/components/checkProject/applyPaymentModal.js

import React, { Component } from 'react';
import { Button, Form, Input, message, Modal, Radio, Spin, InputNumber } from "antd";
import $ from "jquery";

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 14 },
};

class ApplyPaymentModal extends Component {


  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      paymentStatus: 0,
    }
  }

  //申请付款
  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (err) {
        return;
      }
      if (values.quantity < 1) {
        message.warning('申请支付数量不能小于零');
        return false;
      }
      this.setState({
        loading: true
      })
      values.tid = this.props.tid;
      if (this.props.type === 2) {
        values.chooseType = 2;                 //支付类型 0第三方 1催款 2官费
      } else {
        if (this.props.previewPayInfor.nodeId) {                      //催款
          values.nodeId = this.props.previewPayInfor.nodeId;
          values.chooseType = 1;                          //支付选择 0第三方 1催款 2官费
          values.tpcId = this.props.previewPayInfor.cid;  //第三方机构id
        } else {
          values.chooseType = 0                           //支付选择 0第三方 1催款 2官费
          values.tpcId = this.props.previewPayInfor.id;   //第三方机构id
        }
      }
      values.companyName = values.companyName.split('-')[0];
      $.ajax({
        method: 'POST',
        dataType: 'json',
        crossDomain: false,
        url: globalConfig.context + '/api/admin/company/addOrderPayment',
        data: values,
      }).done(
        function (data) {
          this.setState({
            loading: false,
          })
          if (!data.error.length) {
            this.props.changeVisible();
            this.props.onRefresh();
            message.success('申请成功！')
          } else {
            message.warning(data.error[0].message)
          }
        }.bind(this)
      )
    })
  }

  render() {
    const { getFieldDecorator, setFieldsValue } = this.props.form;
    const { previewPayInfor } = this.props;
    if (this.props.type !== 2 && !previewPayInfor) { return; }
    return (
      <Modal
        maskClosable={false}
        footer={null}
        visible={this.props.visible}
        onCancel={() => {
          this.props.changeVisible();
        }}
      >
        <Spin spinning={this.state.loading}>
          <div>
            <div>
              {
                this.props.type === 2 ? "支付供应商官费" : "支付供应商费用"
              }
            </div>
            <Form
              {...layout}
              name="basic"
              initialValues={{
                remember: true,
              }}
              onSubmit={(e) => {
                this.handleSubmit(e)
              }}
            >
              <Form.Item
                {...formItemLayout}
                style={{
                  display: 'flex'
                }}
                label="付款单位/个人:"
              >
                {getFieldDecorator('companyName', {
                  initialValue: this.props.type === 2 ? (adminData.province == "21" ? '国家知识产权局（呼和浩特代办处）' : '国家知识产权局') : previewPayInfor.companyName,
                  rules: [{
                    required: true,
                    message: '请输入付款单位/个人!',
                  }],
                })(
                  <Input
                    style={{ width: '200px' }}
                    placeholder="请输入付款单位/个人"
                  />
                )}
              </Form.Item>
              {/* 0正常 1专利 2软著 3审计 */}
              {this.props.projectType === 1 && this.props.patentType === 1 ? <Form.Item
                {...formItemLayout}
                style={{
                  display: 'flex'
                }}
                label="支付状态:"
              >
                {getFieldDecorator('paymentStatus', {
                  initialValue: this.state.paymentStatus,
                  rules: [{ required: false, message: '请选择支付状态!' }],
                })(
                  <Radio.Group onChange={(e) => {
                    this.setState({
                      paymentStatus: e.target.value
                    })
                    if (e.target.value === 1) {
                      setFieldsValue({
                        quantity: parseInt(previewPayInfor.quantity),
                        applicationAmount: (previewPayInfor.partyAmount ?
                          ((parseFloat(previewPayInfor.totalAmount) * 1000000) - (parseFloat(previewPayInfor.partyAmount) * 1000000)) / 1000000 :
                          parseFloat(previewPayInfor.totalAmount)) / 2
                      });
                    } else if (e.target.value === 2) {
                      setFieldsValue({
                        quantity: parseInt(previewPayInfor.quantity),
                        applicationAmount: (previewPayInfor.partyAmount ?
                          ((parseFloat(previewPayInfor.totalAmount) * 1000000) - (parseFloat(previewPayInfor.partyAmount) * 1000000)) / 1000000 :
                          parseFloat(previewPayInfor.totalAmount))
                      });
                    }
                  }}>
                    <Radio value={0}>自定义</Radio>
                    <Radio value={1}>半款</Radio>
                    <Radio value={2}>全款</Radio>
                  </Radio.Group>
                )}
              </Form.Item> : <div />}
              {this.props.type !== 2 ? <Form.Item
                {...formItemLayout}
                style={{
                  display: 'flex'
                }}
                label="单价(万元):"
              >
                {/*可以查看单价	正常  审计 专利买卖
                                   软著 专利申请 打星号  */}
                {
                  isNaN(parseFloat(previewPayInfor.unitPrice)) ? previewPayInfor.unitPrice :
                    getFieldDecorator('unitPrice', {
                      initialValue: previewPayInfor.unitPrice,
                      rules: [{ required: true, message: '请输入单价!' }],
                    })(
                      <Input disabled={true} style={{ width: '200px' }} placeholder="请输入单价" type={'number'} />
                    )
                }
              </Form.Item> : <div />}
              {/*{*/}
              {/*    this.props.type === 2 ?*/}
              {/*        <Form.Item*/}
              {/*            {...formItemLayout}*/}
              {/*            style={{*/}
              {/*                display:'flex'*/}
              {/*            }}*/}
              {/*            label="官费(万元):"*/}
              {/*        >*/}
              {/*            /!*costReduction  费减 0否 1 是*!/*/}
              {/*            /!*reductionAmount  费减金额*!/*/}
              {/*            /!*officialUnitPrice  官费单价*!/*/}
              {/*            <div>*/}
              {/*              {*/}
              {/*                  previewPayInfor.costReduction === 1 ?*/}
              {/*                      (isNaN(parseFloat(previewPayInfor.reductionAmount)) ? previewPayInfor.reductionAmount : parseFloat(previewPayInfor.reductionAmount)):*/}
              {/*                      (isNaN(parseFloat(previewPayInfor.officialUnitPrice)) ? previewPayInfor.officialUnitPrice : parseFloat(previewPayInfor.officialUnitPrice))*/}
              {/*              }*/}
              {/*            </div>*/}
              {/*        </Form.Item> : <div/>*/}
              {/*}*/}
              <Form.Item
                {...formItemLayout}
                style={{
                  display: 'flex'
                }}
                label="数量(个):"
              >
                {this.props.type === 2 ? this.props.commodityQuantity : previewPayInfor.quantity}
              </Form.Item>
              {this.props.type !== 2 ? <Form.Item
                {...formItemLayout}
                style={{
                  display: 'flex'
                }}
                label="总价(万元):"
              >
                <div>
                  {
                    previewPayInfor.totalAmount

                  }
                </div>
              </Form.Item> : null}
              <Form.Item
                {...formItemLayout}
                style={{
                  display: 'flex'
                }}
                label="本次申请支付数量:"
              >
                {getFieldDecorator('quantity', {
                  initialValue: previewPayInfor.quantity,
                  rules: [{ required: false, message: '请输入本次申请支付数量!' }],
                })(
                  <InputNumber
                    disabled={this.state.paymentStatus !== 0}
                    style={{ width: '200px' }}
                    precision={0}
                    placeholder="请输入本次申请支付数量"
                    onChange={(e) => {
                      if (this.props.projectType === 1 && this.props.patentType === 0) {
                        setFieldsValue({
                          applicationAmount: e * previewPayInfor.unitPrice
                        });
                      }
                    }}
                  />
                )}
              </Form.Item>
              {/*0正常 1专利 2软著 3审计    只有专利里面的专利申请没有本次申请支付金额*/}
              {/*专利的官费申请   本次申请支付金额(万元) 不需要*/}
              {/*startType 1供应商 0外包*/}
              {/*
                                申请官费
                                    本次申请支付数量  都可以修改
                                    本次申请支付金额  都不显示


                                申请付款
                                    供应商
                                        第三方信息
                                            本次申请支付数量  都可以修改
                                            本次申请支付金额  专利申请类型不显示,专利买卖类型可以修改申请支付金额,其他类型也能修改       (后加软著不可申请支付金额)
                                        付款节点(专利申请无付款节点)
                                            本次申请支付数量  都可以修改
                                            本次申请支付金额  都可以修改


                                    外包
                                        第三方信息
                                            本次申请支付数量  都可以修改
                                            本次申请支付金额  专利申请不可以修改但显示(专利申请的申请金额会随支付数量乘以单价变化),其他类型可以修改
                                        付款节点
                                            本次申请支付数量  都可以修改
                                            本次申请支付金额  专利申请不可以修改但显示(专利申请的申请金额会随支付数量乘以单价变化),其他类型可以修改
                            */}
              {this.props.type !== 2 &&
                !(this.props.startType === 1
                  ? ((this.props.projectType === 1 && this.props.patentType === 0) || this.props.projectType === 2)
                  : false)
                ? <Form.Item
                  {...formItemLayout}
                  style={{
                    display: 'flex'
                  }}
                  label="本次申请支付金额(万元):"
                >
                  {getFieldDecorator('applicationAmount', {
                    initialValue: this.props.type === 2 ? (
                      ((previewPayInfor.costReduction === 1 ? previewPayInfor.reductionAmount : previewPayInfor.officialUnitPrice) * 1000000 * parseInt(previewPayInfor.quantity)) / 1000000
                    ) : (
                      !isNaN(parseFloat(previewPayInfor.totalAmount)) && !isNaN(parseFloat(previewPayInfor.partyAmount)) ?
                        (
                          this.state.paymentStatus === 1 ?
                            (previewPayInfor.partyAmount ?
                              ((parseFloat(previewPayInfor.totalAmount) * 1000000) - (parseFloat(previewPayInfor.partyAmount) * 1000000)) / 1000000 :
                              parseFloat(previewPayInfor.totalAmount)) / 2 :
                            previewPayInfor.partyAmount ?
                              ((parseFloat(previewPayInfor.totalAmount) * 1000000) - (parseFloat(previewPayInfor.partyAmount) * 1000000)) / 1000000 :
                              parseFloat(previewPayInfor.totalAmount)
                        ) : null
                    ),
                    rules: [{ required: true, message: '请输入本次申请支付金额!' }],
                  })(
                    <InputNumber
                      min={0}
                      disabled={this.state.paymentStatus !== 0 || (this.props.projectType === 1 && this.props.patentType === 0)}
                      style={{ width: '200px' }}
                      placeholder="请输入本次申请支付金额" />
                  )}
                </Form.Item> : null}
              <Form.Item
                {...formItemLayout}
                style={{
                  display: 'flex'
                }}
                label="备注:"
              >
                {getFieldDecorator('remarks', {
                  rules: [{ required: true, message: '请输入备注!' }],
                })(
                  <Input style={{ width: '200px' }} placeholder="请输入备注" type={'textarea'} />
                )}
              </Form.Item>
              <Form.Item>
                <div style={{
                  display: 'flex',
                  justifyContent: 'center',
                }}>
                  <Button type="primary" htmlType="submit" style={{ width: '60%', height: '40px' }}>
                    {this.props.type === 2 ? "确定申请付官费" : "确定申请支付"}
                  </Button>
                </div>
              </Form.Item>
            </Form>
          </div>
        </Spin>
      </Modal>
    )
  }
}

const WrappedNormalLoginForm = Form.create()(ApplyPaymentModal);

export default WrappedNormalLoginForm