之前寫過一個造數接口，它需要傳遞日期參數，如下
前端暴露一個「月份範圍」組件，選好日期後點擊提交，會提交「起始月份」和「終止月份」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中發送攜帶日期範圍參數的請求就搞定了～