fx-form-widget/es/packages/advanceTreeSelection/formInModal/index.js

动态表单组件库

import _Modal from "antd/es/modal";
import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _Form from "antd/es/form";
var _excluded = ["children", "visible", "url", "onSubmitSuccess", "onSubmitError", "onCancelSubmit", "width", "title", "form", "extraData", "validateError", "formatValues"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useState } from 'react';
import { unstable_batchedUpdates } from 'react-dom';
import { formRelatedStore } from '../stores';
var submit = formRelatedStore.submit;
var useForm = _Form.useForm;
var FormInModal = function FormInModal(props) {
  var children = props.children,
    visible = props.visible,
    _props$url = props.url,
    url = _props$url === void 0 ? '' : _props$url,
    onSubmitSuccess = props.onSubmitSuccess,
    onSubmitError = props.onSubmitError,
    onCancelSubmit = props.onCancelSubmit,
    _props$width = props.width,
    width = _props$width === void 0 ? 520 : _props$width,
    title = props.title,
    form = props.form,
    extraData = props.extraData,
    validateError = props.validateError,
    formatValues = props.formatValues,
    restProps = _objectWithoutPropertiesLoose(props, _excluded);
  var _useForm = useForm(),
    formInstance = _useForm[0];
  var _useState = useState(false),
    loading = _useState[0],
    setLoading = _useState[1];
  var _useState2 = useState('提交'),
    buttonText = _useState2[0],
    setButtonText = _useState2[1];
  formInstance = form ? form : formInstance;

  // 克隆表单，将表单的内容可控
  var CloneForm = /*#__PURE__*/React.cloneElement(children, {
    form: formInstance,
    preserve: false
  });
  var setLoadingAndButtonText = function setLoadingAndButtonText(loading, buttonText) {
    unstable_batchedUpdates(function () {
      setLoading(loading);
      setButtonText(buttonText);
    });
  };

  // 提交表单
  var onSubmitForm = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _values, hasValidate, _yield$submit, _success, data, _yield$submit2, _success2, _data;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.prev = 0;
            _context.next = 3;
            return formInstance.validateFields();
          case 3:
            _values = _context.sent;
            if (formatValues) {
              _values = formatValues(_values);
            }
            setLoadingAndButtonText(true, '正在提交中...');
            if (!(url === '')) {
              _context.next = 9;
              break;
            }
            onSubmitSuccess === null || onSubmitSuccess === void 0 ? void 0 : onSubmitSuccess(true, _extends({}, _values, extraData));
            return _context.abrupt("return");
          case 9:
            if (!(typeof validateError === 'function')) {
              _context.next = 20;
              break;
            }
            hasValidate = validateError();
            if (!hasValidate) {
              _context.next = 18;
              break;
            }
            _context.next = 14;
            return submit(url, _extends({}, _values, extraData));
          case 14:
            _yield$submit = _context.sent;
            _success = _yield$submit.success;
            data = _yield$submit.data;
            onSubmitSuccess === null || onSubmitSuccess === void 0 ? void 0 : onSubmitSuccess(_success, data);
          case 18:
            _context.next = 26;
            break;
          case 20:
            _context.next = 22;
            return submit(url, _extends({}, _values, extraData));
          case 22:
            _yield$submit2 = _context.sent;
            _success2 = _yield$submit2.success;
            _data = _yield$submit2.data;
            onSubmitSuccess === null || onSubmitSuccess === void 0 ? void 0 : onSubmitSuccess(_success2, _data);
          case 26:
            _context.next = 31;
            break;
          case 28:
            _context.prev = 28;
            _context.t0 = _context["catch"](0);
            onSubmitError === null || onSubmitError === void 0 ? void 0 : onSubmitError(false, _context.t0);
          case 31:
            _context.prev = 31;
            setLoadingAndButtonText(false, '提交');
            return _context.finish(31);
          case 34:
          case "end":
            return _context.stop();
        }
      }, _callee, null, [[0, 28, 31, 34]]);
    }));
    return function onSubmitForm() {
      return _ref.apply(this, arguments);
    };
  }();

  // 重置表单
  var onResetForm = function onResetForm(form) {
    form.resetFields();
  };

  // 提交按钮的相关属性
  var okButtonProps = {
    loading: loading
  };

  // 取消弹框

  var cancelSubmitForm = function cancelSubmitForm() {
    onCancelSubmit === null || onCancelSubmit === void 0 ? void 0 : onCancelSubmit(!visible);
  };
  return /*#__PURE__*/React.createElement(_Modal, _extends({
    title: title,
    width: width,
    visible: visible,
    onOk: onSubmitForm,
    onCancel: cancelSubmitForm,
    okText: buttonText,
    okButtonProps: okButtonProps
  }, restProps), CloneForm);
};
export default FormInModal;