kede-client/js/component/common/initiateOrder/paymentRecord.jsx

import React, { Component } from "react";
import { Button, Col, Form, message, Spin, Table } from "antd";
import $ from "jquery";
import PayRecord from "../../manageCenter/components/checkProject/payRecord";

class PaymentRecord extends Component {
    constructor(props) {
        super(props);
        this.state = {
            orderPaymentseColunms: [
                {
                    title: '编号',
                    dataIndex: 'id',
                    key: 'id',
                },
                {
                    title: '节点编号',
                    dataIndex: 'nodeId',
                    key: 'nodeId',
                },
                {
                    title: '供应商名称',
                    dataIndex: 'companyName',
                    key: 'companyName',
                    render: (text, record) => {
                        return <span>
                            {
                                record.status === 4 ? text : (
                                    record.chooseType === 2 ? text : (text + '-' + record.tpcId) +
                                        (text !== record.tpcName && record.tpcName ? '(' + record.tpcName + ')' : '')
                                )
                            }
                        </span>
                    },
                },
                {
                    title: '支付类型',
                    dataIndex: 'chooseType',
                    key: 'chooseType',
                    render: (text) => {
                        return <span>
                            {/*0第三方 1催款 2官费*/}
                            {text === 0 ? '第三方' : text === 1 ? '催款' : '官费'}
                        </span>
                    },
                },
                {
                    title: '申请支付金额(万元)',
                    dataIndex: 'applicationAmount',
                    key: 'applicationAmount',
                    render: (text, record) => {
                        return <span>
                            {isNaN(parseFloat(text)) ? text : parseFloat(text)}
                        </span>
                    },
                },
                {
                    title: '申请支付数量',
                    dataIndex: 'quantity',
                    key: 'quantity',
                },
                {
                    title: '申请时间',
                    dataIndex: 'createTimes',
                    key: 'createTimes',
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    key: 'status',
                    render: (text, record) => {
                        return <div style={{
                            display: 'flex',
                            justifyContent: 'center',
                        }}>
                            <div style={{
                                paddingRight: '15px',
                            }}>
                                {(!!record.financeName && text === 0) ? record.financeName : ""}
                                {
                                    text === 0 ? '审核中' :
                                        text === 1 ? '审核通过' :
                                            text === 2 ? '已驳回' :
                                                text === 3 ? '支付完成' :
                                                    text === 4 ? '已取消' : ''
                                }
                            </div>
                            <Button type="primary" size='small' onClick={() => {
                                this.setState({
                                    payRecordVisible: true,
                                    orderPaymentsId: record.id,
                                })
                            }}>
                                {this.operationJudgmentName(text)}
                            </Button>
                        </div>
                    },
                },
            ],//支付记录
            selectOrderPayments: []
        }
        this.operationJudgmentName = this.operationJudgmentName.bind(this);
        this.getSelectOrderPayment = this.getSelectOrderPayment.bind(this);
    }

    componentDidMount() {
        if (this.props.tid) {
            this.getSelectOrderPayment();
        }
    }

    //0审核 1待支付 2驳回 3已支付 4取消
    operationJudgmentName(id) {
        if (this.props.isAuditPayment) {          //财务
            return id === 0 ? '待审核' :
                id === 1 ? '待支付' :
                    id === 2 ? '查看详情' : '查看详情'
        } else {
            return id === 0 ? '待审核' :
                id === 1 ? '待支付' :
                    id === 2 ? '查看详情' : '查看详情'
        }
    }

    //支付列表
    getSelectOrderPayment() {
        this.setState({
            payRecordsLoading: true
        })
        $.ajax({
            method: 'get',
            dataType: 'json',
            crossDomain: false,
            url: globalConfig.context + '/api/admin/company/selectOrderPayment',
            data: {
                id: this.props.tid,
            },
            success: function (data) {
                if (data.error.length) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                } else {
                    this.setState({
                        selectOrderPayments: data.data
                    })
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    payRecordsLoading: false
                })
            }.bind(this)
        )
    }

    //刷新
    refresh() {
        if (this.props.tid) {
            this.getSelectOrderPayment();
        }
    }

    render() {
        return (
            this.state.selectOrderPayments.length > 0 ? <div>
                <div className="title">支付记录</div>
                <Spin spinning={this.state.payRecordsLoading}>
                    <Form layout="horizontal">
                        <Table
                            pagination={false}
                            columns={this.state.orderPaymentseColunms}
                            dataSource={this.state.selectOrderPayments}
                            style={{
                                cursor: 'pointer',
                            }}
                            onRowClick={(record) => {
                                this.setState({
                                    payRecordVisible: true,
                                    orderPaymentsId: record.id,
                                })
                            }}
                            scroll={{ x: 'max-content', y: 0 }}
                            bordered
                            size="middle"
                        />
                        <Col span={24} offset={9} style={{ marginTop: '15px' }} />
                    </Form>
                </Spin>

                {/*  支付记录操作弹出  */}
                {this.state.payRecordVisible ? <PayRecord
                    {...this.props}
                    tid={this.props.tid}
                    projectType={this.props.projectType}
                    patentType={this.props.patentType}
                    payId={this.state.orderPaymentsId}
                    visible={this.state.payRecordVisible}
                    isAuditPayment={this.props.isAuditPayment}
                    isAuditPaymentGLY={this.props.isAuditPaymentGLY}
                    onRefresh={() => {
                        this.props.onRefresh();
                        this.refresh();
                    }}
                    changeVisible={() => {
                        this.refresh();
                        this.props.onRefresh && this.props.onRefresh();
                        this.setState({
                            payRecordVisible: false,
                        })
                    }}
                /> : <div />}
            </div> : null
        )
    }
}

export default PaymentRecord;