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

优化FormBuilder

master
LiuJiaNan 2025-12-15 15:26:56 +08:00
parent 3e6c4c826c
commit fb6a9be855
3 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/FormBuilder/FormBuilder.js
View File

@ -1,4 +1,4 @@
import { Button, Col, Form, Row, Space, Spin, message } from "antd";
import { Button, Col, Form, message, Row, Space, Spin } from "antd";
import FormItemsRenderer from "./FormItemsRenderer";
/**

2
components/FormBuilder/FormItemsRenderer.d.ts vendored
View File

@ -77,6 +77,8 @@ export interface FormOption {
required?: boolean | ((formValues: FormValues) => boolean);
/** 验证规则 */
rules?: Rule | Rule[];
/** 是否使用字符验证限制 */
useConstraints?: boolean;
/** 占位符文本，默认会根据传入的 render 类型自动判断（请选择、请输入）和 label 组合 */
placeholder?: ReactNode;
/** 提示信息，传入将在 label 右侧生成图标展示 tooltip */

10
components/FormBuilder/FormItemsRenderer.js
View File

@ -147,17 +147,17 @@ const FormItemsRenderer = ({
const render = option.render || FORM_ITEM_RENDER_ENUM.INPUT;
switch (render) {
case FORM_ITEM_RENDER_ENUM.INPUT:
rules.push({ max: 50, message: "最多输入50字符" });
option.useConstraints !== false && rules.push({ max: 50, message: "最多输入50字符" });
break;
case FORM_ITEM_RENDER_ENUM.TEXTAREA:
rules.push({ max: 500, message: "最多输入500字符" });
option.useConstraints !== false && rules.push({ max: 500, message: "最多输入500字符" });
break;
case FORM_ITEM_RENDER_ENUM.INPUT_NUMBER:
case FORM_ITEM_RENDER_ENUM.NUMBER:
rules.push({ pattern: /^(\d+)(\.\d{1,2})?$/, message: "请输入正确的数字，最多保留两位小数" });
rules.push({
option.useConstraints !== false && rules.push({ pattern: /^(\d+)(\.\d{1,2})?$/, message: "请输入正确的数字，最多保留两位小数" });
option.useConstraints !== false && rules.push({
validator: (_, value) => {
if (value && Math.abs(Number.parseFloat(value)) > 999999999) {
return Promise.reject("输入数值超出安全范围");
@ -235,7 +235,7 @@ const FormItemsRenderer = ({
const itemsFieldKey = getItemsFieldKey(option);
/** @type {string | Function} */
const render = option.render || FORM_ITEM_RENDER_ENUM.INPUT;
const placeholder = option.placeholder || `请${render === FORM_ITEM_RENDER_ENUM.SELECT || render === FORM_ITEM_RENDER_ENUM.RADIO || render === FORM_ITEM_RENDER_ENUM.CHECKBOX ? "选择" : "输入"}${option.label}`;
const placeholder = option.placeholder || `请${[FORM_ITEM_RENDER_ENUM.INPUT, FORM_ITEM_RENDER_ENUM.TEXTAREA, FORM_ITEM_RENDER_ENUM.INPUT_NUMBER, FORM_ITEM_RENDER_ENUM.NUMBER].includes(render) ? "输入" : "选择"}${option.label}`;
switch (render) {
case FORM_ITEM_RENDER_ENUM.INPUT: