feat(custom): dynamicForm

src/components/formParse/components/DynamicForm.tsx

@@ -11,19 +11,22 @@ export interface DynamicFormRef {
 interface DynamicFormProps {
   formItems?: API.TmplItem[]
   formData?: Record<string, any>
+  formRule?: any
   disabled?: boolean
   setFormData: (data: Record<string, any>) => void
 }
 
 const DynamicForm = memo(
   forwardRef<DynamicFormRef, DynamicFormProps>(
-    ({ formItems = [], formData = {}, disabled = false, setFormData }, ref) => {
+    ({ formItems = [], formData = {}, formRule = {}, disabled = false, setFormData }, ref) => {
       useImperativeHandle(ref, () => {
         return {
           onSubmit
         }
       })
 
+      console.log(formRule)
+
       const { dictArray: inputUnitTypeOptions, dictRequestFn: getInputUnitTypeOptions } =
         useNoAuthDict('input_unit_type')
       useEffect(() => {
@@ -39,11 +42,6 @@ const DynamicForm = memo(
       }
       const onFinish = (values: any) => {
         console.log('Finish:', values)
-        for (const key in values) {
-          if (values[key]) {
-            console.log(values[key].format('YYYY-MM-DD'))
-          }
-        }
       }
       const onFinishFailed = (errorInfo: any) => {
         console.log('Failed:', errorInfo)
@@ -52,6 +50,7 @@ const DynamicForm = memo(
       console.log(formItems)
       console.log(setFormData)
 
+      // 表单项生成器
       const FieldWrapper = (props: { children: React.ReactNode }) => {
         return (
           <div className='px-[20px] py-[16px] mb-[16px] rounded-[10px] bg-[#ecf5ff]'>
@@ -61,9 +60,8 @@ const DynamicForm = memo(
       }
       const renderField = (field: API.TmplItem) => {
         const options = field.itemStruct
-        const { type, label, desc, placeholder, visible, valid, expand, widgetId } = options!
+        const { type, label, desc, placeholder, visible, expand, widgetId } = options!
         if (!visible) return null // 条件渲染
-        console.log(valid)
 
         const labelContent = (
           <div>
@@ -81,10 +79,15 @@ const DynamicForm = memo(
 
             return (
               <FieldWrapper key={widgetId}>
-                <Form.Item name={widgetId} label={labelContent} style={{ marginBottom: 0 }}>
+                {JSON.stringify(formRule[widgetId!])}
+                <Form.Item
+                  name={widgetId}
+                  label={labelContent}
+                  rules={formRule[widgetId!]}
+                  hasFeedback
+                  style={{ marginBottom: 0 }}>
                   <Input
                     placeholder={placeholder}
-                    maxLength={parseInt(expandVal.maxChars)}
                     prefix={expandVal.prefix}
                     suffix={expandVal.suffix}
                     showCount
@@ -102,6 +105,8 @@ const DynamicForm = memo(
 
             return (
               <FieldWrapper key={widgetId}>
+                {JSON.stringify(formRule[widgetId!])}
+                {widgetId}
                 <Form.Item name={widgetId} label={labelContent} style={{ marginBottom: 0 }}>
                   <InputNumber
                     className='!w-full'
@@ -133,6 +138,7 @@ const DynamicForm = memo(
 
             return (
               <FieldWrapper key={widgetId}>
+                {JSON.stringify(formRule[widgetId!])}
                 <Form.Item name={widgetId} label={labelContent} style={{ marginBottom: 0 }}>
                   <InputNumber
                     className='!w-full'
@@ -160,6 +166,7 @@ const DynamicForm = memo(
 
             return (
               <FieldWrapper key={widgetId}>
+                {JSON.stringify(formRule[widgetId!])}
                 <Form.Item name={widgetId} label={labelContent} style={{ marginBottom: 0 }}>
                   <Select
                     mode={expandVal.multiple ? 'multiple' : undefined}

src/components/formParse/index.tsx

@@ -209,9 +209,9 @@ const FormParse = memo(
                   (item.itemStruct.expand as API.FD_COM['SELECT']).multiple
                     ? '请至少选择一个选项'
                     : `${tipText}${item.itemStruct?.label.text}`,
-                trigger: 'blur'
+                validateTrigger: 'onBlur'
               })
-              // requireLimit
+              // requireLimit 只需要添加一条即可，适用于FILE_PICKER、INVOICE_PICKER、FINANCE_PICKER
               if ((item.itemStruct!.expand as API.FD_COM['FILE_PICKER'])?.requiredLimit) {
                 rules.push({
                   validator: (_rule: any, value: any, callback: any) => {
@@ -229,80 +229,17 @@ const FormParse = memo(
                       callback()
                     }
                   },
-                  trigger: 'blur'
-                })
-              }
-              if (
-                (item.itemStruct!.expand as API.FD_COM_ENHANCE['INVOICE_PICKER'])?.requiredLimit
-              ) {
-                rules.push({
-                  validator: (_rule: any, value: any, callback: any) => {
-                    if (
-                      value.length <
-                      (item.itemStruct!.expand as API.FD_COM_ENHANCE['INVOICE_PICKER'])!
-                        .requiredLimit!
-                    ) {
-                      callback(
-                        new Error(
-                          `至少上传${(item.itemStruct!
-                            .expand as API.FD_COM_ENHANCE['INVOICE_PICKER'])!.requiredLimit!}个文件`
-                        )
-                      )
-                    } else {
-                      callback()
-                    }
-                  },
-                  trigger: 'blur'
-                })
-              }
-              if (
-                (item.itemStruct!.expand as API.FD_COM_ENHANCE['FINANCE_PICKER'])?.requiredLimit
-              ) {
-                rules.push({
-                  validator: (_rule: any, value: any, callback: any) => {
-                    if (
-                      value.length <
-                      (item.itemStruct!.expand as API.FD_COM_ENHANCE['FINANCE_PICKER'])!
-                        .requiredLimit!
-                    ) {
-                      callback(
-                        new Error(
-                          `至少上传${(item.itemStruct!
-                            .expand as API.FD_COM_ENHANCE['FINANCE_PICKER'])!.requiredLimit!}个文件`
-                        )
-                      )
-                    } else {
-                      callback()
-                    }
-                  },
-                  trigger: 'blur'
+                  validateTrigger: 'onBlur'
                 })
               }
             }
 
+            // maxChars 只需要添加一条即可，适用于INPUT、NUMBER_INPUT、AMOUNT_INPUT
             if ((item.itemStruct!.expand as API.FD_COM['INPUT'])?.maxChars) {
               rules.push({
                 max: parseInt((item.itemStruct!.expand as API.FD_COM['INPUT'])?.maxChars),
                 message: `最多输入${(item.itemStruct!.expand as API.FD_COM['INPUT'])?.maxChars}个字符`,
-                trigger: 'blur'
-              })
-            }
-            if ((item.itemStruct!.expand as API.FD_COM['NUMBER_INPUT'])?.maxChars) {
-              rules.push({
-                max: parseInt((item.itemStruct!.expand as API.FD_COM['NUMBER_INPUT'])?.maxChars),
-                message: `最多输入${
-                  (item.itemStruct!.expand as API.FD_COM['NUMBER_INPUT'])?.maxChars
-                }个字符`,
-                trigger: 'blur'
-              })
-            }
-            if ((item.itemStruct!.expand as API.FD_COM['AMOUNT_INPUT'])?.maxChars) {
-              rules.push({
-                max: parseInt((item.itemStruct!.expand as API.FD_COM['AMOUNT_INPUT'])?.maxChars),
-                message: `最多输入${
-                  (item.itemStruct!.expand as API.FD_COM['AMOUNT_INPUT'])?.maxChars
-                }个字符`,
-                trigger: 'blur'
+                validateTrigger: 'onBlur'
               })
             }
             // 这里可以根据需要添加其他规则
@@ -316,7 +253,7 @@ const FormParse = memo(
                     callback()
                   }
                 },
-                trigger: 'blur'
+                validateTrigger: 'onBlur'
               })
             })
             if (Array.isArray(formRule![item.itemStruct!.widgetId!]) && disabled) {
@@ -405,6 +342,7 @@ const FormParse = memo(
               formItems={formItemsCopy}
               formData={formData}
               setFormData={setFormData}
+              formRule={formRule}
               disabled={disabled}
             />
           )}