form-dynamiclist

描述

该组件通过配置dataTypes和dataSource, 动态生成表单，支持复杂的下拉框联动以及子表单动态生成。

使用

import dynamic from 'form-dynamic'

参数	说明	类型	默认值	是否必填
defaultConfig	用于全局参数设置	object	{ labelStyle: { width: '200px' } }	否
dataTypes	用于设置输入框类型	array	-	是
dataSource	用于设置输入框内容及回调函数	array	-	是
[]	表示一行内的输入框集合	-	-	-
{}	一行中某一个输入框	-	-	-

dataTypes

参数	说明	类型	默认值	是否必填
key	输入框标识	string	-	是
type	输入框类型	string: 'input' 'select' 'module' 'icon_add' 'icon_del'	-	是
label	标签说明	string	-	否
required	是否是必填项	boolean	-	否

input例子： { key: 'name', type: 'input', label: '属性', required: true },

select例子：{ key: 'description', type: 'select' },

select+select联动例子：

{ key: 'dataType', type: 'select' }, 
{ key: 'dataValueId', relationKey: 'dataType', relationValue: 'ENUM', relationAction: 'style->display', type: 'select' },

select+input联动例子：

[
  { key: 'name2', type: 'select', label: '属性', required: true },
  { key: 'description2', type: 'input' },
]

module例子：

[
  {
    key: 'properties',
    type: 'module',
    label: (<span><Tooltip title='模板属性在埋点时需必填'><Icon type='question-circle-o' style={{ marginRight: 5, color: 'rgb(94, 94, 94)' }} /></Tooltip>属性设定</span>),
  },
]

icon_add例子：{ key: 'icon_add', type: 'icon_add' }

icon_del例子：{ key: 'icon_del', type: 'icon_del' }

dataSource

参数	说明	类型	默认值	是否必填
builtInParams	内置属性，与antd参数一致	-	-	-
customParams	自定义属性	-	-	-

builtInParams

参数	说明	类型	默认值	是否必填
placeholder	'input'和'select'类型有	-	-	-
defaultValue	'input'和'select'类型有	-	-	-
options	'select'类型独有	-	-	-
filterOption	'select'类型独有	-	-	-
dropdownRender	'select'类型独有	-	-	-
filterOption	'select'类型独有	-	-	-

type = 'input'例子

 {
   builtInParams: {  
     placeholder: '圈选位置',  
     defaultValue: 'expression:v1'
   },
 }

type = 'select'例子

{
  builtInParams: {
    options: extendAttributesCN,
    placeholder: '搜索属性中文名',
    defaultValue: 'TEXT',
    filterOption: (value, option) => { return option.props.children.indexOf(value) !== -1; },
    dropdownRender: menu => this.DropdownRender(menu),
  },
}

type = 'module'例子

{
    types: [
      [
        { key: 'name', type: 'select' },
        { key: 'description', type: 'select' },
        { key: 'dataType', type: 'select' },
        { key: 'dataValueId', relationKey: 'dataType', relationValue: 'ENUM', relationAction: 'style->display', type: 'select' },
        { key: 'icon_add', type: 'icon_add' },
        { key: 'icon_del', type: 'icon_del' },
      ],
    ],
    source: [
      [
        {
          builtInParams: {
            options: extendAttributesEN,
            placeholder: '搜索属性英文名',
            filterOption: (value, option) => { return option.props.children.indexOf(value) !== -1; },
          },
          customParams: {
            style: { width: 150 },
            isDisabledKey: 'allowDelete',
            isDisabledValue: false,
            func: { _onChange: this._onChangeSelectProperties },
          },
        },
        {
          builtInParams: {
            options: extendAttributesCN,
            placeholder: '搜索属性中文名',
            filterOption: (value, option) => { return option.props.children.indexOf(value) !== -1; },
          },
          customParams: {
            style: { width: 150 },
            isDisabledKey: 'allowDelete',
            isDisabledValue: false,
            func: { _onChange: this._onChangeSelectProperties },
          },
        },
        {
          builtInParams: {
            options: metaData,
            defaultValue: 'TEXT',
          },
          customParams: {
            style: { width: 80 },
            isDisabled: true,
          },
        },
        {
          builtInParams: {
            options: enumType,
          },
          customParams: {
            style: { width: 120, display: 'none' },
            isDisabled: true,
          },
        },
        {
          customParams: {
            func: { _onAddClick: this._onAddClick },
          },
        },
        {
          customParams: {
            func: { _onDelClick: this._onDelClick },
          },
        },
      ],
    ],
  }

type = 'icon_add'和type = 'icon_del'没有builtInParams属性

customParams

参数	说明	类型	默认值	是否必填
style	'input'和'select'类型有	-	-	否
isDisabledKey	'input'和'select'类型有（是否置灰key）	-	-	否
isDisabledValue	'input'和'select'类型有（当isDisabledKey的值等于isDisabledValue置灰）	-	-	否
isDisabled	'input'和'select'类型有（是否置灰，相当于disabled）	-	-	否
isNotDisplay	'input'、'icon_add'、icon_del'类型有（是否不显示，为true时不显示)	-	-	否
isNotDisplayKey	'input'、'icon_add'、icon_del'类型有（是否不显示key)	-	-	否
isNotDisplayValue	'input'、'icon_add'、icon_del'类型有（当isNotDisplayKey的值等于isNotDisplayValue不显示)	-	-	否
func	回调函数汇总 'input'和'select'类型有_onChange(相当于onChange事件)、childRender(在指定input或select框位置下渲染子组件), 'icon_add'类型仅有_onAddClick(相当于onClick事件), 'icon_del'类型仅有_onDelClick(相当于onClick事件)	-	-	否

type = 'input'例子

{
  customParams: {
    style: { width: 100 },
    isDisabled: true,
    isDisabledKey: 'allowDelete',
    isDisabledValue: false,
    isNotDisplay: !isLook,
    isNotDisplayKey: 'allowDelete', isNotDisplayValue: false,
    func: { _onChange: this._onChangeInputProperties },
  },
}

type = 'select'例子

{
  customParams: {
    style: { width: 120, display: 'none' },
    isDisabled: true,
    isDisabledKey: 'allowDelete', isDisabledValue: false,
    func: { _onChange: this._onChangeSelectProperties },
  },
}

type = 'icon_add'例子

{
  customParams: {
    isNotDisplay: isLook,
    func: { _onAddClick: this._onAddClick },
  },
}

type = 'icon_del'类型包括

{
  customParams: {
    isNotDisplay: isLook,
    isNotDisplayKey: 'allowDelete', isNotDisplayValue: false,
    func: { _onDelClick: this._onDelClick },
  },
}