Package - @uyun/ec-form-designer

category: Components type: Automation title: FormDesigner subtitle: 表单设计器 cols: 1

作者：夏显林

安装

项目基于最新版的 everest-cli
国际化需要基于@uyun/utils
样式基于最新的换肤方案
组件基于@uyun/components
组件的数据流采用了 mobx

yarn add @uyun/form-designer
yarn add mobx mobx-react react-dnd@7.4.5 react-dnd-html5-backend@7.4.4

API

<FormDesigner />

目前只提供两栏和三栏表单。

属性	说明	类型	默认值
data	表单数据	array	-
categories	类别信息	array	-
mode	表格列数，oneOf([2,3])	number	3
widgetView	侧边栏字段排列布局,oneOf(['list', 'grid'])	string	list
widgetFilter	是否开启侧边栏字段搜索	boolean	false
extendFooter	底部栏扩展	React.Element	null
onSave	保存回调	function	(data:array, result:bool):void =>{}
onChange	变化回调	function	(data:array):void => {}
onRenderField	渲染字段回调	function	(widget:Widget):Element => {}
onValidAttributes	验证控件属性回调	function	(widget:Widget):boolean=> {}

数据模型

控件数据

类别数据里面的控件信息是模板信息，拖拽出来后会被复制。最后生成的表单数据里面是不完整数据，需要通用 cid 到类别数据里面去取，然后生成完整信息。

const widget = {
  id: '',
  cid: 'field1',
  name: '名称',
  span: 1,
  type: 'field',
  attributes: {},
  formComponent: null,
  attributeComponent: null,
  icon: null,
  disbaled: false,
  visible: true,
  data: []
}

属性	说明	类型	默认值
id	id	string	''
cid	关联 id ，表单数据会根据 cid 来封装完整的控件数据	string	''
name	名称	string	''
icon	图标，用于侧边栏	Element	null
span	占列数量，占列数量不能大于 mode	number	1
type	类型，oneOf(['field','group','tabs','layout'])	string	'field'
attributes	属性对象，数据通过属性组件设置，并传递给表单组件	object	{}
formComponent	表单组件	Element	null
attributeComponent	属性组件	Element	null
disbaled	是否禁用，用于侧边栏	boolean	false
visible	是否显示，用于侧边栏	boolean	true
data	数据，主要用于类型类 group 和 tabs	Array	[]

名称字段是内置的属性组件来修改，自定义的属性组件不能修改名称，属性里面的必填字段名称是固定的，必须是 required。
group 和 tabs 数据属于内置类型，不接收传入的表单组件、属性组件以及属性对象。
layout 类型没有名称属性

类别数据

const categories = [
  {
    id: 'field',
    name: '字段',
    type: 1,
    widgets: []
  }
]

属性	说明	类型	默认值
id	唯一标识	string	''
name	类别名称	string	''
type	类别类型，oneOf([1,2])，其中 1 是基础控件类别，2 是布局控件类别	number	1
widgets	控件模型数组 arrayOf(widget)或者 arrayOf(string)	array	[]

当类别数据只有一个的时候，类别栏会隐藏掉。
当 type=2 时，widgets 是一个字符串数组，只可以填写 group 和 tabs 两个值。

表单数据

const data = [
  {
    type: 'field',
    span: 1,
    items: [{ cid: 'field1', name: '姓名', attributes: { required: true, placeholder: '请输入姓名' } }]
  },
  {
    type: 'group',
    items: [
      {
        name: '分组1',
        items: [{ type: 'field', items: [{ cid: 'field1', name: '姓名' }] }]
      }
    ]
  },
  {
    type: 'tabs',
    items: [
      {
        name: 'tab1',
        items: [
          { type: 'field', items: [{ cid: 'field1', name: '公司' }] },
          { type: 'field', items: [{ cid: 'field1', name: '城市' }] }
        ]
      }
    ]
  }
]

属性	说明	类型	默认值
type	同控件类型，如果不在这四个类型中，则会被遗弃	string	1
span	总列数，不传则自动计算	number	1
items	子元素，arrayOf(widget)	array	[]

group 类型和 tabs 类型是只能嵌套 field 类型控件
子元素的控件属性只有 id、 cid、name 和 attributes 三个信息，其他信息均通过 cid 去类别数据中取

group 类型和 tabs 类型的子数据

当 type=group 时，items 只能存在一个分组控件数据，如果超出，超出部分会被丢失

const widget = {
  name: '分组名||标签页名',
  items: [{ type: 'field', items: [{ cid: 'field1', name: '姓名' }] }]
}

属性	说明	类型	默认值
name	分组名称或者标签页名称	string	1
items	子数据，数据结构同表单数据，只是不能嵌套 group、tabs 和 layout 三种类型的控件	array	[]

占列规则

group、tabs 和 layout 类型的控件独占一行
控件 span 等于 mode 时独占一行
span=1 时，行内只有一个控件，则占一行，如果有多个则平分行
span>1 时，行内所有控件 span 总和不超过 mode 则会出现留空

Current Tags

0.0.2 ... latest (6 years ago)

1 Versions

0.0.2 ... 6 years ago