diff --git a/packages/components/src/ProForm/README.md b/packages/components/src/ProForm/README.md index d19c6963..d666a88a 100644 --- a/packages/components/src/ProForm/README.md +++ b/packages/components/src/ProForm/README.md @@ -190,6 +190,7 @@ const Demo = () => { { } const handleSave = async ()=>{ - const validateList = formList.map(itm=>itm.validateFieldsAndGetValue()) || [] + const validateList = await formList.map(itm => itm.validateFieldsAndGetValue()) || [] const values = await asyncAwaitFormList(validateList) setState(values) // 调用接口 @@ -979,7 +980,7 @@ const Demo = () => { } const handleSave = async ()=>{ - const validateList = formList.map(itm=>itm.validateFieldsAndGetValue()) || [] + const validateList = formList.map(itm=> itm.validateFieldsAndGetValue()) || [] const values = await asyncAwaitFormList(validateList) setState(values) // 调用接口 @@ -996,6 +997,7 @@ const Demo = () => { extra={删除} > (formRefList.current[idx] = e)} // 表单类型 formType="pure" diff --git a/packages/components/src/ProForm/formdom.tsx b/packages/components/src/ProForm/formdom.tsx index 19ab4d65..34978500 100644 --- a/packages/components/src/ProForm/formdom.tsx +++ b/packages/components/src/ProForm/formdom.tsx @@ -17,6 +17,8 @@ function FormDom({ saveButtonProps = {}, resetButtonProps = {}, formInstanceRef, + className, + style, }: ProFormProps & { formfields: Record> | undefined; formInstanceRef: React.MutableRefObject< @@ -36,13 +38,23 @@ function FormDom({ // 通过ref获取表单实例 useEffect(() => { - formInstanceRef.current = baseRef; - }, [baseRef]); + if (baseRef && baseRef.current) { + formInstanceRef.current = baseRef; + } + }, [baseRef, formInstanceRef]); + + const styles: React.CSSProperties = { + background: '#fff', + paddingBottom: 10, + marginBottom: 14, + ...style, + }; return (
{ // 如果传入了onSubmit走onSubmit,否则主动验证 diff --git a/packages/components/src/ProForm/index.tsx b/packages/components/src/ProForm/index.tsx index 2526a2ce..ffd00d59 100644 --- a/packages/components/src/ProForm/index.tsx +++ b/packages/components/src/ProForm/index.tsx @@ -41,17 +41,20 @@ function ProForm( // 通过ref导出实例方法 useImperativeHandle(ref, () => { - const { onSubmit, getError, getFieldValues } = - formInstanceRef?.current?.current || {}; // 表单验证(同时兼容老api submitvalidate和新api onSubmit ) - const submitvalidate = () => onSubmit?.() || null; + const submitvalidate = () => { + const { onSubmit } = formInstanceRef?.current?.current || {}; + onSubmit?.() || null; + }; // 验证并获取表单值 const validateFieldsAndGetValue = () => { return new Promise(async function (resolve, reject) { + const { getError, getFieldValues } = + formInstanceRef?.current?.current || {}; await submitvalidate(); const errors = getError?.() || {}; if (isObjectEmpty(errors)) { - const value = getFieldValues?.() || {}; + const value = (await getFieldValues?.()) || {}; resolve(value); } else { reject(errors); diff --git a/packages/components/src/ProForm/readform.tsx b/packages/components/src/ProForm/readform.tsx index 5104b374..e401d8a6 100644 --- a/packages/components/src/ProForm/readform.tsx +++ b/packages/components/src/ProForm/readform.tsx @@ -2,13 +2,20 @@ import { Descriptions } from 'uiw'; import { ProFormProps } from './type'; import { getReadValue } from './utils/index'; -export default ({ title, formDatas, readOnlyProps }: ProFormProps) => { +export default ({ + title, + formDatas, + readOnlyProps, + className, + style, +}: ProFormProps) => { return ( {formDatas?.map( ( diff --git a/packages/components/src/ProForm/type.ts b/packages/components/src/ProForm/type.ts index d3021cb3..2a215f27 100644 --- a/packages/components/src/ProForm/type.ts +++ b/packages/components/src/ProForm/type.ts @@ -11,6 +11,8 @@ import { ColProps, } from 'uiw'; export interface ProFormProps { + style?: React.CSSProperties; + className?: string; formDatas?: FormItemsProps[]; onSubmit?: ( initial: Record, diff --git a/packages/components/src/ProForm/utils/index.tsx b/packages/components/src/ProForm/utils/index.tsx index 017bc35d..2422eb18 100644 --- a/packages/components/src/ProForm/utils/index.tsx +++ b/packages/components/src/ProForm/utils/index.tsx @@ -179,7 +179,7 @@ export const fromValidate = (rules: FromValidateProps[] = []) => { */ export const isRequired = (rules: any[] = []): boolean => { if (rules.length === 0) return false; - const requireds = rules.find((item) => item.required) || []; + const requireds = rules.filter((item) => item.required || false); if (requireds && requireds.length > 0) { return true; } diff --git a/packages/components/src/ProForm/widgets/index.tsx b/packages/components/src/ProForm/widgets/index.tsx index 32e430c3..80ecc867 100644 --- a/packages/components/src/ProForm/widgets/index.tsx +++ b/packages/components/src/ProForm/widgets/index.tsx @@ -1,6 +1,7 @@ import { Fields, FormItemsProps } from '../type'; import { Input, + InputNumber, Switch, Textarea, DateInput, @@ -30,6 +31,7 @@ export function getFormFields( ) { const widgetsList: Fields = { input: Input, + inputNumber: InputNumber, radio: Radio, checkbox: CheckBox, switch: Switch, @@ -62,12 +64,9 @@ export function getFormFields( if (!hide) { const name = key; const Widget = widgetsList[widget]; + const is = isRequired(otherProps?.rules || []); fields[name] = { - label: isRequired(otherProps.rules) ? ( - {label} - ) : ( - label - ), + label: is ? {label} : label, children: , ...otherProps, initialValue,