优维低代码:构件渲染子构件_低代码优维低代码:构件渲染子构件_低代码开发_02

导语

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。


为了特殊标注某个字段我们常会对一些字段进行特殊的渲染,这里常见于表格或详情描述等,在编排这里,我们叫构件渲染子构件 —— useBrick

{
"brick": "presentational-bricks.brick-table",
"properties": {
"rowKey": "id",
"page": "${query.page=1|number}",
"pageSize": "${query.pageSize=10|number}",
"columns": [
{
"title": "分支",
"dataIndex": "branch",
"useBrick": {
"brick": "presentational-bricks.brick-link",
"transform": {
"label": "@{cellData}"
}
}
},
{
"title": "编号",
"dataIndex": "id"
},
{
"title": "流水线",
"dataIndex": "pipeline"
},
{
"title": "状态",
"dataIndex": "status",
"useBrick": {
"brick": "presentational-bricks.brick-value-mapping",
"transform": {
"value": "@{cellData}"
},
"properties": {
"mapping": {
"success": {
"color": "green"
},
"failed": {
"color": "red"
},
"warning": {
"color": "orange"
}
}
}
}
}
],
"dataSource": {
"list": [
{
"id": "#7220",
"pipeline": "contract-center / build_giraffe_sdk",
"branch": "develop",
"status": "success"
},
{
"id": "#7221",
"pipeline": "container / demo",
"branch": "master",
"status": "failed"
},
{
"id": "#7222",
"pipeline": "container / table",
"branch": "feature",
"status": "warning"
}
],
"page": 1,
"pageSize": 10,
"total": 3
}
}
}

注意 columns 里面的 useBrick 定义,他一般的结构为:

"useBrick": {
"brick": "presentational-bricks.brick-value-mapping",
"properties": {
"mapping": {
"success": {
"color": "green"
},
"failed": {
"color": "red"
},
"warning": {
"color": "orange"
}
}
}
"transform": {
"value": "@{cellData}"
},


}
  • brick: 表示使用哪个构件
  • properties: 定义子 brick 的属性
  • transform: 将父数据映射为子构件的 properties,父容器会传递什么数据给子构件这个由父容器决定,决定见各父容器的文档。比如brick-table给子容器传递了cellDatarowDatacolumnIndex

详细 transform 的介绍见Transform 数据转换

更多示例(描述列表):

{
"brick": "presentational-bricks.brick-descriptions",
"properties": {
"itemList": [
{
"text": "Lynette",
"label": "UserName"
},
{
"text": "18",
"label": "Age"
},
{
"label": "Tags",
"useBrick": {
"brick": "presentational-bricks.brick-tag",
"transformFrom": "tags",
"transform": "tagList",
"properties": {
"configProps": {
"color": "orange"
},
"showCard": false
}
}
}
],
"descriptionTitle": "User Info",
"dataSource": {
"tags": ["user"]
}
}
}

以上就是今天关于优维低代码的分享,希望对你有所收获!