zy-react-library 1.0.77 → 1.0.79

package/components/FormBuilder/FormItemsRenderer.d.ts

@@ -1,105 +1,107 @@
-import type { ColProps } from "antd/es/col";
-import type { FormItemProps, Rule } from "antd/es/form";
-import type { NamePath } from "rc-field-form/lib/interface";
-import type { FC, ReactNode } from "react";
-import type { FORM_ITEM_RENDER_ENUM } from "../../enum/formItemRender";
-
-/**
- * 表单项渲染类型
- */
-export type FormItemRenderType
-  = | (typeof FORM_ITEM_RENDER_ENUM)[keyof typeof FORM_ITEM_RENDER_ENUM]
-    | ReactNode;
-
-/**
- * 选项项数据类型
- */
-export interface OptionItem {
-  /** ID字段 */
-  bianma?: any;
-  /** 名称字段 */
-  name?: string;
-  [key: string]: any;
-}
-
-/**
- * 字段键配置
- */
-export interface itemsFieldConfig {
-  /** 值字段的键名，默认为 'bianma' */
-  valueKey?: string;
-  /** 标签字段的键名，默认为 'name' */
-  labelKey?: string;
-}
-
-/**
- * 表单值类型
- */
-export type FormValues = Record<string, any>;
-
-/**
- * 表单配置项
- */
-export interface FormOption {
-  /** React 需要的 key，如果传递了唯一的 name，则不需要 */
-  key?: string;
-  /** 表单项字段名 */
-  name?: string | string[];
-  /** 表单项标签 */
-  label?: ReactNode;
-  /** 渲染类型 */
-  render?: FormItemRenderType;
-  /** 占据栅格列数，默认 12 */
-  span?: number | string;
-  /** 是否必填，默认 true，支持函数动态计算 */
-  required?: boolean | ((formValues: FormValues) => boolean);
-  /** 验证规则 */
-  rules?: Rule | Rule[];
-  /** 占位符文本，默认会根据传入的 render 类型自动判断（请选择、请输入）和 label 组合 */
-  placeholder?: ReactNode;
-  /** 提示信息，传入将在 label 右侧生成图标展示 tooltip */
-  tip?: ReactNode;
-  /** 是否隐藏，默认 false，支持函数动态计算 */
-  hidden?: boolean | ((formValues: FormValues) => boolean);
-  /** 是否自定义渲染，默认 false，将不生成 Form.Item */
-  customizeRender?: boolean;
-  /** 选项数据（用于 select、radio、checkbox） */
-  items?: OptionItem[];
-  /** 字段键配置 */
-  itemsField?: itemsFieldConfig;
-  /** 传递给表单控件的属性，支持函数动态计算 */
-  componentProps?: Record<string, any> | ((formValues: FormValues) => Record<string, any>);
-  /** 传递给 Form.Item 的属性，支持函数动态计算 */
-  formItemProps?: FormItemProps | ((formValues: FormValues) => FormItemProps);
-  /** label 栅格配置，默认直接使用外层的 labelCol，如果 span 等于 24，是外层的 labelCol.span 一半 */
-  labelCol?: ColProps;
-  /** wrapper 栅格配置，默认为 24 - labelCol.span */
-  wrapperCol?: ColProps;
-  /** 是否应该更新（用于表单联动） */
-  shouldUpdate?: boolean | ((prevValues: FormValues, nextValues: FormValues, info: { source?: string }) => boolean);
-  /** 依赖字段（用于表单联动） */
-  dependencies?: NamePath[];
-}
-
-/**
- * FormItemsRenderer 组件属性
- */
-export interface FormItemsRendererProps {
-  /** 表单配置项数组 */
-  options: FormOption[];
-  /** 默认栅格占据列数，默认 12 */
-  span?: number;
-  /** 是否折叠（仅显示前3项），默认 false */
-  collapse?: boolean;
-  /** 自动生成必填规则，默认 true */
-  useAutoGenerateRequired?: boolean;
-  /** 初始值，用于在表单未初始化时提供默认值 */
-  initialValues?: FormValues;
-}
-
-/**
- * 表单项渲染器组件
- */
-declare const FormItemsRenderer: FC<FormItemsRendererProps>;
-
-export default FormItemsRenderer;
+import type { ColProps } from "antd/es/col";
+import type { FormItemProps, Rule } from "antd/es/form";
+import type { NamePath } from "rc-field-form/lib/interface";
+import type { FC, ReactNode } from "react";
+import type { FORM_ITEM_RENDER_ENUM } from "../../enum/formItemRender";
+
+/**
+ * 表单项渲染类型
+ */
+export type FormItemRenderType
+  = | (typeof FORM_ITEM_RENDER_ENUM)[keyof typeof FORM_ITEM_RENDER_ENUM]
+    | ReactNode;
+
+/**
+ * 选项项数据类型
+ */
+export interface OptionItem {
+  /** ID字段 */
+  bianma?: any;
+  /** 名称字段 */
+  name?: string;
+  [key: string]: any;
+}
+
+/**
+ * 字段键配置
+ */
+export interface itemsFieldConfig {
+  /** 值字段的键名，默认为 'bianma' */
+  valueKey?: string;
+  /** 标签字段的键名，默认为 'name' */
+  labelKey?: string;
+}
+
+/**
+ * 表单值类型
+ */
+export type FormValues = Record<string, any>;
+
+/**
+ * 表单配置项
+ */
+export interface FormOption {
+  /** React 需要的 key，如果传递了唯一的 name，则不需要 */
+  key?: string;
+  /** 表单项字段名 */
+  name?: string | string[];
+  /** 表单项标签 */
+  label?: ReactNode;
+  /** 渲染类型 */
+  render?: FormItemRenderType;
+  /** 占据栅格列数，默认 12 */
+  span?: number | string;
+  /** 是否必填，默认 true，支持函数动态计算 */
+  required?: boolean | ((formValues: FormValues) => boolean);
+  /** 验证规则 */
+  rules?: Rule | Rule[];
+  /** 占位符文本，默认会根据传入的 render 类型自动判断（请选择、请输入）和 label 组合 */
+  placeholder?: ReactNode;
+  /** 提示信息，传入将在 label 右侧生成图标展示 tooltip */
+  tip?: ReactNode;
+  /** 是否隐藏，默认 false，支持函数动态计算 */
+  hidden?: boolean | ((formValues: FormValues) => boolean);
+  /** 是否自定义渲染，完全交给外部控制渲染，默认 false */
+  customizeRender?: boolean;
+  /** 选项数据（用于 select、radio、checkbox） */
+  items?: OptionItem[];
+  /** 字段键配置 */
+  itemsField?: itemsFieldConfig;
+  /** 传递给表单控件的属性，支持函数动态计算 */
+  componentProps?: Record<string, any> | ((formValues: FormValues) => Record<string, any>);
+  /** 传递给 Form.Item 的属性，支持函数动态计算 */
+  formItemProps?: FormItemProps | ((formValues: FormValues) => FormItemProps);
+  /** label 栅格配置，默认直接使用外层的 labelCol，如果 span 等于 24，是外层的 labelCol.span 一半 */
+  labelCol?: ColProps;
+  /** wrapper 栅格配置，默认为 24 - labelCol.span */
+  wrapperCol?: ColProps;
+  /** 是否应该更新（用于表单联动） */
+  shouldUpdate?: boolean | ((prevValues: FormValues, nextValues: FormValues, info: { source?: string }) => boolean);
+  /** 依赖字段（用于表单联动） */
+  dependencies?: NamePath[];
+  /** 是否仅用于保存标签，不渲染到页面上，只在表单中保存数据，默认 false */
+  onlyForLabel?: boolean;
+}
+
+/**
+ * FormItemsRenderer 组件属性
+ */
+export interface FormItemsRendererProps {
+  /** 表单配置项数组 */
+  options: FormOption[];
+  /** 默认栅格占据列数，默认 12 */
+  span?: number;
+  /** 是否折叠（仅显示前3项），默认 false */
+  collapse?: boolean;
+  /** 自动生成必填规则，默认 true */
+  useAutoGenerateRequired?: boolean;
+  /** 初始值，用于在表单未初始化时提供默认值 */
+  initialValues?: FormValues;
+}
+
+/**
+ * 表单项渲染器组件
+ */
+declare const FormItemsRenderer: FC<FormItemsRendererProps>;
+
+export default FormItemsRenderer;

