baidu / amis

前端低代码框架,通过 JSON 配置就能生成各种页面。
https://baidu.github.io/amis/
Apache License 2.0
17.41k stars 2.52k forks source link

表单数据获取问题 #11179

Open asister opened 2 weeks ago

asister commented 2 weeks ago

实现场景:

初始化页面和重置表单后,获取表单数据,存放到参数中。

存在的问题:

1、初始化页面时,获取不到表单数据; 2、重置表单后,获取到的仍是重置前的数据。

当前方案:

{
  "type": "page",
  "title": "演示",
  "body": [
    {
      "type": "form",
      "id": "filter-form",
      "title": "过滤条件",
      "target": "",
      "submitOnInit": true,
      "wrapWithPanel": false,
      "mode": "inline",
      "body": [
        {
          "type": "input-text",
          "label": "",
          "name": "quickTabSea",
          "id": "search-val",
          "placeholder": "快速搜索",
          "size": "sm"
        },
        {
          "type": "input-date-range",
          "label": "",
          "name": "dateRange",
          "id": "u:636b72e4f7ea",
          "size": "md",
          "value": "-7days,today"
        },
        {
          "type": "select",
          "label": "",
          "name": "model",
          "options": [
            {
              "label": "全部",
              "value": "all"
            },
            {
              "label": "WIOT-LeakMaster NB",
              "value": "WIOT-LeakMaster NB"
            },
            {
              "label": "WIOT-LeakMaster 4G",
              "value": "WIOT-LeakMaster 4G"
            },
            {
              "label": "PermaNet+",
              "value": "PermaNet+"
            },
            {
              "label": "PermaNet+TM",
              "value": "PermaNet+TM"
            }
          ],
          "id": "u:697deaf54f05",
          "multiple": false,
          "value": "all",
          "size": "md"
        },
        {
          "type": "submit",
          "label": "搜索",
          "id": "filter-submit",
          "onEvent": {
            "click": {
              "actions": [
                {
                  "actionType": "setValue",
                  "componentId": "page-container",
                  "groupType": "component",
                  "args": {
                    "value": {
                      "params": "st=${DATERANGESPLIT(dateRange, 0, 'YYYY-MM-DD')}&et=${DATERANGESPLIT(dateRange, 1, 'YYYY-MM-DD')}&model=${model}"
                    }
                  }
                }
              ]
            }
          },
          "level": "primary"
        },
        {
          "type": "button",
          "label": "重置",
          "id": "filter-reset",
          "onEvent": {
            "click": {
              "actions": [
                {
                  "actionType": "reset",
                  "componentId": "filter-form",
                  "args": {},
                  "ignoreError": false
                },
                {
                  "actionType": "setValue",
                  "componentId": "page-container",
                  "args": {
                    "value": {
                      "params": "st=${DATERANGESPLIT(dateRange, 0, 'YYYY-MM-DD')}&et=${DATERANGESPLIT(dateRange, 1, 'YYYY-MM-DD')}&model=${model}"
                    }
                  },
                  "groupType": "component"
                }
              ]
            }
          },
          "level": "default"
        },
        {
          "type": "tpl",
          "tpl": "表单参数:${params}",
          "inline": true,
          "wrapperComponent": "",
          "id": "u:a762fbda7374"
        }
      ],
      "feat": "Insert",
      "dsType": "api",
      "className": "bg-white m-b-sm p-sm filter"
    }
  ],
  "id": "page-container",
  "asideResizor": false,
  "pullRefresh": {
    "disabled": true
  },
  "regions": [
    "body"
  ],
  "data": {
    "params": ""
  },
  "onEvent": {
    "init": {
      "weight": 0,
      "actions": [
        {
          "componentId": "page-container",
          "groupType": "component",
          "actionType": "setValue",
          "args": {
            "value": {
              "params": "st=${DATERANGESPLIT(dateRange, 0, 'YYYY-MM-DD')}&et=${DATERANGESPLIT(dateRange, 1, 'YYYY-MM-DD')}&model=${model}"
            }
          }
        }
      ]
    }
  }
}
github-actions[bot] commented 2 weeks ago

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

asister commented 1 week ago

表单获取问题该怎么解决

lhtuling commented 2 days ago

重置为什么搞那么复杂? 按钮自带的直接用就行了

然后你说的表单获取是什么意思

image

{
  "type": "reset",
  "label": "重置",
  "id": "filter-reset",
  "level": "default"
}

Amis低代码前端框架交流群【QQ1群】:717791727 Amis低代码前端框架交流群【QQ2群】:721182449