kede-client/js/component/manageCenter/servicesManage/patent/expressDesc.jsx

import React from 'react';
import { Row, Col, DatePicker, Input, Select, Modal, message, Spin, Button } from 'antd';
import moment from 'moment';
import { expressArr } from '../../../dataDic.js';
import './comprehensive.less';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';

const ExpressDesc = React.createClass({
    getInitialState() {
        return {
            visible: false,
            loading: false
        };
    },
    showModal() {
        this.setState({
            visible: true,
        });
    },
    handleOk() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/patent/saveRecieveSend",
            data: {
                "rid": this.props.data.rid,
                "pid": this.props.data.pid,
                "acceptanceReceiveTime": this.state.acceptanceReceiveTime,
                "acceptanceIssueTime": this.state.acceptanceIssueTime,
                "acceptanceTrackingNumber": this.state.acceptanceTrackingNumber,
                "acceptanceExpressCompany": "顺丰",
                "authorizationReceiveTime": this.state.authorizationReceiveTime,
                "authorizationIssueTime": this.state.authorizationIssueTime,
                "authorizationTrackingNumber": this.state.authorizationTrackingNumber,
                "authorizationExpressCompany": "顺丰",
                "certificateRecieveTime": this.state.certificateRecieveTime,
                "certificateIssueTime": this.state.certificateIssueTime,
                "certificateTrackingNumber": this.state.certificateTrackingNumber,
                "certificateExpressCompany": "顺丰"
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    message.success('保存成功！');
                    this.props.closeDesc(false, true);
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false,
                visible: false,
            });
        }.bind(this));
    },
    handleCancel(e) {
        this.setState({
            visible: false,
        });
        this.props.closeDesc(false);
    },
    componentWillReceiveProps(nextProps) {
        this.state.visible = nextProps.showDesc;
        if (nextProps.data) {
            this.state.acceptanceReceiveTime = nextProps.data.acceptanceReceiveTime;
            this.state.acceptanceIssueTime = nextProps.data.acceptanceIssueTime;
            this.state.acceptanceTrackingNumber = nextProps.data.acceptanceTrackingNumber;
            this.state.authorizationReceiveTime = nextProps.data.authorizationReceiveTime;
            this.state.authorizationIssueTime = nextProps.data.authorizationIssueTime;
            this.state.authorizationTrackingNumber = nextProps.data.authorizationTrackingNumber;
            this.state.certificateRecieveTime = nextProps.data.certificateRecieveTime;
            this.state.certificateIssueTime = nextProps.data.certificateIssueTime;
            this.state.certificateTrackingNumber = nextProps.data.certificateTrackingNumber;
        };
    },
    render() {
        let theData = this.props.data;
        if (this.props.data) {
            return (
                <div className="express-desc">
                    <Spin spinning={this.state.loading} className='spin-box'>
                        <Modal maskClosable={false} title="收发登记详情" visible={this.state.visible}
                            onOk={this.handleOk} onCancel={this.handleCancel}
                            width='800px'
                            footer={[
                                <Button key="submit" type="primary" size="large" onClick={this.handleOk}>确认</Button>,
                                <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>取消</Button>,
                            ]}
                            className="patent-desc-content">
                            <div>
                                <p className="widthHalf"><span>专利号：</span>{theData.patentNumber}</p>
                                <p className="widthHalf"><span>专利名：</span>{theData.patentName}</p>
                            </div>
                            <Row className="express-desc-row">
                                <Col span={3}>收发内容</Col>
                                <Col span={4}>收到时间</Col>
                                <Col span={4}>发出时间</Col>
                                <Col span={5}>发出快递单号</Col>
                                <Col span={5}>发出快递公司</Col>
                            </Row>
                            <Row className="express-desc-row">
                                <Col span={3}>受理通知书</Col>
                                <Col span={4}>
                                    <DatePicker
                                        value={this.state.acceptanceReceiveTime ? moment(this.state.acceptanceReceiveTime) : null}
                                        onChange={(data, dataString) => { this.setState({ acceptanceReceiveTime: dataString }); }} />
                                </Col>
                                <Col span={4}>
                                    <DatePicker
                                        value={this.state.acceptanceIssueTime ? moment(this.state.acceptanceIssueTime) : null}
                                        onChange={(data, dataString) => { this.setState({ acceptanceIssueTime: dataString }); }} />
                                </Col>
                                <Col span={5}>
                                    <Input value={this.state.acceptanceTrackingNumber}
                                        onChange={(e) => { this.setState({ acceptanceTrackingNumber: e.target.value }); }} />
                                </Col>
                                <Col span={5}>
                                    <Select defaultValue="顺丰">
                                        <Select.Option value="顺丰">顺丰</Select.Option>
                                    </Select>
                                </Col>
                            </Row>
                            <Row className="express-desc-row">
                                <Col span={3}>授权通知书</Col>
                                <Col span={4}>
                                    <DatePicker
                                        value={this.state.authorizationReceiveTime ? moment(this.state.authorizationReceiveTime) : null}
                                        onChange={(data, dataString) => { this.setState({ authorizationReceiveTime: dataString }); }} />
                                </Col>
                                <Col span={4}>
                                    <DatePicker
                                        value={this.state.authorizationIssueTime ? moment(this.state.authorizationIssueTime) : null}
                                        onChange={(data, dataString) => { this.setState({ authorizationIssueTime: dataString }); }} />
                                </Col>
                                <Col span={5}>
                                    <Input value={this.state.authorizationTrackingNumber}
                                        onChange={(e) => { this.setState({ authorizationTrackingNumber: e.target.value }); }} />
                                </Col>
                                <Col span={5}>
                                    <Select defaultValue="顺丰">
                                        <Select.Option value="顺丰">顺丰</Select.Option>
                                    </Select>
                                </Col>
                            </Row>
                            <Row className="express-desc-row">
                                <Col span={3}>专利证书</Col>
                                <Col span={4}>
                                    <DatePicker
                                        value={this.state.certificateRecieveTime ? moment(this.state.certificateRecieveTime) : null}
                                        onChange={(data, dataString) => { this.setState({ certificateRecieveTime: dataString }); }} />
                                </Col>
                                <Col span={4}>
                                    <DatePicker value={this.state.certificateIssueTime ? moment(this.state.certificateIssueTime) : null}
                                        onChange={(data, dataString) => { this.setState({ certificateIssueTime: dataString }); }} />
                                </Col>
                                <Col span={5}>
                                    <Input value={this.state.certificateTrackingNumber}
                                        onChange={(e) => { this.setState({ certificateTrackingNumber: e.target.value }); }} />
                                </Col>
                                <Col span={5}>
                                    <Select defaultValue="顺丰">
                                        <Select.Option value="顺丰">顺丰</Select.Option>
                                    </Select>
                                </Col>
                            </Row>
                        </Modal>
                    </Spin>
                </div>
            );
        } else {
            return <div></div>
        }
    },
});
export default ExpressDesc;