Transfer 穿梭器

基本用法

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “label”: “默认”, “type”: “transfer”, “name”: “transfer”, “options”: [ { “label”: “诸葛亮”, “value”: “zhugeliang” }, { “label”: “曹操”, “value”: “caocao” }, { “label”: “钟无艳”, “value”: “zhongwuyan” }, { “label”: “李白”, “value”: “libai” }, { “label”: “韩信”, “value”: “hanxin” }, { “label”: “云中君”, “value”: “yunzhongjun” } ] } ] }

  2. ## 展示模式
  4. ### 分组
  6. ```schema: scope="body"
  7. {
  8.   "type": "form",
  9.   "api": "/api/mock2/form/saveForm",
  10.   "body": [
  11.     {
  12.       "label": "分组",
  13.       "type": "transfer",
  14.       "name": "transfer",
  15.       "options": [
  16.         {
  17.           "label": "法师",
  18.           "children": [
  19.             {
  20.               "label": "诸葛亮",
  21.               "value": "zhugeliang"
  22.             }
  23.           ]
  24.         },
  25.         {
  26.           "label": "战士",
  27.           "children": [
  28.             {
  29.               "label": "曹操",
  30.               "value": "caocao"
  31.             },
  32.             {
  33.               "label": "钟无艳",
  34.               "value": "zhongwuyan"
  35.             }
  36.           ]
  37.         },
  38.         {
  39.           "label": "打野",
  40.           "children": [
  41.             {
  42.               "label": "李白",
  43.               "value": "libai"
  44.             },
  45.             {
  46.               "label": "韩信",
  47.               "value": "hanxin"
  48.             },
  49.             {
  50.               "label": "云中君",
  51.               "value": "yunzhongjun"
  52.             }
  53.           ]
  54.         }
  55.       ]
  56.     }
  57.   ]
  58. }

表格模式

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “label”: “表格形式”, “type”: “transfer”, “name”: “transfer”, “selectMode”: “table”, “columns”: [ { “name”: “label”, “label”: “英雄” }, { “name”: “position”, “label”: “位置” } ], “options”: [ { “label”: “诸葛亮”, “value”: “zhugeliang”, “position”: “中单” }, { “label”: “曹操”, “value”: “caocao”, “position”: “上单” }, { “label”: “钟无艳”, “value”: “zhongwuyan”, “position”: “上单” }, { “label”: “李白”, “value”: “libai”, “position”: “打野” }, { “label”: “韩信”, “value”: “hanxin”, “position”: “打野” }, { “label”: “云中君”, “value”: “yunzhongjun”, “position”: “打野” } ] } ] }

  2. ### 树形模式
  4. ```schema: scope="body"
  5. {
  6.   "type": "form",
  7.   "api": "/api/mock2/form/saveForm",
  8.   "body": [
  9.     {
  10.       "label": "树型展示",
  11.       "type": "transfer",
  12.       "name": "transfer4",
  13.       "selectMode": "tree",
  14.       "searchable": true,
  15.       "options": [
  16.         {
  17.           "label": "法师",
  18.           "children": [
  19.             {
  20.               "label": "诸葛亮",
  21.               "value": "zhugeliang"
  22.             }
  23.           ]
  24.         },
  25.         {
  26.           "label": "战士",
  27.           "children": [
  28.             {
  29.               "label": "曹操",
  30.               "value": "caocao"
  31.             },
  32.             {
  33.               "label": "钟无艳",
  34.               "value": "zhongwuyan"
  35.             }
  36.           ]
  37.         },
  38.         {
  39.           "label": "打野",
  40.           "children": [
  41.             {
  42.               "label": "李白",
  43.               "value": "libai"
  44.             },
  45.             {
  46.               "label": "韩信",
  47.               "value": "hanxin"
  48.             },
  49.             {
  50.               "label": "云中君",
  51.               "value": "yunzhongjun"
  52.             }
  53.           ]
  54.         }
  55.       ]
  56.     }
  57.   ]
  58. }

