联动效果实现主要俩种方式:
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位于同一层级,因此没法使用数据链的方式进行取值
进行两个调整:
-
为crud组件设置了name属性为mcrud
-
为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
}
}