test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-12 11:55:21 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #6780 from hsm-lv/feat-comp-context

Browse Source 
feat:组件数据支持变量
This commit is contained in:
hsm-lv 2023-05-05 21:07:04 +08:00 committed by GitHub
commit 421fe76900
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 158 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/amis-editor/src/plugin/Form/ListSelect.tsx
View File

@ -118,11 +118,7 @@ export class ListControlPlugin extends BasePlugin {
]
},
option: {
body: [
getSchemaTpl('optionControlV2', {
description: '设置选项后，输入时会下拉这些选项供用户参考。'
})
]
body: [getSchemaTpl('optionControlV2')]
},
status: {}
},

13
packages/amis-editor/src/plugin/Images.tsx
View File

@ -85,14 +85,13 @@ export class ImagesPlugin extends BasePlugin {
}
}
},
{
name: 'source',
type: 'input-text',
label: '关联数据',
description:
'比如：\\${listVar}，用来关联作用域中的已有数据。',
getSchemaTpl('sourceBindControl', {
label: tipedLabel(
'关联数据',
'比如：\\${listVar}，用来关联作用域中的已有数据'
),
visibleOn: 'this.__mode == 1'
},
}),
{
type: 'combo',
name: 'options',

10
packages/amis-editor/src/plugin/List.tsx
View File

@ -90,13 +90,9 @@ export class ListPlugin extends BasePlugin {
},
isCRUDBody
? null
: {
name: 'source',
type: 'input-text',
label: '数据源',
pipeIn: defaultValue('${items}'),
description: '绑定当前环境变量'
},
: getSchemaTpl('sourceBindControl', {
label: '数据源'
}),
{
name: 'placeholder',
pipeIn: defaultValue('没有数据'),

10
packages/amis-editor/src/plugin/Table.tsx
View File

@ -360,13 +360,9 @@ export class TablePlugin extends BasePlugin {
isCRUDBody
? null
: {
name: 'source',
type: 'input-text',
label: '数据源',
pipeIn: defaultValue('${items}'),
description: '绑定当前环境变量'
},
: getSchemaTpl('sourceBindControl', {
label: '数据源'
}),
{
name: 'combineNum',

6
packages/amis-editor/src/plugin/Tabs.tsx
View File

@ -189,13 +189,11 @@ export class TabsPlugin extends BasePlugin {
{
title: '高级',
body: [
getSchemaTpl('expressionFormulaControl', {
evalMode: true,
getSchemaTpl('sourceBindControl', {
label: tipedLabel(
'关联数据',
'根据该数据来动态重复渲染所配置的选项卡'
),
name: 'source'
)
}),
getSchemaTpl('switch', {
name: 'mountOnEnter',

30
packages/amis-editor/src/renderer/MapSourceControl.tsx
View File

@ -12,7 +12,8 @@ import debounce from 'lodash/debounce';
enum MapType {
CUSTOM = 'custom',
API = 'api'
API = 'api',
VARIABLE = 'variable'
}
export interface MapSourceControlProps extends FormControlProps {
@ -38,7 +39,9 @@ export default class MapSourceControl extends React.Component<
let mapType: MapType = MapType.CUSTOM;
if (props.data.hasOwnProperty('source') && props.data.source) {
mapType = MapType.API;
mapType = /\$\{(.*?)\}/g.test(props.data.source)
? MapType.VARIABLE
: MapType.API;
}
this.state = {
@ -86,7 +89,7 @@ export default class MapSourceControl extends React.Component<
return;
}
if (mapType === MapType.API) {
if ([MapType.API, MapType.VARIABLE].includes(mapType)) {
onBulkChange &&
onBulkChange({
source,
@ -127,6 +130,10 @@ export default class MapSourceControl extends React.Component<
{
label: '外部接口',
value: MapType.API
},
{
label: '上下文变量',
value: MapType.VARIABLE
}
] as Array<{
label: string;
@ -387,12 +394,25 @@ export default class MapSourceControl extends React.Component<
render() {
const {mapType} = this.state;
const {className} = this.props;
const {className, render} = this.props;
return (
<div className={cx('ae-OptionControl', className)}>
{this.renderHeader()}
{mapType === MapType.CUSTOM ? this.renderMap() : this.renderApiPanel()}
{mapType === MapType.CUSTOM ? this.renderMap() : null}
{mapType === MapType.API ? this.renderApiPanel() : null}
{mapType === MapType.VARIABLE
? render(
'variable',
getSchemaTpl('sourceBindControl', {
label: false,
className: 'ae-ExtendMore'
}),
{
onChange: this.handleAPIChange
}
)
: null}
</div>
);
}

46
packages/amis-editor/src/renderer/OptionControl.tsx
View File

@ -42,12 +42,14 @@ export interface OptionControlProps extends FormControlProps {
className?: string;
}
export type SourceType = 'custom' | 'api' | 'apicenter' | 'variable';
export interface OptionControlState {
options: Array<OptionControlItem>;
api: SchemaApi;
labelField: string;
valueField: string;
source: 'custom' | 'api' | 'apicenter';
source: SourceType;
}
export default class OptionControl extends React.Component<
@ -64,7 +66,7 @@ export default class OptionControl extends React.Component<
constructor(props: OptionControlProps) {
super(props);
let source: 'custom' | 'api' | 'apicenter' = 'custom';
let source: SourceType = 'custom';
if (props.data.hasOwnProperty('source') && props.data.source) {
const api = props.data.source;
@ -75,7 +77,11 @@ export default class OptionControl extends React.Component<
? api.url || ''
: '';
source = !url.indexOf('api://') ? 'apicenter' : 'api';
source = /\$\{(.*?)\}/g.test(props.data.source)
? 'variable'
: !url.indexOf('api://')
? 'apicenter'
: 'api';
}
this.state = {
@ -250,7 +256,7 @@ export default class OptionControl extends React.Component<
data.value = defaultValue;
}
if (source === 'api' || source === 'apicenter') {
if (source === 'api' || source === 'apicenter' || source === 'variable') {
const {api, labelField, valueField} = this.state;
data.source = api;
data.labelField = labelField || undefined;
@ -337,8 +343,8 @@ export default class OptionControl extends React.Component<
* 切换选项类型
*/
@autobind
handleSourceChange(source: 'custom' | 'api' | 'apicenter') {
this.setState({source: source}, this.onChange);
handleSourceChange(source: SourceType) {
this.setState({api: '', source: source}, this.onChange);
}
/**
@ -478,14 +484,18 @@ export default class OptionControl extends React.Component<
label: '外部接口',
value: 'api'
},
...(hasApiCenter ? [{label: 'API中心', value: 'apicenter'}] : [])
...(hasApiCenter ? [{label: 'API中心', value: 'apicenter'}] : []),
{
label: '上下文变量',
value: 'variable'
}
// {
// label: '表单实体',
// value: 'form'
// }
] as Array<{
label: string;
value: 'custom' | 'api' | 'apicenter';
value: SourceType;
}>
).map(item => ({
...item,
@ -813,9 +823,6 @@ export default class OptionControl extends React.Component<
renderApiPanel() {
const {render} = this.props;
const {source, api, labelField, valueField} = this.state;
if (source === 'custom') {
return null;
}
return render(
'api',
@ -888,7 +895,22 @@ export default class OptionControl extends React.Component<
</div>
) : null}
{this.renderApiPanel()}
{source === 'api' || source === 'apicenter'
? this.renderApiPanel()
: null}
{source === 'variable'
? render(
'variable',
getSchemaTpl('sourceBindControl', {
label: false,
className: 'ae-ExtendMore'
}),
{
onChange: this.handleAPIChange
}
)
: null}
</div>
);
}

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

@ -16,11 +16,13 @@ interface OptionControlProps extends FormControlProps {
className?: string;
}
type SourceType = 'custom' | 'api' | 'form' | 'variable';
interface OptionControlState {
api: SchemaApi;
labelField: string;
valueField: string;
source: 'custom' | 'api' | 'form';
source: SourceType;
}
function BaseOptionControl(Cmpt: React.JSXElementConstructor<any>) {
@ -36,7 +38,11 @@ function BaseOptionControl(Cmpt: React.JSXElementConstructor<any>) {
api: props.data.source,
labelField: props.data.labelField,
valueField: props.data.valueField,
source: props.data.source ? 'api' : 'custom'
source: props.data.source
? /\$\{(.*?)\}/g.test(props.data.source)
? 'variable'
: 'api'
: 'custom'
};
this.handleSourceChange = this.handleSourceChange.bind(this);
@ -60,7 +66,7 @@ function BaseOptionControl(Cmpt: React.JSXElementConstructor<any>) {
valueField: undefined
};
if (source === 'api') {
if (['api', 'variable'].includes(source)) {
const {api, labelField, valueField} = this.state;
data.source = api;
data.labelField = labelField || undefined;
@ -74,8 +80,8 @@ function BaseOptionControl(Cmpt: React.JSXElementConstructor<any>) {
/**
* 切换选项类型
*/
handleSourceChange(source: 'custom' | 'api' | 'form') {
this.setState({source: source}, this.onChange);
handleSourceChange(source: SourceType) {
this.setState({api: '', source: source}, this.onChange);
}
handleAPIChange(source: SchemaApi) {
@ -158,10 +164,14 @@ function BaseOptionControl(Cmpt: React.JSXElementConstructor<any>) {
{
label: '接口获取',
value: 'api'
},
{
label: '上下文变量',
value: 'variable'
}
] as Array<{
label: string;
value: 'custom' | 'api' | 'form';
value: SourceType;
}>
).map(item => ({
...item,
@ -257,7 +267,7 @@ function BaseOptionControl(Cmpt: React.JSXElementConstructor<any>) {
render() {
const {source, api, labelField, valueField} = this.state;
const {className} = this.props;
const {className, render} = this.props;
const cmptProps = {
...this.props,
data: {
@ -274,7 +284,20 @@ function BaseOptionControl(Cmpt: React.JSXElementConstructor<any>) {
{source === 'custom' ? <Cmpt {...cmptProps} /> : null}
{this.renderApiPanel()}
{source === 'api' ? this.renderApiPanel() : null}
{source === 'variable'
? render(
'variable',
getSchemaTpl('sourceBindControl', {
label: false,
className: 'ae-ExtendMore'
}),
{
onChange: this.handleAPIChange
}
)
: null}
</div>
);
}

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

@ -32,13 +32,15 @@ export interface OptionControlProps extends FormControlProps {
showIconField?: boolean; // 是否有图标字段
}
export type SourceType = 'custom' | 'api' | 'apicenter' | 'variable';
export interface OptionControlState {
options: Array<OptionControlItem>;
api: SchemaApi;
labelField: string;
valueField: string;
iconField: string;
source: 'custom' | 'api' | 'apicenter';
source: SourceType;
modalVisible: boolean;
}
@ -66,9 +68,14 @@ export default class TreeOptionControl extends React.Component<
labelField: labelField,
valueField: valueField,
iconField: showIconField ? iconField : undefined,
source: source ? 'api' : 'custom',
source: source
? /\$\{(.*?)\}/g.test(source)
? 'variable'
: 'api'
: 'custom',
modalVisible: false
};
this.sortables = [];
}
@ -105,7 +112,7 @@ export default class TreeOptionControl extends React.Component<
* 更新options字段的统一出口
*/
onChange() {
const {source} = this.state;
const {source, api, labelField, valueField, iconField} = this.state;
const {onBulkChange} = this.props;
const data: Partial<OptionControlProps> = {
source: undefined,
@ -119,13 +126,13 @@ export default class TreeOptionControl extends React.Component<
data.options = this.pretreatOptions(options);
}
if (source === 'api' || source === 'apicenter') {
const {api, labelField, valueField, iconField} = this.state;
if (source === 'api' || source === 'apicenter' || source === 'variable') {
data.source = api;
data.labelField = labelField || undefined;
data.valueField = valueField || undefined;
data.iconField = iconField;
}
onBulkChange && onBulkChange(data);
return;
}
@ -134,8 +141,8 @@ export default class TreeOptionControl extends React.Component<
* 切换选项类型
*/
@autobind
handleSourceChange(source: 'custom' | 'api' | 'apicenter') {
this.setState({source: source}, this.onChange);
handleSourceChange(source: SourceType) {
this.setState({api: '', source: source}, this.onChange);
}
renderHeader() {
@ -160,10 +167,14 @@ export default class TreeOptionControl extends React.Component<
label: '外部接口',
value: 'api'
},
...(hasApiCenter ? [{label: 'API中心', value: 'apicenter'}] : [])
...(hasApiCenter ? [{label: 'API中心', value: 'apicenter'}] : []),
{
label: '上下文变量',
value: 'variable'
}
] as Array<{
label: string;
value: 'custom' | 'api' | 'apicenter';
value: SourceType;
}>
).map(item => ({
...item,
@ -574,9 +585,6 @@ export default class TreeOptionControl extends React.Component<
renderApiPanel() {
const {render, showIconField = false} = this.props;
const {source, api, labelField, valueField, iconField} = this.state;
if (source === 'custom') {
return null;
}
return render(
'api',
@ -624,7 +632,7 @@ export default class TreeOptionControl extends React.Component<
render() {
const {source} = this.state;
const {className} = this.props;
const {className, render} = this.props;
return (
<div className={cx('ae-TreeOptionControl', className)}>
@ -648,7 +656,22 @@ export default class TreeOptionControl extends React.Component<
</div>
) : null}
{this.renderApiPanel()}
{source === 'api' || source === 'apicenter'
? this.renderApiPanel()
: null}
{source === 'variable'
? render(
'variable',
getSchemaTpl('sourceBindControl', {
label: false,
className: 'ae-ExtendMore'
}),
{
onChange: this.handleAPIChange
}
)
: null}
</div>
);
}

14
packages/amis-editor/src/tpl/common.tsx
View File

@ -624,6 +624,20 @@ setSchemaTpl(
}
);
/**
* 数据源绑定
*/
setSchemaTpl('sourceBindControl', (schema: object = {}) => ({
type: 'ae-formulaControl',
name: 'source',
label: '数据',
variableMode: 'tabs',
inputMode: 'input-group',
placeholder: '请输入表达式',
requiredDataPropsVariables: true,
...schema
}));
setSchemaTpl('menuTpl', () => {
return getSchemaTpl('textareaFormulaControl', {
mode: 'normal',

2
packages/amis-ui/src/components/Tag.tsx
View File

@ -162,6 +162,8 @@ export class Tag extends React.Component<TagProps> {
})}
style={tagStyle}
onClick={this.handleClick}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
>
<span className={cx('Tag-text')}>
{prevIcon}