级联选择

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “label”: “级联选择”, “type”: “transfer”, “name”: “transfer5”, “selectMode”: “chained”, “options”: [ { “label”: “法师”, “children”: [ { “label”: “诸葛亮”, “value”: “zhugeliang” } ] }, { “label”: “战士”, “children”: [ { “label”: “曹操”, “value”: “caocao” }, { “label”: “钟无艳”, “value”: “zhongwuyan” } ] }, { “label”: “打野”, “children”: [ { “label”: “李白”, “value”: “libai” }, { “label”: “韩信”, “value”: “hanxin” }, { “label”: “云中君”, “value”: “yunzhongjun” } ] } ] } ] }

  2. ### 关联选择模式
  4. ```schema: scope="body"
  5. {
  6.   "type": "form",
  7.   "api": "/api/mock2/form/saveForm",
  8.   "body": [
  9.     {
  10.       "label": "关联选择模式",
  11.       "type": "transfer",
  12.       "name": "b",
  13.       "sortable": true,
  14.       "searchable": true,
  15.       "deferApi": "/api/mock2/form/deferOptions?label=${label}",
  16.       "selectMode": "associated",
  17.       "leftMode": "tree",
  18.       "leftOptions": [
  19.         {
  20.           "label": "法师",
  21.           "children": [
  22.             {
  23.               "label": "诸葛亮",
  24.               "value": "zhugeliang"
  25.             }
  26.           ]
  27.         },
  28.         {
  29.           "label": "战士",
  30.           "children": [
  31.             {
  32.               "label": "曹操",
  33.               "value": "caocao"
  34.             },
  35.             {
  36.               "label": "钟无艳",
  37.               "value": "zhongwuyan"
  38.             }
  39.           ]
  40.         },
  41.         {
  42.           "label": "打野",
  43.           "children": [
  44.             {
  45.               "label": "李白",
  46.               "value": "libai"
  47.             },
  48.             {
  49.               "label": "韩信",
  50.               "value": "hanxin"
  51.             },
  52.             {
  53.               "label": "云中君",
  54.               "value": "yunzhongjun"
  55.             }
  56.           ]
  57.         }
  58.       ],
  59.       "options": [
  60.         {
  61.           "ref": "zhugeliang",
  62.           "children": [
  63.             {
  64.               "label": "A",
  65.               "value": "a"
  66.             }
  67.           ]
  68.         },
  69.         {
  70.           "ref": "caocao",
  71.           "children": [
  72.             {
  73.               "label": "B",
  74.               "value": "b"
  75.             },
  77.             {
  78.               "label": "C",
  79.               "value": "c"
  80.             }
  81.           ]
  82.         },
  83.         {
  84.           "ref": "zhongwuyan",
  85.           "children": [
  86.             {
  87.               "label": "D",
  88.               "value": "d"
  89.             },
  91.             {
  92.               "label": "E",
  93.               "value": "e"
  94.             }
  95.           ]
  96.         },
  97.         {
  98.           "ref": "libai",
  99.           "defer": true
  100.         },
  101.         {
  102.           "ref": "hanxin",
  103.           "defer": true
  104.         },
  105.         {
  106.           "ref": "yunzhongjun",
  107.           "defer": true
  108.         }
  109.       ]
  110.     }
  111.   ]
  112. }

leftOptions 动态加载，默认 source 接口是返回 options 部分，而 leftOptions 是没有对应的接口可以动态返回了。为了方便，目前如果 source 接口返回的选中中，第一个 option 是以下这种格式则也会把 options[0].leftOptions 当成 leftOptions, options[0].children 当 options。同时 options[0].leftDefaultValue 可以用来配置左侧选项的默认值。

  1. {
  2.     status: 0,
  3.     msg: '',
  4.     data: {
  5.         options: [
  6.             {
  7.                 leftOptions: [],
  8.                 children: [],
  9.                 leftDefaultValue: ''
  10.             }
  11.         ]
  12.     }
  13. }

延时加载

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “label”: “延时加载”, “type”: “transfer”, “name”: “transfer7”, “selectMode”: “tree”, “deferApi”: “/api/mock2/form/deferOptions?label=${label}&waitSeconds=2”, “options”: [ { “label”: “法师”, “children”: [ { “label”: “诸葛亮”, “value”: “zhugeliang” } ] }, { “label”: “战士”, “defer”: true }, { “label”: “打野”, “children”: [ { “label”: “李白”, “value”: “libai” }, { “label”: “韩信”, “value”: “hanxin” }, { “label”: “云中君”, “value”: “yunzhongjun” } ] } ] } ] }

  2. ### 支持搜索
  4. #### 左侧搜索功能
  6. 通过 `searchable` 字段来控制左侧选项栏的搜索功能。
  8. 在不设置 `searchApi` 情况下，对输入框内容和对应列表项的 value、label 进行匹配，匹配成功就会左侧面板中显示。
  10. ```schema: scope="body"
  11. {
  12.   "type": "form",
  13.   "api": "/api/mock2/form/saveForm",
  14.   "body": [
  15.     {
  16.       "label": "带搜索",
  17.       "type": "transfer",
  18.       "name": "transfer6",
  19.       "selectMode": "chained",
  20.       "searchable": true,
  21.       "sortable": true,
  22.       "options": [
  23.         {
  24.           "label": "法师",
  25.           "children": [
  26.             {
  27.               "label": "诸葛亮",
  28.               "value": "zhugeliang"
  29.             }
  30.           ]
  31.         },
  32.         {
  33.           "label": "战士",
  34.           "children": [
  35.             {
  36.               "label": "曹操",
  37.               "value": "caocao"
  38.             },
  39.             {
  40.               "label": "钟无艳",
  41.               "value": "zhongwuyan"
  42.             }
  43.           ]
  44.         },
  45.         {
  46.           "label": "打野",
  47.           "children": [
  48.             {
  49.               "label": "李白",
  50.               "value": "libai"
  51.             },
  52.             {
  53.               "label": "韩信",
  54.               "value": "hanxin"
  55.             },
  56.             {
  57.               "label": "云中君",
  58.               "value": "yunzhongjun"
  59.             }
  60.           ]
  61.         }
  62.       ]
  63.     }
  64.   ]
  65. }

