sunmao-sdk/src/component/ModalFactory/ContentForm.js

榫卯-开箱即用赋能-sdk

"use strict";
import React, { useState, useEffect, useRef } from "react";
import { Button } from "antd";
import lodash from "lodash";
import FR from "../FR";

import { getNew, handleAppParams, postNew } from "../../net/request";

import "./index.css";
import { CP } from "../..";

/**
 * 表头编辑弹框
 * @param {object} formSchema 表单schema
 * @param {object} antdProps antd其他配置参数
 * @param {func} onCancel 点击取消回调
 * @param {object} request 请求参数、处理数据、回调等等：
 * @param {func} onSuccess 保存成功回调 fun
 * @param {func} onFail 保存失败回调 fun
 * @param {func} handleOk 点击保存，处理数据，返回新的params，一般表单中使用
 * @param {object} params 请求参数，表单的话一般放表单之外的参数
 * @param {string} url 请求api
 * @param {string} isGet 是否为get请求
 * @param {string} okPath 自定义返回成功路径
 */
const displayName = "ContentForm";
const ContentForm = ({
  request,
  formSchema,
  antdProps,
  onCancel,
  widgets,
  ...props
}) => {
  const [loading, setLoading] = useState(false);
  const [formData, setForm] = useState({});
  const validate = useRef([]);

  useEffect(() => {
    if (
      formSchema &&
      lodash.isObject(formSchema.formData) &&
      !lodash.isEmpty(formSchema.formData)
    )
      setForm(formSchema.formData);
  }, [formSchema]);

  const onOK = async () => {
    //因formRender  number默认必选，所以有冲突
    //  if (validate.current !== 0) return;
    const { url, params, isGet, onSuccess, onFail, handleOk, okPath } = request;
    //封装请求参数params
    let reqParams = { ...params, ...formData };
    //特殊情况，可拦截请求，也可深度封装params(需返回对象)
    if (handleOk) {
      let intercept = await handleOk(formData, validate.current);
      if (!intercept) return;
      else if (lodash.isObject(intercept))
        reqParams = { ...params, ...intercept };
    }

    if (!url) {
      onCancel && onCancel();
      onSuccess && onSuccess(true, formData);
      return;
    }

    let requestFunc = CP.getCPInfo().requestFunc
      ? CP.getCPInfo().requestFunc
      : isGet
      ? getNew
      : postNew;
    setLoading(true);
    await requestFunc(url, handleAppParams(reqParams), okPath)
      .then(res => {
        if (res) {
          onCancel && onCancel();
          onSuccess && onSuccess(res, formData);
        } else {
          onFail && onFail(res);
        }
      })
      .finally(() => {
        // 优化体验
        setTimeout(() => {
          setLoading(false);
        }, 100);
      });
  };

  return (
    <div className="box-column content-mgn">
      {formSchema ? (
        <FR
          {...formSchema}
          widgets={widgets}
          formData={formData}
          onChange={data => setForm(data)}
          onValidate={value => (validate.current = value)}
        />
      ) : (
        antdProps?.content || "重要事情说三遍！"
      )}
      <div className="box-row-re footer-btns">
        <Button type="primary" loading={loading} onClick={onOK}>
          {antdProps?.okText || "确定"}
        </Button>
        <Button className="footer-btn" onClick={onCancel}>
          {antdProps?.cancelText || "取消"}
        </Button>
      </div>
    </div>
  );
};

export default React.memo(ContentForm, (preP, nextP) => {
  return lodash.isEqual(preP, nextP);
});