组件联动

具体的场景

服务器资源根据用户选择“项目”， “环境”， “区域”来刷新界面，同时选择“项目”会刷新“环境”的选项。

  {
    "type": "container",
    "body": [
      {
        "type": "picker",
        "label": "项目",
        "name": "project",
        "overflowConfig": {
          "maxTagCount": -1,
          "displayPosition": [
            "select"
          ]
        },
        "modalClassName": "app-popover :AMISCSSWrapper",
        "id": "u:2f60910808e0",
        "multiple": false,
        "embed": false,
        "modalMode": "drawer",
        "source": "/project/v1/project",
        "labelField": "name",
        "valueField": "resource_id",
        "onEvent": {
          "change": {
            "weight": 0,
            "actions": [
              {  // 被 action 的组件不要使用 visibleOn, 否则可能找不到该组件id
                "componentId": "u:739cc632b54c",
                "ignoreError": false,
                "actionType": "reset",
                "args": ""
              },
              {
                "componentId": "u:ff8964f32363",
                "ignoreError": false,
                "actionType": "reload",
                "data": {
                  "project_resource_id": "${project}",
                  "environment_resource_id": undefined, // * 显式置为 undefined
                  "region":  "${region}"
                }
              }
            ]
          },
        },
        "mode": "inline"
      },
      {
        "type": "select",
        "label": "环境",
        "required": false,
        "name": "environment",
        "id": "u:739cc632b54c",
        "multiple": false,
        "mode": "horizontal",
        "labelAlign": "right",
        "source": {
          "method": "get",
          "url": "/project/v1/environment?project_resource_id=${project}",   // 接口联动
          "requestAdaptor": "",
          "adaptor": "return {\n  status: response.code,\n  msg: \"\",\n  data: {\n    items: response.data.environments\n  }\n}",
          "messages": {}
        },
        "labelField": "name",
        "valueField": "resource_id",
        "onEvent": {
          "change": {
            "weight": 0,
            "actions": [
              {
                "componentId": "u:ff8964f32363",
                "ignoreError": false,
                "actionType": "reload",
                "data": {
                  "project_resource_id":  "${project}",
                  "environment_resource_id": "${environment}",
                  "region":  "${region}"
                }
              }
            ]
          }
        },
        "selectFirst": false,
        "value": "",
        "clearable": true
        // "visibleOn": "${project != null}"
      },
      {
        "type": "tree-select",
        "label": "区域",
        "name": "region",
        "options": [
          {
            "label": "美国",
            "value": "A",
            "children": [
              {
                "label": "弗吉利亚  us-virginia",
                "value": "us-virginia"
              }
            ]
          },
          {
            "label": "亚太地区",
            "value": "B",
            "children": [
              {
                "label": "香港       ap-hongkong",
                "value": "ap-hongkong"
              },
              {
                "label": "新加坡   ap-singapore",
                "value": "ap-singapore"
              }
            ]
          },
          {
            "label": "南美洲",
            "value": "C",
            "children": [
              {
                "label": "圣保罗  sa-saopaulo",
                "value": "sa-saopaulo"
              }
            ]
          }
        ],
        "id": "u:eda78a39af9e",
        "multiple": false,
        "enableNodePath": false,
        "hideRoot": true,
        "showIcon": true,
        "initiallyOpen": true,
        "clearable": true,
        "mode": "inline",
        "size": "md",
        "onEvent": {
          "change": {
            "weight": 0,
            "actions": [
              {
                "componentId": "u:ff8964f32363",
                "ignoreError": false,
                "actionType": "reload",
                "data": {
                  "project_resource_id":  "${project}",
                  "environment_resource_id": "${environment}",
                  "region":  "${region}"
                }
              }
            ]
          }
        }
      }
    ],
    "style": {
      "position": "relative",
      "display": "flex",
      "inset": "auto",
      "flexWrap": "nowrap"
    },
    "size": "none",
    "wrapperBody": false,
    "id": "u:0543813aaa10",
    "isFixedHeight": false,
    "isFixedWidth": false
  }

• 放在一个 container 下，使这几个主选择组件放在一行
• js 请求是异步的，我们应该尽量避免主选择菜单的组件过多，并且它们之间还有关联性
• 当主选择菜单存在关联时， “项目”联动“环境”，当项目值变化发起“实例”的 reload ，需要将 “环境” 的值显式的置为 undefined, 否则异步请求时，可能“环境”的值还是之前的

接口联动

所有初始化接口链接上使用数据映射获取参数的形式时，例如下面的query=${query}，在当前数据域中，所引用的变量值（即 query）发生变化时，自动重新请求该接口。

{
  "initApi": "/amis/api/initData?query=${query}"
}

如果 api 地址中有变量，比如 /api/mock2/sample/${id}，amis 就不会自动加上分页参数，需要自己加上，改成 /api/mock2/sample/${id}?page=${page}&perPage=${perPage}

触发指定组件动作

刷新 CRUD 时，如果配置了data，将发送data给目标 CRUD 组件，并将该数据合并到目标 CRUD 组件的数据域中，然后触发目标组件的刷新操作，即 CRUD 数据拉取接口将自动追加data参数到请求中。

主选择菜单置空

// TODO

发送适配器：

if (api.data.project_resource_id === '') {
  api.data.project_resource_id = undefined;
}
if (api.data.environment_resource_id === '') {
  api.data.environment_resource_id = undefined;
}
if (api.data.region === '') {
  api.data.region = undefined;
}

return api;