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

//initialUnitPrice 即是单价也可是官费
import React,{Component} from 'react';
import {Button, DatePicker, Form, Input, message, Modal, Spin} from "antd";
import $ from "jquery/src/ajax";
import moment from "moment";

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

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

const confirm = Modal.confirm;

class PayRecord extends Component{
    constructor(props) {
        super(props);
        this.state={
            loading: false,
            paymentLogs: [],
            paymentDetails: {},
            financialPaymentList: [],
        }
        this.examineOperation = this.examineOperation.bind(this);
        this.noExamineOperation = this.noExamineOperation.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    componentDidMount() {
      this.getSelectPaymentLog();       //付款日志
      this.getPaymentDetails();         //支付详情
      this.getSelectfinancialPayment(); //财务付款列表
    }

    //付款日志
    getSelectPaymentLog(){
        this.setState({
            loading: true
        });
        $.ajax({
            type: 'get',
            cache: false,
            url: globalConfig.context + "/api/admin/company/selectPaymentLog",
            dataType: "json",
            data: {
                id: this.props.payId
            },
            success: function (data) {
                this.setState({
                    loading: false
                });
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    this.setState({
                        paymentLogs: data.data
                    })
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    }

    //支付详情
    getPaymentDetails(){
        this.setState({
            loading: true
        });
        $.ajax({
            type: 'get',
            cache: false,
            url: globalConfig.context + "/api/admin/company/OrderPaymentDetails",
            dataType: "json",
            data: {
                id: this.props.payId
            },
            success: function (data) {
                this.setState({
                    loading: false
                });
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    this.setState({
                        paymentDetails: data.data
                    })
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    }

    //财务付款列表
    getSelectfinancialPayment(){
        this.setState({
            loading: true
        });
        $.ajax({
            type: 'get',
            cache: false,
            url: globalConfig.context + "/api/admin/company/selectfinancialPayment",
            dataType: "json",
            data: {
                id: this.props.payId
            },
            success: function (data) {
                this.setState({
                    loading: false
                });
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    this.setState({
                        financialPaymentList: data.data
                    })
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    }

    handleSubmit(e,status = 0){
        //0审核 1待支付 2驳回 3已支付 4取消（0重新发起，1通过审核，2驳回）
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (err) {
                // console.log(err)
                return;
            }
            if(values.quantity !== undefined && (isNaN(parseFloat(values.quantity)) || values.quantity<=0)){
                message.warning('申请支付数量不能小于等于零');
                return;
            }
            const { paymentDetails } = this.state;
            this.setState({
                loading: true
            })
            let data = {
                id: this.props.payId,
                paymentAmount: paymentDetails.paymentAmount,
                // paymentStatus: paymentDetails.paymentStatus,   //支付状态 0半款 1全款
                status: status,//0 发起 1通过 2驳回（0重新发起，1通过审核，2驳回）
            }
            if(paymentDetails.chooseType === 2){
                data.paymentAmount = values.applicationAmount
            }
            Object.assign(data,values)
            $.ajax({
                type: 'post',
                url: globalConfig.context + "/api/admin/company/updateOrderPayment",
                dataType: "json",
                data: data,
            }).done((res) => {
                if (res.error && res.error.length) {
                    message.error(res.error[0].message);
                } else {
                    message.success(
                        status === 0 ? "重新申请成功" :
                                    status === 1 ? "通过审核操作成功" :
                                        status === 2 ? "驳回操作成功" :
                                            status === 3 ? "支付操作成功" :
                                                status === 4 ? "取消操作成功" :''
                    );
                    this.props.changeVisible();
                }
            }).always(() => {
                this.setState({
                    loading: false
                })
            });
        })
    }

    //新增财务付款
    addfinancialPayment(e,index) {
        e.preventDefault();
        let financialPaymentList = this.state.financialPaymentList.concat();
        if(!financialPaymentList[index].partyAmount){
            message.error('请填写正确的付款金额 ');
            return;
        }
        if(!financialPaymentList[index].paymentTimes){
            message.error('请选择时间 ');
            return;
        }
        let time = moment(financialPaymentList[index].paymentTimes).format('YYYY-MM-DD HH:mm:ss');
        this.setState({
            loading: true
        })
        let data = {
            pid: this.props.payId,
            partyAmount: financialPaymentList[index]['partyAmount'],
            paymentTimes: time,
        }
        $.ajax({
            type: 'post',
            url: globalConfig.context + "/api/admin/company/addfinancialPayment",
            dataType: "json",
            data: data,
        }).done((res) => {
            if (res.error && res.error.length) {
                message.error(res.error[0].message);
            } else {
                message.success("新增成功");
                let arr = this.state.financialPaymentList.concat();
                arr[index].isSave= true;
                arr[index].id= res.data;
                this.setState({
                    financialPaymentList: arr
                });
                // this.getSelectfinancialPayment();
            }
        }).always(() => {
            this.setState({
                loading: false
            })
        });
    }

    //删除财务付款
    deleteFinancialPayment(e,index){
        e.preventDefault();
        if(!this.state.financialPaymentList[index]['id']){
            let arr = this.state.financialPaymentList.concat();
            arr.splice(index,1);
            this.setState({
                financialPaymentList: arr
            });
            return;
        }
        this.setState({
            loading: true
        })
        $.ajax({
            type: 'post',
            url: globalConfig.context + "/api/admin/company/deleteFinancialPayment",
            dataType: "json",
            data: {
                id: this.state.financialPaymentList[index]['id']
            },
        }).done((res) => {
            if (res.error && res.error.length) {
                message.error(res.error[0].message);
            } else {
                let arr = this.state.financialPaymentList.concat();
                arr.splice(index,1);
                this.setState({
                    financialPaymentList: arr
                });
                message.success("删除成功");
            }
        }).always(() => {
            this.setState({
                loading: false
            })
        });
    }

    //0审核 1驳回 2待支付 3已支付 4取消
    noExamineOperation(){
        const { getFieldDecorator } = this.props.form;
        return (
            this.state.paymentDetails.status === 2 ? <Form.Item>
                {getFieldDecorator('auditNotes', {
                    rules: [{ required: true, message: '请输入重新发起说明!' }],
                })(
                    <Input style={{ width: '200px' }} placeholder="请输入重新发起说明" type={'textarea'}/>
                )}
                <Button type="primary" htmlType="submit" style={{marginLeft:'15px'}}>
                    重新发起申请
                </Button>
                <Button type="danger" style={{float:'right'}} onClick={(e)=>{
                    let _this = this;
                    confirm({
                        title: '删除提醒?',
                        content: '您确定要删除它吗?',
                        onOk() {
                            _this.handleSubmit(e,4);
                        },
                        onCancel() {},
                    });
                }}>
                    删除
                </Button>
            </Form.Item> : <div/>
        )
    }

    examineOperation() {
        const { getFieldDecorator } = this.props.form;
        return (
            this.state.paymentDetails.status === 0 ? <Form.Item>
                {getFieldDecorator('auditNotes', {
                    rules: [{ required: true, message: '请输入备注!' }],
                })(
                    <Input style={{ width: '200px' }} placeholder="请输入备注" type={'textarea'}/>
                )}
                <Button type="primary" style={{marginLeft:'15px'}} onClick={(e)=>{
                    this.handleSubmit(e,2);
                }}>
                    驳回
                </Button>
                <Button type="primary" style={{marginLeft:'15px'}} onClick={(e)=>{
                    this.handleSubmit(e,1);
                }}>
                    通过
                </Button>
            </Form.Item> : this.state.paymentDetails.status === 1 ?
                this.state.financialPaymentList.map((value,index)=>(
                    <div key={index} style={{display:'flex',flexFlow:'row nowrap',alignItems:'center',paddingTop:'15px'}}>
                        <Form.Item label="付款时间:" style={{marginBottom:'0px !important',display:'flex',flexFlow:'row nowrap',alignItems:'center'}}>
                            <DatePicker
                                showTime
                                disabled={value.isSave || value.id}
                                format="YYYY-MM-DD HH:mm:ss"
                                style={{ width: '200px' }}
                                placeholder="请选择付款时间"
                                value={value.paymentTimes && moment(value.paymentTimes, 'YYYY-MM-DD HH:mm:ss')}
                                defaultValue={value.paymentTimes && moment(value.paymentTimes, 'YYYY-MM-DD HH:mm:ss')}
                                onChange={(value)=>{
                                    let arr = this.state.financialPaymentList.concat();
                                    arr[index].paymentTimes = value;
                                    this.setState({
                                        financialPaymentList:arr
                                    })
                                }}
                            />
                        </Form.Item>
                        <Form.Item label="付款金额(万元):" style={{paddingLeft:'20px',marginBottom:'0px !important',display:'flex',flexFlow:'row nowrap',alignItems:'center'}}>
                            <Input
                                disabled={value.isSave || value.id}
                                style={{ width: '100px' }}
                                placeholder="请输入付款金额"
                                type={'number'}
                                value={value.partyAmount && value.partyAmount}
                                defaultValue={value.partyAmount && value.partyAmount}
                                onChange={(e)=>{
                                    let arr = this.state.financialPaymentList.concat();
                                    arr[index].partyAmount = e.target.value;
                                    this.setState({
                                        financialPaymentList:arr
                                    })
                                }}
                            />
                        </Form.Item>
                        {value.id ? false : !value.isSave ? <Button style={{marginLeft:'20px',}} type="primary" onClick={(e)=>{
                            this.addfinancialPayment(e,index)
                        }}>
                            保存
                        </Button> : <div/>}
                        <Button type="primary" style={{marginLeft:'20px',}} onClick={(e)=>{
                            this.deleteFinancialPayment(e,index);
                        }}>
                            删除
                        </Button>
                    </div>
                )) : <div/>
        )
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const { paymentLogs,paymentDetails,financialPaymentList } = this.state;
        return(
            <Modal
                title={paymentDetails.status !== 4 ? (paymentDetails.chooseType === 0 ? '申请支付第三方' : paymentDetails.chooseType === 1 ? '申请支付催款' : paymentDetails.chooseType === 2 ? '申请支付官费' : '') : '支付详情'}
                className='payRecordComponent'
                width={700}
                maskClosable={false}
                footer={null}
                visible={this.props.visible}
                onCancel={() => {
                    this.props.changeVisible();
                }}
            >
                <Spin spinning={this.state.loading}>
                    <div>
                        {/*0第三方 1催款 2官费*/}
                        <Form
                            {...layout}
                            name="basic"
                            initialValues={{
                                remember: true,
                            }}
                            onSubmit={(e)=>{
                                this.handleSubmit(e)
                            }}
                        >
                            {paymentDetails.status !== 4 ?
                                <div>
                                    <Form.Item
                                        {...formItemLayout}
                                        className='formItemStyle'
                                        label="付款单位/个人:"
                                    >
                                        <div>{paymentDetails.companyName}</div>
                                    </Form.Item>
                                    {/*0第三方 1催款 2官费*/}
                                    {paymentDetails.chooseType !== 2 ? <Form.Item
                                        {...formItemLayout}
                                        className='formItemStyle'
                                        label={'单价(万元):'}
                                    >
                                        <div>
                                            {/* projectType 0正常 1专利 2软著 3审计*/}
                                            {/* isAuditPayment 是否为财务*/}
                                            {/* isAuditPaymentGLY 是否为财务经理或者为财务管理员*/}
                                            {/* chooseType 0第三方 1催款 2官费*/}
                                            {/*{*/}
                                            {/*    (paymentDetails.chooseType === 2 || this.props.projectType === 2 || (this.props.projectType === 3 && this.props.patentType === 0) ) && !this.props.isAuditPayment?*/}
                                            {/*    '***':*/}
                                            {/*    paymentDetails.initialUnitPrice*/}
                                            {/*}*/}
                                            {isNaN(parseFloat(paymentDetails.initialUnitPrice)) ? paymentDetails.initialUnitPrice : parseFloat(paymentDetails.initialUnitPrice)}
                                        </div>
                                    </Form.Item> : null}
                                    <Form.Item
                                        {...formItemLayout}
                                        className='formItemStyle'
                                        label="数量:"
                                    >
                                        {getFieldDecorator('initialQuantity', {
                                            initialValue: parseInt(paymentDetails.initialQuantity),
                                            rules: [{ required: false, message: '请输入數量!' }],
                                        })(
                                            <Input disabled={true} style={{ width: '200px' }} placeholder="请输入數量" type={'number'}/>
                                        )}
                                    </Form.Item>
                                    <Form.Item
                                        {...formItemLayout}
                                        className='formItemStyle'
                                        label="总价(万元):"
                                    >
                                        <div>{isNaN(parseFloat(paymentDetails.initialTotalAmount)) ? paymentDetails.initialTotalAmount : parseFloat(paymentDetails.initialTotalAmount)}</div>
                                    </Form.Item>
                                    {/*官费不显示已付*/}
                                    {paymentDetails.chooseType !== 2 ? <Form.Item
                                        {...formItemLayout}
                                        className='formItemStyle'
                                        label="已付(万元):"
                                    >
                                        <div>{isNaN(parseFloat(paymentDetails.initialPaymentAmount)) ? paymentDetails.initialPaymentAmount : parseFloat(paymentDetails.initialPaymentAmount)}</div>
                                    </Form.Item> : <div/>}
                                    {/*0第三方 1催款 2官费*/}
                                    {/* projectType 0正常 1专利 2软著 3审计*/}
                                    {
                                        paymentDetails.chooseType === 2 || this.props.projectType === 1 || this.props.projectType === 2 ?
                                            <div style={{
                                                marginBottom:'8px',
                                                marginTop:'8px'
                                            }}>
                                                <Form.Item
                                                    {...formItemLayout}
                                                    className='formItemStyle'
                                                    label="本次申请支付数量:"
                                                >
                                                    {getFieldDecorator('quantity', {
                                                        initialValue: paymentDetails.quantity,
                                                        rules: [{ required: true, message: '请输入本次申请支付数量!' }],
                                                    })(
                                                        <Input
                                                            type={'number'}
                                                            style={{ width: '200px' }}
                                                            disabled={this.props.isAuditPaymentGLY ? this.props.isAuditPaymentGLY : ( this.props.isAuditPayment ? true : this.state.paymentDetails.status !== 2)}
                                                            placeholder="请输入本次申请支付数量"
                                                            onChange={(e)=>{
                                                                if(!isNaN(parseFloat(paymentDetails.initialUnitPrice))){
                                                                    this.props.form.setFieldsValue({
                                                                        applicationAmount: ((parseFloat(paymentDetails.initialUnitPrice) * 1000000) * e.target.value) / 1000000,
                                                                    })
                                                                }
                                                            }}
                                                        />
                                                    )}
                                                </Form.Item>
                                            </div> : <div/>
                                    }
                                    <Form.Item
                                        {...formItemLayout}
                                        className='formItemStyle'
                                        label="本次申请支付金额(万元):"
                                    >
                                        {getFieldDecorator('applicationAmount', {
                                            initialValue: parseFloat(paymentDetails.applicationAmount),
                                            rules: [
                                                {
                                                    required: !(this.props.isAuditPayment ? this.state.paymentDetails.status !== 0 : this.state.paymentDetails.status !== 2),
                                                    message: '请输入本次申请支付金额!'
                                                }
                                            ],
                                        })(
                                            <Input
                                                type={'number'}
                                                style={{ width: '200px' }}
                                                disabled={this.props.isAuditPaymentGLY ? this.props.isAuditPaymentGLY : paymentDetails.chooseType === 2 || (this.props.isAuditPayment ? this.state.paymentDetails.status !== 0 : this.state.paymentDetails.status !== 2)}
                                                placeholder="请输入本次申请支付金额"/>
                                        )}
                                    </Form.Item>
                                    <Form.Item
                                        {...formItemLayout}
                                        className='formItemStyle'
                                        label="备注:"
                                    >
                                        {
                                            (!this.props.isAuditPaymentGLY && !this.props.isAuditPayment && this.state.paymentDetails.status === 2) ?
                                                getFieldDecorator('remarks', {
                                                    initialValue: paymentDetails.remarks,
                                                    rules: [{ required: true, message: '请输入备注!' }],
                                                })(
                                                    <Input style={{ width: '200px' }} placeholder="请输入备注" type={'textarea'}/>
                                                ) : <div>{paymentDetails.remarks}</div>
                                        }
                                    </Form.Item>
                                </div> : null}
                            <div className='payStateList' style={{borderTop:paymentDetails.status !== 4? '1px #000 dashed' : '0'}}>
                                <div className='listTitle' style={{color:'#F00'}}>
                                    支付状态:
                                    <span style={{paddingLeft:'20px'}}>
                                        {
                                            //0审核 1待支付 2驳回 3已支付 4取消
                                            paymentDetails.status === 0 ? '待'+paymentDetails.financeName+'审核' :
                                                paymentDetails.status === 1 ? '待'+paymentDetails.financeName+'支付' :
                                                    paymentDetails.status === 2 ? '待重新提交' :
                                                        paymentDetails.status === 3 ? '已完成支付' :
                                                            paymentDetails.status === 4 ?'已取消' : ''
                                        }
                                    </span>
                                </div>
                                <div className='payList'>
                                    {
                                        paymentLogs.map((value,key)=>(
                                            <div key={key} style={{
                                                paddingBottom: '2px',
                                            }}>
                                                <span style={{paddingRight:'8px'}}>{value.aname+':'}</span>
                                                {value.createTimes}
                                                <span style={{
                                                    paddingLeft:'8px',
                                                    wordBreak: 'break-all'
                                                }}>
                                                    {
                                                        value.status === 0 ? '(发起)' :
                                                            value.status === 1 ? '(通过)':
                                                                value.status === 2 ? '(驳回)' :
                                                                    value.status === 3 ? '(完成)' :
                                                                        value.status === 4 ? '(取消)' :''
                                                    }
                                                    {value.remarks}
                                                </span>
                                            </div>
                                        ))
                                    }
                                </div>
                            </div>
                            {paymentDetails.status === 1 ||  paymentDetails.status === 3 ||  paymentDetails.status === 4 ?<div style={{ borderTop: '1px #000 dashed'}}>
                                <div className='listTitle' style={{display:'block',fontSize:'15px'}}>
                                    上传付费凭证-财务
                                    <span style={{fontSize:'10px',paddingLeft:'10px'}}>实际付款(万元): {paymentDetails.paymentAmount}</span>
                                    {paymentDetails.status === 1 && this.props.isAuditPayment ?
                                        <Button style={{marginLeft:'20px'}} type="primary" onClick={()=>{
                                            let arr = this.state.financialPaymentList.concat();
                                            arr.push({});
                                            this.setState({
                                                financialPaymentList: arr
                                            })
                                        }}>
                                            增加付款凭证
                                        </Button> : <div/>
                                    }
                                </div>
                                {!(paymentDetails.status === 1 && (this.props.isAuditPayment || this.props.isAuditPaymentGLY)) ? <div className='payList'>
                                    {
                                        financialPaymentList.map((value,key)=>(
                                            <div key={key} className='payitem'>
                                                付款时间: {value.paymentTimes}
                                                <span style={{paddingLeft:'25px'}}>付款金额(万元): {value.partyAmount}</span>
                                            </div>
                                        ))
                                    }
                                </div> : <div/>}
                            </div> : <div/>}
                            {
                                this.props.isAuditPaymentGLY ? "" : (this.props.isAuditPayment ? this.examineOperation() : this.noExamineOperation())
                            }
                            {this.props.isAuditPayment && paymentDetails.status === 1 ? <Button style={{marginLeft:'20px'}} type="primary" onClick={(e)=>{
                                this.handleSubmit(e,3);
                            }}>
                                完成支付
                            </Button> : <div/>}
                        </Form>
                    </div>
                </Spin>
            </Modal>
        )
    }
}

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

export default WrappedNormalLoginForm