优维低代码：构件事件传递
source link: https://blog.51cto.com/u_15605878/5379469
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.
优维低代码：构件事件传递
原创
优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维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
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 个参数，可以写成：
{
"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。
- 赞
- 收藏
- 评论
- 分享
- 举报
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK