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 + 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 + } ] }) );