zsy3-web/src/components/formParse/components/DynamicForm.tsx

import { forwardRef, memo, useEffect, useImperativeHandle } from 'react'
import useUserStore from '@/store/userStore'
import { dictMapping, useNoAuthDict } from '@/hooks/useDict'
import { DatePicker, Form, Input, InputNumber, Select, Upload } from 'antd'
import { PlusOutlined } from '@ant-design/icons'

const { RangePicker } = DatePicker

export interface DynamicFormRef {
  onSubmit: () => void
}

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 = {}, formRule = {}, disabled = false, setFormData }, ref) => {
      useImperativeHandle(ref, () => {
        return {
          onSubmit
        }
      })

      console.log(formRule)

      const { dictArray: inputUnitTypeOptions, dictRequestFn: getInputUnitTypeOptions } =
        useNoAuthDict('input_unit_type')
      useEffect(() => {
        getInputUnitTypeOptions()
      }, [])
      useEffect(() => {
        console.log(inputUnitTypeOptions)
      }, [inputUnitTypeOptions])

      const [form] = Form.useForm()
      const onSubmit = () => {
        form.submit()
      }
      const onFinish = (values: any) => {
        console.log('Finish:', values)
      }
      const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo)
      }
      console.log('formData', formData)
      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]'>
            {props.children}
          </div>
        )
      }
      const renderField = (field: API.TmplItem) => {
        const options = field.itemStruct
        const { type, label, desc, placeholder, visible, expand, widgetId } = options!
        if (!visible) return null // 条件渲染

        const labelContent = (
          <div>
            <div>{label.text}</div>
            {desc && (
              <div className='text-text-secondary mt-[4px]' style={{ fontSize: '12px' }}>
                {desc}
              </div>
            )}
          </div>
        )
        switch (type) {
          case 'INPUT': {
            const expandVal = expand as API.FD_COM['INPUT']

            return (
              <FieldWrapper key={widgetId}>
                <Form.Item
                  name={widgetId}
                  label={labelContent}
                  rules={formRule[widgetId!]}
                  hasFeedback
                  style={{ marginBottom: 0 }}>
                  <Input
                    placeholder={placeholder}
                    prefix={expandVal.prefix}
                    suffix={expandVal.suffix}
                    showCount
                    allowClear
                  />
                </Form.Item>
              </FieldWrapper>
            )
          }
          case 'NUMBER_INPUT': {
            const expandVal = expand as API.FD_COM['NUMBER_INPUT']
            const min = typeof expandVal.min === 'number' ? expandVal.min : undefined
            const max = typeof expandVal.max === 'number' ? expandVal.max : undefined
            const decimalDigits = expandVal.decimalPlacesNumber || 0

            return (
              <FieldWrapper key={widgetId}>
                <Form.Item name={widgetId} label={labelContent} style={{ marginBottom: 0 }}>
                  <InputNumber
                    className='!w-full'
                    placeholder={`${min !== undefined ? '最小值：' + min.toFixed(decimalDigits) + '；' : ''}${
                      max !== undefined ? '最大值：' + max.toFixed(decimalDigits) + '；' : ''
                    }${'小数位数：' + decimalDigits + '；'}`}
                    maxLength={parseInt(expandVal.maxChars)}
                    prefix={expandVal.prefix}
                    suffix={
                      (expandVal.suffix ||
                        (expandVal.featureType === 'NUMBER' && expandVal.unit)) &&
                      (expandVal.featureType === 'NUMBER' && expandVal.unit !== 'NONE'
                        ? expandVal.unit
                        : expandVal.suffix)
                    }
                    min={min}
                    max={max}
                    precision={decimalDigits}
                  />
                </Form.Item>
              </FieldWrapper>
            )
          }
          case 'AMOUNT_INPUT': {
            const expandVal = expand as API.FD_COM['NUMBER_INPUT']
            const min = typeof expandVal.min === 'number' ? expandVal.min : undefined
            const max = typeof expandVal.max === 'number' ? expandVal.max : undefined
            const decimalDigits = expandVal.decimalPlacesNumber || 0

            return (
              <FieldWrapper key={widgetId}>
                <Form.Item name={widgetId} label={labelContent} style={{ marginBottom: 0 }}>
                  <InputNumber
                    className='!w-full'
                    placeholder={`${min !== undefined ? '最小值：' + min.toFixed(decimalDigits) + '；' : ''}${
                      max !== undefined ? '最大值：' + max.toFixed(decimalDigits) + '；' : ''
                    }${'小数位数：' + decimalDigits + '；'}`}
                    maxLength={parseInt(expandVal.maxChars)}
                    prefix={expandVal.prefix}
                    suffix={
                      (expandVal.suffix || expandVal.unit) &&
                      (expandVal.unit
                        ? dictMapping({ unit: expandVal.unit }, 'unit', inputUnitTypeOptions)
                        : expandVal.suffix)
                    }
                    min={min}
                    max={max}
                    precision={decimalDigits}
                  />
                </Form.Item>
              </FieldWrapper>
            )
          }
          case 'SELECT': {
            const expandVal = expand as API.FD_COM['SELECT']

            return (
              <FieldWrapper key={widgetId}>
                <Form.Item name={widgetId} label={labelContent} style={{ marginBottom: 0 }}>
                  <Select
                    mode={expandVal.multiple ? 'multiple' : undefined}
                    placeholder={placeholder}
                    options={expandVal.userInput}
                    allowClear
                  />
                </Form.Item>
              </FieldWrapper>
            )
          }
          case 'DATETIME_PICKER': {
            const expandVal = expand as API.FD_COM['DATETIME_PICKER']

            const datePickerType = expandVal.dateType.toLowerCase()
            const datePickerTypeMap = {
              year: { picker: 'year', showTime: false, dateFormat: 'YYYY' },
              month: { picker: 'month', showTime: false, dateFormat: 'YYYY-MM' },
              date: { picker: undefined, showTime: false, dateFormat: 'YYYY-MM-DD' },
              week: { picker: 'week', showTime: false, dateFormat: 'YYYY-WW' },
              datetime: { picker: undefined, showTime: true, dateFormat: 'YYYY-MM-DD HH:mm:ss' },
              daterange: { picker: 'range', showTime: false, dateFormat: 'YYYY-MM-DD' },
              datetimerange: { picker: 'range', showTime: true, dateFormat: 'YYYY-MM-DD HH:mm:ss' }
            }
            if (!datePickerType.includes('range')) {
              return (
                <FieldWrapper key={widgetId}>
                  <Form.Item name={widgetId} label={labelContent} style={{ marginBottom: 0 }}>
                    <DatePicker
                      className='w-full'
                      picker={
                        datePickerTypeMap[datePickerType as keyof typeof datePickerTypeMap]
                          .picker as any
                      }
                      showTime={
                        datePickerTypeMap[datePickerType as keyof typeof datePickerTypeMap].showTime
                      }
                      format={
                        datePickerTypeMap[datePickerType as keyof typeof datePickerTypeMap]
                          .dateFormat
                      }
                    />
                  </Form.Item>
                </FieldWrapper>
              )
            } else {
              return (
                <FieldWrapper key={widgetId}>
                  <Form.Item name={widgetId} label={labelContent} style={{ marginBottom: 0 }}>
                    <RangePicker
                      className='w-full'
                      picker={
                        datePickerTypeMap[datePickerType as keyof typeof datePickerTypeMap]
                          .picker as any
                      }
                      showTime={
                        datePickerTypeMap[datePickerType as keyof typeof datePickerTypeMap].showTime
                      }
                      format={
                        datePickerTypeMap[datePickerType as keyof typeof datePickerTypeMap]
                          .dateFormat
                      }
                    />
                  </Form.Item>
                </FieldWrapper>
              )
            }
          }
          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
        }
      }

      return (
        <Form
          form={form}
          layout='vertical'
          initialValues={formData}
          disabled={disabled}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}>
          {formItems.map(renderField)}
        </Form>
      )
    }
  )
)

export default DynamicForm