fix: 树组件图标设置

Change-Id: Iba20e23d4fde5550629a7453a3798ef796ca7cc7

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

@@ -332,14 +332,7 @@ export class TreeControlPlugin extends BasePlugin {
             body: [
               getSchemaTpl('treeOptionControl', {
                 label: '数据',
-                otherApiFooter: [
+                showIconField: true
-                  {
-                    type: 'input-text',
-                    label: '图标字段',
-                    name: 'iconField',
-                    value: 'icon'
-                  }
-                ]
               }),
               getSchemaTpl('switch', {
                 label: '只可选择叶子节点',

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

@@ -338,14 +338,7 @@ export class TreeSelectControlPlugin extends BasePlugin {
             body: [
               getSchemaTpl('treeOptionControl', {
                 label: '数据',
-                otherApiFooter: [
+                showIconField: true
-                  {
-                    type: 'input-text',
-                    label: '图标字段',
-                    name: 'iconField',
-                    value: 'icon'
-                  }
-                ]
               }),
               getSchemaTpl('switch', {
                 label: '只可选择叶子节点',

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,
+      api: source,
-      labelField: props.data.labelField,
+      labelField: labelField,
-      valueField: props.data.valueField,
+      valueField: valueField,
-      source: props.data.source ? 'api' : 'custom',
+      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 {render, showIconField = false} = this.props;
-    const {source, api, labelField, valueField} = this.state;
+    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
+          }
         ]
       })
     );