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

style(form): 调整底部固定按钮和FormItemsRenderer渲染逻辑 

- 提升 FormBuilder 和 Page 组件底部操作区 zIndex，解决遮挡问题
- FormItemsRenderer 添加对隐藏项的支持，避免渲染隐藏表单项
- 优化动态表单项渲染顺序，确保联动机制及时生效
- 重构 renderDynamicFormItem，统一渲染动态更新表单项逻辑
- 新增上传文件类型及路径枚举，规范文件上传类型管理
- 补充完善组件库文档，增加使用说明和类型定义注释
2.0
LiuJiaNan 2026-06-26 10:04:03 +08:00
parent f5753e779d
commit d9beea6669
6 changed files with 1624 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1551
UI_LIBRARY_DOCS.md Normal file
View File

File diff suppressed because it is too large Load Diff

2
src/components/FormBuilder/FormBuilder.js
View File

@ -79,7 +79,7 @@ const FormBuilder = (props) => {
/>
</Row>
{showActionButtons && (
<div style={{ position: "relative", zIndex: "9" }}>
<div style={{ position: "relative", zIndex: "99" }}>
<div style={{ height: "32px" }}></div>
<Row
style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", padding: "10px 0", position: "fixed", bottom: "0", width: pageWidth, margin: "0 -44px" }}

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

@ -485,6 +485,9 @@ const FormItemsRenderer = ({
const renderOtherTypeItem = ({ option, style, col, index, preserve }) => {
const componentProps = getComponentProps(option);
if (getHidden(option.hidden))
return null;
// 如果是 customizeRender 类型，完全交给外部控制渲染
if (option.customizeRender) {
return (
@ -520,30 +523,14 @@ const FormItemsRenderer = ({
return null;
};
// 渲染需要动态更新的表单项
const renderDynamicFormItem = ({ option, index, style, col, preserve }) => {
const formItemProps = getFormItemProps(option);
return (
<Form.Item
key={getKey(option) || index}
noStyle
preserve={preserve}
shouldUpdate={option.shouldUpdate ?? formItemProps.shouldUpdate}
dependencies={option.dependencies ?? formItemProps.dependencies}
>
{() => {
return renderFormItem({ option, style, col, index, preserve });
}}
</Form.Item>
);
};
// 渲染 Form.List
const renderFormList = ({ option, index, col, style }) => {
const formListUniqueProps = getFormListUniqueProps(option);
const componentProps = getComponentProps(option);
if (getHidden(option.hidden))
return null;
return (
<Col key={getKey(option) || index} span={col.span} style={{ ...style, ...getColStyle(option) }}>
{getColTitle(option)}
@ -568,6 +555,12 @@ const FormItemsRenderer = ({
index: `${fieldIndex}_${listIndex}`,
preserve: true,
};
// 如果配置了 shouldUpdate 或 dependencies，使用 Form.Item 的联动机制
// 注意：动态检测必须在 renderOtherTypeItem 之前，否则特殊类型（customizeRender / onlyForLabel / DIVIDER）无法响应联动
if (getIsDynamicFormItem(listOption, formItemProps))
return renderDynamicFormItem(params);
const otherTypeItem = renderOtherTypeItem(params);
if (otherTypeItem)
return otherTypeItem;
@ -575,9 +568,6 @@ const FormItemsRenderer = ({
if (listOption.render === FORM_ITEM_RENDER_ENUM.FORM_LIST)
return renderFormList(params);
if (getIsDynamicFormItem(listOption, formItemProps))
return renderDynamicFormItem(params);
// 判断一个项是否需要显示按钮（不是 onlyForLabel 且不是隐藏的）
const isShow = (opt) => {
return !getHidden(opt.hidden) && !opt.onlyForLabel;
@ -674,6 +664,32 @@ const FormItemsRenderer = ({
);
};
// 渲染需要动态更新的表单项
const renderDynamicFormItem = ({ option, index, style, col, preserve }) => {
const formItemProps = getFormItemProps(option);
return (
<Form.Item
key={getKey(option) || index}
noStyle
preserve={preserve}
shouldUpdate={option.shouldUpdate ?? formItemProps.shouldUpdate}
dependencies={option.dependencies ?? formItemProps.dependencies}
>
{() => {
const otherTypeItem = renderOtherTypeItem({ option, style, col, index, preserve });
if (otherTypeItem)
return otherTypeItem;
if (option.render === FORM_ITEM_RENDER_ENUM.FORM_LIST)
return renderFormList({ option, index, col, style });
return renderFormItem({ option, style, col, index, preserve });
}}
</Form.Item>
);
};
return (
<>
{options.map((option, index) => {
@ -689,6 +705,10 @@ const FormItemsRenderer = ({
preserve: false,
};
// 如果配置了 shouldUpdate 或 dependencies，使用 Form.Item 的联动机制
if (getIsDynamicFormItem(option, formItemProps))
return renderDynamicFormItem(params);
// 处理特殊类型的表单项
const otherTypeItem = renderOtherTypeItem(params);
if (otherTypeItem)
@ -698,10 +718,6 @@ const FormItemsRenderer = ({
if (option.render === FORM_ITEM_RENDER_ENUM.FORM_LIST)
return renderFormList(params);
// 如果配置了 shouldUpdate 或 dependencies，使用 Form.Item 的联动机制
if (getIsDynamicFormItem(option, formItemProps))
return renderDynamicFormItem(params);
// 普通表单项（静态配置）
return renderFormItem(params);
})}

2
src/components/Page/index.js
View File

@ -55,7 +55,7 @@ function Page(props) {
{children && typeof children === "function" ? children() : children}
{
(isShowAllAction && isShowFooter) && (
<div className="page-layout-footer" style={{ position: "relative", zIndex: "9" }}>
<div className="page-layout-footer" style={{ position: "relative", zIndex: "99" }}>
<div style={{ height: "52px" }}></div>
<div style={{ textAlign: "center", backgroundColor: "rgb(241, 241, 242)", padding: "10px 0", position: "fixed", bottom: "0", width: pageWidth, margin: "0px -20px" }}>
{customActionButtons || (

13
src/enum/uploadFile/aqd/index.d.ts vendored Normal file
View File

@ -0,0 +1,13 @@
/**
* 文件上传类型枚举
*/
export declare const UPLOAD_FILE_TYPE_ENUM: {
1: 1; // template_task - 模板任务附件
};
/**
* 文件上传类型对应的 path 枚举
*/
export declare const UPLOAD_FILE_PATH_ENUM: {
1: "template_task";
};

16
src/enum/uploadFile/aqd/index.js Normal file
View File

@ -0,0 +1,16 @@
/**
* 文件上传类型枚举
*/
/**
* 文件上传类型枚举
*/
export const UPLOAD_FILE_TYPE_ENUM = {
1: 1, // template_task - 模板任务附件
};
/**
* 文件上传类型对应的 path 枚举
*/
export const UPLOAD_FILE_PATH_ENUM = {
1: "template_task",
};