@cqsjjb-formily/embed NPM

@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

code: string
表单模板code，每一个渲染的表单都需要一个模板code，内部会根据code自动查询模板数据。
style: React.CSSProperties
自定义style
width: number | string
iframe 宽度
height: number | string
iframe 高度
postUrl: string
iframe嵌入访问白名单，需要联系管理员配置当前前端服务域名白名单，若已配置白名单，请传入window.location.origin即可。
onLoad: (option: FormilyInstance) => void;
iframe嵌入加载状态，完成加载会返回一个表单实例对象，操作对象可以对表单进行控制。
onCallback: (option: FormilyCallback): void;
表单内部操作回调，可以返回表单验证数据等。

FormilyInstance

initialFormily(): void
初始化表单嵌入，加载表单模板。
resetFields(fields?: string[]): void;
重置表单，可传入fields参数指定重置字段。
enabledFields(): void;
启用表单。
validateFields(fields?: string[]): void;
验证表单，可传入fields参数指定验证字段。
disabledFields(): void;
禁用表单。
readonlyFields(state: boolean): void;
将表单设为只读状态，可以传入state参数控制状态。
setFieldsValue(values: { p: string: any }): void;
动态设置表单字段数据。
getFieldsValue(fields?: string[]): void;
获取指定表单字段数据。

FormilyCallback

type: 'getFieldsValue' | 'setFieldsValue' | 'readonlyFields' | 'disabledFields' | 'resetFields' | 'validateFields' | 'changeValues';
每一种类型对应，FormilyInstance的函数操作。
output: any;
返回每一种类型对应的返回值。