一、 ModalForm自定义footer按钮

参考官网，Modal弹框是可以自定义按钮的，原想着ModalForm的modalprops可以设置自定义footer，结果设置一直不生效，最终还是使用Modal嵌套了ProForm实现了功能，在此记录一下。

ant design pro使用的V5版本。

1、Modal自定义footer

参考官网https://ant-design.antgroup.com/components/modal-cn?from=msidevs.net#components-modal-demo-footer

在footer属性中，直接写上自己想要的按钮就可以。

<Modal 
      title="退租审核" 
      width={600} 
      open={closeModalVisible} 
      destroyOnClose={true}
      maskClosable={false}
      bodyStyle={{ maxHeight: 500, overflowY: 'auto' }}
      onCancel={() => {
        setCloseModalVisible(false);
      }}
      footer={[
        <Button key="forbid" type="primary" onClick={() => {
          Modal.confirm({
            title: '删除',
            content: '确定要驳回该退租申请吗？',
            okText: '确认',
            cancelText: '取消',
            onOk: async () => {
              const success = await reject({ refund_id:currentRow?.id });
              if (success) {
                setCloseModalVisible(false);
                if (actionRef.current) {
                  actionRef.current.reload();
                }
              }
            },
          });
        }}>驳回</Button>,
        <Button key="confirm" type="primary" style={{backgroundColor:'#0066ff',borderColor:'#0066ff'}} onClick={() => {
          theForm.submit();
        }}>确定</Button>,
      ]}></Modal>

2、 在Modal中前五ProForm

<ProForm form={theForm} submitter={false} 
        onInit={() => {
          theForm.resetFields();
        }}
        onFinish={async (value) => {
          console.log(123);
          const success = await contract_close(value);
          if (success) {
            setCloseModalVisible(false);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}>
        <ProFormText name="contract_id" hidden={true} initialValue={currentRow?.contract_id} />
        <ProFormText name="refund_id" hidden={true} initialValue={currentRow?.id} />
        <ProFormText
          name="start_at"
          label="起租日期"
          width="xl"
          disabled={true}
          initialValue={currentRow?.start_at}
        />
        <ProFormText
          name="end_at"
          label="到租日期"
          width="xl"
          disabled={true}
          initialValue={currentRow?.end_at}
        />
        <ProFormText
          name="close_at"
          label="退租日期"
          width="xl"
          disabled
          placeholder="请选择退租日期"
          initialValue={currentRow?.close_at}
          />
</ProForm>

ProForm自带的有提交按钮，我满把他去掉，设置submitter={false}，表单的按钮就不再显示了

3、 自定义按钮关联表单操作

我们隐藏了表单自己的按钮，现在需要把我们自定义的按钮关联上表单的操作，表单的操作主要由两个，一个是提交，一个是重置，

我们给表单绑定自定义的form，在点击自定义的确定按钮时，触发表单的提交操作，使用theForm.submit()即可。

<Button key="confirm" type="primary" style={{backgroundColor:'#0066ff',borderColor:'#0066ff'}} onClick={() => {
          theForm.submit();
        }}>确定</Button>

然后就会调用ProForm的onFinish方法，来实现表单的提交，

重置操作同样，使用theForm.reset()，即可触发表单的onReset方法，我这里没有设置重置方法，大家可根据自己需要进行设置。