profile.md

Config模版功能开发文档

入口文件

• src/components/Config/index.js

组件接收 props 参数如下

  saveLoading: Boolean // 保存按钮loading状态

  loading: Boolean // 数据加载时loading状态

  onChange: status => {
    console.log('修改任意表单触发此回掉', status: Boolean)
  }

  onSave: data => {
    console.log('点击保存方法的回掉，参数为当前渲染所有表单的数据', data: Object)
  }

  data：Object // 模版接受的所有配置项数据，格式如下 props.data

组件使用方法

import Config from 'components/Config'

onChange = status => {
    console.log('修改任意表单触发此回掉', status: Boolean)
}

onSave = data => {
    console.log('点击保存方法的回掉，参数为当前渲染所有表单的数据', data: Object)
}

formatData = sourcesData => {
    console.log('源数据', sourcesData)
    const templateData = {
       ... // 格式如下文 props.data
    }
    return templateData
}

render() {
    const { loading, sourcesData, saveLoading } = this.props

    return <Config data={this.formatData(sourcesData)} onChange={this.onChange}  onSave={this.onSave}  loading={loading} saveLoading={saveLoading}  />
}

props.data 组件接受的数据格式

{
    defaultActiveKey: ['corner_case'],                       // 默认展开的key所对应的配置项
    children:[
        {
            header: 'Corner Case',                         // collapse 对应的header标题
	    key: 'corner_case',           // 1. 用于 对应是否挂在此数据 详情请查看入口文件的getComponent 方法 2. 用于collapse组件对应的active key
	    formData: {             // 表单渲染的配置项数据
		image_rate: 1,                      // 图片回收指数
		video_rate: 1,                      // 视频回收指数
                 video_cd: 600000000,               // 视频冷却时间
                 dms: {
                     image_rate: 1,                      // 图片回收指数
		    video_rate: 1,                      // 视频回收指数
                     video_cd: 600000000               // 视频冷却时间
                 },
                 adas: {
                     image_rate: 1,                      // 图片回收指数
                 },
	    },
        },
    ],
}

doc