Merge pull request #208 from yaob421123/master

fix(ProForm): 问题修复

Author: ChenlingasMx

packages/components/src/ProForm/README.md

@@ -190,6 +190,7 @@ const Demo = () => {
        <ProForm
          readOnly={true}
          formType="pure"
+         className="bbb"
          formDatas={ [
              {
                label: 'input',
@@ -844,7 +845,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={<span onClick={handleAddFormItems.bind(this,'delete',idx)}>删除</span>}
             >
              <ProForm
+              className="aaa"
               ref={(e) =>(formRefList.current[idx] = e)}
               // 表单类型
               formType="pure"

packages/components/src/ProForm/formdom.tsx

@@ -17,6 +17,8 @@ function FormDom({
   saveButtonProps = {},
   resetButtonProps = {},
   formInstanceRef,
+  className,
+  style,
 }: ProFormProps & {
   formfields: Record<string, FormFieldsProps<{}>> | 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 (
     <Form
+      className={className}
       ref={baseRef}
-      style={{ background: '#fff', paddingBottom: 10, marginBottom: 14 }}
+      style={styles}
       resetOnSubmit={false}
       onSubmit={({ initial, current }) => {
         // 如果传入了onSubmit走onSubmit,否则主动验证

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);

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 (
     <Descriptions
       bordered
       title={title}
       {...readOnlyProps}
-      style={{ width: '100%' }}
+      className={className}
+      style={{ width: '100%', ...style }}
     >
       {formDatas?.map(
         (

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<string, any>,

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

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) ? (
-            <span className="w-proform-label">{label}</span>
-          ) : (
-            label
-          ),
+          label: is ? <span className="w-proform-label">{label}</span> : label,
           children: <Widget {...widgetProps} />,
           ...otherProps,
           initialValue,