import React, { useState, useEffect } from 'react'; import { Form, Select, Input, Button, notification, Spin } from 'antd'; import { modifyProduct } from '@/services/webConfig/api'; const { Item } = Form; const { Option } = Select; const { TextArea } = Input; const AddForm = props => { const { addCallback } = props; const [config, setConfig] = useState(''); // 网站配置信息 const [loading, setLoading] = useState(false); const [form] = Form.useForm(); const layout = { layout: 'horizontal', labelCol: { span: 5 }, wrapperCol: { span: 16 }, }; const environmentList = [ { value: 'production', label: '生产环境', key: 'production', }, { value: 'development', label: '开发环境', key: 'development', }, ]; // 提交选择 const submit = value => {}; // 提交 const finished = value => { setLoading(true); modifyProduct({ ...value, Id: 0 }) .then(res => { if (res.code === 0) { notification.success({ message: '提示', duration: 3, description: '新增成功', }); addCallback(); } else { notification.error({ message: '提示', duration: 3, description: res.msg || '新增成功', }); } }) .catch(err => { console.error(err); }) .finally(item => { setLoading(false); }); }; return ( <Spin spinning={loading} tip="loading..."> <div style={{ minHeight: 'calc(100vh - 252px)', marginTop: '20px' }}> <Form form={form} name="formAdd" {...layout} onFinish={finished}> <Item label="产品名称:" name="ProductName" rules={[ { required: true, pattern: new RegExp(/^[a-z0-9A-Z]+$/), message: '产品名称必须是英文或者数字', }, ]} > <Input placeholder="请输入产品名称" allowClear /> </Item> <Item label="产品别名:" name="ProductAlias" // rules={[ // { // required: true, // message: '请输入产品别名', // }, // ]} > <Input placeholder="请输入产品别名" allowClear /> </Item> <Item label="产品环境:" name="Environment" rules={[ { required: true, message: '请选择产品环境', }, ]} > <Select placeholder="请选择产品环境"> {environmentList && environmentList.map(item => ( <Option value={item.value} key={item.key}> {item.label} </Option> ))} </Select> </Item> <Item label="入口url" name="StartUrl" rules={[ { required: true, message: '请输入入口url', }, ]} > <Input addonBefore="//" placeholder="请输入入口url" allowClear /> </Item> <Item label="默认配置" name="DefaultSetting" rules={[ { required: false, message: '请输入默认配置', }, ]} > <TextArea placeholder="请输入默认配置" allowClear autoSize={{ minRows: 3, maxRows: 5 }} /> </Item> <Item wrapperCol={{ span: 7, offset: 7 }}> <Button type="primary" htmlType="submit"> 提交 </Button> </Item> </Form> </div> </Spin> ); }; export default AddForm;