kede-client/js/component/manageCenter/financialManage/bonus/bonusDetail.jsx

import React from 'react';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import { Form, Spin, message, Modal, Tooltip } from 'antd';
import { getProjectName, getNewOrderStatus, getJsyPaymentType } from '@/tools.js';
import OrderItemStatus from "../../../common/orderItemStatus";
import EnterpriseNameChange from "../../../common/enterpriseNameChange";
import { salesList } from "@/dataDic.js";

const BonusDetail = React.createClass({
    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() {
    },
    xiangqings(orderNo) {
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/newOrder/getOrderNewDetail",
            data: {
                orderNo,
            },
            success: function (data) {
                let thisdata = data.data;
                if (data.error.length || data.data.list == "") {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                } else {
                    this.setState({
                        deleteSign: thisdata.deleteSign,
                        orderUid: thisdata.uid,
                    });
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    },
    componentWillReceiveProps(nextProps) {
        if (nextProps.data.orderNo) {
            this.setState({ data: nextProps.data });
            this.xiangqings(nextProps.data.orderNo);
        }
        this.state.visible = nextProps.showDesc;
    },
    render() {
        const theData = this.props.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='1200px'
                    title='订单详情'
                    footer=''
                    className="admin-desc-content">
                    <Form layout="horizontal" onSubmit={(e) => { this.handleSubmit(e, 0) }} >
                        <Spin spinning={this.state.loading}>
                            <div className="clearfix">
                                <div style={{ position: "absolute", top: '-52px', left: '81px', zIndex: 10000 }}>
                                    <OrderItemStatus deleteSign={this.state.deleteSign} />
                                </div>
                                <FormItem className="half-item" {...formItemLayout} label="订单编号">
                                    <span>{theData.orderNo}</span>
                                </FormItem>
                                <FormItem className="half-item" {...formItemLayout} label="签单时间">
                                    <span>{theData.signTime}</span>
                                </FormItem>
                                <FormItem className="half-item" {...formItemLayout} label="订单负责人">
                                    <span>{theData.salesName}</span>
                                </FormItem>
                                <FormItem className="half-item" {...formItemLayout} label="客户名称">
                                    <span>
                                        {theData.buyName}
                                        <EnterpriseNameChange
                                            type='journal'
                                            style={{ marginLeft: 10 }}
                                            enterpriseId={this.state.orderUid} />
                                    </span>
                                </FormItem>
                                <FormItem className="half-item" {...formItemLayout} label="签单金额(万元)">
                                    <span>{theData.totalAmount}</span>
                                </FormItem>
                                <FormItem className="half-item" {...formItemLayout} label="首付款(万元)">
                                    <span>{theData.firstAmount}</span>
                                </FormItem>
                                <FormItem className="half-item" {...formItemLayout} label="已收(万元)">
                                    <span>{theData.settlementAmount}</span>
                                </FormItem>
                                <FormItem className="half-item" {...formItemLayout} label="已退(万元)">
                                    <span>{theData.refundAmount}</span>
                                </FormItem>
                                <FormItem className="half-item" {...formItemLayout} label="订单状态">
                                    <span>{getNewOrderStatus(theData.orderStatus)}</span>
                                </FormItem>
                                <FormItem className="half-item" {...formItemLayout} label="项目状态">
                                    <span>{getProjectName(theData.projectStatus)}</span>
                                </FormItem>
                                <FormItem className="half-item" {...formItemLayout} label="发放类型">
                                    <span>{getJsyPaymentType(theData.bonusSubject)}</span>
                                </FormItem>
                                <FormItem className="half-item" {...formItemLayout} label="校对后单量">
                                    <span>{theData.proofCount}</span>
                                </FormItem>
                                <FormItem className="half-item" {...formItemLayout} label="当月认证项目数量">
                                    <span>{theData.renzm}</span>
                                </FormItem>
                                <FormItem className="half-item" {...formItemLayout} label="当月科技项目数量">
                                    <span>{theData.kejim}</span>
                                </FormItem>
                                <FormItem className="half-item" {...formItemLayout} label="年度认证项目数量">
                                    <span>{theData.renzy}</span>
                                </FormItem>
                                <FormItem className="half-item" {...formItemLayout} label="年度科技项目数量">
                                    <span>{theData.kejiy}</span>
                                </FormItem>
                            </div>
                        </Spin>
                    </Form>
                </Modal>
            </div>
        );
    }
});

export default Form.create()(BonusDetail);