Ant Design Pro学习记录—ModalForm的使用（二）

目录

一、ModalForm高度设置

二、ModalForm点击阴影背景，不隐藏弹框

三、ProFormSelect联动

四、ProFormText关联赋值

---

一、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);
                        },
                      }}
                    />