front_library
/
zy-react-library
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(form): 修复表单项隐藏逻辑错误

2.0
LiuJiaNan 2026-06-22 10:49:23 +08:00
parent 390d8c7799
commit 1cc778a90a
1 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/FormBuilder/FormItemsRenderer.js
View File

@ -84,12 +84,8 @@ const FormItemsRenderer = ({
};
};
// 获取传给formItem的属性
const getFormItemProps = (option) => {
const formItemProps = typeof option.formItemProps === "function"
? option.formItemProps(getFormValues())
: (option.formItemProps || {});
// 设置日期组件的属性
const setDateComponentProps = (option, formItemProps) => {
// 为日期组件添加特殊处理
if ([
FORM_ITEM_RENDER_ENUM.DATE,
@ -117,6 +113,15 @@ const FormItemsRenderer = ({
formItemProps.getValueFromEvent = (_, dateString) => dateString;
formItemProps.getValueProps = value => ({ value: Array.isArray(value) ? value.map(v => v ? dayjs(v) : undefined) : undefined });
}
};
// 获取传给 formItem 的属性
const getFormItemProps = (option) => {
const formItemProps = typeof option.formItemProps === "function"
? option.formItemProps(getFormValues())
: (option.formItemProps || {});
setDateComponentProps(option, formItemProps);
return formItemProps;
};
@ -218,6 +223,11 @@ const FormItemsRenderer = ({
return { span: itemSpan, labelCol: itemLabelCol, wrapperCol: itemWrapperCol };
};
// 获取是否动态表单项
const getIsDynamicFormItem = (option, formItemProps) => {
return (option.shouldUpdate ?? option.dependencies) || (formItemProps.shouldUpdate ?? formItemProps.dependencies);
};
// 获取 hidden
const getHidden = (hidden) => {
// 支持动态计算 hidden
@ -420,6 +430,9 @@ const FormItemsRenderer = ({
delete formItemProps.dependencies;
delete formItemProps.shouldUpdate;
if (getHidden(option.hidden))
return null;
return (
<Col key={getKey(option) || index} span={col.span} style={style}>
<Form.Item
@ -512,9 +525,6 @@ const FormItemsRenderer = ({
return (
<Row gutter={gutter} key={field.key}>
{listOptions.map((listOption, listIndex) => {
if (getHidden(listOption.hidden))
return null;
const col = getCol(listOption);
const formItemProps = getFormItemProps(listOption);
@ -532,7 +542,7 @@ const FormItemsRenderer = ({
if (listOption.render === FORM_ITEM_RENDER_ENUM.FORM_LIST)
return renderFormList(params);
if ((listOption.shouldUpdate ?? listOption.dependencies) || (formItemProps.shouldUpdate ?? formItemProps.dependencies))
if (getIsDynamicFormItem(listOption, formItemProps))
return renderDynamicFormItem(params);
// 判断一个项是否需要显示按钮（不是 onlyForLabel 且不是隐藏的）
@ -562,6 +572,7 @@ const FormItemsRenderer = ({
if (listIndex === lastShowIndex || isNextNestedFormList || isNextNoShow) {
delete formItemProps.dependencies;
delete formItemProps.shouldUpdate;
return (
<Col key={getKey(listOption) || listIndex} span={col.span} style={style}>
<Form.Item
@ -632,9 +643,6 @@ const FormItemsRenderer = ({
return (
<>
{options.map((option, index) => {
if (getHidden(option.hidden))
return null;
const col = getCol(option);
const style = getStyle(index);
const formItemProps = getFormItemProps(option);
@ -657,7 +665,7 @@ const FormItemsRenderer = ({
return renderFormList(params);
// 如果配置了 shouldUpdate 或 dependencies，使用 Form.Item 的联动机制
if ((option.shouldUpdate ?? option.dependencies) || (formItemProps.shouldUpdate ?? formItemProps.dependencies))
if (getIsDynamicFormItem(option, formItemProps))
return renderDynamicFormItem(params);
// 普通表单项（静态配置）