目录
一、ModalForm高度设置
在modalProps中设置bodyStyle:{height:500,overflowY:'scroll'}
效果如下:
二、ModalForm点击阴影背景,不隐藏弹框
同样在modalProps里面,配置maskClosable: false,就可以实现点击弹框外阴影,不隐藏弹框
<ModalForm
title="编辑公司"
width="600px"
visible={updateModalVisible}
onVisibleChange={setUpdateModalVisible}
onFinish={async (value) => {
const success = await modify(value as API.CompanyItem);
if (success) {
setUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
modalProps={{
destroyOnClose: true,
maskClosable: false,
bodyStyle: { maxHeight: 500, overflowY: 'auto' },
}}
>
三、ProFormSelect联动
在ProFormSelect中,使用dependencies={['department_id']},其中department_id是需要的其他控件的值,使用时会在params中存在,看这个结构,如果需要多个控件的值应该也是支持的,暂时还没有尝试。
四、ProFormText关联赋值
业务需要,现在用到了文本框数据关联更新,但是没发现ProFormText有ProFormSelect相似的方法,但是也找到了实现方法。
第一种是使用ProFormDependency可以监听对应组件的值的变化,来实现ProFormText对应属性的变化,比如设置disabled的值,但仍然不能使用initialValue进行赋值,这里需要使用form进行动态赋值:theForm.setFieldValue('price_mode_name', res?.data?.price_mode_name);(form的使用此处不再多说)
<ProFormDependency name={['project_id']}>
{({ project_id }) => {
theForm.setFieldValue('price_mode_name', null);
if (project_id) {
getPriceMode({
project_id: project_id,
}).then((res) => {
console.log(res);
if (res.code) {
if (res?.data?.price_mode) {
theForm.setFieldValue('price_mode_name', res?.data?.price_mode_name);
}
}
});
}
return (
<ProFormText
width="xl"
label="缴费模式"
name="price_mode_name"
disabled={project_id == 1 ? true :false}
placeholder="缴费模式"
/>
);
}}
</ProFormDependency>
如果是多个组件同时变化,也可以写多个组件
<ProFormDependency name={['project_id']}>
{({ project_id }) => {
theForm.setFieldValue('price_mode_name', null);
if (project_id) {
getPriceMode({
project_id: project_id,
}).then((res) => {
console.log(res);
if (res.code) {
if (res?.data?.price_mode) {
theForm.setFieldValue('price_mode_name', res?.data?.price_mode_name);
}
}
});
}
return (
<div>
<ProFormText
width="xl"
label="缴费模式"
name="price_mode_name"
disabled={project_id == 1 ? true :false}
placeholder="缴费模式"
/>
<ProFormText
width="xl"
label="缴费模式"
name="price_mode_name1"
disabled={project_id == 1 ? true :false}
placeholder="缴费模式"
/>
</div>
);
}}
</ProFormDependency>
另一种方法是利用个别组件本身的onChange方法,使用form动态赋值,onChange方法是antd 组件的方法,在Pro里面使用时,需要在fieldProps里面调用
<ProFormSelect
width="xl"
label="租赁时长"
name="lease_time"
options={[
{ label: '半年', value: 1 },
{ label: '一年', value: 2 },
{ label: '二年', value: 3 },
{ label: '三年', value: 4 },
]}
rules={[
{
required: true,
message: '请选择租赁时长',
},
]}
placeholder="请选择租赁时长"
fieldProps={{
onChange: async (value) => {
const start_at1 = theForm.getFieldValue('start_at');
theForm.setFieldValue('end_at', null);
},
}}
/>