Ant Design Pro Form 配置测试节点模态框组件

import { ModalForm, ProFormList, ProFormText } from '@ant-design/pro-form'; import React, { useRef, useState } from 'react'; import type { FormListOperation } from 'antd/lib/form/FormList'; import { Button, Popconfirm, Space, message } from 'antd'; import { getOnlyKey } from '@/utils/utils';

interface UpdateProps { children: React.ReactElement; // refresh: () => void; detail?: DIConfigItem; } const ConfigurationModal: React.FC = (props) => { const { children, detail } = props;

const [visible, setVisible] = useState(false); const actionRef = useRef(); // const [delPlanIdList, setDelPlanIdList] = useState<number[]>([]);

return ( <> {React.cloneElement(children, { onClick: () => setVisible(true), })} <ModalForm title={${detail ? '编辑' : '新增'}配置测试节点} visible={visible} initialValues={detail ? detail : { configPlanList: [{ nodeName: '' }] }} width={900} labelCol={{ span: 4 }} layout="horizontal" modalProps={{ onCancel: () => { setVisible(false); }, destroyOnClose: true }} > <ProFormList name="configPlanList" min={1} actionRef={actionRef} alwaysShowItemLabel copyIconProps={false} creatorButtonProps={false} creatorRecord={() => ({ key: getOnlyKey() })} rules={[ { validator: async (, value) => { if (value && value.length > 0) { return; } throw new Error('至少要有一项！'); }, } ]} deleteIconProps={false} itemRender={(, { index, record }) => ( <Space key={record.key || record.id}> <ProFormText labelCol={{ offset: 3, span: 4 }} name="nodeName" width="lg" label={节点版本${index + 1}} /> <Popconfirm title="确定删除？" okText="确定" cancelText="取消" onConfirm={() => { if (!index) { message.warning('至少要有一项节点数据！'); return; } actionRef.current?.remove(index); }}> <Button style={{ marginBottom: '24px' }} type="link">删除 )} /> <Button type="primary" style={{ marginLeft: '108px' }} onClick={() => { actionRef.current?.add({}); }}>添加节点 </> ); }; export default ConfigurationModal;