低代码平台amis学习五：添加「日期范围」参数，解决起止日期提取问题

冰霜

发布于 2023-02-24 11:17:38

1.1K0

发布于 2023-02-24 11:17:38

文章被收录于专栏：冰霜的软件测试技术分享冰霜的软件测试技术分享

之前写过一个造数接口，它需要传递日期参数，如下

前端暴露一个「月份范围」组件，选好日期后点击提交，会提交「起始月份」和「终止月份」2个参数

接下来我要把这个功能移植到amis平台上

通过查看文档，发现官方有提供「月份范围」功能，传送门：

https://aisuda.bce.baidu.com/amis/zh-CN/components/form/input-month-range

根据描述，先创建如下表单

对应代码

{
                    "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表达式：

https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/expression#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]}"
    },