test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 11:07:52 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: 树组件图标设置

Browse Source 
Change-Id: Iba20e23d4fde5550629a7453a3798ef796ca7cc7
This commit is contained in:
jiatianqi 2022-08-17 16:31:22 +08:00
parent e988d3cfcd
commit e61da0af23
3 changed files with 30 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/amis-editor/src/plugin/Form/InputTree.tsx
View File

@ -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: '只可选择叶子节点',

9
packages/amis-editor/src/plugin/Form/TreeSelect.tsx
View File

@ -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: '只可选择叶子节点',

39
packages/amis-editor/src/renderer/TreeOptionControl.tsx
View File

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