1.获取全局配置、通用配置、左右侧栏配置
根据官方仅有的案例,发现从插件中拿到默认的配置
import Generator, { defaultCommonSettings, defaultGlobalSettings,defaultSettings,} from 'fr-generator';
拿到默认配置文件后,将配置复制到本地,本地维护配置文件
内部维护方式,就是直接修改对应配置的文件,这里的配置会当作初始配置引入
// 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格式,合并为初始配置