kede-client/js/component/manageCenter/financialManage/flowWater/waterDetail.jsx

import React from 'react';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import { Form,Button, Input, Spin, message, Modal, Upload } from 'antd';
import {getTransactionChannel,getTransactionProject,splitUrl} from '@/tools.js';

const WaterDetail=React.createClass({
    loadData(record) {
        this.state.data = [];
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/financial/selectOneRefundFlow',
            data: {
            	billNo:record?record.billNo:this.props.data.billNo
            },
            success: function (data) {
                let theArr = [];
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    this.setState({
                        data:data.data,
                    })
                   }
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    getInitialState() {
        return {
            loading: false,
            visible:false,
            showDesc:false,
        };
    },
    onCancel(){
    	this.setState({
    		visible:false
        })
        this.props.closeDesc(false,false);
    },
    onShow() {
		this.setState({
			visible: false,
		});
		this.props.closeDesc(false, true);
	},
    componentWillMount() {
    },
    componentWillReceiveProps(nextProps) {
        if(nextProps.data.billNo){
            this.loadData(nextProps.data);
        }
        this.state.visible=nextProps.showDesc;
    },
    render() {
        const theData = this.state.data || {};
        const FormItem = Form.Item;
        const formItemLayout = {
            labelCol: { span: 10 },
            wrapperCol: { span: 12 },
		};
        return (
            <div className="user-content" >
	            <Modal maskClosable={false} visible={this.state.visible}
                        onOk={this.onShow} onCancel={this.onCancel}
                        width='800px'
                        title='流水详情'                     
                        footer=''
                        className="admin-desc-content">
			            <Form layout="horizontal" onSubmit={(e)=>{this.handleSubmit(e,0)}} >
			                <Spin spinning={this.state.loading}>
                                <div className="clearfix">
                                    <FormItem className="half-item" {...formItemLayout} label="平台流水编号">
                                        <span>{theData.billNo}</span>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label="财务流水时间">
							            <span>{theData.financialPayTimes ? theData.financialPayTimes.slice(0,theData.financialPayTimes.length - 2) : ''}</span>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label="金额(万元)">
                                        <span>{theData.transactionAmount}</span>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label="流水科目">
                                        <span>{getTransactionProject(theData.transactionSubject)}</span>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label="付款方">
                                        <span>{theData.payerName}</span>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label="收款方">
                                        <span>{theData.payeeName}</span>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label="交易外联">
                                        <span>{getTransactionChannel(theData.transactionChannel)}</span>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label="订单编号">
                                        <span>{theData.orderNo}</span>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label="财务流水编号">
                                        <span>{theData.financialPayNo}</span>
                                    </FormItem>
                                    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label="备注">
                                        <span>{theData.remarks}</span>
                                    </FormItem>
                                </div>
			                </Spin>
			            </Form>
			    </Modal>
            </div>
        );
    }
});

export default Form.create()(WaterDetail);