mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
Merge pull request #8374 from ascend13/fix-dialog-variable
fix:修复组件特性动作无法选中弹窗之外组件的兼容
This commit is contained in:
hsm-lv
GitHub
commit
df69270ed7
@ -897,15 +897,20 @@ function applyChange(target: any, source: any, change: DiffChange) {
|
||||
* 遍历 schema
|
||||
* @param json
|
||||
* @param mapper
|
||||
* @param ignore
|
||||
*/
|
||||
export function JSONTraverse(
|
||||
json: any,
|
||||
mapper: (value: any, key: string | number, host: Object) => any
|
||||
mapper: (value: any, key: string | number, host: Object) => any,
|
||||
ignore?: (value: any, key: string | number) => boolean | void
|
||||
) {
|
||||
Object.keys(json).forEach(key => {
|
||||
const value: any = json[key];
|
||||
if (ignore?.(value, key)) {
|
||||
return;
|
||||
}
|
||||
if (isPlainObject(value) || Array.isArray(value)) {
|
||||
JSONTraverse(value, mapper);
|
||||
JSONTraverse(value, mapper, ignore);
|
||||
} else {
|
||||
mapper(value, key, json);
|
||||
}
|
||||
@ -1296,7 +1301,9 @@ export const getDialogActions = (
|
||||
filterId?: string
|
||||
) => {
|
||||
let dialogActions: any[] = [];
|
||||
JSONTraverse(schema, (value: any, key: string, object: any) => {
|
||||
JSONTraverse(
|
||||
schema,
|
||||
(value: any, key: string, object: any) => {
|
||||
// definitions中的弹窗
|
||||
if (key === 'type' && value === 'page') {
|
||||
const definitions = object.definitions;
|
||||
@ -1380,7 +1387,9 @@ export const getDialogActions = (
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
(value, key) => key.toString().startsWith('__')
|
||||
);
|
||||
return dialogActions;
|
||||
};
|
||||
|
||||
|
||||
@ -11,8 +11,14 @@ import {Button} from 'amis';
|
||||
|
||||
export default class ActionConfigPanel extends React.Component<RendererProps> {
|
||||
render() {
|
||||
const {data, onBulkChange, render, pluginActions, actionConfigItemsMap} =
|
||||
this.props;
|
||||
const {
|
||||
data,
|
||||
onBulkChange,
|
||||
render,
|
||||
pluginActions,
|
||||
actionConfigItemsMap,
|
||||
manager
|
||||
} = this.props;
|
||||
const actionType = data.__subActions ? data.groupType : data.actionType;
|
||||
const commonActionConfig = {
|
||||
...COMMON_ACTION_SCHEMA_MAP,
|
||||
@ -26,7 +32,13 @@ export default class ActionConfigPanel extends React.Component<RendererProps> {
|
||||
pluginActions?.[data.__rendererName]?.find(
|
||||
(item: RendererPluginAction) => item.actionType === data.groupType
|
||||
)?.schema ?? commonActionConfig[data.groupType]?.schema;
|
||||
const baseSchema = renderCmptActionSelect('选择组件', true);
|
||||
const baseSchema = renderCmptActionSelect(
|
||||
'选择组件',
|
||||
true,
|
||||
() => {},
|
||||
data.componentId === 'customCmptId' ? true : false,
|
||||
manager
|
||||
);
|
||||
// 追加到基础配置
|
||||
schema = [
|
||||
...(Array.isArray(baseSchema) ? baseSchema : [baseSchema]),
|
||||
|
||||
@ -30,7 +30,8 @@ export default class CmptActionSelect extends React.Component<RendererProps> {
|
||||
...BASE_ACTION_PROPS,
|
||||
'componentId',
|
||||
'__rendererName',
|
||||
'__cmptTreeSource'
|
||||
'__cmptTreeSource',
|
||||
'__cmptId'
|
||||
].includes(key)
|
||||
) {
|
||||
removeKeys[key] = undefined;
|
||||
|
||||
@ -9,8 +9,7 @@ import {
|
||||
getFixDialogType,
|
||||
getSchemaTpl,
|
||||
JsonGenerateID,
|
||||
JSONPipeIn,
|
||||
JSONPipeOut,
|
||||
JSONGetById,
|
||||
PluginActions,
|
||||
RendererPluginAction,
|
||||
RendererPluginEvent,
|
||||
@ -819,7 +818,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
<div>
|
||||
显示
|
||||
<span className="variable-left variable-right">
|
||||
{info?.rendererLabel || '-'}
|
||||
{info?.rendererLabel || info.componentId || '-'}
|
||||
</span>
|
||||
组件
|
||||
</div>
|
||||
@ -833,7 +832,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
<div>
|
||||
隐藏
|
||||
<span className="variable-left variable-right">
|
||||
{info?.rendererLabel || '-'}
|
||||
{info?.rendererLabel || info.componentId || '-'}
|
||||
</span>
|
||||
组件
|
||||
</div>
|
||||
@ -847,7 +846,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
<div>
|
||||
组件
|
||||
<span className="variable-left variable-right">
|
||||
{info?.rendererLabel || '-'}
|
||||
{info?.rendererLabel || info.componentId || '-'}
|
||||
</span>
|
||||
表达式已配置
|
||||
</div>
|
||||
@ -858,6 +857,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
supportComponents: '*',
|
||||
schema: [
|
||||
...renderCmptSelect('目标组件', true),
|
||||
renderCmptIdInput(),
|
||||
{
|
||||
type: 'radios',
|
||||
label: '条件',
|
||||
@ -922,7 +922,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
<div>
|
||||
启用
|
||||
<span className="variable-left variable-right">
|
||||
{info?.rendererLabel || '-'}
|
||||
{info?.rendererLabel || info.componentId || '-'}
|
||||
</span>
|
||||
组件
|
||||
</div>
|
||||
@ -936,7 +936,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
<div>
|
||||
禁用
|
||||
<span className="variable-left variable-right">
|
||||
{info?.rendererLabel || '-'}
|
||||
{info?.rendererLabel || info.componentId || '-'}
|
||||
</span>
|
||||
组件
|
||||
</div>
|
||||
@ -950,7 +950,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
<div>
|
||||
组件
|
||||
<span className="variable-left variable-right">
|
||||
{info?.rendererLabel || '-'}
|
||||
{info?.rendererLabel || info.componentId || '-'}
|
||||
</span>
|
||||
表达式已配置
|
||||
</div>
|
||||
@ -965,6 +965,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
],
|
||||
schema: [
|
||||
...renderCmptSelect('目标组件', true),
|
||||
renderCmptIdInput(),
|
||||
{
|
||||
type: 'radios',
|
||||
label: '条件',
|
||||
@ -1027,7 +1028,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
return (
|
||||
<div>
|
||||
<span className="variable-right">
|
||||
{info?.rendererLabel}
|
||||
{info?.rendererLabel || info.componentId}
|
||||
</span>
|
||||
组件切换为静态
|
||||
</div>
|
||||
@ -1040,7 +1041,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
return (
|
||||
<div>
|
||||
<span className="variable-right">
|
||||
{info?.rendererLabel}
|
||||
{info?.rendererLabel || info.componentId}
|
||||
</span>
|
||||
组件切换为输入态
|
||||
</div>
|
||||
@ -1051,6 +1052,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
supportComponents: ['form', ...SUPPORT_STATIC_FORMITEM_CMPTS],
|
||||
schema: [
|
||||
...renderCmptSelect('选择组件', true),
|
||||
renderCmptIdInput(),
|
||||
{
|
||||
type: 'radios',
|
||||
label: '组件状态',
|
||||
@ -1083,7 +1085,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
<div>
|
||||
刷新
|
||||
<span className="variable-left variable-right">
|
||||
{info?.rendererLabel || '-'}
|
||||
{info?.rendererLabel || info.componentId || '-'}
|
||||
</span>
|
||||
组件
|
||||
</div>
|
||||
@ -1091,6 +1093,11 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
},
|
||||
supportComponents: 'byComponent',
|
||||
schema: [
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'sm',
|
||||
visibleOn: 'data.componentId === "customCmptId"',
|
||||
body: [
|
||||
...renderCmptSelect(
|
||||
'目标组件',
|
||||
true,
|
||||
@ -1099,6 +1106,47 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
form.setValueByName('__addParam', false);
|
||||
form.setValueByName('__containerType', 'all');
|
||||
form.setValueByName('__reloadParam', []);
|
||||
},
|
||||
true
|
||||
)
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'sm',
|
||||
visibleOn: 'data.componentId !== "customCmptId"',
|
||||
body: [
|
||||
...renderCmptSelect(
|
||||
'目标组件',
|
||||
true,
|
||||
(value: string, oldVal: any, data: any, form: any) => {
|
||||
form.setValueByName('args.resetPage', true);
|
||||
form.setValueByName('__addParam', false);
|
||||
form.setValueByName('__containerType', 'all');
|
||||
form.setValueByName('__reloadParam', []);
|
||||
}
|
||||
)
|
||||
]
|
||||
},
|
||||
renderCmptIdInput(
|
||||
(value: string, oldVal: any, data: any, form: any) => {
|
||||
// 找到组件并设置相关的属性
|
||||
let schema = JSONGetById(manager.store.schema, value, 'id');
|
||||
if (schema) {
|
||||
let __isScopeContainer = !!manager.dataSchema.getScope(
|
||||
`${schema.$$id}-${schema.type}`
|
||||
);
|
||||
let __rendererName = schema.type;
|
||||
form.setValues({
|
||||
__isScopeContainer,
|
||||
__rendererName
|
||||
});
|
||||
} else {
|
||||
form.setValues({
|
||||
__isScopeContainer: false,
|
||||
__rendererName: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
),
|
||||
{
|
||||
@ -1242,7 +1290,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
<>
|
||||
设置组件「
|
||||
<span className="variable-left variable-right">
|
||||
{info?.rendererLabel || '-'}
|
||||
{info?.rendererLabel || info.componentId || '-'}
|
||||
</span>
|
||||
」的数据
|
||||
</>
|
||||
@ -1288,6 +1336,11 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
{
|
||||
type: 'container',
|
||||
visibleOn: '__actionSubType === "cmpt"',
|
||||
body: [
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'sm',
|
||||
visibleOn: 'data.componentId === "customCmptId"',
|
||||
body: [
|
||||
...renderCmptActionSelect(
|
||||
'目标组件',
|
||||
@ -1295,6 +1348,45 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
(value: string, oldVal: any, data: any, form: any) => {
|
||||
form.setValueByName('args.__containerType', 'all');
|
||||
form.setValueByName('args.__comboType', 'all');
|
||||
},
|
||||
true
|
||||
)
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'wrapper',
|
||||
visibleOn: 'data.componentId !== "customCmptId"',
|
||||
size: 'sm',
|
||||
body: [
|
||||
...renderCmptActionSelect(
|
||||
'目标组件',
|
||||
true,
|
||||
(value: string, oldVal: any, data: any, form: any) => {
|
||||
form.setValueByName('args.__containerType', 'all');
|
||||
form.setValueByName('args.__comboType', 'all');
|
||||
}
|
||||
)
|
||||
]
|
||||
},
|
||||
renderCmptIdInput(
|
||||
(value: string, oldVal: any, data: any, form: any) => {
|
||||
// 找到组件并设置相关的属性
|
||||
let schema = JSONGetById(manager.store.schema, value, 'id');
|
||||
if (schema) {
|
||||
let __isScopeContainer = !!manager.dataSchema.getScope(
|
||||
`${schema.$$id}-${schema.type}`
|
||||
);
|
||||
let __rendererName = schema.type;
|
||||
form.setValues({
|
||||
__isScopeContainer,
|
||||
__rendererName
|
||||
});
|
||||
} else {
|
||||
form.setValues({
|
||||
__isScopeContainer: false,
|
||||
__rendererName: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
),
|
||||
getArgsWrapper({
|
||||
@ -1534,7 +1626,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
<div>
|
||||
提交
|
||||
<span className="variable-left variable-right">
|
||||
{info?.rendererLabel || '-'}
|
||||
{info?.rendererLabel || info.componentId || '-'}
|
||||
</span>
|
||||
的数据
|
||||
</div>
|
||||
@ -1543,6 +1635,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
supportComponents: 'form',
|
||||
schema: [
|
||||
...renderCmptSelect('目标组件', true),
|
||||
renderCmptIdInput(),
|
||||
{
|
||||
name: 'outputVar',
|
||||
type: 'input-text',
|
||||
@ -1590,14 +1683,14 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
<div>
|
||||
清空
|
||||
<span className="variable-left variable-right">
|
||||
{info?.rendererLabel || '-'}
|
||||
{info?.rendererLabel || info.componentId || '-'}
|
||||
</span>
|
||||
的数据
|
||||
</div>
|
||||
);
|
||||
},
|
||||
supportComponents: 'form',
|
||||
schema: renderCmptSelect('目标组件', true)
|
||||
schema: [...renderCmptSelect('目标组件', true), renderCmptIdInput()]
|
||||
},
|
||||
{
|
||||
actionLabel: '重置表单',
|
||||
@ -1608,14 +1701,14 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
<div>
|
||||
重置
|
||||
<span className="variable-left variable-right">
|
||||
{info?.rendererLabel || '-'}
|
||||
{info?.rendererLabel || info.componentId || '-'}
|
||||
</span>
|
||||
的数据
|
||||
</div>
|
||||
);
|
||||
},
|
||||
supportComponents: 'form',
|
||||
schema: renderCmptSelect('目标组件', true)
|
||||
schema: [...renderCmptSelect('目标组件', true), renderCmptIdInput()]
|
||||
},
|
||||
{
|
||||
actionLabel: '校验表单',
|
||||
@ -1626,7 +1719,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
<div>
|
||||
校验
|
||||
<span className="variable-left variable-right">
|
||||
{info?.rendererLabel || '-'}
|
||||
{info?.rendererLabel || info.componentId || '-'}
|
||||
</span>
|
||||
的数据
|
||||
</div>
|
||||
@ -1635,6 +1728,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
supportComponents: 'form',
|
||||
schema: [
|
||||
...renderCmptSelect('目标组件', true),
|
||||
renderCmptIdInput(),
|
||||
{
|
||||
name: 'outputVar',
|
||||
type: 'input-text',
|
||||
@ -1813,8 +1907,28 @@ doAction({
|
||||
export const renderCmptSelect = (
|
||||
componentLabel: string,
|
||||
required: boolean,
|
||||
onChange?: (value: string, oldVal: any, data: any, form: any) => void
|
||||
onChange?: (value: string, oldVal: any, data: any, form: any) => void,
|
||||
hideAutoFill?: boolean
|
||||
) => {
|
||||
if (hideAutoFill) {
|
||||
return [
|
||||
{
|
||||
type: 'tree-select',
|
||||
name: 'componentId',
|
||||
label: componentLabel || '选择组件',
|
||||
showIcon: false,
|
||||
searchable: true,
|
||||
required,
|
||||
selfDisabledAffectChildren: false,
|
||||
size: 'lg',
|
||||
source: '${__cmptTreeSource}',
|
||||
mode: 'horizontal',
|
||||
onChange: async (value: string, oldVal: any, data: any, form: any) => {
|
||||
onChange?.(value, oldVal, data, form);
|
||||
}
|
||||
}
|
||||
];
|
||||
} else {
|
||||
return [
|
||||
{
|
||||
type: 'tree-select',
|
||||
@ -1839,13 +1953,16 @@ export const renderCmptSelect = (
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染组件特性动作配置项
|
||||
export const renderCmptActionSelect = (
|
||||
componentLabel: string,
|
||||
required: boolean,
|
||||
onChange?: (value: string, oldVal: any, data: any, form: any) => void
|
||||
onChange?: (value: string, oldVal: any, data: any, form: any) => void,
|
||||
hideAutoFill?: boolean,
|
||||
manager?: EditorManager
|
||||
) => {
|
||||
return [
|
||||
...renderCmptSelect(
|
||||
@ -1880,8 +1997,31 @@ export const renderCmptActionSelect = (
|
||||
}
|
||||
form.setValueByName('groupType', '');
|
||||
onChange?.(value, oldVal, data, form);
|
||||
}
|
||||
},
|
||||
hideAutoFill
|
||||
),
|
||||
{
|
||||
type: 'input-text',
|
||||
name: '__cmptId',
|
||||
mode: 'horizontal',
|
||||
size: 'lg',
|
||||
required: true,
|
||||
label: '组件id',
|
||||
visibleOn:
|
||||
'data.componentId === "customCmptId" && data.actionType === "component"',
|
||||
onChange: async (value: string, oldVal: any, data: any, form: any) => {
|
||||
let schema = JSONGetById(manager!.store.schema, value, 'id');
|
||||
if (schema) {
|
||||
form.setValues({
|
||||
__rendererName: schema.type
|
||||
});
|
||||
} else {
|
||||
form.setValues({
|
||||
__rendererName: ''
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
asFormItem: true,
|
||||
label: '组件动作',
|
||||
@ -1895,6 +2035,23 @@ export const renderCmptActionSelect = (
|
||||
];
|
||||
};
|
||||
|
||||
export const renderCmptIdInput = (
|
||||
onChange?: (value: string, oldVal: any, data: any, form: any) => void
|
||||
) => {
|
||||
return {
|
||||
type: 'input-text',
|
||||
name: '__cmptId',
|
||||
mode: 'horizontal',
|
||||
size: 'lg',
|
||||
required: true,
|
||||
label: '组件id',
|
||||
visibleOn: 'data.componentId === "customCmptId"',
|
||||
onChange: async (value: string, oldVal: any, data: any, form: any) => {
|
||||
onChange?.(value, oldVal, data, form);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 动作配置项schema map
|
||||
export const COMMON_ACTION_SCHEMA_MAP: {
|
||||
[propName: string]: RendererPluginAction;
|
||||
@ -2739,6 +2896,10 @@ export const getEventControlConfig = (
|
||||
1,
|
||||
true
|
||||
);
|
||||
result.unshift({
|
||||
label: '输入组件id',
|
||||
value: 'customCmptId'
|
||||
});
|
||||
return result;
|
||||
},
|
||||
actionConfigInitFormatter: async (action: ActionConfig) => {
|
||||
@ -2854,6 +3015,46 @@ export const getEventControlConfig = (
|
||||
}
|
||||
}
|
||||
|
||||
// 如果不在可以选择的组件范围，设置一下自定义输入组件数据
|
||||
if (
|
||||
[
|
||||
'setValue',
|
||||
'static',
|
||||
'nonstatic',
|
||||
'show',
|
||||
'visibility',
|
||||
'hidden',
|
||||
'enabled',
|
||||
'disabled',
|
||||
'usability',
|
||||
'reload',
|
||||
'submit',
|
||||
'clear',
|
||||
'reset',
|
||||
'validate'
|
||||
].includes(action.actionType)
|
||||
) {
|
||||
const node = findTree(
|
||||
allComponents ?? [],
|
||||
item => item.value === config.componentId
|
||||
);
|
||||
if (!node) {
|
||||
config.__cmptId = config.componentId;
|
||||
config.componentId = 'customCmptId';
|
||||
}
|
||||
|
||||
if (['setValue'].includes(action.actionType)) {
|
||||
let schema = JSONGetById(manager.store.schema, config.__cmptId, 'id');
|
||||
if (schema) {
|
||||
let __isScopeContainer = !!manager.dataSchema.getScope(
|
||||
`${schema.$$id}-${schema.type}`
|
||||
);
|
||||
config.__isScopeContainer = __isScopeContainer;
|
||||
config.__rendererName = schema.type;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
delete config.data;
|
||||
|
||||
// 处理下 addItem 的初始化
|
||||
@ -3170,6 +3371,30 @@ export const getEventControlConfig = (
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
[
|
||||
'setValue',
|
||||
'static',
|
||||
'nonstatic',
|
||||
'show',
|
||||
'visibility',
|
||||
'hidden',
|
||||
'enabled',
|
||||
'disabled',
|
||||
'usability',
|
||||
'reload',
|
||||
'submit',
|
||||
'clear',
|
||||
'reset',
|
||||
'validate'
|
||||
].includes(action.actionType)
|
||||
) {
|
||||
// 处理一下自行输入组件id的转换
|
||||
if (action.componentId === 'customCmptId') {
|
||||
action.componentId = action.__cmptId;
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
action.actionType === 'addItem' &&
|
||||
action.__rendererName === 'combo'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user