@cqsjjb-formily/embed

动态表单嵌入组件

Usage

import React from 'react';
import RendererEmbed from '@cqsjjb-formily/embed';

function Component () {
  // 获取表单实例，用于函数操作
  const [ formily, setFormily ] = React.useState({});
  // 用于跟踪加载状态
  const [ isReady, setIsReady ] = React.useState(false);
  
  React.useEffect(() => {
    if (isReady) {
      // 回填表单数据
      formily.setFieldsValue({});
    }
  }, [ isReady ]);
  
  return (
    <RendererEmbed
      code={/*表单模板ID*/}
      style={/*自定义样式*/}
      width={/*渲染嵌入宽度*/}
      height={/*渲染嵌入高度*/}
      postUrl={/*iframe白名单地址*/}
      onLoad={e => {
        // iframe加载回调
        setFormily(e);
        setIsReady(true);
      }}
      onCallback={e => {
        // iframe操作回调
        if (e.type === 'validateFields') {
          // 输出表单提交字段数据
          console.log(e.output);
        }
      }}
    />
  );
}

props

1. code: string

   表单模板code，每一个渲染的表单都需要一个模板code，内部会根据code自动查询模板数据。

2. style: React.CSSProperties

   自定义style

3. width: number | string

   iframe 宽度

4. height: number | string

   iframe 高度

5. postUrl: string

   iframe嵌入访问白名单，需要联系管理员配置当前前端服务域名白名单，若已配置白名单，请传入**window.location.origin**即可。

6. onLoad: (option: FormilyInstance) => void;

   iframe嵌入加载状态，完成加载会返回一个表单实例对象，操作对象可以对表单进行控制。

7. onCallback: (option: FormilyCallback): void;

   表单内部操作回调，可以返回表单验证数据等。

FormilyInstance

1. initialFormily(): void

   初始化表单嵌入，加载表单模板。

2. resetFields(fields?: string[]): void;

   重置表单，可传入fields参数指定重置字段。

3. enabledFields(): void;

   启用表单。

4. validateFields(fields?: string[]): void;

   验证表单，可传入fields参数指定验证字段。

5. disabledFields(): void;

   禁用表单。

6. readonlyFields(state: boolean): void;

   将表单设为只读状态，可以传入state参数控制状态。

7. setFieldsValue(values: { [p: string]: any }): void;

   动态设置表单字段数据。

8. getFieldsValue(fields?: string[]): void;

   获取指定表单字段数据。

FormilyCallback

1. type: 'getFieldsValue' | 'setFieldsValue' | 'readonlyFields' | 'disabledFields' | 'resetFields' | 'validateFields' | 'changeValues';

   每一种类型对应，**FormilyInstance**的函数操作。

2. output: any;

   返回每一种类型对应的返回值。

常见问题

1. 若出现iframe加载访问错误，需要确定当前前端服务域名是否已配置白名单。