pref: 树组件优化问题修复

baidu · Nov 6, 2023 · 0bc7fed · 0bc7fed
1 parent 440a984
commit 0bc7fed
Show file tree

Hide file tree

Showing 14 changed files with 38 additions and 14 deletions.
diff --git a/docs/zh-CN/components/form/input-tree.md b/docs/zh-CN/components/form/input-tree.md
@@ -1080,7 +1080,7 @@ true        false        false      [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
 }
 ```
 
-适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景。
+适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景。未配置 searchApi 是前端检索，配置之后就只能通过后端检索。
 
 ## 属性表
 

diff --git a/packages/amis-core/src/renderers/Options.tsx b/packages/amis-core/src/renderers/Options.tsx
@@ -1075,7 +1075,7 @@ export function registerOptionsControl(config: OptionsConfig) {
       }
 
       // 如果是懒加载的，只懒加载当前节点。
-      if (parent.hasOwnProperty(deferField) && parent[deferField]) {
+      if (parent && parent.hasOwnProperty(deferField) && parent[deferField]) {
         await this.deferLoad(parent);
       } else if (source && addApi) {
         // 如果配置了 source 且配置了 addApi 直接重新拉取接口就够了

diff --git a/packages/amis-editor/src/plugin/Form/InputTree.tsx b/packages/amis-editor/src/plugin/Form/InputTree.tsx
@@ -261,6 +261,7 @@ export class TreeControlPlugin extends BasePlugin {
             required: true,
             draggable: false,
             valueType: 'ae-formulaControl',
+            keyPlaceholder: 'Option中属性的Key',
             value: {
               label: '',
               value: ''
@@ -274,7 +275,7 @@ export class TreeControlPlugin extends BasePlugin {
             size: 'lg',
             variables: '${variables}',
             inputMode: 'input-group',
-            placeholder: '请输入父级数据项的值，为空则在头部插入'
+            placeholder: '请输入父级数据项 valueField 的值'
           })
         ]
       })
@@ -297,6 +298,7 @@ export class TreeControlPlugin extends BasePlugin {
             required: true,
             draggable: false,
             valueType: 'ae-formulaControl',
+            keyPlaceholder: 'Option中属性的Key',
             value: {
               label: '',
               value: ''
@@ -311,7 +313,7 @@ export class TreeControlPlugin extends BasePlugin {
             size: 'lg',
             variables: '${variables}',
             inputMode: 'input-group',
-            placeholder: '请输入数据项编辑前的值'
+            placeholder: '请输入数据项编辑前 valueField 的值'
           })
         ]
       })
@@ -330,7 +332,8 @@ export class TreeControlPlugin extends BasePlugin {
           required: true,
           size: 'lg',
           variables: '${variables}',
-          inputMode: 'input-group'
+          inputMode: 'input-group',
+          placeholder: '请输入删除项 valueField 的值'
         })
       ])
     },

diff --git a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx
@@ -260,6 +260,7 @@ export class TreeSelectControlPlugin extends BasePlugin {
             required: true,
             draggable: false,
             valueType: 'ae-formulaControl',
+            keyPlaceholder: 'Option中属性的Key',
             value: {
               label: '',
               value: ''
@@ -273,7 +274,7 @@ export class TreeSelectControlPlugin extends BasePlugin {
             size: 'lg',
             variables: '${variables}',
             inputMode: 'input-group',
-            placeholder: '请输入父级数据项的值，为空则在头部插入'
+            placeholder: '请输入父级数据项 valueField 的值'
           })
         ]
       })
@@ -296,6 +297,7 @@ export class TreeSelectControlPlugin extends BasePlugin {
             required: true,
             draggable: false,
             valueType: 'ae-formulaControl',
+            keyPlaceholder: 'Option中属性的Key',
             value: {
               label: '',
               value: ''
@@ -310,7 +312,7 @@ export class TreeSelectControlPlugin extends BasePlugin {
             size: 'lg',
             variables: '${variables}',
             inputMode: 'input-group',
-            placeholder: '请输入数据项编辑前的值'
+            placeholder: '请输入数据项编辑前 valueField 的值'
           })
         ]
       })
@@ -329,7 +331,8 @@ export class TreeSelectControlPlugin extends BasePlugin {
           required: true,
           size: 'lg',
           variables: '${variables}',
-          inputMode: 'input-group'
+          inputMode: 'input-group',
+          placeholder: '请输入删除项 valueField 的值'
         })
       ])
     },

diff --git a/packages/amis-editor/src/tpl/common.tsx b/packages/amis-editor/src/tpl/common.tsx
@@ -1734,5 +1734,5 @@ setSchemaTpl('deferField', {
   label: '懒加载字段',
   name: 'deferField',
   type: 'input-text',
-  placeholder: '懒加载对应的字段'
+  placeholder: '自定义开启懒加载的字段'
 });
diff --git a/packages/amis-ui/src/components/TabsTransfer.tsx b/packages/amis-ui/src/components/TabsTransfer.tsx
@@ -67,7 +67,8 @@ export class TabsTransfer extends React.Component<
 > {
   static defaultProps = {
     multiple: true,
-    onlyChildren: true
+    onlyChildren: true,
+    deferField: 'defer'
   };
 
   state = {

diff --git a/packages/amis-ui/src/locale/de-DE.ts b/packages/amis-ui/src/locale/de-DE.ts
@@ -265,6 +265,7 @@ register('de-DE', {
   'Tree.addChild': 'Untergeordnetes Element hinzufügen',
   'Tree.addRoot': 'Stammknoten hinzufügen',
   'Tree.editNode': 'Diesen Knoten bearbeiten',
+  'Tree.invalidArray': '"data" muss ein Array sein',
   'Tree.removeNode': 'Diesen Knoten entfernen',
   'Tree.root': 'Stamm',
   'validate.equals': 'Wert muss $1 sein',

diff --git a/packages/amis-ui/src/locale/en-US.ts b/packages/amis-ui/src/locale/en-US.ts
@@ -257,6 +257,7 @@ register('en-US', {
   'Tree.addChild': 'Add child',
   'Tree.addRoot': 'Add root node',
   'Tree.editNode': 'Edit this node',
+  'Tree.invalidArray': 'data must be an array',
   'Tree.removeNode': 'Remove this node',
   'Tree.root': 'Root',
   'validate.equals': 'value must be $1',

diff --git a/packages/amis-ui/src/locale/zh-CN.ts b/packages/amis-ui/src/locale/zh-CN.ts
@@ -260,6 +260,7 @@ register('zh-CN', {
   'Tree.addChild': '添加子节点',
   'Tree.addRoot': '添加一级节点',
   'Tree.editNode': '编辑该节点',
+  'Tree.invalidArray': 'data 必须是数组',
   'Tree.removeNode': '移除该节点',
   'Tree.root': '顶级',
   'validate.equals': '输入的数据与 $1 不一致',

diff --git a/packages/amis/src/renderers/Form/InputTree.tsx b/packages/amis/src/renderers/Form/InputTree.tsx
@@ -366,7 +366,7 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
         const result =
           payload.data.options || payload.data.items || payload.data;
         if (!Array.isArray(result)) {
-          throw new Error(__('CRUD.invalidArray'));
+          throw new Error(__('Tree.invalidArray'));
         }
 
         filterOptions = result;

diff --git a/packages/amis/src/renderers/Form/TabsTransfer.tsx b/packages/amis/src/renderers/Form/TabsTransfer.tsx
@@ -237,7 +237,8 @@ export class BaseTabsTransferRenderer<
 })
 export class TabsTransferRenderer extends BaseTabsTransferRenderer<TabsTransferProps> {
   static defaultProps = {
-    multiple: true
+    multiple: true,
+    deferField: 'defer'
   };
 
   @autobind

diff --git a/packages/amis/src/renderers/Form/TabsTransferPicker.tsx b/packages/amis/src/renderers/Form/TabsTransferPicker.tsx
@@ -108,6 +108,7 @@ export class TabsTransferPickerRenderer extends BaseTabsTransferRenderer<TabsTra
       loadingConfig,
       labelField = 'label',
       valueField = 'value',
+      deferField = 'defer',
       mobileUI,
       env,
       maxTagCount,
@@ -144,6 +145,7 @@ export class TabsTransferPickerRenderer extends BaseTabsTransferRenderer<TabsTra
           virtualThreshold={virtualThreshold}
           labelField={labelField}
           valueField={valueField}
+          deferField={deferField}
           mobileUI={mobileUI}
           popOverContainer={env?.getModalContainer}
           maxTagCount={maxTagCount}

diff --git a/packages/amis/src/renderers/Form/TransferPicker.tsx b/packages/amis/src/renderers/Form/TransferPicker.tsx
@@ -87,6 +87,7 @@ export class TransferPickerRenderer extends BaseTransferRenderer<TabsTransferPro
       loadingConfig,
       labelField = 'label',
       valueField = 'value',
+      deferField = 'defer',
       menuTpl,
       valueTpl,
       mobileUI,
@@ -138,6 +139,7 @@ export class TransferPickerRenderer extends BaseTransferRenderer<TabsTransferPro
           onBlur={() => this.dispatchEvent('blur')}
           labelField={labelField}
           valueField={valueField}
+          deferField={deferField}
           itemHeight={
             toNumber(itemHeight) > 0 ? toNumber(itemHeight) : undefined
           }

diff --git a/packages/amis/src/renderers/Form/TreeSelect.tsx b/packages/amis/src/renderers/Form/TreeSelect.tsx
@@ -562,11 +562,20 @@ export default class TreeSelectControl extends React.Component<
 
   @autobind
   async resultChangeEvent(value: any) {
-    const {onChange, options, dispatchEvent, data} = this.props;
+    const {onChange, options, dispatchEvent, searchable, autoComplete} =
+      this.props;
+
+    let filtedOptions =
+      !isEffectiveApi(autoComplete) && searchable && this.state.inputValue
+        ? this.filterOptions(options, this.state.inputValue)
+        : options;
 
     const rendererEvent = await dispatchEvent(
       'change',
-      resolveEventData(this.props, {value, items: options})
+      resolveEventData(this.props, {
+        value,
+        items: filtedOptions
+      })
     );
 
     if (rendererEvent?.prevented) {