import React, { useState, useEffect } from 'react'; import { Form, Input, Button, Row, Col } from 'antd'; import styles from './addForm.less'; import PicturesWall from '@/components/Upload/index'; import CheckList from './checkBox'; import checkStyles from './checkBox'; const { Item } = Form; const AddForm = props => { const { submitCallback, nodeType, nodeObj, addType, submitLoading, valueCallback, addList, } = props; const [form] = Form.useForm(); const [otherForm] = Form.useForm(); console.log(nodeObj, 'nodeObj'); const layout = { layout: 'horizontal', labelCol: { span: 4, offset: 1 }, wrapperCol: { span: 16 }, }; const submit = () => { if (addType === 1 || addType === 2) { let obj = form.getFieldsValue(); submitCallback(obj, nodeObj); } if (addType === 3 || addType === 4) { let obj = otherForm.getFieldsValue(); submitCallback(obj, nodeObj); } }; const finish = () => { submit(); }; useEffect(() => {}, [nodeObj, addType]); return ( <div> {(addType === 1 || addType === 2) && ( <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> {addType === 1 && ( <Item label="在线图标" name="imageUrl" rules={[ { required: true, message: '请选择在线图标', }, ]} > <PicturesWall picType="androidMenu" /> </Item> )} {addType === 1 && ( <Item label="离线图标" name="offlineImgUrl" rules={[ { required: true, message: '请选择离线图标', }, ]} > <PicturesWall picType="androidMenu" /> </Item> )} {addType === 2 && ( <Item label="菜单组图标" name="imageUrl" rules={[ { required: true, message: '请选择菜单组图标', }, ]} > <PicturesWall picType="androidMenu" /> </Item> )} <Item label="功能参数" name="funParam"> <Input /> </Item> <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}> <Button type="primary" htmlType="submit" loading={submitLoading}> 提交 </Button> </Item> </Form> )} {(addType === 3 || addType === 4) && ( <Form form={otherForm} name="menuform" {...layout} onFinish={finish} className={styles.formStyle} > <Item label="菜单名称" name="menuName" rules={[ { required: true, message: '请输入菜单名称', }, ]} > <Input /> </Item> <Item label="菜单别名" name="shortName"> <Input /> </Item> {addType === 3 && ( <Item label="在线图标" name="imageUrl" rules={[ { required: true, message: '请选择在线图标', }, ]} > <PicturesWall picType="androidMenu" /> </Item> )} {addType === 3 && ( <Item label="离线图标" name="offlineImgUrl" rules={[ { required: true, message: '请选择离线图标', }, ]} > <PicturesWall picType="androidMenu" /> </Item> )} {addType === 4 && ( <Item label="菜单图标" name="imageUrl" rules={[ { required: true, message: '请选择菜单图标', }, ]} > <PicturesWall picType="androidMenu" /> </Item> )} <Item label="功能路径" name="pageUrl" rules={[ { required: true, message: '请输入功能路径', }, ]} > <Input /> </Item> <Item label="功能参数" name="funParam"> <Input /> </Item> {/* <CheckList nodeType={addType} valueCallback={valueCallback} addList={addList} /> */} <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}> <Button type="primary" htmlType="submit" loading={submitLoading}> 提交 </Button> </Item> </Form> )} </div> ); }; export default AddForm;