feat(custom): dynamicForm

src/components/formParse/components/DynamicForm.tsx

@@ -1,6 +1,8 @@
 import { forwardRef, memo, useEffect, useImperativeHandle } from 'react'
+import useUserStore from '@/store/userStore'
 import { dictMapping, useNoAuthDict } from '@/hooks/useDict'
-import { DatePicker, Form, Input, InputNumber, Select } from 'antd'
+import { DatePicker, Form, Input, InputNumber, Select, Upload } from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
 
 const { RangePicker } = DatePicker
 
@@ -46,7 +48,7 @@ const DynamicForm = memo(
       const onFinishFailed = (errorInfo: any) => {
         console.log('Failed:', errorInfo)
       }
-      console.log(formData)
+      console.log('formData', formData)
       console.log(formItems)
       console.log(setFormData)
 
@@ -79,7 +81,6 @@ const DynamicForm = memo(
 
             return (
               <FieldWrapper key={widgetId}>
-                {JSON.stringify(formRule[widgetId!])}
                 <Form.Item
                   name={widgetId}
                   label={labelContent}
@@ -105,8 +106,6 @@ 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'
@@ -138,7 +137,6 @@ const DynamicForm = memo(
 
             return (
               <FieldWrapper key={widgetId}>
-                {JSON.stringify(formRule[widgetId!])}
                 <Form.Item name={widgetId} label={labelContent} style={{ marginBottom: 0 }}>
                   <InputNumber
                     className='!w-full'
@@ -166,7 +164,6 @@ 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}
@@ -178,7 +175,6 @@ const DynamicForm = memo(
               </FieldWrapper>
             )
           }
-
           case 'DATETIME_PICKER': {
             const expandVal = expand as API.FD_COM['DATETIME_PICKER']
 
@@ -195,8 +191,6 @@ const DynamicForm = memo(
             if (!datePickerType.includes('range')) {
               return (
                 <FieldWrapper key={widgetId}>
-                  {datePickerType}
-                  {datePickerTypeMap[datePickerType as keyof typeof datePickerTypeMap].dateFormat}
                   <Form.Item name={widgetId} label={labelContent} style={{ marginBottom: 0 }}>
                     <DatePicker
                       className='w-full'
@@ -218,7 +212,6 @@ const DynamicForm = memo(
             } else {
               return (
                 <FieldWrapper key={widgetId}>
-                  {datePickerType}
                   <Form.Item name={widgetId} label={labelContent} style={{ marginBottom: 0 }}>
                     <RangePicker
                       className='w-full'
@@ -239,6 +232,87 @@ const DynamicForm = memo(
               )
             }
           }
+          case 'FILE_PICKER': {
+            const expandVal = expand as API.FD_COM['FILE_PICKER']
+            const uploadUrl = '/cms/file/submit'
+            const userStore = useUserStore()
+            const headers = {
+              Authorization: 'Bearer ' + userStore.access_token,
+              'X-Tenant-Id': String(userStore.userInfo.tenantId),
+              'X-Target-Folder': 'DECLARATION',
+              'X-Client-Type': 'TO_B',
+              'X-Terminal-Type': ''
+            }
+
+            const limitType = (() => {
+              const accept = expandVal.accept || ''
+              const multiAcceptList = expandVal.multiAcceptList || []
+              if (accept && multiAcceptList.length !== 0) {
+                if (multiAcceptList[0] === 'ATTACHMENT') {
+                  return undefined
+                } else {
+                  return multiAcceptList.join(',')
+                }
+              } else if (accept) {
+                if (accept === 'ATTACHMENT') {
+                  return undefined
+                } else {
+                  return accept
+                }
+              } else if (multiAcceptList.length !== 0) {
+                if (multiAcceptList[0] === 'ATTACHMENT') {
+                  return undefined
+                } else {
+                  return multiAcceptList.join(',')
+                }
+              } else {
+                return undefined
+              }
+            })()
+            const normFile = (e: any) => {
+              console.log(e)
+              if (Array.isArray(e)) return e
+              return e?.fileList || []
+            }
+
+            console.log(limitType)
+
+            const handlePreview = (file: any) => {
+              console.log(file)
+              // window.open(file.url)
+            }
+            const handleChange = (file: any) => {
+              console.log(file)
+            }
+
+            const uploadButton = (
+              <button style={{ border: 0, background: 'none' }} type='button'>
+                <PlusOutlined />
+                <div style={{ marginTop: 8 }}>点击上传</div>
+              </button>
+            )
+            return (
+              <FieldWrapper key={widgetId}>
+                <Form.Item
+                  name={widgetId}
+                  label={labelContent}
+                  style={{ marginBottom: 0 }}
+                  valuePropName='fileList'
+                  getValueFromEvent={normFile}>
+                  <Upload
+                    action={import.meta.env.VITE_APP_ENV === 'dev' ? '/api' + uploadUrl : uploadUrl}
+                    headers={headers}
+                    listType='picture-card'
+                    accept={limitType}
+                    maxCount={expandVal.limit}
+                    onPreview={handlePreview}
+                    onChange={handleChange}>
+                    {uploadButton}
+                  </Upload>
+                </Form.Item>
+              </FieldWrapper>
+            )
+          }
           // 其他组件类型...
           default:
             return null
@@ -249,6 +323,7 @@ const DynamicForm = memo(
         <Form
           form={form}
           layout='vertical'
+          initialValues={formData}
           disabled={disabled}
           onFinish={onFinish}
           onFinishFailed={onFinishFailed}>