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

1551
UI_LIBRARY_DOCS.md Normal file

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

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

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",
};