Skip to content
导航栏

多重弹窗获取数据

问题:多层弹窗中,第一个弹窗之后的弹窗无法获取 event 事件对象数据

原地址:https://github.com/baidu/amis/issues/10949

这里值得学习的地方:

  1. 在事件处理中,如果存在多个 action,可以使用event变量来引用或是修改上下文数据。动作间数据传递
    • 使用event.data获取事件上下文,但是并不会自动的覆盖非 action 中调用的其它对象的数据域,需要进行显式的引用。比如此例子中的弹窗数据引用。
    • 在自定义事件中处理中actionType: 'custom',可以调用 setData()、stopPropagation()、preventDefault()分别实现事件上下文设置、动作干预、事件干预。注意:直接调用event.setData()将修改事件的原有上下文,如果不希望覆盖可以通过event.setData({...event.data, ...{xxx: xxx}})来进行数据的合并。
  2. http 请求动作执行结束后,后面的动作可以通过 ${responseResult}或$来获取请求响应结果
  3. 区分:更新事件上下文数据更新组件数据,通过配置actionType: 'setValue'实现组件数据域变量更新,这个是异步的。而更新事件上下文数据,需要通过${event.data.xxx}来获取。
  4. 更新事件上下文数据可以使用"actionType": "setEventData"或是actionType: 'custom'更新事件上下文数据
    json
    {
      "actionType": "setEventData",
      "args": {
        "key": "title",
        "value": "页面标题:${window:document[title]}"
      }
    }
    

完整的测试例子:

json
{
  "type": "button",
  "label": "批量下线",
  "level": "primary",
  "onEvent": {
    "click": {
      "actions": [
        {
          "actionType": "dialog",
          "id": "offLineDialog",
          "args": {
            "dialog": {
              "title": "下线:${event|json}",
              "showCloseButton": false,
              "body": [
                {
                  "type": "tpl",
                  "tpl": "确定要下线吗?"
                }
              ],
              "actions": [
                {
                  "type": "button",
                  "label": "取消",
                  "onEvent": {
                    "click": {
                      "actions": [
                        {
                          "actionType": "closeDialog"
                        }
                      ]
                    }
                  }
                },
                {
                  "type": "button",
                  "level": "primary",
                  "label": "确认",
                  "onEvent": {
                    "click": {
                      "actions": [
                        {
                          "actionType": "ajax",
                          "args": {
                            "api": {
                              "url": "https://aliyunfc-amis-mock-gmecwxibod.cn-beijing.fcapp.run/api/amis-mock/mock2/form/initData",
                              "method": "post",
                              "adaptor": "const { status, message, data } = payload; return { status: status === 200 ? 0 : status, msg: message, data: { offLineOkRelList: [{ name: '度量1' }, { name: '度量2' }], offLineOkIsSuccess: false }}"
                            }
                          }
                        },
                        {
                          "actionType": "toast",
                          "args": {
                            "msg": "${event|json}"
                          }
                        },
                        {
                          "actionType": "dialog",
                          "expression": "event.data.offLineOkRelList",
                          "args": {
                            "dialog": {
                              "title": "下线失败提示:${event|json}",
                              "showCloseButton": false,
                              "data": {
                                "offLineOkRelList": "${event.data.offLineOkRelList}",
                                "event": "${event}"
                              },
                              "body": [
                                {
                                  "type": "tpl",
                                  "tpl": "以下【指标】批量下线失败,具体失败原因:请找产品经理咨询:${event.data.offLineOkRelList|json}"
                                },
                                {
                                  "type": "each",
                                  "name": "offLineOkRelList",
                                  "items": {
                                    "type": "tpl",
                                    "tpl": "<div><%= data?.name %></div>"
                                  }
                                }
                              ],
                              "actions": [
                                {
                                  "type": "button",
                                  "label": "取消",
                                  "onEvent": {
                                    "click": {
                                      "actions": [
                                        {
                                          "actionType": "closeDialog"
                                        },
                                        {
                                          "actionType": "closeDialog",
                                          "componentId": "offLineDialog"
                                        },
                                        {
                                          "actionType": "toast",
                                          "args": {
                                            "msg": "${event|json}"
                                          }
                                        }
                                      ]
                                    }
                                  }
                                },
                                {
                                  "type": "button",
                                  "level": "primary",
                                  "label": "确认",
                                  "onEvent": {
                                    "click": {
                                      "actions": [
                                        {
                                          "actionType": "closeDialog"
                                        },
                                        {
                                          "actionType": "closeDialog",
                                          "componentId": "offLineDialog"
                                        }
                                      ]
                                    }
                                  }
                                }
                              ]
                            }
                          }
                        }
                      ]
                    }
                  }
                }
              ]
            }
          }
        }
      ]
    }
  },
  "id": "u:42213f50e109"
}