import React from 'react'; import { Form, Input, Button, Select, Radio } from 'antd'; import styles from './addForm.less'; import PicturesWall from '@/components/Upload/index'; import EditeConfigWrapper from './editConfigFileWrapper'; const { Item } = Form; const { Option } = Select; const AddForm = props => { const { submitCallback, nodeObj, addType, submitLoading, configFiles, productList, } = props; const [form] = Form.useForm(); const [otherForm] = Form.useForm(); const layout = { layout: 'horizontal', labelCol: { span: 4, offset: 1 }, wrapperCol: { span: 16 }, }; const submit = () => { if (addType === 1) { let obj = form.getFieldsValue(); submitCallback(obj, nodeObj); } if (addType === 2) { // 分组 let obj = otherForm.getFieldsValue(); submitCallback(obj, nodeObj); } }; const finish = () => { submit(); }; return ( <div> {addType === 1 && ( <Form form={form} name="groupform" {...layout} className={styles.formStyle} onFinish={finish} > <Item label="菜单名称" name="menuName" rules={[ { required: true, message: '请输入菜单名称', }, ]} > <Input placeholder="请输入菜单名称" /> </Item> <Item label="菜单别名" name="shortName"> <Input placeholder="请输入菜单别名" /> </Item> <Item label="产品类型:" name="product"> <Select placeholder="请选择产品类型" allowClear> {productList && productList.length > 0 && productList.map(item => ( <Option value={item.PackageName} key={item.PackageName}> {item.ProductName} </Option> ))} </Select> </Item> <Item label="菜单图标" name="imageUrl" rules={[ { required: true, message: '请选择菜单图标', }, ]} > <PicturesWall picType="menuNew" /> </Item> <Item label="菜单隐藏" name="hideInMenu" initialValue={false}> <Radio.Group> <Radio value>是</Radio> <Radio value={false}>否</Radio> </Radio.Group> </Item> <Item label="功能路径" name="pageUrl" rules={[ { required: true, // pattern: /^[^\s]*$/, message: '请输入功能路径', }, ]} > <Input placeholder="请输入功能路径" /> </Item> <Item label="配置文件" name="config"> <EditeConfigWrapper> <Select allowClear showSearch filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 } > {configFiles.map(c => ( <Select.Option key={c.text} value={c.value}> {c.text} </Select.Option> ))} </Select> </EditeConfigWrapper> </Item> <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}> <Button type="primary" htmlType="submit" loading={submitLoading}> 提交 </Button> </Item> </Form> )} {addType === 2 && ( <Form form={otherForm} name="menuform" {...layout} onFinish={finish} className={styles.formStyle} > <Item label="菜单组名称" name="menuName" rules={[ { required: true, message: '请输入菜单组名称', }, ]} > <Input placeholder="请输入菜单组名称" /> </Item> <Item label="菜单组别名" name="shortName"> <Input placeholder="请输入菜单组别名" /> </Item> <Item label="菜单组图标" name="imageUrl" rules={[ { required: true, message: '请选择菜单组图标', }, ]} > <PicturesWall picType="menuNew" /> </Item> <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}> <Button type="primary" htmlType="submit" loading={submitLoading}> 提交 </Button> </Item> </Form> )} </div> ); }; export default AddForm;