WorkloadWeb/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';

const { Option } = Select;
const { RangePicker } = DatePicker;

export default function DDComponents(props) {
  const { item, onChange } = props;
  const {
    id,
    label,
    bizAlias,
    required,
    placeholder,
    options,
    align,
    statField,
    hideLabel,
    objOptions,
    format,
    pushToAttendance,
    labelEditableFreeze,
    requiredEditableFreeze,
    unit,
    extract,
    link,
    payEnable,
    bizType,
    childFieldVisible,
    notPrint,
    verticalPrint,
    hiddenInApprovalDetail,
    disabled,
    notUpper,
    children, // 子控件
  } = 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 format={format} disabled={disabled} onChange={onChange} />;
      break;
    case 'DDDateRangeField': //时间区间控件
      component = <DDDateRangeField format={format} disabled={disabled} onChange={onChange} />;
      break;
    case 'TextNote': //文本说明控件
      console.info('文本说明控件!');
      console.log(item);
      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 = (
      //   <Upload>
      //     <Button icon={<PlusOutlined />}>添加附件</Button>
      //   </Upload>
      // );
      console.info('附件控件未渲染!');
      console.log(item);
      break;
    case 'InnerContactField': //联系人控件
      component = <InnerContactField onChange={onChange}></InnerContactField>;
      break;
    case 'DepartmentField': //部门控件
      component = <DepartmentField onChange={onChange} />;
      break;
    case 'RelateField': //关联审批单
      console.info('关联审批单控件未渲染!');
      console.log(item);
      break;
    case 'AddressField': //省市区控件
      console.info('省市区控件未渲染!');
      console.log(item);
      break;
    case 'StarRatingField': //评分控件
      console.info('评分控件未渲染!');
      console.log(item);
      break;
    case 'FormRelateField': //关联控件
      console.info('关联控件未渲染!');
      console.log(item);
      break;
  }

  return component;
}