弹出表单（Mask.From）

介绍

当我们在特定的环境下需要将表单放入蒙层中，通过弹框的形式，实现表单的提交

此组件封装与 Modal 和 From（动态表单）的结合

有些人觉得 Modal 和 From 功能太少没必要封装，其实这个组件的功能确实并不是很多，那么做了什么呢？

首先，当表单放入弹框中，要满足 Modal 的样式，其次，表单最终要提交给后端的，所以会结合接口，做到传输数据~

在线演示：弹出表单

功能

当你有以下需求时，可以试试这个组件：

• 当表单需要通过 Modal 展示时
• 需要通过结合接口一键配置
• Modal的一切属性

  代码演示

  功能演示

  

  具体代码

import { useState, useEffect } from 'react';
import { Modal, Button, message } from 'antd';
import { Form } from '@/components';
import { MaskFromProps } from './interface';
import { maskSy } from '@/utils/Setting';
const MaskFrom: React.FC<MaskFromProps> = ({
  children,
  onReset,
  onCancel,
  onSubmit,
  onEdit,
  onRequest,
  form={},
  formList=[],
  ...props
}) => {
  const [loading, setLoading] = useState<boolean>(false);
  const [maskFormRef, setMaskFormRef] = useState<any>(false);
  useEffect(() => {
    if(props.visible){
      maskFormRef?.current?.resetFields()
    }
  }, [props.visible])
  return (
    <Modal
      {...props}
      onCancel={onCancel}
      footer={[
        <Button key="back" onClick={onCancel}>
          {props.cancelText || maskSy.maskFrom.cancelText}
        </Button>,
        <Button
          key="reset"
          onClick={async () => {
            if (onReset) {
              onReset();
              return;
            }
            console.log(form)
            await maskFormRef?.current?.resetFields();
            if(form.fieldValues && Array.isArray(form.fieldValues) && form.fieldValues.length !== 0){
              form.fieldValues.map((item) => {
                let payload: any = {};
                payload[item.name] = item.value;
                maskFormRef?.current?.setFieldsValue(payload);
              })
            }
          }}
        >
          {props.resetText || maskSy.maskFrom.resetText}
        </Button>,
        <Button
          key="submit"
          type="primary"
          loading={loading}
          onClick={async (e) => {
            const fieldsValue = await maskFormRef?.current?.validateFields();
            const params = onEdit ? await onEdit(fieldsValue) : fieldsValue;
            if(typeof params === 'string') return message.error(params)
            if(typeof params !== 'object' || Array.isArray(params)) return message.error('请在onEdit中返回对象或则字符串！')
            if(!onRequest){
              message.error('请在onRequest，写入对应的接口')
              return
            }
            setLoading(true);
            const res = await onRequest(params);
            setLoading(false);
            if (typeof res !== 'boolean') {
              message.success(props.message || maskSy.maskFrom.message);
              if (onSubmit) return onSubmit();
            }
          }}
        >
          {props.submitText || maskSy.maskFrom.submitText}
        </Button>,
      ]}
    >
      <Form
        method="mask"
        formList={formList}
        getRef={(formRef: any) => {
          setMaskFormRef(formRef);
        }}
        {...form}
      />
    </Modal>
  );
};
export default MaskFrom;

如何使用

import React,{ useState, useEffect } from 'react';
import { Form } from '@/components';
import type { formProps } from '@/components';
import { queryDetail } from './services' //提交接口
export default () => {
  const [maskVisible, setMaskVisible] = useState<boolean>(false);
  const list: formProps[] = [
    {
      name: '最终表单获得的值，多个会覆盖~'
      type: '表单类型'
      ....
    }
    ....
  ]
  return (
    <>
        <Button onClick={() => {
        setMaskVisible(true)
      }}>弹框表单</Button>
            {
        maskVisible &&
        <Mask.Form
          title="表单弹框"
          message={"编辑成功"}
          visible={maskVisible}
          onRequest={queryDetail} // 请求的接口
          formList={list}
          onCancel={() => setMaskVisible(false)}
          onSubmit={() => setMaskVisible(false)}
          onEdit={(value) => { //作为接口的参数
            return value
          }}
        />
      }
    </>
  )
}

特殊说明

• 将接口的提交功能，重置功能，加入到 Modal，并配合接口传输数据