优维低代码:构件渲染子构件

EASYOPS_youwei · · 633 次点击 · · 开始浏览    

优维低代码:构件渲染子构件

 

优维低代码:构件渲染子构件

 

导语

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维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给子容器传递了cellData,rowData,columnIndex。

详细 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"]
    }
  }
}

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

 


有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

633 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传