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

import React from 'react';
import { Icon, Modal, Button, Form, message, Input, Spin, Select, DatePicker } from 'antd';
import './comprehensive.less';
import { patentGetList, patentTypeList } from '../../../dataDic.js';
import { companySearch } from '../../../tools.js';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';

const PatentAddFrom = Form.create()(React.createClass({
    getInitialState() {
        return {
            loading: false,
            patentGetOption: [],
            patentTypeOption: [],
            companyOption: []
        };
    },
    getCompanyList() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/user/patent/getUnitNames",
            success: function (data) {
                if (data.error.length || !data.data) {
                    return;
                };
                let _me = this;
                for (var item in data.data) {
                    _me.state.companyOption.push(
                        <Select.Option value={item} key={item}>{data.data[item]}</Select.Option>
                    )
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    componentWillMount() {
        let _me = this;
        patentGetList.map(function (item) {
            _me.state.patentGetOption.push(
                <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
            )
        });
        patentTypeList.map(function (item) {
            _me.state.patentTypeOption.push(
                <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
            )
        });
        this.getCompanyList();
    },
    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/patent/managerInputPatent",
                    data: {
                        "uid": this.state.companyId,
                        "patentNumber": values.patentNumber,
                        "patentName": values.patentName,
                        "patentCatagory": this.state.patentCatagory,
                        "obtailWay": this.state.obtailWay,
                        "sortNumber": values.sortNumber,
                        "authorizationNumber": values.authorizationNumber,
                        "authorizationDate": this.state.authorizationDate
                    }
                }).done(function (data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    } else {
                        message.success('保存成功！');
                        this.props.clickOk();
                        this.props.form.resetFields();
                    };
                }.bind(this)).always(function () {
                    this.props.spinState(false);
                }.bind(this));
            }
        });
    },
    checkIdcardnum(rule, value, callback) {
        if (!/(^\d{15}$)|(^\d{17}(\d|X)$)/.test(value)) {
            callback('请输入正确的身份证号！');
        } else {
            callback();
        }
    },
    render() {
        const FormItem = Form.Item;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 3 },
            wrapperCol: { span: 12 },
        };
        const _me = this;
        return (
            <Form horizontal onSubmit={this.handleSubmit} className="person-form">
                <FormItem
                    {...formItemLayout}
                    label="选择公司"
                >
                    {getFieldDecorator('companyId', {
                        rules: [{ required: true, message: '请选择，公司不能为空!' }]
                    })(
                        <Select placeholder="请选择公司"
                            showSearch
                            filterOption={companySearch}
                            style={{ width: 200 }}
                            onChange={(e) => { this.state.companyId = e; }}>
                            {this.state.companyOption}
                        </Select>
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="专利编号"
                >
                    {getFieldDecorator('patentNumber', {
                        rules: [{ required: true, message: '请输入，专利编号不能为空!' }]
                    })(
                        <Input placeholder="请输入专利编号" />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="专利名称"
                >
                    {getFieldDecorator('patentName', {
                        rules: [{ required: true, message: '请输入，专利名称不能为空!' }]
                    })(
                        <Input placeholder="请输入专利名称" />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="排序号"
                >
                    {getFieldDecorator('sortNumber', {
                        rules: [{ required: true, message: '请输入，排序号不能为空!' }]
                    })(
                        <Input placeholder="请输入排序号" />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="专利类型"
                >
                    {getFieldDecorator('patentCatagory', {
                        rules: [{ required: true, message: '请选择，专利类型不能为空!' }]
                    })(
                        <Select placeholder="请选择专利类型" style={{ width: 200 }}
                            onChange={(e) => { this.state.patentCatagory = e; }}>
                            {this.state.patentTypeOption}
                        </Select>
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="获得方式"
                >
                    {getFieldDecorator('obtailWay', {
                        rules: [{ required: true, message: '请选择，获得方式不能为空!' }]
                    })(
                        <Select placeholder="请选择获得方式" style={{ width: 200 }}
                            onChange={(e) => { this.state.obtailWay = e; }}>
                            {this.state.patentGetOption}
                        </Select>
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="授权号"
                >
                    {getFieldDecorator('authorizationNumber', {
                        rules: [{ required: true, message: '请输入，授权号不能为空!' }]
                    })(
                        <Input placeholder="请输入授权号" />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="授权日期"
                >
                    {getFieldDecorator('authorizationDate', {
                        rules: [{ required: true, message: '请选择，授权日期不能为空!' }]
                    })(
                        <DatePicker style={{ width: 200 }}
                            onChange={(data, dataString) => { this.state.authorizationDate = dataString }} />
                        )}
                </FormItem>
                <FormItem>
                    <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
                    <Button type="ghost" style={{ marginLeft: '20px' }} onClick={this.props.closeModal}>取消</Button>
                </FormItem>
            </Form >
        );
    },
}));


const PatentAdd = React.createClass({
    getInitialState() {
        return {
            visible: false,
            loading: false
        };
    },
    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">
                <Button className="patent-addNew" type="primary" onClick={this.showModal}>新专利添加<Icon type="plus" /></Button>
                <Modal maskClosable={false} title="新专利添加" visible={this.state.visible}
                    onOk={this.handleOk} onCancel={this.handleCancel}
                    width='720px'
                    footer='' >
                    <Spin spinning={this.state.loading} className='spin-box'>
                        <PatentAddFrom spinState={this.spinChange} closeModal={this.handleCancel} clickOk={this.handleOk} />
                    </Spin>
                </Modal>
            </div>
        );
    },
});
export default PatentAdd;