amis 联动效果触发的几种方式

联动效果实现主要俩种方式:

1.表达式实现联动,基于组件内或数据链的变量变化的联动

比如: "source": "/amis/api/mock2/options/level2?name=${name} " (必须是这种字符串拼接形式,在data数据映射中表达式不会触发联动)

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

接口联动一般只适用于初始化接口,例如:

• form组件中的initApi;

• select组件中的source选项源接口url, data只能用于主动联动;

• service组件中的api和schemaApi;

• crud组件中的api;(crud 默认是跟地址栏联动,如果要做请关闭同步地址栏 syncLocation: false)

• 等等...

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

2.平级且会创建新数据域的组件间联动,无法通过引用链获取到的变量需使用此方式

2-1.通过Form的target属性

form配置target属性为目标组件name值,可以在触发提交行为后,将当前表单的数据域发送给目标组件(数据域中),并触发刷新重新调查询接口.

有一个表单form组件,还有一个列表组件crud,我们想要把form提交的数据,可以用作crud的查询条件,并请求crud的接口,由于form和crud位于同一层级,因此没法使用数据链的方式进行取值

进行两个调整:

  1. 为crud组件设置了name属性为mcrud

  2. 为form组件配置了target属性为crud的name:mcrud

更改配置后,提交form表单时,如果有配置提交接口,会先请求提交,之后 amis 会寻找target所配置的目标组件,把form中所提交的数据,发送给该目标组件中,并将该数据合并到目标组件的数据域中,并触发目标组件的刷新操作,对于 CRUD 组件来说,刷新即重新拉取数据接口

2-1.利用target实现inputTree与crud联动效果

(input-tree必须与form结合使用,form数据域里是{input-tree的name:输入值} ,点击input-tree不同选项时就会修改form数据域里的输入值 .

配置form的target为crud的name, 并配置"submitOnChange": true,form数据域的值变化后触发form的提交行为,提交到配置的target组件中 )

form配置target属性为目标组件name值,可以在触发提交行为后,将当前表单的数据域发送给目标组件,并触发刷新.

