Open daisybaicai opened 3 years ago
import React, { useState } from "react"; import { Button, Drawer, Form, Card } from "antd"; import Proform, { ProFormSelect } from "@ant-design/pro-form"; const areaTypeList = { "1": "测试1", "2": "测试2" }; export default function App() { const [visible, setVisible] = useState(false); const [dynamicAreaForm] = Form.useForm(); return ( <div className="App"> <Button type="primary" onClick={() => setVisible(true)}> 新增 </Button> <Drawer visible={visible} width={400} onCancel={() => setVisible(false)}> <Proform scrollToFirstError={true} style={{ marginTop: 36 }} name="dynamicArea" form={dynamicAreaForm} autoComplete="off" onFinish={async (vlaues) => { console.log("area content", vlaues); // onOk && onOk(vlaues.areaData ? vlaues.areaData : []); }} > <Form.List name="areaData"> {(fields, { add, remove }) => { return ( <> {fields.map((field) => ( <Card key={field.key} bordered style={{ marginBottom: 16 }} extra={ <Button type="link" onClick={() => remove(field.name)}> 删除 </Button> } title="自定义区域内容" > <ProFormSelect label="区域类型" name={[field.name, "type"]} fieldKey={[field.fieldKey, "type"]} valueEnum={areaTypeList} rules={[ { required: true, message: "区域类型不能为空!" } ]} /> <Form.Item shouldUpdate noStyle> {({ getFieldValue, setFieldsValue }) => { return ( getFieldValue(["areaData", field.name, "type"]) && ( <Form.Item label="区域类型数据配置"> <Form.Item noStyle initialValue={[]} name={[field.name, "typeData"]} fieldKey={[field.fieldKey, "typeData"]} rules={[ { required: true, message: "区域类型数据配置不能为空!" } ]} > <Button onClick={() => { const testData = [ "选中的数据1", "选中的数据2", "选中的数据3" ]; /** * 在Form.List下可以新增区域,每个区域存在区域类型数据配置栏位 * 点击请选择在实际场景中会出现一个新的表格然后选择数据内容,使用testData模拟 * 区域类型数据配置栏位 name = typeData,参考getFieldValue(["areaData", field.name, "type]) * 但是setFieldsValue 对象参数key不支持NamePath格式,无法赋值 */ const newData = [ ...getFieldValue("areaData") ]; newData[field.key] = { ...newData[field.key], typeData: testData }; setFieldsValue({ areaData: newData }); }} > 请选择 </Button> </Form.Item> </Form.Item> ) ); }} </Form.Item> </Card> ))} <Form.Item> <Button type="dashed" onClick={() => add()} block> 新增区域 </Button> </Form.Item> </> ); }} </Form.List> </Proform> </Drawer> </div> ); }