说明：自定义表单提供一个特殊的字段
complicated_field，用户按照一定的规则（具体见下免的使用指南）设计自己的表单展示和实现一些简单的层级交互
自定义表单使用 JSON 文件进行渲染，JSON 中分为 schemes、form_data、config 三部分
mode表单嵌套交互模式分两种 sideslider（侧弹窗） | combine（面包屑嵌套），默认 sideslider
- 由一个或多个
scheme组成，它是一共通用格式类型，可以定义一组特殊属性的表单类型，在form中可以多处引用同一个scheme; 这样就可以避免重复定义某种相同属性的类型表单项。 - 单个
scheme属性说明：type：表单类型，目前仅支持 text、tablescheme：引用定义好的scheme，使用该属性会覆盖type属性attrs：表单属性，具体属性请查看表单类型desc：通用描述文字，会应用在每一个引用该scheme的表单上
- 由一个或多个
form组成，表单的渲染会遍历该数组 - 单个
form属性说明：label：表单项名scheme：schemes中已定义的scheme属性名value：表单值desc：表单描述，如果引用的scheme中有定义，会覆盖children：嵌套表单
- text
- table
表单的默认样式为
name：value这样的键值对形式展示
-
attrs
style样式配置项- 注意：
attrs.style可单独配置name和value样式，内置支持 highlight，border
-
form_data
属性 类型 说明 默认值 是否必填 scheme String 对应scheme 无 是 label String 名称 无 否 value String 表单值 无 是 示例：
{ //schema 配置 "schemes": { // text scheme "base_text_scheme": { "type": "text", "attrs": { "style": { "label": ["border"], "value": ["highlight", "border"] } } } }, // form_data配置 "form_data": [ {// 单行文本 "label": "业务", "scheme": "base_text_scheme", "value": "蓝鲸" }, {// 多行文本 "label": "多行文本", "scheme": "base_text_scheme", "value": [ { "label": "业务1", "scheme": "base_text_scheme", "value": "蓝鲸" }, { "label": "业务2", "scheme": "base_text_scheme", "value": "其他" } ] } ] }
-
attrs.cloumn
column表头信息，用户可根据自己的需求进行配置属性 类型 说明 默认值 是否必填 name String 表头名 无 是 key String 列唯一标识 无 是 scheme String 当前列的默认展示方式 则默认用table_text_schema 否 attrs.sort Array 排序 false 否 -
form_data:
属性 类型 说明 默认值 是否必填 label String 名称 无 否 value Array 表单值 无 是 scheme String 对应scheme 无 是 -
value:
form_data内 value 的配置格式为：列名为 key，当前 key 对应的值为当前单元格的显示内容单元格展示内容格式：
属性 类型 说明 默认值 是否必填 label String 名称 无 否 value Array 表单值 无 是 示例：
{ "scheme": { "base_table_scheme": { "type": "table", "attrs": { "column": [ { "name": "操作", "type": "text", "key": "column1" }, { "name": "关联相关内容", "key": "column2", "scheme": "table_text_scheme", "attrs": { } }, { "name": "申请期限", "type": "text", "key": "column3", "attrs": { "sort": true } } ] } } }, "form_data": [ { "label": "配置平台", "scheme": "base_table_scheme", "value": [ { "column1": { "value": "业务主机编辑" }, "column2": { "label": "主机:", "value": "3个业务，7个集群" }, "column3": { "value": "150天" } }, { "column1": { "value": "业务主机编辑2" }, "column2": { "label": "主机:", "value": "4个业务，8个集群" }, "column3": { "value": "150天" } } ] } ] }
通过在使用表格
form_data的列数据中，对某一列定义带有children属性，那么我们就认为该表单是一个嵌套类型的表单，点击则会打开下一级表单，层级以面包屑的方式展示
示例：
{
"form_data": [
{
"label": "配置平台",
"scheme": "base_table_scheme",
"value": [
{
"column1": { "value": "业务主机编辑" },
"column2": {
"label": "主机：",
"value": "3个业务，7个集群",
"children": [ // child1
{
"label": "关联相关内容：3个业务，7个集群",
"scheme": "sub_table_scheme",
"value": [
{
"column1": { "value": "集群" },
"column2": {
"value": "admin/集群1",
"children": [ // child2
{
"label": "配置平台",
"scheme": "sub2_table_scheme",
"value": [
{
"column1": { "value": "192.168.1.6" }
},
{
"column2": { "value": "192.168.1.6" }
}
]
}
]
}
}
]
}
]
},
"column3": { "value": "150天" }
},
{
"column1": { "value": "主机归还主机池" },
"column2": {
"value": [{ "label": "业务：", "value": "2个业务" },{ "label": "业务：", "value": "3个业务" }], // 单元格有多行 text 场景
"children": [ // 嵌套表单
{
"label": "关联相关内容：业务，2个业务",
"scheme": "sub_table_scheme",
"value": [
{
"column1": { "value": "业务" },
"column2": { "value": "DCH-biz/主机：无限制" }
}
]
}
]
},
"column3": { "value": "139天" }
}
]
}
]
}和普通单元格相比，区别在于
value不是一个字符串，而是一个数组。
label如果不存在，value值会占据整行空间。label如果存在，value会放在label右边。
示例：
{
// 单行
"column1": { "value": "主机归还主机池" },
// 多行
"column2": { "value": [
{ "label": "业务：", "value": "2个业务" },
{ "label": "业务：", "value": "3个业务" }
] }
}- 定义 desc 有两种方式，一个是在 scheme 中定义，一种是在 form 中定义
- 注意：form 中定义的 desc 会覆盖 scheme 中定义 desc 示例：
{
//schema 配置
"schemes": {
// text scheme
"base_text_scheme": {
"type": "text",
"desc": "通用描述",
"attrs": {
}
}
},
// form_data配置
"form_data": [
{ // tips 为：通用描述
"label": "业务1",
"scheme": "base_text_scheme",
"value": "蓝鲸1"
},
{// tips 为：蓝鲸 2 描述
"label": "业务2",
"scheme": "base_text_scheme",
"desc": "蓝鲸 2 描述",
"value": "蓝鲸2"
}
]
}表单如图所示：
配置如下：
{
"schemes": {
"base_text_scheme": {
"type": "text",
"attrs": {
}
},
"table_text_scheme": {
"type": "text",
"attrs": {
"style": {
"label": ["border"],
"value": ["highlight", "border"]
}
}
},
"base_table_scheme": {
"type": "table",
"attrs": {
"column": [
{
"name": "操作",
"type": "text",
"key": "column1"
},
{
"name": "关联相关内容",
"key": "column2",
"scheme": "table_text_scheme",
"attrs": {
}
},
{
"name": "申请期限",
"type": "text",
"key": "column3",
"attrs": {
"sort": true
}
}
]
}
},
"sub_table_scheme": {
"type": "table",
"attrs": {
"column": [
{
"name": "关联内容-类型",
"key": "column1",
"scheme": "base_text_scheme"
},
{
"name": "类型值",
"key": "column2",
"scheme": "table_text_scheme"
}
]
}
},
"sub2_table_scheme": {
"type": "table",
"attrs": {
"column": [
{
"name": "主机",
"key": "column1",
"scheme": "base_text_scheme"
}
]
}
}
},
"form_data": [
{
"label": "业务：",
"scheme": "base_text_scheme",
"value": "蓝鲸"
},
{
"label": "提单人：",
"scheme": "base_text_scheme",
"value": "admin(admin)"
},
{
"label": "配置平台",
"scheme": "base_table_scheme",
"value": [
{
"column1": { "value": "业务主机编辑" },
"column2": {
"label": "主机：",
"value": "3个业务，7个集群",
"children": [
{
"label": "关联相关内容：3个业务，7个集群",
"scheme": "sub_table_scheme",
"value": [
{
"column1": { "value": "集群" },
"column2": {
"value": "admin/集群1",
"children": [
{
"label": "配置平台",
"scheme": "sub2_table_scheme",
"value": [
{
"column1": { "value": "192.168.1.6" }
},
{
"column2": { "value": "192.168.1.6" }
}
]
}
]
}
}
]
}
]
},
"column3": { "value": "150天" }
},
{
"column1": { "value": "主机归还主机池" },
"column2": {
"value": [{ "label": "业务：", "value": "2个业务" },{ "label": "业务：", "value": "3个业务" }], // 单元格有多行 text 场景
"children": [ // 嵌套表单
{
"label": "关联相关内容：业务，2个业务",
"scheme": "sub_table_scheme",
"value": [
{
"column1": { "value": "业务" },
"column2": { "value": "DCH-biz/主机：无限制" }
}
]
}
]
},
"column3": { "value": "139天" }
}
]
}
]
}