amis form组件联动和提交表单请求如何同时使用

y0u0uwnf  于 2022-11-06  发布在  其他
关注(0)|答案(2)|浏览(516)
实现场景:

form表单提交后,获取到接口返回值的数据,渲染到目标组件中

存在的问题:

在form表单中增加 target 属性后,表单即无法提交(没有http请求)

当前方案:
  1. form 联动 form 当前数据域内容会发送到目标form , 但不会提交表单到接口
{
    "title": "服务端截图演示",
    "type": "page",
    "body": [
        {
            "api": {
                "method": "get",
                "data": {
                    "device": "${device_key}",
                    "url": "${url}",
                    "image_url":"test url"
                },
                "url": "xxxx"
            },
            "type": "form",
            "target":"preview",
            "body": [
                {
                    "name": "url",
                    "description": "",
                    "label": "请求地址",
                    "type": "input-text",
                    "value": "xxx",
                    "required": true
                },
                {
                    "name": "device_key",
                    "options": [
                        {
                            "label": "IPhoneX",
                            "value": "IPhoneX"
                        },
                        {
                            "label": "IPhone11",
                            "value": "IPhone11"
                        }
                    ],
                    "label": "设备型号",
                    "type": "select",
                    "value": "IPhoneX"
                },
                {
                    "name": "iamge_url",
                    "description": "",
                    "label": "预览地址",
                    "type": "input-text",
                    "value": "xxx",
                    "required": true
                }
            ]
        },
        {
            "type": "form",
            "name": "preview",
            "title": "预览",
            "body": {
                "type": "tpl",
                "tpl": "Hello ${image_url} , device:${device},url:${url}"
            }
        }

    ]
}
  1. form 联动 panel 当前数据域内容不会发送到目标数据域,表单也不会提交
{
    "title": "服务端截图演示",
    "type": "page",
    "body": [
        {
            "api": {
                "method": "get",
                "data": {
                    "device": "${device_key}",
                    "url": "${url}",
                    "image_url":"test url"
                },
                "url": "xxxx"
            },
            "type": "form",
            "target":"preview",
            "body": [
                {
                    "name": "url",
                    "description": "",
                    "label": "请求地址",
                    "type": "input-text",
                    "value": "xxx",
                    "required": true
                },
                {
                    "name": "device_key",
                    "options": [
                        {
                            "label": "IPhoneX",
                            "value": "IPhoneX"
                        },
                        {
                            "label": "IPhone11",
                            "value": "IPhone11"
                        }
                    ],
                    "label": "设备型号",
                    "type": "select",
                    "value": "IPhoneX"
                },
                {
                    "name": "iamge_url",
                    "description": "",
                    "label": "预览地址",
                    "type": "input-text",
                    "value": "xxx",
                    "required": true
                }
            ]
        },
        {
            "type": "panel",
            "name": "preview",
            "title": "预览",
            "body": {
                "type": "tpl",
                "tpl": "Hello ${image_url} , device:${device},url:${url}"
            }
        }

    ]
}
sbdsn5lh

sbdsn5lh1#

示例中 image_url 属性是请求接口后返回的数据

9fkzdhlc

9fkzdhlc2#

  1. 目前是这样的,还不支持组合使用
  2. https://baidu.gitee.io/amis/zh-CN/docs/concepts/datascope-and-datachain#%E5%B8%B8%E8%A7%81%E8%AF%AF%E8%A7%A3

相关问题