fix: 组合穿梭器 可检索功能无效问题 & 配置面板调整

packages/amis-editor/src/plugin/Form/TabsTransfer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {EditorNodeType, getSchemaTpl} from 'amis-editor-core';
+import {EditorNodeType, getSchemaTpl, tipedLabel} from 'amis-editor-core';
 import {registerEditorPlugin} from 'amis-editor-core';
 import {BasePlugin, BaseEventContext} from 'amis-editor-core';
 
@@ -24,16 +24,15 @@ export class TabsTransferPlugin extends BasePlugin {
   scaffold = {
     label: '组合穿梭器',
     type: 'tabs-transfer',
-    name: 'a',
-    sortable: true,
-    searchable: true,
+    name: 'tabsTransfer',
+    selectMode: 'tree',
     options: [
       {
         label: '成员',
-        selectMode: 'tree',
         children: [
           {
             label: '法师',
+            value: 'fashi',
             children: [
               {
                 label: '诸葛亮',
@@ -43,6 +42,7 @@ export class TabsTransferPlugin extends BasePlugin {
           },
           {
             label: '战士',
+            value: 'zhanshi',
             children: [
               {
                 label: '曹操',
@@ -56,6 +56,7 @@ export class TabsTransferPlugin extends BasePlugin {
           },
           {
             label: '打野',
+            value: 'daye',
             children: [
               {
                 label: '李白',
@@ -75,10 +76,10 @@ export class TabsTransferPlugin extends BasePlugin {
       },
       {
         label: '用户',
-        selectMode: 'chained',
         children: [
           {
             label: '法师',
+            value: 'fashi',
             children: [
               {
                 label: '诸葛亮',
@@ -88,6 +89,7 @@ export class TabsTransferPlugin extends BasePlugin {
           },
           {
             label: '战士',
+            value: 'zhanshi',
             children: [
               {
                 label: '曹操',
@@ -101,6 +103,7 @@ export class TabsTransferPlugin extends BasePlugin {
           },
           {
             label: '打野',
+            value: 'daye',
             children: [
               {
                 label: '李白',
@@ -280,19 +283,11 @@ export class TabsTransferPlugin extends BasePlugin {
                 required: true
               }),
               getSchemaTpl('label'),
-
-              getSchemaTpl('searchable'),
-
-              getSchemaTpl('api', {
-                label: '检索接口',
-                name: 'searchApi'
-              }),
-
               {
-                label: '查询时勾选展示模式',
-                name: 'searchResultMode',
+                label: '左侧选项展示',
+                name: 'selectMode',
                 type: 'select',
-                mode: 'normal',
+                value: 'tree',
                 options: [
                   {
                     label: '列表形式',
@@ -312,22 +307,33 @@ export class TabsTransferPlugin extends BasePlugin {
                   }
                 ]
               },
-
-              getSchemaTpl('sortable'),
-
-              {
-                label: '左侧选项标题',
-                name: 'selectTitle',
-                type: 'input-text',
-                inputClassName: 'is-inline '
-              },
-
               {
                 label: '右侧结果标题',
                 name: 'resultTitle',
                 type: 'input-text',
-                inputClassName: 'is-inline '
-              }
+                inputClassName: 'is-inline ',
+                placeholder: '已选项'
+              },
+              getSchemaTpl('sortable'),
+              getSchemaTpl('searchable', {
+                onChange: (value: any, origin: any, item: any, form: any) => {
+                  if (!value) {
+                    form.setValues({
+                      searchApi: undefined
+                    });
+                  }
+                }
+              }),
+
+              getSchemaTpl('apiControl', {
+                label: tipedLabel(
+                  '检索接口',
+                  '可以通过接口获取检索结果，检索值可以通过变量\\${term}获取，如："https://xxx/search?name=\\${term}"'
+                ),
+                mode: 'normal',
+                name: 'searchApi',
+                visibleOn: '!!searchable'
+              })
             ]
           },
           {
@@ -337,7 +343,14 @@ export class TabsTransferPlugin extends BasePlugin {
                 $ref: 'options',
                 name: 'options'
               },
-              getSchemaTpl('source'),
+              getSchemaTpl('apiControl', {
+                label: tipedLabel(
+                  '获取选项接口',
+                  '可以通过接口获取动态选项，一次拉取全部'
+                ),
+                mode: 'normal',
+                name: 'source'
+              }),
               getSchemaTpl(
                 'loadingConfig',
                 {
@@ -347,15 +360,11 @@ export class TabsTransferPlugin extends BasePlugin {
               ),
               getSchemaTpl('joinValues'),
               getSchemaTpl('delimiter'),
-              getSchemaTpl('extractValue'),
-              getSchemaTpl('autoFillApi', {
-                visibleOn:
-                  '!this.autoFill || this.autoFill.scene && this.autoFill.action'
-              }),
-              getSchemaTpl('autoFill', {
-                visibleOn:
-                  '!this.autoFill || !this.autoFill.scene && !this.autoFill.action'
-              })
+              getSchemaTpl('extractValue')
+              // getSchemaTpl('autoFillApi', {
+              //   visibleOn:
+              //     '!this.autoFill || this.autoFill.scene && this.autoFill.action'
+              // })
             ]
           },
           {

packages/amis-editor/src/tpl/common.tsx

@@ -1017,18 +1017,21 @@ setSchemaTpl('borderMode', {
   pipeIn: defaultValue('full')
 });
 
-setSchemaTpl('searchable', () =>
+setSchemaTpl('searchable', (schema: object = {}) =>
   getSchemaTpl('switch', {
     label: '可检索',
-    name: 'searchable'
+    name: 'searchable',
+    ...schema
   })
 );
 
-setSchemaTpl('sortable', {
-  type: 'switch',
-  label: '可排序',
-  name: 'sortable'
-});
+setSchemaTpl('sortable', (schema: object = {}) =>
+  getSchemaTpl('switch', {
+    label: '可排序',
+    name: 'sortable',
+    ...schema
+  })
+);
 
 setSchemaTpl('onlyLeaf', {
   type: 'switch',

packages/amis-ui/src/components/TabsTransfer.tsx

@@ -52,6 +52,8 @@ export interface TabsTransferProps
   activeKey: number;
   onlyChildren?: boolean;
   ctx?: Record<string, any>;
+  selectMode?: 'table' | 'list' | 'tree' | 'chained' | 'associated';
+  searchable?: boolean;
 }
 
 export interface TabsTransferState {
@@ -167,12 +169,13 @@ export class TabsTransfer extends React.Component<
       itemHeight,
       virtualThreshold,
       onlyChildren,
+      selectMode,
       loadingConfig,
       valueField = 'value',
       labelField = 'label'
     } = this.props;
     const options = searchResult || [];
-    const mode = searchResultMode;
+    const mode = searchResultMode || selectMode; // 没有配置时默认和左侧选项展示形式一致
 
     return mode === 'table' ? (
       <TableCheckboxes
@@ -268,7 +271,8 @@ export class TabsTransfer extends React.Component<
       classnames: cx,
       translate: __,
       ctx,
-      mobileUI
+      mobileUI,
+      searchable
     } = this.props;
     const showOptions = options.filter(item => item.visible !== false);
 
@@ -297,7 +301,7 @@ export class TabsTransfer extends React.Component<
             )}
             className="TabsTransfer-tab"
           >
-            {option.searchable ? (
+            {option.searchable || searchable ? (
               <div
                 className={cx('TabsTransfer-search', {'is-mobile': mobileUI})}
               >
@@ -348,8 +352,9 @@ export class TabsTransfer extends React.Component<
       valueField = 'value',
       labelField = 'label'
     } = this.props;
+    const selectMode = option.selectMode || this.props.selectMode;
 
-    return option.selectMode === 'table' ? (
+    return selectMode === 'table' ? (
       <TableCheckboxes
         className={cx('Transfer-checkboxes')}
         columns={option.columns as any}
@@ -366,7 +371,7 @@ export class TabsTransfer extends React.Component<
         valueField={valueField}
         labelField={labelField}
       />
-    ) : option.selectMode === 'tree' ? (
+    ) : selectMode === 'tree' ? (
       <Tree
         loadingConfig={loadingConfig}
         className={cx('Transfer-checkboxes')}
@@ -395,7 +400,7 @@ export class TabsTransfer extends React.Component<
         valueField={valueField}
         labelField={labelField}
       />
-    ) : option.selectMode === 'chained' ? (
+    ) : selectMode === 'chained' ? (
       <ChainedCheckboxes
         className={cx('Transfer-checkboxes')}
         options={option.children || []}
@@ -420,7 +425,7 @@ export class TabsTransfer extends React.Component<
         valueField={valueField}
         labelField={labelField}
       />
-    ) : option.selectMode === 'associated' ? (
+    ) : selectMode === 'associated' ? (
       <AssociatedCheckboxes
         className={cx('Transfer-checkboxes')}
         options={option.children || []}

packages/amis/src/renderers/Form/TabsTransfer.tsx

@@ -289,6 +289,8 @@ export class TabsTransferRenderer extends BaseTabsTransferRenderer<TabsTransferP
       sortable,
       loading,
       searchResultMode,
+      selectMode,
+      searchable,
       showArrow,
       deferLoad,
       leftDeferLoad,
@@ -325,6 +327,8 @@ export class TabsTransferRenderer extends BaseTabsTransferRenderer<TabsTransferP
           onLeftDeferLoad={leftDeferLoad}
           selectTitle={selectTitle}
           resultTitle={resultTitle}
+          selectMode={selectMode}
+          searchable={searchable}
           optionItemRender={menuTpl ? this.optionItemRender : undefined}
           resultItemRender={valueTpl ? this.resultItemRender : undefined}
           onTabChange={this.onTabChange}