kede-client/js/component/manageCenter/financialManage/distribute/receivable.jsx

import React from 'react';
import $ from 'jquery/src/ajax';
import { Form, Button, Input, Select, Spin,InputNumber, message, Modal ,DatePicker} from 'antd';
import {transactionChannel} from '@/dataDic.js';
import moment from 'moment';

const Receivable=React.createClass({
    getInitialState() {
        return {
            loading: false,
            visible:false,
            showDesc:false,
            data:{}
        };
    },
    //保存
    handleSubmit(e){
        e.preventDefault();
        if(this.state.settlementAmount === ''){
                message.warning('请填写金额');
                return false;
        }
        if(!this.state.transactionChannel){
            message.warning('请选择交易外联');
            return false;
        }
        if(!this.state.contractNo){
            message.warning('请填写合同编号');
            return false;
        }
        if(!this.state.financialPayTimes){
            message.warning('请选择财务流水时间');
            return false;
        }
        this.setState({
            loading: true
        });
        let data = this.props.data || {};
        $.ajax({
            method: "post",
            dataType: "json",
            async:true,
            url:  globalConfig.context + this.props.api,
            data: {
                orderNo: data.orderNo,
                payeeId:data.companyId,
                payerId:data.buyerId,
                contractNo:this.state.contractNo,
                transactionAmount: this.state.settlementAmount,
                transactionSubject: ~((this.props.title).indexOf('退款'))?'2':'0',
                transactionChannel: this.state.transactionChannel,
                financialPayNo:this.state.financialPayNo,
                financialPayTimes:this.state.financialPayTimes,
                remarks:this.state.remarks
            }
        }).done(function (data) {
            this.setState({
                loading: false
            });
            if (!data.error.length) {
                message.success('操作成功！');
                this.onShow();
            } else {
                message.warning(data.error[0].message);
            }
        }.bind(this));
    },
    onCancel(){
    	this.setState({
    		visible:false
        })
        this.props.closeDesc(false,false);
    },
    onShow() {
		this.setState({
			visible: false,
		});
		this.props.closeDesc(false, true);
	},
    componentWillMount() {
        this.setState({
            transactionProject:undefined,
            settlementAmount:undefined,
            transactionChannel:undefined,
            financialPayNo:'',
            financialPayTimes:undefined,
            remarks:''
        })
    },
    componentWillReceiveProps(nextProps) {
        this.state.visible=nextProps.showDesc;
        this.setState({
            transactionProject:undefined,
            settlementAmount:undefined,
            transactionChannel:'2',
            financialPayNo:'',
            financialPayTimes:undefined,
            remarks:'',
            contractNo:nextProps.data.contractNo
        })
    },
    render() {
        const theData = this.props.data || {};
        const FormItem = Form.Item;
        const formItemLayout = {
            labelCol: { span: 8 },
            wrapperCol: { span: 12 },
        };
        return (
            <div className="user-content" >
	            <Modal maskClosable={false} visible={this.state.visible}
                        onOk={this.onShow} onCancel={this.onCancel}
                        width='800px'
                        title={this.props.title}                     
                        footer=''
                        className="admin-desc-content">
			            <Form layout="horizontal" onSubmit={this.handleSubmit} >
			                <Spin spinning={this.state.loading}>
                                <div className="clearfix">
                                    <FormItem className="half-item" {...formItemLayout} label="付款方">
                                        <span>{theData.buyerName}</span>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label="收款方">
                                        <span>{theData.companyName}</span>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label={<span><strong style={{color:'#f00'}}>*</strong>金额</span>}>
                                        <InputNumber min={0} max={9999} placeholder="金额" 
                                            value={this.state.settlementAmount}
                                            onChange={(e)=>{this.setState({settlementAmount:e})}}
                                        />
                                        <span style={{ marginLeft: '5px' }}>万元</span>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label="流水科目">
                                        <span>{~((this.props.title).indexOf('退款'))?'退款':'代收'}</span>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label={<span><strong style={{color:'#f00'}}>*</strong>交易外联</span>}>
                                        <Select placeholder="交易外联" 
                                            value={this.state.transactionChannel}
                                            onChange={(e)=>{this.setState({transactionChannel:e})}}
                                        >
                                            { 
                                                transactionChannel.map(function (item) {
                                                    return	<Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
                                                })
                                            }
                                        </Select>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label="订单编号">
                                        <span>{theData.orderNo}</span>
                                    </FormItem>
                                    {/* !theData.contractNo? */}
                                    {true?<FormItem className="half-item" {...formItemLayout} label={<span><strong style={{color:'#f00'}}>*</strong>合同编号</span>} >
                                        <Input placeholder="合同编号"
                                            value={this.state.contractNo}
                                            onChange={(e) => { this.setState({ contractNo: e.target.value }); }} />  
                                    </FormItem>:<FormItem className="half-item" {...formItemLayout} label="合同编号" >
                                            <span>{theData.contractNo}</span>
                                    </FormItem>}
                                    <FormItem className="half-item" {...formItemLayout} label="财务流水编号">
                                        <Input placeholder="财务流水编号"
                                            value={this.state.financialPayNo}
                                            onChange={(e) => { this.setState({ financialPayNo: e.target.value }); }} />  
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label={<span><strong style={{color:'#f00'}}>*</strong>财务流水时间</span>}>
                                        <DatePicker 
                                            showTime
                                            format="YYYY-MM-DD"
                                            onOk={(e)=>{console.log(e)}}
                                            value={this.state.financialPayTimes ? moment(this.state.financialPayTimes) : null}
                                            onChange={(data, dataString) => { this.setState({ financialPayTimes: dataString }); }} />
                                    </FormItem>
                                    <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label="备注">
                                        <Input
                                            type="textarea"
                                            rows={4}
                                            placeholder="请输入备注"
                                            value={this.state.remarks}
                                            onChange={(e) => {
                                                this.setState({ remarks: e.target.value });
                                            }}
                                        />
                                    </FormItem>
                                    <FormItem wrapperCol={{ span: 12, offset:4 }}>  
                                        <Button type="primary" htmlType="submit"  style={{marginRight:30}}>确认</Button>
                                        <Button type="default" onClick={()=>{this.onCancel()}}>取消</Button>
                                    </FormItem>  
                                </div>
			                </Spin>
			            </Form>
			    </Modal>
            </div>
        );
    }
});

export default Form.create()(Receivable);