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

import React from 'react';
import $ from 'jquery/src/ajax';
import { Form,Button, Input, Spin, message, Modal, Upload } from 'antd';
import {getNewOrderStatus,getLiquidationStatus,splitUrl} from '@/tools.js';
import ImgList from "../../../common/imgList";

const Examine=React.createClass({
    loadData(record) {
        this.state.data = [];
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/newOrder/orderRefundDetail',
            data: {
            	id:record?record.id:this.props.data.id
            },
            success: function (data) {
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    let thisdata=data.data;
                    this.setState({
                        id:thisdata.id,
                        data:thisdata,
                        orderNo:thisdata.orderNo,
                        orgCodeUrl: thisdata.contractUrl ? splitUrl(thisdata.contractUrl, ',', globalConfig.avatarHost + '/upload') : [],
                        orgCodeUrlNo: thisdata.applicationUrl ? splitUrl(thisdata.applicationUrl, ',', globalConfig.avatarHost + '/upload') : [],
                    });
                   }
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    getInitialState() {
        return {
            loading: false,
            visible:false,
            showDesc:false,
        };
    },
    //保存
    handleSubmit(e,index){
        e.preventDefault();
        if(index=='2'&&!this.state.remarks){
            message.warning('请填写拒绝退单的原因');
            return false;
        }
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            async:true,
            url:  globalConfig.context + '/api/admin/financial/changeRefund',
            data: index=='2'?{
                id: this.props.data.id,
                refundStatus:index,
                remarks:this.state.remarks
            }:{
                id: this.props.data.id,
                refundStatus:index, 
            }
        }).done(function (data) {
            this.setState({
                loading: false
            });
            if (!data.error.length) {
                message.success('操作成功！');
                this.onShow(index);
            } else {
                message.warning(data.error[0].message);
            }
        }.bind(this));
    },
    onCancel(){
    	this.setState({
    		visible:false
        })
        this.props.closeDesc(false,false);
    },
    onShow(index) {
		this.setState({
			visible: false,
		});
		this.props.closeDesc(false, true,index);
	},
    componentWillMount() {
        this.setState({
            remarks:''
        })
    },
    componentWillReceiveProps(nextProps) {
        if(nextProps.data.orderNo){
            this.loadData(nextProps.data);
        }
        this.state.visible=nextProps.showDesc;
        this.setState({
            remarks:''
        })
    },
    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,1)}} >
			                <Spin spinning={this.state.loading}>
                                <div className="clearfix">
                                    <FormItem className="half-item" {...formItemLayout} label="退单编号">
                                        <span>{theData.id}</span>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label="退单时间">
							            <span>{theData.createDate}</span>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label="订单编号">
                                        <span>{theData.orderNo}</span>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label="订单状态">
                                        <span>{getNewOrderStatus(theData.orderStatus)}</span>
                                    </FormItem>
                                    <FormItem className="half-item" {...formItemLayout} label="结算状态">
                                        <span>{getLiquidationStatus(theData.liquidationStatus)}</span>
                                    </FormItem>
                                    <div className="clearfix">
                                        <FormItem labelCol={{ span:5 }} wrapperCol={{ span: 17 }} label="终止合同">
                                            <Upload className="demandDetailShow-upload"
                                                listType="picture-card"
                                                fileList={this.state.orgCodeUrl}
                                                onPreview={(file) => {
                                                    this.setState({
                                                        previewImage: file.url || file.thumbUrl,
                                                        previewVisible: true,
                                                    });
                                                }} />
                                            {/*<div style={{paddingTop:'10px',paddingBottom:'10px'}}>*/}
                                            {/*    <ImgList fileList={this.state.orgCodeUrl} ItemWidth={'96px'}/>*/}
                                            {/*</div>*/}
                                            <Modal maskClosable={false} footer={null}
                                                visible={this.state.previewVisible}
                                                onCancel={() => { this.setState({ previewVisible: false }) }}>
                                                <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
                                            </Modal>
                                        </FormItem>
                                    </div>
                                    <div className="clearfix">
                                        <FormItem labelCol={{ span:5 }} wrapperCol={{ span: 17 }} label="退单申请表">
                                            <Upload className="demandDetailShow-upload"
                                                listType="picture-card"
                                                fileList={this.state.orgCodeUrlNo}
                                                onPreview={(file) => {
                                                    this.setState({
                                                        previewImage: file.url || file.thumbUrl,
                                                        previewVisible: true,
                                                    });
                                                }} />
                                            {/*<div style={{paddingTop:'10px',paddingBottom:'10px'}}>*/}
                                            {/*    <ImgList fileList={this.state.orgCodeUrlNo} ItemWidth={'96px'}/>*/}
                                            {/*</div>*/}
                                            <Modal maskClosable={false} footer={null}
                                                visible={this.state.previewVisible}
                                                onCancel={() => { this.setState({ previewVisible: false }) }}>
                                                <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
                                            </Modal>
                                        </FormItem>  
                                    </div>
                                    <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label="退单原因">
                                        <span>{theData.reason}</span>
                                    </FormItem>
                                    <FormItem labelCol={{ span: 5 }} 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:5 }}>  
                                        <Button type="primary" htmlType="submit"  style={{marginRight:20}}>同意退单</Button>
                                        <Button type="primary" onClick={(e)=>{this.handleSubmit(e,2)}}  style={{marginRight:20}}>拒绝退单</Button>
                                        <Button type="default" onClick={()=>{this.onCancel()}}>取消</Button>
                                    </FormItem>  
                                </div>
			                </Spin>
			            </Form>
			    </Modal>
            </div>
        );
    }
});

export default Form.create()(Examine);