使用XRender(3)_获取表单schema值和自定义初始配置项

192 阅读1分钟

1.获取全局配置、通用配置、左右侧栏配置

根据官方仅有的案例,发现从插件中拿到默认的配置

import Generator, { defaultCommonSettings, defaultGlobalSettings,defaultSettings,} from 'fr-generator';

拿到默认配置文件后,将配置复制到本地,本地维护配置文件

settings.png

内部维护方式,就是直接修改对应配置的文件,这里的配置会当作初始配置引入

    // index.js 本地保存的配置
    import commonSettings from './baseConfig/commonSettings';
    import settings from './baseConfig/settings';
    import globalSettings from './baseConfig/globalSettings';
    
    // index.js 使用
     <Generator
        commonSettings={commonSettings} // 右侧组件通用配置
        settings={settings} // 左侧基础组件配置
        globalSettings={globalSettings} // 右侧表单配置
      />
      
    // commonSettings.js 自定义默认配置项
    const commonSettings = {
      $id: {
        title: 'ID',
        description: '字段名称/英文',
        type: 'string',
        widget: 'idInput',
        require: true,
        rules: [
          {
            pattern: '^#/.+$',
            message: 'ID 必填',
          },
        ],
      },
      title: {
        title: '标题',
        type: 'string',
        disabled: true,
        widget: 'htmlInput',
      },
      displayType: {
        title: '标题展示模式',
        type: 'string',
        enum: ['row', 'column'],
        enumNames: ['同行', '单独一行'],
        widget: 'radio',
      },
      labelWidth: {
        title: '标签宽度',
        description: '默认值120',
        type: 'number',
        widget: 'slider',
        max: 400,
        props: {
          hideNumber: true,
        },
      },
    };

2.获取当前表单的schema值

    const genRef = useRef();
    
    // 获取
    let schema = genRef.current && genRef.current.getValue();
    
    <Generator
        ref={genRef}
        commonSettings={commonSettings} // 右侧组件通用配置
        settings={settings} // 左侧基础组件配置
        globalSettings={globalSettings} // 右侧表单配置
      />

3.根据后端返回的数据,渲染右侧组件设置

   // 表单配置
   const [formSetting, setFormSetting] = useState({});
   
   setFormSetting({
        weightProperty: {
          title: '关联数据表',
          type: 'string',
          enum: transEnum,
          enumNames: transEnumName,
          weight: 'select',
        },
        ...commonSettings,
      });

将处理好的数据,配置成想渲染的schema格式,合并为初始配置