配置测试节点弹窗组件 - React

这是一个使用 Ant Design ProForm 组件库构建的配置测试节点弹窗组件，允许用户添加、编辑和删除测试节点配置。

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<UpdateProps> = (props) => {
const { children, detail } = props;
const [visible, setVisible] = useState(false);
const actionRef = useRef<FormListOperation>();
//   const [delPlanIdList, setDelPlanIdList] = useState<number[]>([]);
return (
<>
{React.cloneElement(children, {
onClick: () => setVisible(true),
})}
<ModalForm
title={${detail ? &#x27;编辑&#x27; : &#x27;新增&#x27;}配置测试节点}
visible={visible}
initialValues={detail ? detail : { configPlanList: [{ nodeName: '' }] }}
width={900}
labelCol={{ span: 4 }}
layout="horizontal"
modalProps={{
onCancel: () => {
setVisible(false);
//   form.resetFields();
},
destroyOnClose: true,
}}
>
<ProFormText width="lg" name="name" label="节点名称" labelAlign="right" />
<ProFormText width="lg" name="nodeTimer" label="节点测试周期" labelAlign="right" />
<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}}
/>
<ProFormText labelCol={{ span: 2 }} name="nodeTypeName" label={''} width="md" />
<Popconfirm
title="确定删除？"
okText="确定"
cancelText="取消"
onConfirm={() => {
if (!index) {
message.warning('至少要有一项节点数据！');
return;
}
//   setDelPlanIdList((val) => [...val, record.id]);
actionRef.current?.remove(index);
}}
>
<Button style={{ marginBottom: '24px' }} type="link">
删除
</Button>
</Popconfirm>
</Space>
)}
/>
    &lt;Button
      type="primary"
      style={{ marginLeft: &#x27;108px&#x27; }}
      onClick={() => {
        actionRef.current?.add({});
      }}
    &gt;
      添加节点
    &lt;/Button&gt;
  &lt;/ModalForm&gt;
&lt;/&gt;

);
};
export default ConfigurationModal;

如果您希望将这两个输入框与节点版本对齐，可以使用labelAlign属性来设置标签的对齐方式。将labelAlign属性设置为right可以使标签右对齐。具体代码如下：

<ProFormText width="lg" name="name" label="节点名称" labelAlign="right" />
<ProFormText width="lg" name="nodeTimer" label="节点测试周期" labelAlign="right" />

这样节点名称和节点测试周期的标签就会与节点版本的标签对齐了。