import React, { useState, useRef, useEffect } from 'react'; 
 | 
import { 
 | 
    ProForm, 
 | 
    ProFormDigit, 
 | 
    ProFormText, 
 | 
    ProFormSelect, 
 | 
    ProFormDateTimePicker 
 | 
} from '@ant-design/pro-components'; 
 | 
import { Form, Modal } from 'antd'; 
 | 
import { FormattedMessage, useIntl } from '@umijs/max'; 
 | 
import moment from 'moment'; 
 | 
import Http from '@/utils/http'; 
 | 
  
 | 
const Edit = (props) => { 
 | 
    const intl = useIntl(); 
 | 
    const [form] = Form.useForm(); 
 | 
    const { } = props; 
 | 
  
 | 
    useEffect(() => { 
 | 
        form.resetFields(); 
 | 
        form.setFieldsValue({ 
 | 
            ...props.values 
 | 
        }) 
 | 
    }, [form, props]) 
 | 
  
 | 
    const handleCancel = () => { 
 | 
        props.onCancel(); 
 | 
    }; 
 | 
  
 | 
    const handleOk = () => { 
 | 
        form.submit(); 
 | 
    } 
 | 
  
 | 
    const handleFinish = async (values) => { 
 | 
        props.onSubmit({ ...values }); 
 | 
    } 
 | 
  
 | 
    return ( 
 | 
        <> 
 | 
            <Modal 
 | 
                title={ 
 | 
                    Object.keys(props.values).length > 0 
 | 
                        ? intl.formatMessage({ id: 'page.edit', defaultMessage: '编辑' }) 
 | 
                        : intl.formatMessage({ id: 'page.add', defaultMessage: '添加' }) 
 | 
                } 
 | 
                width={640} 
 | 
                forceRender 
 | 
                destroyOnClose 
 | 
                open={props.open} 
 | 
                onCancel={handleCancel} 
 | 
                onOk={handleOk} 
 | 
            > 
 | 
                <ProForm 
 | 
                    form={form} 
 | 
                    submitter={false} 
 | 
                    onFinish={handleFinish} 
 | 
                    layout="horizontal" 
 | 
                    grid={true} 
 | 
                > 
 | 
                    <ProFormDigit 
 | 
                        name="id" 
 | 
                        disabled 
 | 
                        hidden={true} 
 | 
                    /> 
 | 
                    <ProForm.Group> 
 | 
                        <ProFormText 
 | 
                            name="originData" 
 | 
                            label="原始数据" 
 | 
                            colProps={{ md: 12, xl: 12 }} 
 | 
                        /> 
 | 
                        <ProFormText 
 | 
                            name="processData" 
 | 
                            label="处理后的数据" 
 | 
                            colProps={{ md: 12, xl: 12 }} 
 | 
                        /> 
 | 
                    </ProForm.Group> 
 | 
                    <ProForm.Group> 
 | 
                        <ProFormDateTimePicker 
 | 
                            name="createTime" 
 | 
                            label="" 
 | 
                            colProps={{ md: 12, xl: 12 }} 
 | 
                            transform={(value) => moment(value).toISOString()} 
 | 
                        /> 
 | 
                        <ProFormDateTimePicker 
 | 
                            name="updateTime" 
 | 
                            label="" 
 | 
                            colProps={{ md: 12, xl: 12 }} 
 | 
                            transform={(value) => moment(value).toISOString()} 
 | 
                        /> 
 | 
                    </ProForm.Group> 
 | 
                    <ProForm.Group> 
 | 
                        <ProFormSelect 
 | 
                            name="status" 
 | 
                            label="是否启用" 
 | 
                            colProps={{ md: 12, xl: 12 }} 
 | 
                            options={[ 
 | 
                                { label: '否', value: 0 }, 
 | 
                                { label: '是', value: 1 }, 
 | 
                            ]} 
 | 
                        /> 
 | 
                    </ProForm.Group> 
 | 
  
 | 
                </ProForm> 
 | 
            </Modal> 
 | 
        </> 
 | 
    ) 
 | 
} 
 | 
  
 | 
export default Edit; 
 |