低代码平台amis学习 四:一个表单添加多个按钮,不同按钮触发不同请求
2023-06-13 09:17:13 时间
通过上一节的学习,了解到如何在amis表单中发送网络请求,本文继续处理一种场景:
一个表单中有多个按钮,点击不同按钮时,可以触发不同的网络请求
回想一下,在之前的表单配置中,发送请求需要用到api配置参数,如下
当给表单上不同按钮都配置网络请求时,也需要用到api参数,不过需要把它配置到对应的按钮上,如下
{
"type": "wrapper",
"style": {
},
"body": [{
"type": "form",
"title": "快速审批",
"mode": "horizontal",
"autoFocus": false,
"horizontal": {
"leftFixed": "md"
},
"body": [
... ...
... ...
],
"actions": [
{
"//": "type为submit时, 表示该按钮是一个行为按钮, 点击可以提交请求",
"type": "submit",
"label": "一键审批",
"//": "level配置按钮颜色, https://aisuda.bce.baidu.com/amis/zh-CN/components/action?page=1#%E4%B8%BB%E9%A2%98",
"level": "primary",
"reload": "resultForm3?response3=${response3}",
"api": {
"method": "get",
"url": "http://localhost:8000/data_factory/one_key_pass",
"data": {
"code": "${contractid}",
"type": "${class_type}"
},
"adaptor": "return {\n ...payload,\n data: {\n ...payload.data,\n response3: response.data\n }\n}"
}
},
{
"type": "button",
"label": "一键用印",
"level": "primary",
"actionType": "submit",
"reload": "resultForm3?response3=${response3}",
"api": {
"method": "get",
"url": "http://localhost:8000/data_factory/one_key_seal",
"data": {
"code": "${contractid}",
"type": "${class_type}"
},
"adaptor": "return {\n ...payload,\n data: {\n ...payload.data,\n response3: response.data\n }\n}"
}
},
{
"type": "button",
"label": "一键归档",
"level": "primary",
"actionType": "ajax",
"reload": "resultForm3?response3=${response3}",
"api": {
"method": "get",
"url": "http://localhost:8000/data_factory/one_key_archive",
"data": {
"code": "${contractid}",
"type": "${class_type}"
},
"adaptor": "return {\n ...payload,\n data: {\n ...payload.data,\n response3: response.data\n }\n}"
}
}
]
},
{
"type": "form",
"name": "resultForm3",
"title": "返回结果",
"actions": [],
"body": [
{
"type": "control",
"name": "response3",
"body": {
"type": "json",
"levelExpand": 100
}
}
]
}]
}
代码说明
- 在 actions 组件中添加多个按钮;
- 在每个按钮中添加api属性,配置对应的请求参数、请求url等;
- 当"type": "submit"时,此时意味着这个按钮是可以触发表单提交行为;
- 当"type": "button"时,需要再配置 "actionType": "submit",此时这个按钮也可以触发表单提交行为。如果想提交ajax请求,则"actionType": "ajax"
相关文章
- 物联网之微控制器四大平台概述与学习选择
- vivo互联网机器学习平台的建设与实践
- Springboot 一行代码实现文件上传 20个平台!少写代码到极致
- Erlik:一个包含了针对SOAP的漏洞学习和研究平台
- AI技术快速提取专利文献中的化学结构式|StoneMIND平台重磅升级
- 学习XPath助力爬取中秋各大电商平台数据
- 2023爱分析 · 数据科学与机器学习平台厂商全景报告 | 爱分析报告
- MetaDaily|Nexon与腾讯云合作推出元宇宙平台,世界杯将推动体育元宇宙市场规模达800亿美元
- 低代码平台amis学习 二:写一个页面
- 低代码平台amis学习 三:发送网络请求并回显响应内容
- 「腾讯大数据-天工」问世,鹅厂想用AI给大数据平台做自动驾驶系统
- 白山云全新发布 Baishan Canvas:一体化边缘云平台,更极速、更安全、更敏捷
- 在“企业微信”中发现的宝藏学习平台 | 极客时间
- 营销平台一站式集成 高效实现自动化
- 智慧灯杆物联网云平台,打破智慧城市“数据孤岛”
- Java开源生鲜电商平台-优惠券设计与架构(源码可下载)详解编程语言
- 基于Linux平台的Git使用指南(linuxgit使用)
- Linux平台蓝灰无忧:屏蔽广告烦恼(linux广告屏蔽)
- ArduPilot 项目宣布脱离 Linux 基金会的无人机开源平台 Dronecode
- 2013年上半年Android平台病毒同比增长7.96倍
- 商汤科技发布首款 AI 诊疗平台,张少霆深谈其医疗战略
- Redis学习教程易百平台带你进阶(易百教程 redis)
- 王强:AI金融伪场景众多,为何应重仓三维视觉与开放金融平台? | CCF-GAIR 2019
- 众安保险明星AI平台的产品逻辑