右侧结果搜索功能

右侧结果搜索是通过resultSearchable字段开启，设置该字段为 true 时开启。

开启结果搜索后，目前默认通过 value、label 对输入内容进行模糊匹配。

目前树的延时加载不支持结果搜索功能。

```schema: scope=”body” { “type”: “page”, “body”: { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “label”: “树型展示”, “type”: “transfer”, “name”: “transfer4”, “selectMode”: “tree”, “searchable”: true, “resultListModeFollowSelect”: true, “resultSearchable”: true, “options”: [ { “label”: “法师”, “children”: [ { “label”: “诸葛亮”, “value”: “zhugeliang” } ] }, { “label”: “战士”, “children”: [ { “label”: “曹操”, “value”: “caocao” }, { “label”: “钟无艳”, “value”: “zhongwuyan” } ] }, { “label”: “打野”, “children”: [ { “label”: “李白”, “value”: “libai” }, { “label”: “韩信”, “value”: “hanxin” }, { “label”: “云中君”, “value”: “yunzhongjun” } ] } ] } ] } }

  2. #### searchApi
  4. 设置这个 api，可以实现左侧选项搜索结果的检索。
  6. ##### 发送
  8. 默认 GET，携带 term 变量，值为搜索框输入的文字，可从上下文中取数据设置进去。
  10. ##### 响应
  12. 格式要求如下：
  14. ```json
  15. {
  16.   "status": 0,
  17.   "msg": "",
  18.   "data": {
  19.     "options": [
  20.       {
  21.         "label": "描述",
  22.         "value": "值" // ,
  23.         // "children": [] // 可以嵌套
  24.       },
  26.       {
  27.         "label": "描述2",
  28.         "value": "值2"
  29.       }
  30.     ],
  32.     "value": "值" // 默认值，可以获取列表的同时设置默认值。
  33.   }
  34. }

适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景，一般左侧框为数据/信息源，右侧为已选数据/信息，被选中信息同时存在于 2 个框内。

结果面板跟随模式

resultListModeFollowSelect 开启结果面板跟随模式。

