TemplateSave.js

import React,{Component} from 'react'
import {Button,Table,Modal,Row,Col,Form,Input,Icon,notification} from 'antd'

import ServiceAPI from './ServiceAPI'

const createForm = Form.create;
const FormItem = Form.Item;


const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };


export default class TemplateSaver extends Component{

    constructor(props)
    {
        super(props)
        this.state = {visible:false,loading:false}
    }

     showModal=()=> {

        this.setState({
            visible: true,
        });
    }
    handleOk=(e)=>{
        
        //console.log(this.inp.getForm().submit())
        this.inp.validateFields((errors, values) => {
            if (!!errors) {
                console.log('Errors in form!!!');
                return;
            }
            this.onSave(values)
        });
        //.handleSubmit(e)
    }
    onSave=vals=>{
        this.setState({ loading: true });
        //调用模板保存API
        let tempJsn = this.props.getTemplateJSON()
        let json = {...vals,sf2temp:tempJsn,mty:this.props.mty,user:this.props.mctid||'NONE'}
        console.log(json)
        ServiceAPI.saveTemplate(json).then(data=>{
            if(typeof data=='string')
            {
                    data = JSON.parse(data)
            }
            if(data.errorCode !== '0000')
            {
                notification.error({description:'模板保存失败！',message:'错误'})
            }
            else
            {
                notification.success({description:'模板保存成功！',message:'提示'})
            }
            this.setState({ loading: false,visible:false });
            
        }).catch(err=>{
            notification.error({description:'模板保存失败！',message:'错误'})
            this.setState({ loading: false,visible:false });
        })
    }
    handleCancel=()=>{
        this.setState({ visible: false });
    }
    
    render()
    {
        
        return (
           <div >
            <Button style={this.props.style} icon="save" type="primary" onClick={this.showModal}>
            Template
            </Button>
            <Modal ref="modal"
            visible={this.state.visible}
            title="Save template" onOk={this.handleOk} onCancel={this.handleCancel}
            footer={[
                <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>Back</Button>,
                <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
                Submit
                </Button>,
            ]}
            >
            <TForm ref={ref=>this.inp=ref}  onSaveTemp={this.onSave}/>
            </Modal>
        </div>


        )
    }
}


class TempForm extends Component{

    handleSubmit=e=>{
        e.preventDefault();
        this.props.form.validateFields((errors, values) => {
            if (!!errors) {
                console.log('Errors in form!!!');
                return;
            }
            this.props.onSaveTemp(values)
        });

    }

    handleReset=(e)=>{
        e.preventDefault();
        this.props.form.resetFields();
    }

    render(){
        const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;
        const nameProps = getFieldProps('nam', {
            rules: [
                { required: true, message: 'Fill in the template name' },
            ],
        });
        const textareaProps = getFieldProps('txt', {
            rules: [
                { required: true, message: 'Fill in message Remarks' },
            ],
        });
        return (
            <Form horizontal form={this.props.form}>
                 <FormItem
                    {...formItemLayout}
                    label="Template name"
                    hasFeedback
                    >
                        <Input name="nam" {...nameProps} type="text" maxLength={10} placeholder="Please fill in the template name" />
                    </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="Remarks"
                    >
                        <Input {...textareaProps} type="textarea" placeholder="Fill in message Remarks"  name="txt" />
                    </FormItem>
                
            </Form>

        )
    }
}


 const TForm = createForm()(TempForm);