Customize the pop-up frame

Cause: When the Modal. Info package fails to meet the development requirements, you need to customize the package to solve the problem.

Solution: If a function has two pop-ups, you can use one popup to display different content to solve the problem, dynamically display the title of the popup, the content of the popup to render and the bottom of the popup (OK/cancel/close).

Forms are validated with the FormBuilder.

<FormBuilder
    layout="vertical"
    wrappedComponentRef={form}
>
  <Fields fields={fields} />
</FormBuilder>
Copy the code

1. Import the pop-up component from the parent component

 <BatchModal
    visible={batchVisible}
    taskInstanceIds={selectedTaskIds}
    onClose={() = > setBatchVisible(false)}
    detail={batchModalDetail}
    refetch={() = > {
      dispatch({ type: 'refresh'}); setSelectedRowKeys([]); setSelectedTaskIds([]); }} / >Copy the code

2. Write the code of the frame component

2.1 Form Content

Return (<Modal Title ={getTitle()} visible={visible} width={560} footer={getFooter()} > {renderContent()} </Modal> );Copy the code

2.2 Click OK to submit

Verify the form information, if not passed, directly return, if the form verification passed, get the form data (operation; Cause), submitted to the backend

 function handleSubmit() {
     const { validateFieldsAndScroll } = form.current;
     return new Promise((resolve, reject) => {
       validateFieldsAndScroll(async (error, values) => {
         if (!error) {
           onSubmit(values);
         } else {
           reject(error);
         }
       });
     });
   }
Copy the code

2.3 Click cancel button and remember to refresh the list

Function handleClose() {// Close the popbox onClose(); // refresh data refetch(); }Copy the code

2.4 Obtaining form data

async function onSubmit(values) { const result = await batchApprovalRejectList({... values, taskInstanceIds}); If (result.failcount! == 0) { setValue(result); setStep(2); } else { handleClose(); }}Copy the code