{
  "type": "page",
  "id": "u:1c2c81063ddc",
  "body": [
    {
      "type": "grid",
      "columns": [
        {
          "body": [
            {
              "type": "form",
              "id": "u:388c62109ac9",
              "target": "mcrud",
              "wrapWithPanel": false,
              "resetAfterSubmit": false,
              "debug": false,
              "submitOnInit": false,
              "submitOnChange": true,
              "body": [
                {
                  "type": "input-tree",
                  "name": "modelClass",
                  "submitOnChange": true,
                  "selectFirst": true,
                  "source": {
                    "method": "get",
                    "url": "/lbserver/api/ModelClass/findOptions",
                    "cache": 5000,
                    "adaptor": "return {\n    status: 0,\n    msg: 'ok',\n    data: {\n        options:[\n{\"label\":\"全部分类\",value:\"\"},...payload.data.options\n        ]\n    }\n}",
                    "dataType": "json"
                  },
                  "height": "1000px",
                  "inline": false,
                  "inputClassName": "h-full",
                  "id": "u:c519d9987ae7",
                  "multiple": false,
                  "enableNodePath": false,
                  "hideRoot": true,
                  "showIcon": true,
                  "initiallyOpen": true
                }
              ]
            }
          ],
          "id": "u:f32da427bbcd"
        },
        {
          "body": [
            {
              "type": "crud",
              "name": "mcrud",
              "api": {
                "url": "/lbserver/api/PageTemplate",
                "method": "get",
                "replaceData": false,
                "loadDataOnce": false,
                "dataType": "json",
                "requestAdaptor": "let modelClass = api.query.modelClass;\r\nlet filter = {\r\n    'limit': api.query.perPage,\r\n    'skip': (api.query.page * api.query.perPage - api.query.perPage),\r\n    where: { modelClass: { like: modelClass || '' } },\r\n}\r\n\r\nlet url = api.url.split(\"?\")[0];\r\nurl = `${url}?filter=${JSON.stringify(filter)}`;\r\napi.url = url;\r\nreturn api;",
                "data": {
                  "&": "$$",
                  "modelClass": "${modelClass}"
                }
              },
              "columns": [
                {
                  "name": "modelClass",
                  "label": "模型分类",
                  "align": "center",
                  "width": 170,
                  "placeholder": "-",
                  "id": "u:c9b9842b2ffe",
                  "type": "tree-select",
                  "quickEdit": {
                    "mode": "inline",
                    "type": "select",
                    "label": "",
                    "name": "modelClass",
                    "checkAll": false,
                    "source": {
                      "method": "get",
                      "url": "/lbserver/api/ModelClass/findOptions",
                      "cache": 5000
                    },
                    "placeholder": "-",
                    "size": "sm",
                    "submitOnChange": true,
                    "id": "u:2c4985d29548",
                    "multiple": false,
                    "disabled": true
                  },
                  "fixed": "",
                  "disabled": true
                },
                {
                  "name": "name",
                  "label": "命名ID",
                  "align": "center",
                  "width": 280,
                  "id": "u:c9c35d484864",
                  "fixed": "",
                  "placeholder": "-"
                },
                {
                  "label": "页面名称",
                  "align": "center",
                  "width": 200,
                  "placeholder": "-",
                  "id": "u:edb4c2a1d1a4",
                  "name": "title"
                },
                {
                  "label": "描述信息",
                  "name": "desc",
                  "width": 280,
                  "type": "text",
                  "className": "word-break text-center white-space-pre",
                  "fixed": "",
                  "inline": false,
                  "toggled": true,
                  "placeholder": "-",
                  "id": "u:5fb7eb4c5190",
                  "align": "center"
                }
              ],
              "messages": {},
              "syncLocation": false,
              "perPageAvailable": [
                10
              ],
              "defaultParams": {
                "perPage": "10"
              },
              "footerToolbar": [
                {
                  "type": "bulk-actions"
                },
                {
                  "type": "pagination"
                },
                {
                  "type": "statistics",
                  "tpl": "内容"
                }
              ],
              "silentPolling": true,
              "className": "word-break ",
              "fixed": "right",
              "inline": false,
              "stopAutoRefreshWhenModalIsOpen": true,
              "toggled": true,
              "checkAll": false,
              "keepItemSelectionOnPageChange": false,
              "autoFillHeight": false,
              "id": "u:faeebfd2d01c"
            }
          ],
          "id": "u:1a430e75198f"
        }
      ],
      "id": "u:36da4c4f7f94"
    }
  ]
}

2-2.更高级更通用的是借助事件-动作(Event-Action)

比如通过setValue动作,修改另一个同级form表单的数据

动作setValue(组件中传递的参数必须是value, args: {value: {age:17} })

第一个form:

{
  "type": "form",
  "title": "表单",
  "body": [
    {
      "label": "文本框",
      "type": "input-text",
      "name": "text",
      "id": "u:fdd256b622e0"
    }
  ],
  "debug": true
}

第二个form中配置setValue动作:

   "onEvent": {
          "click": {
            "actions": [
              {
                "componentId": "u:c123bdb1db9e", //方式一:设置到form中
                "args": {
                  "value": "${event.data}" //此组件数据域(event.data)中数据全部传入.  
                },
                "actionType": "setValue"
              },
              {
                "actionType": "custom",//方式二:setValue到input组件,直接value:组件数据即可
                "script": "\nconsole.log(context.props, event)\ndoAction({\n  actionType: 'setValue', \n  componentId: 'u:fdd256b622e0', \n  args: {value: 17 }\n});\n"
              }
            ],
            "weight": 0
          }
        }
相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js
BPM_宏天低代码8 小时前
低代码 BPA:简化业务流程自动化的新趋势
运维·低代码·自动化