kede-client/js/component/account/services/intellectualDesc.jsx

import React from 'react';
import { Icon, Modal, Button, Form, message, Input, Spin, Select, DatePicker, Upload } from 'antd';
import './patent.less';
import { intellectualGetList, catagoryList } from '../../dataDic.js';
import { beforeUploadFile, newDownloadFile } from '../../tools.js';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';
import moment from 'moment';

const IntellectualDescFrom = Form.create()(React.createClass({
    loadData(id, type) {
        this.props.spinState(true);
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/user/cognizance/intellectualDetail",
            data: {
                id: id ? id : this.props.data.id,
                type: type != undefined && type != null ? type : this.props.data.type
            }
        }).done((data) => {
            if (!data.data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                };
                this.state.data = {};
            } else { this.state.data = data.data };
        }).always(function () {
            this.props.spinState(false);
        }.bind(this));
    },
    getInitialState() {
        return {
            loading: false,
            intellectualGetOption: [],
            catagoryOption: [],
            data: {}
        };
    },
    componentWillMount() {
        let _me = this;
        intellectualGetList.map(function (item) {
            _me.state.intellectualGetOption.push(
                <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
            )
        });
        catagoryList.map(function (item) {
            _me.state.catagoryOption.push(
                <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
            )
        });
        if (this.props.data.id) {
            this.loadData(this.props.data.id, this.props.data.type);
        };
    },
    handleSubmit(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.spinState(true);
                $.ajax({
                    method: "POST",
                    dataType: "json",
                    crossDomain: false,
                    url: globalConfig.context + "/api/user/cognizance/intellectual",
                    data: {
                        id: this.props.data.id,
                        intellectualPropertyNumber: values.intellectualPropertyNumber,
                        intellectualPropertyName: values.intellectualPropertyName,
                        catagory: values.catagory,
                        obtainWay: values.obtainWay,
                        sortNumber: values.sortNumber,
                        authorizationNumber: values.authorizationNumber,
                        authorizationDateFormattedDate: values.authorizationDate ? values.authorizationDate.format('YYYY-MM-DD') : null,
                        propertyRightUrl: this.state.propertyRightUrl
                    }
                }).done(function (data) {
                    if (!data.error.length) {
                        message.success('保存成功！');
                    } else {
                        message.warning(data.error[0].message);
                    }
                }.bind(this)).always(function () {
                    this.props.spinState(false);
                    this.props.clickOk();
                    this.props.form.resetFields();
                }.bind(this));
            }
        });
    },
    checkIdcardnum(rule, value, callback) {
        if (!/(^\d{15}$)|(^\d{17}(\d|X)$)/.test(value)) {
            callback('请输入正确的身份证号！');
        } else {
            callback();
        }
    },
    componentWillReceiveProps(nextProps) {
        if (!this.props.visible && nextProps.visible) {
            if (nextProps.data.id) {
                this.loadData(nextProps.data.id, nextProps.data.type);
            };
            this.state.data = {};
            this.state.fileList = [];
            this.state.propertyRightUrl = undefined;
        };
    },
    render() {
        const FormItem = Form.Item;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 12 },
        };
        const _me = this;
        const theData = this.state.data;
        return (
            <Form horizontal onSubmit={this.handleSubmit}>
                <FormItem
                    {...formItemLayout}
                    label="知识产权编号"
                >
                    {getFieldDecorator('intellectualPropertyNumber', {
                        rules: [{ required: true, message: '请输入，知识产权编号不能为空!' }],
                        initialValue: theData.intellectualPropertyNumber
                    })(
                        <Input placeholder="请输入知识产权编号" />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="知识产权名称"
                >
                    {getFieldDecorator('intellectualPropertyName', {
                        rules: [{ required: true, message: '请输入，知识产权名称不能为空!' }],
                        initialValue: theData.intellectualPropertyName
                    })(
                        <Input placeholder="请输入知识产权名称" />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="排序号"
                >
                    {getFieldDecorator('sortNumber', {
                        rules: [{ required: true, message: '请输入，排序号不能为空!' }],
                        initialValue: theData.sortNumber
                    })(
                        <Input placeholder="请输入排序号" />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="知识产权类型"
                >
                    {getFieldDecorator('catagory', {
                        rules: [{ required: true, message: '请选择，知识产权类型不能为空!' }],
                        initialValue: theData.catagory
                    })(
                        <Select placeholder="请选择知识产权类型" style={{ width: 200 }}
                            onChange={(e) => { this.state.catagory = e; }}>
                            {this.state.catagoryOption}
                        </Select>
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="获得方式"
                >
                    {getFieldDecorator('obtainWay', {
                        rules: [{ required: true, message: '请选择，获得方式不能为空!' }],
                        initialValue: theData.obtainWay
                    })(
                        <Select placeholder="请选择获得方式" style={{ width: 200 }}
                            onChange={(e) => { this.state.obtainWay = e; }}>
                            {this.state.intellectualGetOption}
                        </Select>
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="授权号"
                >
                    {getFieldDecorator('authorizationNumber', {
                        rules: [{ required: true, message: '请输入，授权号不能为空!' }],
                        initialValue: theData.authorizationNumber
                    })(
                        <Input placeholder="请输入授权号" />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="授权日期"
                >
                    {getFieldDecorator('authorizationDate', {
                        rules: [{ type: 'object', required: true, message: '请选择，授权日期不能为空!' }],
                        initialValue: theData.authorizationDateFormattedDate ? moment(theData.authorizationDateFormattedDate, 'YYYY/MM/DD') : null
                    })(
                        <DatePicker style={{ width: 200 }}
                            onChange={(data, dataString) => { this.state.authorizationDateFormattedDate = dataString }} />
                        )}
                </FormItem>
                <div>
                    <Upload
                        name="ratepay"
                        action={globalConfig.context + "/api/user/cognizance/uploadPropertyRight"}
                        data={{ 'sign': 'property_right' }}
                        beforeUpload={beforeUploadFile}
                        fileList={this.state.fileList}
                        onChange={(info) => {
                            if (info.file.status !== 'uploading') {
                                // console.log(info.file, info.fileList);
                            }
                            if (info.file.status === 'done') {
                                if (!info.file.response.error.length) {
                                    message.success(`${info.file.name} 文件上传成功！`);
                                } else {
                                    message.warning(info.file.response.error[0].message);
                                    return;
                                };
                                this.state.propertyRightUrl = info.file.response.data;
                            } else if (info.file.status === 'error') {
                                message.error(`${info.file.name} 文件上传失败。`);
                            };
                            this.setState({ fileList: info.fileList.slice(-1) });
                        }}
                    >
                        <Button><Icon type="upload" /> 上传知识产权证书 </Button>
                    </Upload>
                    <p style={{ margin: '10px 0' }}>{theData.propertyRightUrl ? <a onClick={newDownloadFile.bind(null, theData.id, 'property_right', '/api/user/cognizance/downloadPropertyRight', 'downloadPropertyRight')}>{theData.propertyRightDownloadFileName}</a> : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传知识产权证书！</span>}</p>
                    {(theData.type && theData.type != 0) ? <p style={{ margin: '10px 0' }}>
                        {theData.manuscript ? <a onClick={newDownloadFile.bind(null, theData.id, 'manuscript', '/api/user/cognizance/downloadManuscript', theData.type)}>稿件下载</a> : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传稿件！</span>}
                    </p> : <span></span>}
                </div>
                <FormItem>
                    <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
                    <Button type="ghost" style={{ marginLeft: '20px' }} onClick={this.props.closeModal}>取消</Button>
                </FormItem>
            </Form >
        );
    },
}));


const intellectualDesc = React.createClass({
    getInitialState() {
        return {
            visible: false,
            loading: false
        };
    },
    componentWillReceiveProps(nextProps) {
        this.state.visible = nextProps.showDesc
    },
    showModal() {
        this.setState({
            visible: true,
        });
    },
    handleOk() {
        this.setState({
            visible: false,
        });
        this.props.closeDesc(false, true);
    },
    handleCancel(e) {
        this.setState({
            visible: false,
        });
        this.props.closeDesc(false);
    },
    spinChange(e) {
        this.setState({
            loading: e
        });
    },
    render() {
        return (
            <div className="patent-addNew">
                <Modal maskClosable={false} title="知识产权详情" visible={this.state.visible}
                    onOk={this.handleOk} onCancel={this.handleCancel}
                    width='600px'
                    footer=''>
                    <Spin spinning={this.state.loading} className='spin-box'>
                        <IntellectualDescFrom
                            visible={this.state.visible}
                            data={this.props.data}
                            spinState={this.spinChange}
                            closeModal={this.handleCancel}
                            clickOk={this.handleOk} />
                    </Spin>
                </Modal>
            </div>
        );
    },
});
export default intellectualDesc;