dongls/xForm

是否支持tab布局

Opened this issue · 9 comments

smuki commented

是否可以支持tab组件布局和object数据嵌套

目前不支持tab组件,后续在规划与布局相关字段时会考虑支持。

object数据套嵌是要满足什么需求呢?

smuki commented

目前不支持tab组件,后续在规划与布局相关字段时会考虑支持。

object数据套嵌是要满足什么需求呢?

如果支持tab组件,那么就可以做表头-明细(一个表头,多行明细,相当于{header:object,detail:array},或者是{header:object,detail:array,xxx:object} ,但我看现在但组件但内容都是同一个object都内容,不能做多个层次(多个object)多字段.或者是我不懂如何做到这个效果.

是想做字段套嵌吗?
例如一个字段包含其他字段

smuki commented
{
	"Header" : {
		"doc_no" : "P0001",
		"date" : "2020-01-12"
	},
	"detail" : [
		{
			"no" : "1",
			"item_no" : "2",
			"description" : "甘油",
			"delivery" : [
				{
					"date" : "2020-12-12",
					"qty" : 1000
				},
				{
					"date" : "2020-12-21",
					"qty" : 2000
				},
				{
					"date" : "2020-12-21",
					"qty" : 3000
				}
			]
		},
		{
			"no" : "1",
			"item_no" : "2",
			"description" : "石灰",
			"delivery" : [
				{
					"date" : "2020-12-12",
					"qty" : 1000
				},
				{
					"date" : "2020-12-21",
					"qty" : 2000
				},
				{
					"date" : "2020-12-21",
					"qty" : 3000
				}
			]
		}
	]
}

想展示类似这样的数据结构

从给出的示例来看,tab组件比较适用。对于比较具体业务组件,需要自行扩展字段类型。

目前xform还在开发过程中,下一步的计划就是支持这种交互比较复的杂表单。

smuki commented

估计多久xform能用于生产环境?

目前xform还存在许多功能上的缺失,距离发布正式版还有很长一段路要走。
如果你对本项目感兴趣,可以fork仓库后,维护一个自己的私有版本

smuki commented

有那些功能缺失呢?

关于多层次object(嵌套object)是否可以增加虚拟化组件,比如 object 虚拟化组件,他并不是一个真实的组件,但object/array虚拟化组件会改变存取数据的路径,比如上面的json
是否可以增加一个object 路径设置为 Header,那么object里面的对象存取路径就会增加header,假设原生的存储路径是 order,那么object内的存取路径就变成了order.Header了, object可以嵌套.如何header里面再放一个 送货地址 的object,那么送货地址的object存取路径就变成了 [order.Header.送货地址]
类似也可以增加一个array的虚拟化组件用于处理数组的对象.

考虑到表单的复杂性,未来的版本会放弃将所有的表单值存储在model对象上, 而是将表单的值直接存储在XField对象上,同时在XFieldConf对象上提供onValueInitonValueSumit两个钩子用于处理值的输入和输出。

不同类型的字段都可通过这两个钩子定义满足自身需求的数据结构,例如:

{ //group类型
  field_1: 'xxxx',
  field_2: 'xxxx'
}

{ // tabs类型
  tab_1: {
    field_3: 'xxx',
    field_4: 'xxx'
  },
  tab_2: {
    field_5: 'xxx',
    field_6: 'xxx'
  }
}

由于每种字段类型都可以自行处理值的输入输出和渲染,因而可以支持任意结构的数据。例如支持以下数据结构:

[
  {
   "field_a": "xxx",
   "field_b": "xxx"
  },
  {
   "field_a": "xxx",
   "field_b": "xxx"
  }
]