表格跟随模式

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “label”: “表格形式”, “type”: “transfer”, “name”: “transfer”, “selectMode”: “table”, “resultListModeFollowSelect”: true, “columns”: [ { “name”: “label”, “label”: “英雄” }, { “name”: “position”, “label”: “位置” } ], “options”: [ { “label”: “诸葛亮”, “value”: “zhugeliang”, “position”: “中单” }, { “label”: “曹操”, “value”: “caocao”, “position”: “上单” }, { “label”: “钟无艳”, “value”: “zhongwuyan”, “position”: “上单” }, { “label”: “李白”, “value”: “libai”, “position”: “打野” }, { “label”: “韩信”, “value”: “hanxin”, “position”: “打野” }, { “label”: “云中君”, “value”: “yunzhongjun”, “position”: “打野” } ] } ] }

  2. #### 树形跟随模式
  4. ```schema: scope="body"
  5. {
  6.   "type": "page",
  7.   "body": {
  8.     "type": "form",
  9.     "api": "/api/mock2/form/saveForm",
  10.     "body": [
  11.       {
  12.         "label": "树型展示",
  13.         "type": "transfer",
  14.         "name": "transfer4",
  15.         "selectMode": "tree",
  16.         "searchable": true,
  17.         "resultListModeFollowSelect": true,
  18.         "options": [
  19.           {
  20.             "label": "法师",
  21.             "children": [
  22.               {
  23.                 "label": "诸葛亮",
  24.                 "value": "zhugeliang"
  25.               }
  26.             ]
  27.           },
  28.           {
  29.             "label": "战士",
  30.             "children": [
  31.               {
  32.                 "label": "曹操",
  33.                 "value": "caocao"
  34.               },
  35.               {
  36.                 "label": "钟无艳",
  37.                 "value": "zhongwuyan"
  38.               }
  39.             ]
  40.           },
  41.           {
  42.             "label": "打野",
  43.             "children": [
  44.               {
  45.                 "label": "李白",
  46.                 "value": "libai"
  47.               },
  48.               {
  49.                 "label": "韩信",
  50.                 "value": "hanxin"
  51.               },
  52.               {
  53.                 "label": "云中君",
  54.                 "value": "yunzhongjun"
  55.               }
  56.             ]
  57.           }
  58.         ]
  59.       }
  60.     ]
  61.   }
  62. }

自定义选项展示

schema: scope="body" { "type": "form", "body": [ { "label": "默认", "type": "transfer", "name": "transfer", "menuTpl": "<div class='flex justify-between'><span>${label}</span><span class='text-muted m-r text-sm'>${tag}</span></div>", "valueTpl": "${label}(${value})", "options": [ { "label": "诸葛亮", "value": "zhugeliang", "tag": "法师", }, { "label": "曹操", "value": "caocao", "tag": "战士", }, { "label": "钟无艳", "value": "zhongwuyan", "tag": "战士", }, { "label": "李白", "value": "libai", "tag": "打野" }, { "label": "韩信", "value": "hanxin", "tag": "打野" }, { "label": "云中君", "value": "yunzhongjun", "tag": "打野" } ] } ] }

属性表

除了支持 普通表单项属性表 中的配置以外，还支持下面一些配置

属性名 类型 默认值 说明
options Array<object>或Array<string> 选项组
source string或 API 动态选项组
delimeter string false 拼接符
joinValues boolean true 拼接值
extractValue boolean false 提取值
searchApi API 如果想通过接口检索，可以设置这个 api。
resultListModeFollowSelect boolean false 结果面板跟随模式，目前只支持list、table、tree（tree 目前只支持非延时加载的tree）
statistics boolean true 是否显示统计数据
selectTitle string "请选择" 左侧的标题文字
resultTitle string "当前选择" 右侧结果的标题文字
sortable boolean false 结果可以进行拖拽排序（结果列表为树时，不支持排序）
selectMode string list 可选：list、table、tree、chained、associated。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。
searchResultMode string 如果不设置将采用 selectMode 的值，可以单独配置，参考 selectMode，决定搜索结果的展示形式。
searchable boolean false 左侧列表搜索功能，当设置为 true 时表示可以通过输入部分内容检索出选项项。
searchPlaceholder string 左侧列表搜索框提示
columns Array<Object> 当展示形式为 table 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。
leftOptions Array<Object> 当展示形式为 associated 时用来配置左边的选项集。
leftMode string 当展示形式为 associated 时用来配置左边的选择形式，支持 list 或者 tree。默认为 list。
rightMode string 当展示形式为 associated 时用来配置右边的选择形式，可选：list、table、tree、chained。
resultSearchable boolean false 结果（右则）列表的检索功能，当设置为 true 时，可以通过输入检索模糊匹配检索内容（目前树的延时加载不支持结果搜索功能）
resultSearchPlaceholder string 右侧列表搜索框提示
menuTpl string \ SchemaNode 用来自定义选项展示
valueTpl string \ SchemaNode 用来自定义值的展示

事件表

当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过event.data.xxx事件参数变量来获取事件产生的数据，详细请查看事件动作。

事件名称 事件参数 说明
change event.data.value: string 选中值 选中值变化时触发

动作表

当前组件对外暴露以下特性动作，其他组件可以通过指定actionType: 动作名称、componentId: 该组件id来触发这些动作，动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数，详细请查看事件动作。

动作名称 动作配置 说明
clear - 清空
reset - 将值重置为resetValue，若没有配置resetValue，则清空
selectAll - 全选
setValue value: string 更新的值 更新数据，多值用,分隔