优维低代码:构件事件传递

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

在上一篇《优维低代码:构件参数传递》的技术分享中,我们讲到构件的数据可来自于后台的接口。下面将分享构件间传递事件常见的业务场景,以及分布调用的方式。

{
 "brick": "cmdb-instances.instance-edit",
 "properties": {
 "objectId": "APP",
 "instanceId": "${instanceId}",
 "fieldsByTag": [
 {
 "name": "基本信息",
 "fields": ["name", "_hierarchy"]
 }
 ]
 },
 "events": {
 "update.single.success": [
 {
 "action": "message.success",
 "args": ["编辑成功"]
 },
 {
 "action": "history.push",
 "args": ["${APP.homepage}/${instanceId}/detail"]
 }
 ],
 "update.single.failed": {
 "action": "handleHttpError"
 }
 }
}

构件间可传递事件,常见的业务场景比如:

• 点击列表的某个字段弹窗显示详情
• 时间选择器更改时间后对应的图表构件要刷新数据
• 编辑保存后提示成功,并跳转到详情页面

这里对events部分做详解。如上示例,大伙会发现events是一个字典,字典的 key 为事件的名字,value 为事件的行为列表,可定义多个行为,按顺序执行:

• target:表示调用哪个构件,字段为 Css Selector,因此构件名称中的 . 需要转义,写成\\.
• action:框架封装的内置动作通过action而不是target调用
• method:指定调用target构件的方法
• args:给method传递参数

# 调用 provider

{
 "brick": "forms.general-form",
 "events": {
 "validate.success": [
 {
 "target": "workbench\\.provider-modify-ldap-password",
 "method": "executeWithArgs",
 "args": [
 "${EVENT.detail}"
 ]
 }
 ]
 },
 "slots": {
 ...
 }
}

workbench.provider-modify-ldap-password的定义如下,只有一个入参params

interface ModifyLdapPasswordParams {
 oldPassword: string;
 newPassword: string;
 confirmPassword: string;
}
export function ModifyLdapPassword(
 params: ModifyLdapPasswordParams
): Promise<any> {
 // 去除其他代码
}
customElements.define(
 "workbench.provider-modify-ldap-password",
 createProviderClass(ModifyLdapPassword)
);

这里${EVENT.detail}的值为

{
 "oldPassword": "aaa",
 "newPassword": "bbb",
 "confirmPassword": "bbb"
}

# 分步的调用方式

provider 还支持一个暂存参数的能力,可以通过updateArgs预设部分args,然后再通过updateArgsAndExecute来执行,如下所示:

{
 "brick": "forms.general-form",
 "events": {
 "validate.success": [
 {
 "target": "workbench\\.provider-modify-ldap-password",
 "method": "updateArgsAndExecute",
 "args": [
 {
 "detail": {
 "0": "${EVENT.detail}"
 }
 }
 ]
 }
 ]
 },
 "slots": {
 ...
 }
}

注意:在调用 Provider 构件的updateArgsAndExecute方法时,args一定要按如上示例的方式来写。 "0"表示第 1 个参数,"1"表示第 2 个参数。故如果你想只更新第 2 个参数,可以写成:

"args": [
 {
 "detail": {
 "1": "xxx"
 }
 }
]

如果第 1 个参数是一个object类型,也是最终 merge 起来的。比如最 1 次updateArgs是{"a": 1},第 2 次是{"b": 1},最终execute的时候args则会合并起来,变成{"a": 1, "b": 2}。

# Provider 执行后直接更新其他构件的属性

provider 构件也会发出事件出来,在有些时候,我们希望在这个接口执行成功后则去更新其他构件的属性,示例代码如下:

{
 "brick": "providers-of-cmdb.instance-api-get-detail",
 "properties": {
 "args": [
 "_ISSUE"
 "xxxxx"
 ],
 },
 "bg": true,
 "events": {
 "response.success": [
 {
 "target": "#issue-detail-description",
 "properties": {
 "textContent": "${EVENT.detail.description}"
 }
 }
 ]
 }
}

# 调用内置动作

{
 "action": "history.push",
 "args": ["${APP.homepage}/${instanceId}/detail"]
}

框架封装了几个内置动作,注意其调用方式不是target,而是action。

• 编辑
• 预览