实现场景:
定开侧边栏,在侧边栏中新增一个“原子能力”的表单,通过后端数据展示下拉框,通过下拉框数据去动态渲染数据框
存在的问题:
目前遇到问题,如何同步我新增的侧边栏schema数据到主schema中
当前方案:
通过pipeOut拿到输入框中的值,但是无法把数据同步到schema中
panelBodyCreator = (context: BaseEventContext) => {
const isInDialog = /(?:\/|^)dialog\/.+$/.test(context.path);
const isInDrawer = /(?:\/|^)drawer\/.+$/.test(context.path);
// TODO: 旧方法无法判断,context 中没有 dropdown-button 的信息,临时实现
// const isInDropdown = /(?:\/|^)dropdown-button\/.+$/.test(context.path);
const isInDropdown = /^button-group\/.+$/.test(context.path);
const buttonStateFunc = (visibleOn: string, state: string) => {
return [
getSchemaTpl('theme:font', {
label: '文字',
name: `themeCss.className.font:${state}`,
visibleOn: visibleOn,
editorThemePath: [
`button1.type.\${level}.${state}.body.font-color`,
`button1.size.\${size}.body.font`
]
}),
getSchemaTpl('theme:colorPicker', {
label: '背景',
name: `themeCss.className.background:${state}`,
labelMode: 'input',
needGradient: true,
needImage: true,
visibleOn: visibleOn,
editorThemePath: `button1.type.\${level}.${state}.body.bg-color`
}),
getSchemaTpl('theme:border', {
name: `themeCss.className.border:${state}`,
visibleOn: visibleOn,
editorThemePath: `button1.type.\${level}.${state}.body.border`
}),
getSchemaTpl('theme:paddingAndMargin', {
name: `themeCss.className.padding-and-margin:${state}`,
visibleOn: visibleOn,
editorThemePath: `button1.size.\${size}.body.padding-and-margin`
}),
getSchemaTpl('theme:radius', {
name: `themeCss.className.radius:${state}`,
visibleOn: visibleOn,
editorThemePath: `button1.size.\${size}.body.border`
}),
getSchemaTpl('theme:size', {
label: '图标尺寸',
name: `themeCss.iconClassName.iconSize:${state}`,
visibleOn: visibleOn,
editorThemePath: `button1.size.\${size}.body.icon-size`
})
];
};
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('layout:originPosition', { value: 'left-top' }),
getSchemaTpl('label', {
label: '名称'
}),
{
label: '类型',
type: 'button-group-select',
name: 'type',
size: 'sm',
visibleOn: 'type === "submit" || type === "reset" ',
options: [
{
label: '按钮',
value: 'button'
},
{
label: '提交',
value: 'submit'
},
{
label: '重置',
value: 'reset'
}
]
},
getSchemaTpl('switch', {
name: 'close',
label: '是否关闭',
clearValueOnHidden: true,
labelRemark: `指定此次操作完后关闭当前 ${isInDialog ? 'dialog' : 'drawer'
}`,
hidden: !isInDialog && !isInDrawer,
pipeIn: defaultValue(false)
}),
{
type: 'ae-switch-more',
mode: 'normal',
formType: 'extend',
label: tipedLabel(
'二次确认',
'点击后先询问用户,由手动确认后再执行动作,避免误触。可从数据域变量中取值。'
),
form: {
body: [
getSchemaTpl('textareaFormulaControl', {
label: '确认内容',
mode: 'normal',
name: 'confirmText'
})
]
}
},
{
type: 'ae-switch-more',
formType: 'extend',
mode: 'normal',
label: '气泡提示',
hidden: isInDropdown,
form: {
body: [
getSchemaTpl('textareaFormulaControl', {
name: 'tooltip',
mode: 'normal',
label: tipedLabel(
'正常提示',
'正常状态下的提示内容,不填则不弹出提示。可从数据域变量中取值。'
)
}),
getSchemaTpl('textareaFormulaControl', {
name: 'disabledTip',
mode: 'normal',
label: tipedLabel(
'禁用提示',
'禁用状态下的提示内容,不填则弹出正常提示。可从数据域变量中取值。'
),
clearValueOnHidden: true,
visibleOn: 'data.tooltipTrigger !== "focus"'
}),
{
type: 'button-group-select',
name: 'tooltipTrigger',
label: '触发方式',
// visibleOn: 'data.tooltip || data.disabledTip',
size: 'sm',
options: [
{
label: '鼠标悬浮',
value: 'hover'
},
{
label: '聚焦',
value: 'focus'
}
],
pipeIn: defaultValue('hover')
},
{
type: 'button-group-select',
name: 'tooltipPlacement',
// visibleOn: 'data.tooltip || data.disabledTip',
label: '提示位置',
size: 'sm',
options: [
{
label: '上',
value: 'top'
},
{
label: '右',
value: 'right'
},
{
label: '下',
value: 'bottom'
},
{
label: '左',
value: 'left'
}
],
pipeIn: defaultValue('bottom')
}
]
}
},
getSchemaTpl('icon', {
label: '左侧图标'
}),
getSchemaTpl('icon', {
name: 'rightIcon',
label: '右侧图标'
}),
getSchemaTpl('badge')
]
},
getSchemaTpl('status', {
disabled: true
})
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('buttonLevel', {
label: '样式',
name: 'level',
hidden: isInDropdown
}),
getSchemaTpl('buttonLevel', {
label: '高亮样式',
name: 'activeLevel',
hidden: isInDropdown,
visibleOn: 'data.active'
}),
getSchemaTpl('switch', {
name: 'block',
label: '块状显示',
hidden: isInDropdown
}),
getSchemaTpl('size', {
label: '尺寸',
hidden: isInDropdown
})
]
},
{
title: '自定义样式',
body: [
{
type: 'select',
name: 'editorState',
label: '状态',
selectFirst: true,
options: [
{
label: '常规',
value: 'default'
},
{
label: '悬浮',
value: 'hover'
},
{
label: '点击',
value: 'active'
}
]
},
...buttonStateFunc(
"${editorState == 'default' || !editorState}",
'default'
),
...buttonStateFunc("${editorState == 'hover'}", 'hover'),
...buttonStateFunc("${editorState == 'active'}", 'active')
]
},
getSchemaTpl('theme:cssCode', {
themeClass: [
{
value: '',
state: ['default', 'hover', 'active']
}
]
})
])
},
{
title: '事件',
className: 'p-none',
body:
!!context.schema.actionType ||
['submit', 'reset'].includes(context.schema.type)
? [
getSchemaTpl('eventControl', {
name: 'onEvent',
...getEventControlConfig(this.manager, context)
}),
getOldActionSchema(this.manager, context)
]
: [
getSchemaTpl('eventControl', {
name: 'onEvent',
...getEventControlConfig(this.manager, context)
})
]
},
{
title: '原子能力',
className: 'p-none',
body:
{
"type": "page",
className: 'p-none',
"body": [
{
title: '',
"type": "form",
"wrapWithPanel": false,
"body": [
{
"name": "mycustom",
"asFormItem": true,
component: CustomTypeofSource
}
]
}
]
}
}
]);
};
希望得到回复,谢谢🌹🌹
2条答案
按热度按时间shstlldc1#
啥意思,这个表单的输入输出就是页面的 schema 呢
qnakjoqk2#
抱歉☹️,可能是我的描述有问题,我的意思是在上述自定义组件‘CustomTypeofSource’中想把schema添加到context上下文中,有没有api去调用,我目前直接使用context.schema.xxx = xxxx,通过直接修改对象,添加我想要的属性,谢谢你的解答