form-dynamiclist
v1.0.0-beta2
Published
该组件通过配置dataTypes和dataSource, 动态生成表单，支持复杂的下拉框联动以及子表单动态生成。
Downloads
10
Readme
描述
该组件通过配置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 },
},
}