渲染formily的容器

import React, { useMemo, useEffect } from 'react';
import omit from 'lodash/omit';
import { createForm } from '@formily/core';
import { createSchemaField } from '@formily/react';
import get from 'lodash/get';
import set from 'lodash/set';

import {
  Form,
  FormItem,
  DatePicker,
  Checkbox,
  Cascader,
  Editable,
  Input,
  NumberPicker,
  Switch,
  Password,
  PreviewText,
  Radio,
  Reset,
  Select,
  Space,
  Submit,
  TimePicker,
  Transfer,
  TreeSelect,
  Upload,
  FormGrid,
  FormLayout,
  FormTab,
  FormCollapse,
  ArrayTable,
  ArrayCards,
} from '@formily/antd';
import * as ICONS from '@ant-design/icons';

function getSchemaValues({ schema = {} }: any, obj: any) {
  // console.log('‘看看’', schema, obj);

  const keys = Object.keys(schema?.properties);
  const values = keys.reduce((memo: any, path: string) => {
    memo[path] = get(obj, path);
    // console.log('康康', obj, path);

    return memo;
  }, {});
  return values;
}

function setJsonValue({ schema = {} }: any, jsonObj: any, values: any) {
  const keys = Object.keys(schema?.properties);
  keys.forEach((path: string) => {
    set(jsonObj, path, get(values, path));
  });
  return jsonObj;
}

interface IProps {
  pageDetail?: any;
  id?: string;
  curKey: string;
  onSave?: (values: any) => void; // 保存成功
  readOnly?: boolean;
}

const SchemaField = createSchemaField({
  components: {
    Form,
    FormItem,
    DatePicker,
    Checkbox,
    Cascader,
    Editable,
    Input,
    NumberPicker,
    Switch,
    Password,
    PreviewText,
    Radio,
    Reset,
    Select,
    Space,
    Submit,
    TimePicker,
    Transfer,
    TreeSelect,
    Upload,
    FormGrid,
    FormLayout,
    FormTab,
    FormCollapse,
    ArrayTable,
    ArrayCards,
  },
  scope: {
    icon(name: string) {
      return React.createElement(ICONS[name]);
    },
  },
});

export default function JsonFormPanel(props: IProps) {
  const { pageDetail, curKey, onSave, readOnly } = props;
  const form = createForm({
    validateFirst: true,
    disabled: readOnly,
  });

  useEffect(() => {
    if (Object.keys(pageDetail).length) {
      if (Object.keys(JSON.parse(pageDetail.formConfig)).length === 0) return;
      const values = getSchemaValues(JSON.parse(pageDetail.formConfig), {
        global: JSON.parse(pageDetail.globalConfig),
        page: JSON.parse(pageDetail.pageConfig),
      });
      Object.keys(values)?.forEach((item: any) => {
        form.setValuesIn(item, values[item]);
      });
    }
  }, [pageDetail, curKey]);

  const onSubmit = (values: any) => {
    const result = setJsonValue(
      JSON.parse(pageDetail.formConfig),
      {
        global: JSON.parse(pageDetail.globalConfig),
        page: JSON.parse(pageDetail.pageConfig),
      },
      values,
    );
    onSave && onSave(result);
  };

  const { schema = {}, form: formProps = {} } = JSON.parse(pageDetail.formConfig || '{}');

  return (
    <div>
      {curKey === 'form' && (
        <Form form={form} layout="vertical" size="large" onAutoSubmit={onSubmit} {...formProps}>
          <SchemaField schema={schema} />
          <Submit
            style={{ borderRadius: '4px' }}
            disabled={Object.keys(schema)?.length === 0 || readOnly}
          >
            保存
          </Submit>
        </Form>
      )}
    </div>
  );
}