package/components/FormBuilder/FormItemsRenderer.js

@@ -135,8 +135,8 @@ const FormItemsRenderer = ({
 
   // 获取key
   const getKey = (option) => {
-    return option.key || option.name
-  }
+    return option.key || option.name;
+  };
 
   // 渲染表单控件
   const renderFormControl = (option) => {
@@ -280,6 +280,29 @@ const FormItemsRenderer = ({
         // 使用 style 控制显示/隐藏
         const style = collapse && index >= 3 ? { display: "none" } : undefined;
 
+        // 如果是 customizeRender 类型，完全交给外部控制渲染
+        if (option.customizeRender) {
+          return (
+            <Col key={getKey(option) || index} span={itemSpan} style={style}>
+              {option.render}
+            </Col>
+          );
+        }
+
+        // 如果是 onlyForLabel 类型，不渲染任何UI，只在表单中保存数据
+        if (option.onlyForLabel) {
+          return (
+            <Form.Item
+              key={getKey(option) || index}
+              name={option.name}
+              noStyle
+              preserve={false}
+            >
+              <input type="hidden" />
+            </Form.Item>
+          );
+        }
+
         // 如果是分割线
         if (option.render === FORM_ITEM_RENDER_ENUM.DIVIDER) {
           return (
@@ -292,43 +315,39 @@ const FormItemsRenderer = ({
         // 如果配置了 shouldUpdate 或 dependencies，使用 Form.Item 的联动机制
         if ((option.shouldUpdate ?? option.dependencies) || (option?.componentProps?.shouldUpdate ?? option?.componentProps?.dependencies)) {
           return (
-            option.customizeRender
-              ? (renderFormControl(option))
-              : (
-                  <Form.Item
-                    key={getKey(option) || index}
-                    noStyle
-                    preserve={false}
-                    shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate}
-                    dependencies={option.dependencies || option?.componentProps?.dependencies}
-                  >
-                    {() => {
-                    // 支持动态计算 hidden
-                      const hidden = typeof option.hidden === "function"
-                        ? option.hidden(getFormValues())
-                        : (option.hidden ?? false);
-
-                      if (hidden)
-                        return null;
-
-                      return (
-                        <Col key={getKey(option) || index} span={itemSpan} style={style}>
-                          <Form.Item
-                            name={option.name}
-                            label={renderLabel(option)}
-                            rules={getRules(option)}
-                            labelCol={itemLabelCol}
-                            wrapperCol={itemWrapperCol}
-                            preserve={false}
-                            {...getFormItemProps(option)}
-                          >
-                            {renderFormControl(option)}
-                          </Form.Item>
-                        </Col>
-                      );
-                    }}
-                  </Form.Item>
-                )
+            <Form.Item
+              key={getKey(option) || index}
+              noStyle
+              preserve={false}
+              shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate}
+              dependencies={option.dependencies || option?.componentProps?.dependencies}
+            >
+              {() => {
+                // 支持动态计算 hidden
+                const hidden = typeof option.hidden === "function"
+                  ? option.hidden(getFormValues())
+                  : (option.hidden ?? false);
+
+                if (hidden)
+                  return null;
+
+                return (
+                  <Col key={getKey(option) || index} span={itemSpan} style={style}>
+                    <Form.Item
+                      name={option.name}
+                      label={renderLabel(option)}
+                      rules={getRules(option)}
+                      labelCol={itemLabelCol}
+                      wrapperCol={itemWrapperCol}
+                      preserve={false}
+                      {...getFormItemProps(option)}
+                    >
+                      {renderFormControl(option)}
+                    </Form.Item>
+                  </Col>
+                );
+              }}
+            </Form.Item>
           );
         }
 
@@ -343,23 +362,17 @@ const FormItemsRenderer = ({
 
         return (
           <Col key={getKey(option) || index} span={itemSpan} style={style}>
-            {
-              option.customizeRender
-                ? (renderFormControl(option))
-                : (
-                    <Form.Item
-                      name={option.name}
-                      label={renderLabel(option)}
-                      rules={getRules(option)}
-                      labelCol={itemLabelCol}
-                      wrapperCol={itemWrapperCol}
-                      preserve={false}
-                      {...getFormItemProps(option)}
-                    >
-                      {renderFormControl(option)}
-                    </Form.Item>
-                  )
-            }
+            <Form.Item
+              name={option.name}
+              label={renderLabel(option)}
+              rules={getRules(option)}
+              labelCol={itemLabelCol}
+              wrapperCol={itemWrapperCol}
+              preserve={false}
+              {...getFormItemProps(option)}
+            >
+              {renderFormControl(option)}
+            </Form.Item>
           </Col>
         );
       })}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zy-react-library",
   "private": false,
-  "version": "1.0.77",
+  "version": "1.0.79",
   "type": "module",
   "description": "",
   "author": "LiuJiaNan",