From e61da0af23333e51367a74ee02a3c723c1a25160 Mon Sep 17 00:00:00 2001
From: jiatianqi <jiatianqi@baidu.com>
Date: Wed, 17 Aug 2022 16:31:22 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A0=91=E7=BB=84=E4=BB=B6=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change-Id: Iba20e23d4fde5550629a7453a3798ef796ca7cc7
---
 .../amis-editor/src/plugin/Form/InputTree.tsx |  9 +----
 .../src/plugin/Form/TreeSelect.tsx            |  9 +----
 .../src/renderer/TreeOptionControl.tsx        | 39 +++++++++++++------
 3 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/packages/amis-editor/src/plugin/Form/InputTree.tsx b/packages/amis-editor/src/plugin/Form/InputTree.tsx
index 06ee9e9d2..96cf2da39 100644
--- a/packages/amis-editor/src/plugin/Form/InputTree.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputTree.tsx
@@ -332,14 +332,7 @@ export class TreeControlPlugin extends BasePlugin {
             body: [
               getSchemaTpl('treeOptionControl', {
                 label: '数据',
-                otherApiFooter: [
-                  {
-                    type: 'input-text',
-                    label: '图标字段',
-                    name: 'iconField',
-                    value: 'icon'
-                  }
-                ]
+                showIconField: true
               }),
               getSchemaTpl('switch', {
                 label: '只可选择叶子节点',
diff --git a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx
index 85005735c..1936e88a1 100644
--- a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx
+++ b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx
@@ -338,14 +338,7 @@ export class TreeSelectControlPlugin extends BasePlugin {
             body: [
               getSchemaTpl('treeOptionControl', {
                 label: '数据',
-                otherApiFooter: [
-                  {
-                    type: 'input-text',
-                    label: '图标字段',
-                    name: 'iconField',
-                    value: 'icon'
-                  }
-                ]
+                showIconField: true
               }),
               getSchemaTpl('switch', {
                 label: '只可选择叶子节点',
diff --git a/packages/amis-editor/src/renderer/TreeOptionControl.tsx b/packages/amis-editor/src/renderer/TreeOptionControl.tsx
index 3648b5fdd..1af88d69c 100644
--- a/packages/amis-editor/src/renderer/TreeOptionControl.tsx
+++ b/packages/amis-editor/src/renderer/TreeOptionControl.tsx
@@ -30,7 +30,7 @@ export type OptionControlItem = Option & {checked?: boolean, _key?: string};
 
 export interface OptionControlProps extends FormControlProps {
   className?: string;
-  otherApiFooter?: Array<SchemaObject>
+  showIconField?: boolean // 是否有图标字段
 }
 
 export interface OptionControlState {
@@ -38,6 +38,7 @@ export interface OptionControlState {
   api: SchemaApi;
   labelField: string;
   valueField: string;
+  iconField: string;
   source: 'custom' | 'api';
   modalVisible: boolean
 }
@@ -58,12 +59,14 @@ export default class TreeOptionControl extends React.Component<
 
   constructor(props: OptionControlProps) {
     super(props);
+    const {source, labelField, valueField, showIconField, iconField} = props.data || {};
     this.state = {
       options: this.transformOptions(props),
-      api: props.data.source,
-      labelField: props.data.labelField,
-      valueField: props.data.valueField,
-      source: props.data.source ? 'api' : 'custom',
+      api: source,
+      labelField: labelField,
+      valueField: valueField,
+      iconField: showIconField ? iconField : undefined,
+      source: source ? 'api' : 'custom',
       modalVisible: false
     };
     this.sortables = [];
@@ -103,7 +106,8 @@ export default class TreeOptionControl extends React.Component<
       source: undefined,
       options: undefined,
       labelField: undefined,
-      valueField: undefined
+      valueField: undefined,
+      iconField: undefined
     };
     if (source === 'custom') {
       const options = this.state.options.concat();
@@ -111,10 +115,11 @@ export default class TreeOptionControl extends React.Component<
     }
 
     if (source === 'api') {
-      const {api, labelField, valueField} = this.state;
+      const {api, labelField, valueField, iconField} = this.state;
       data.source = api;
       data.labelField = labelField;
       data.valueField = valueField;
+      data.iconField = iconField;
     }
     onBulkChange && onBulkChange(data);
     return;
@@ -509,13 +514,17 @@ export default class TreeOptionControl extends React.Component<
   }
 
   @autobind
-  handleValueFieldChange(valueField: string) {
+  handleValueFieldChange(valueField: string, ...a:any) {
     this.setState({valueField}, this.onChange);
   }
+  @autobind
+  handleIconFieldChange(iconField: string) {
+    this.setState({iconField}, this.onChange);
+  }
 
   renderApiPanel() {
-    const {render, otherApiFooter = []} = this.props;
-    const {source, api, labelField, valueField} = this.state;
+    const {render, showIconField = false} = this.props;
+    const {source, api, labelField, valueField, iconField} = this.state;
     if (source !== 'api') {
       return null;
     }
@@ -549,7 +558,15 @@ export default class TreeOptionControl extends React.Component<
             placeholder: '值对应的字段',
             onChange: this.handleValueFieldChange
           },
-          ...otherApiFooter
+          {
+            type: 'input-text',
+            label: '图标字段',
+            name: 'iconField',
+            value: iconField,
+            placeholder: '图标对应的字段',
+            visible: showIconField, // 存在此配置可展示图标字段
+            onChange: this.handleIconFieldChange
+          }
         ]
       })
     );