0

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

 1 year ago
source link: https://studygolang.com/articles/35723
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

EASYOPS_youwei · 大约2小时之前 · 79 次点击 · 预计阅读时间 4 分钟 · 大约8小时之前 开始浏览    

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

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

导语

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维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"]
    }
  }
}

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


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

280

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK