低代码平台amis学习 五：添加「日期范围」参数，解决起止日期提取问题
之前写过一个造数接口，它需要传递日期参数，如下
前端暴露一个「月份范围」组件，选好日期后点击提交，会提交「起始月份」和「终止月份」2个参数
接下来我要把这个功能移植到amis平台上
通过查看文档，发现官方有提供「月份范围」功能，传送门：InputMonthRange 月份范围
根据描述，先创建如下表单
对应代码
{
"title": "产值相关",
"hash": "tab3",
"body": [
{
"type": "grid",
"columns": [
{
"type": "wrapper",
"style": {
},
"body": [{
"type": "form",
"title": "创建产值计划",
"mode": "horizontal",
"autoFocus": false,
"horizontal": {
"leftFixed": "md"
},
"body": [
{
"label": "合同编号",
"type": "input-text",
"size": "md",
"name": "contractid"
},
{
"type": "input-month-range",
"name": "date",
"format": "YYYY-MM",
"_format": "设置值的格式，https://aisuda.bce.baidu.com/amis/zh-CN/components/form/input-date",
"size": "md",
"label": "月份范围",
"labelRemark": "月份范围"
},
{
"label": "选择状态",
"type": "radios",
"size": "md",
"name": "status",
"options": [
{
"label": "草稿",
"value": "1"
},
{
"label": "已上报",
"value": "2"
}
]
},
{
"type": "control",
"name": "response",
"label": "接口返回结果",
"body": {
"type": "json",
"levelExpand": 100
}
}
],
"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",
"api": {
"method": "get",
"url": "http://localhost:8000/data_factory/create_output_plan",
"data": {
"code": "${contractid}",
"status": "${status}"
"start_date": "${date}",
"end_date": "${date}"
},
"adaptor": "return {\n ...payload,\n data: {\n ...payload.data,\n response: response.data\n }\n}"
}
},
{
"type": "reset",
"label": "重置"
}
]
}
]
}
]
}
]
}
关于月份范围参数，做了如下处理
{
"type": "input-month-range",
"name": "date",
"format": "YYYY-MM",
"_format": "设置值的格式，https://aisuda.bce.baidu.com/amis/zh-CN/components/form/input-date",
"size": "md",
"label": "月份范围",
"labelRemark": "月份范围"
},添加format属性，设置提交值的格式，默认为时间戳，这样设置后会改为"年-月"
api请求参数设置如下
"api": {
"method": "get",
"url": "http://localhost:8000/data_factory/create_output_plan",
"data": {
"code": "${contractid}",
"status": "${status}",
"start_date": "${date}",
"end_date": "${date}"
},因为后端接口需要接收2个参数：开始日期和结束日期，这里先试验一下实际发送请求时，${date}的值是什么样的
可以发现${date}是是一个由起止月份组成的字符串，正常情况应该把开始月份赋给start_date，结束月份赋给end_date
尝试做如下修改
"api": {
"method": "get",
"url": "http://localhost:8000/data_factory/create_output_plan",
"data": {
"code": "${contractid}",
"status": "${status}",
"start_date": "${date}[0]",
"end_date": "${date}[1]"
},结果如下
没有得到预期结果，看来${date}并不是一个数组，而是一个字符串，所以不能直接这样取值
经过多番试验，终于在官方文档中找到了一个办法(太不容易了😭)
利用amis的 SPLIT表达式，把字符串转换为数组，再分别提取开始月份和结束月份
"api": {
"method": "get",
"url": "http://localhost:8000/data_factory/create_output_plan",
"data": {
"code": "${contractid}",
"status": "${status}",
"start_date": "${SPLIT(date, ',')[0]}",
"end_date": "${SPLIT(date, ',')[1]}"
},
除此之外，还有一种迂回的方案：把开始月份和结束月份用2个字段表示，在前端分开填写
对应代码如下
{
"title": "产值相关",
"hash": "tab3",
"body": [
{
"type": "grid",
"columns": [
{
"type": "wrapper",
"style": {
},
"body": [{
"type": "form",
"title": "创建产值计划",
"mode": "horizontal",
"autoFocus": false,
"horizontal": {
"leftFixed": "md"
},
"body": [
{
"label": "合同编号",
"type": "input-text",
"size": "md",
"name": "contractid"
},
{
"type": "group",
"body": [
{
"type": "input-month",
"size": "md",
"format": "YYYY-MM",
"name": "month1",
"columnRatio": 4,
"label": "开始月份"
},
{
"type": "input-month",
"size": "md",
"format": "YYYY-MM",
"name": "month2",
"columnRatio": 4,
"label": "结束月份"
}
]
},
{
"label": "选择状态",
"type": "radios",
"size": "md",
"name": "status",
"options": [
{
"label": "草稿",
"value": "1"
},
{
"label": "已上报",
"value": "2"
}
]
},
{
"type": "control",
"name": "response",
"label": "接口返回结果",
"body": {
"type": "json",
"levelExpand": 100
}
}
],
"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",
"api": {
"method": "get",
"url": "http://localhost:8000/data_factory/create_output_plan",
"data": {
"code": "${contractid}",
"status": "${status}",
"start_date": "${month1}",
"end_date": "${month2}"
},
"adaptor": "return {\n ...payload,\n data: {\n ...payload.data,\n response: response.data\n }\n}"
}
},
{
"type": "reset",
"label": "重置"
}
]
}
]
}
]
}
]
},OK，这样的话，关于在amis中发送携带日期范围参数的请求就搞定了～
