GtDigManageWeb/src/components/DDComponents/index.js

import { Input, InputNumber, Select, DatePicker, Rate } from 'antd';
import TableField from './TableField';
import PhoneField from './PhoneField';
import InnerContactField from './InnerContactField';
import DepartmentField from './DepartmentField';
import DDMultiSelectField from './DDMultiSelectField';
import NumberField from './NumberField';
import DDPhotoField from './DDPhotoField';
import DDSelectField from './DDSelectField';
import DDDateField from './DDDateField';
import DDDateRangeField from './DDDateRangeField';
import DDAttachment from './DDAttachment';
import TextNote from './TextNote';

export default function DDComponents(props) {
  const { item, onChange } = props;
  const { placeholder, options, format, unit, disabled, notUpper } = item.props;
  let component = null;
  switch (item.componentName) {
    case 'TextField': //单行输入
      component = (
        <Input
          disabled={disabled}
          placeholder={placeholder}
          onChange={(e) => onChange?.(e.target.value)}
        />
      );
      break;
    case 'TextareaField': //多行输入
      component = (
        <Input.TextArea
          disabled={disabled}
          placeholder={placeholder}
          onChange={(e) => onChange?.(e.target.value)}
        />
      );
      break;
    case 'NumberField': //数字输入
      component = (
        <NumberField disabled={disabled} unit={unit} onChange={onChange} />
      );
      break;
    case 'DDSelectField': //单选框
      component = (
        <DDSelectField
          options={options}
          onChange={onChange}
          disabled={disabled}
        />
      );
      break;
    case 'DDMultiSelectField': //多选框
      component = (
        <DDMultiSelectField
          disabled={disabled}
          options={options}
          onChange={onChange}
        />
      );
      break;
    case 'DDDateField': //日期控件
      component = (
        <DDDateField
          placeholder={placeholder}
          format={format}
          disabled={disabled}
          onChange={onChange}
        />
      );
      break;
    case 'DDDateRangeField': //时间区间控件
      component = (
        <DDDateRangeField
          format={format}
          disabled={disabled}
          onChange={onChange}
        />
      );
      break;
    case 'TextNote': //文本说明控件
      component = <TextNote value={placeholder} />;
      break;
    case 'PhoneField': //电话控件
      component = <PhoneField onChange={onChange} />;
      break;
    case 'DDPhotoField': //图片控件
      component = <DDPhotoField />;
      break;
    case 'MoneyField': //金额控件
      component = <Input placeholder={placeholder} onChange={onChange} />;
      break;
    case 'TableField': //明细控件
      component = <TableField item={item} />;
      break;
    case 'DDAttachment': //附件
      component = <DDAttachment onChange={onChange} />;
      // component = '附件控件未渲染!'
      console.info('附件控件未渲染!');
      break;
    case 'InnerContactField': //联系人控件
      component = <InnerContactField onChange={onChange}></InnerContactField>;
      break;
    case 'DepartmentField': //部门控件
      component = <DepartmentField onChange={onChange} />;
      break;
    case 'RelateField': //关联审批单
      component = '关联审批单控件未渲染!';
      break;
    case 'AddressField': //省市区控件
      component = '省市区控件未渲染!';
      break;
    case 'StarRatingField': //评分控件
      component = '评分控件未渲染!';
      break;
    case 'FormRelateField': //关联控件
      component = '关联控件未渲染!';
      break;
  }

  return (
    <>
      {component}
      {notUpper == 1 && <p>大写</p>}
    </>
  );
}