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 ? '国家知识产权局' : 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) : 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