1.0.0-beta2 • Published 3 years ago

form-dynamiclist v1.0.0-beta2

Weekly downloads
9
License
-
Repository
-
Last release
3 years ago

描述

该组件通过配置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 },
  },
}
@ant-design/pro-layout@umijs/preset-react@umijs/testhighlight.jslint-stagedprettierreactreact-domumiyorkie
@everything-registry/sub-chunk-1693
1.0.0-beta2

3 years ago

1.0.0-beta1

3 years ago

1.0.0

3 years ago