需求:
(1)数据联动:测试数据1、2互相依赖,测试数据1<=测试数据2,测试数据2>=测试数据1。
(2)点击添加按钮,添加一行。
(3)自定义操作按钮。
(4)点击自定义操作按钮(禁用),禁用当前行。
代码实现:
import { StopOutlined } from '@ant-design/icons';
import { FormListActionType, ProCard, ProForm, ProFormDependency, ProFormList, ProFormText } from '@ant-design/pro-components';
import { gte, isEmpty, lte } from 'lodash';
import { useRef, useState } from 'react';
const Demo = () => {
const [refresh, setRefresh] = useState<boolean>(false);
const actionRef = useRef<
FormListActionType<{
name: string;
[key: string]: any;
}>
>();
const childrenDom = (record: Record<string, any>) => {
return (
<ProForm.Group key="group">
<ProFormDependency name={['test2']}>
{(depValues) => {
return (
<ProFormText
disabled={record.disabled}
width="md"
name="test1"
label="测试数据1"
rules={[
{
required: true,
message: '必选字段不能为空',
},
{
pattern: /^[-+]?[0-9]+(\.[0-9]+)?$/,
message: '请输入正确的数字',
},
{
validator: async (_, value) => {
if (isEmpty(value) || isEmpty(depValues.test2)) {
return Promise.resolve();
}
if (lte(parseInt(value), parseInt(depValues.test2))) {
return Promise.resolve();
} else {
return Promise.reject(new Error('测试数据1不能大于测试数据2'));
}
},
},
]}
/>
);
}}
</ProFormDependency>
<ProFormDependency key="globalUseMode" name={['test1']}>
{(depValues) => {
return (
<ProFormText
disabled={record.disabled}
width="md"
name="test2"
label="测试数据2"
rules={[
{
required: true,
message: '必选字段不能为空',
},
{
pattern: /^[-+]?[0-9]+(\.[0-9]+)?$/,
message: '请输入正确的数字',
},
{
validator: async (_, value) => {
if (isEmpty(value) || isEmpty(depValues.test1)) {
return Promise.resolve();
}
if (gte(parseInt(value), parseInt(depValues.test1))) {
return Promise.resolve();
} else {
return Promise.reject(new Error('测试数据2不能小于测试数据1'));
}
},
},
]}
/>
);
}}
</ProFormDependency>
</ProForm.Group>
);
};
return (
<ProForm submitter={false}>
<ProFormList
name={'Test'}
label="Test"
initialValue={[{}]}
actionRef={actionRef}
actionRender={(field, action, defaultActionDom, count) => {
return [
...defaultActionDom,
<StopOutlined
key="disable"
style={{ marginLeft: '5px' }}
onClick={() => {
const data = actionRef.current?.get(field.name);
if (data) {
data.disabled = true;
setRefresh(!refresh);
}
}}
/>,
];
}}
itemRender={({ listDom, action }, { index, record }) => (
<ProCard bordered style={{ marginBlockEnd: 8 }} title={`Test${index + 1}`} extra={action} bodyStyle={{ paddingBlockEnd: 0 }}>
{childrenDom(record)}
</ProCard>
)}
/>
</ProForm>
);
};
export default Demo;
结果展示:
重点代码截图:
(1)数据联动:测试数据1、2互相依赖,测试数据1<=测试数据2,测试数据2>=测试数据1。
(2)点击添加按钮,添加一行。
(3)自定义操作按钮。
(4)点击自定义操作按钮(禁用),禁用当前行。