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

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

 

 

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


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

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

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