工作总结2-自定义弹框

自定义弹框

原因：使用Modal.info等封装好的弹框有问题或者说不能满足开发需求时，需要自定义弹框来解决。

解决：如果一个功能有两个弹框，可以用一个弹框显示不同内容来解决，动态的显示弹框标题、弹框要渲染的内容和弹框底部（确定/取消/关闭）。

表单用FormBuilder自带表单校验。

<FormBuilder
    layout="vertical"
    wrappedComponentRef={form}
>
  <Fields fields={fields} />
</FormBuilder>
复制代码

1. 在父组件导入弹框组件

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

2. 弹框组件代码书写

2.1 表单内容

 // 组件内容书写
 // 返回内容
 return (
     <Modal
       title={getTitle()}
       visible={visible}
       width={560}
       footer={getFooter()}
     >
       {renderContent()}
     </Modal>
   );
复制代码

2.2 点击确定提交

校验表单信息，如果不通过，直接返回，如果表单校验通过，拿到表单数据（操作；原因），提交给后端

 function handleSubmit() {
     const { validateFieldsAndScroll } = form.current;
     return new Promise((resolve, reject) => {
       validateFieldsAndScroll(async (error, values) => {
         if (!error) {
           onSubmit(values);
         } else {
           reject(error);
         }
       });
     });
   }
复制代码

2.3 点击取消按钮，记得刷新列表

 function handleClose() {
     // 关掉弹框
     onClose();
     // 刷新数据
     refetch();
   }
复制代码

2.4 获取表单数据

 async function onSubmit(values) {
     const result = await batchApprovalRejectList({...values, taskInstanceIds});
     // 假如存在处理失败记录，让弹框展示第二步的内容，否则关闭弹框
     if(result.failCount !== 0) {
       setValue(result);
       setStep(2);
     } else {
       handleClose();
     }
   }
复制代码