style(form): 调整底部固定按钮和FormItemsRenderer渲染逻辑
- 提升 FormBuilder 和 Page 组件底部操作区 zIndex,解决遮挡问题 - FormItemsRenderer 添加对隐藏项的支持,避免渲染隐藏表单项 - 优化动态表单项渲染顺序,确保联动机制及时生效 - 重构 renderDynamicFormItem,统一渲染动态更新表单项逻辑 - 新增上传文件类型及路径枚举,规范文件上传类型管理 - 补充完善组件库文档,增加使用说明和类型定义注释2.0
parent
f5753e779d
commit
d9beea6669
File diff suppressed because it is too large
Load Diff
|
|
@ -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" }}
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
})}
|
})}
|
||||||
|
|
|
||||||
|
|
@ -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 || (
|
||||||
|
|
|
||||||
|
|
@ -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";
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
/**
|
||||||
|
* 文件上传类型枚举
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* 文件上传类型枚举
|
||||||
|
*/
|
||||||
|
export const UPLOAD_FILE_TYPE_ENUM = {
|
||||||
|
1: 1, // template_task - 模板任务附件
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 文件上传类型对应的 path 枚举
|
||||||
|
*/
|
||||||
|
export const UPLOAD_FILE_PATH_ENUM = {
|
||||||
|
1: "template_task",
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue