index.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. import { Input, InputNumber, Select, DatePicker, Rate } from 'antd';
  2. import TableField from './TableField';
  3. import PhoneField from './PhoneField';
  4. import InnerContactField from './InnerContactField';
  5. import DepartmentField from './DepartmentField';
  6. import ProjectField from './ProjectField';
  7. import ManufacturerField from './ManufacturerField';
  8. import DDMultiSelectField from './DDMultiSelectField';
  9. import NumberField from './NumberField';
  10. import DDPhotoField from './DDPhotoField';
  11. import DDSelectField from './DDSelectField';
  12. import DDDateField from './DDDateField';
  13. import DDDateRangeField from './DDDateRangeField';
  14. import DDAttachment from './DDAttachment';
  15. import TextNote from './TextNote';
  16. import DIYTable from './DIYTable';
  17. export default function DDComponents(props) {
  18. const { item, onChange } = props;
  19. const { placeholder, options, format, unit, disabled, notUpper } = item.props;
  20. let component = null;
  21. switch (item.componentName) {
  22. case 'TextField': //单行输入
  23. component = (
  24. <Input
  25. disabled={disabled}
  26. placeholder={placeholder}
  27. onChange={(e) => onChange?.(e.target.value)}
  28. />
  29. );
  30. break;
  31. case 'TextareaField': //多行输入
  32. component = (
  33. <Input.TextArea
  34. disabled={disabled}
  35. placeholder={placeholder}
  36. onChange={(e) => onChange?.(e.target.value)}
  37. />
  38. );
  39. break;
  40. case 'NumberField': //数字输入
  41. component = (
  42. <NumberField disabled={disabled} unit={unit} onChange={onChange} />
  43. );
  44. break;
  45. case 'DDSelectField': //单选框
  46. component = (
  47. <DDSelectField
  48. options={options}
  49. onChange={onChange}
  50. disabled={disabled}
  51. />
  52. );
  53. break;
  54. case 'DDMultiSelectField': //多选框
  55. component = (
  56. <DDMultiSelectField
  57. disabled={disabled}
  58. options={options}
  59. onChange={onChange}
  60. />
  61. );
  62. break;
  63. case 'DDDateField': //日期控件
  64. component = (
  65. <DDDateField
  66. placeholder={placeholder}
  67. format={format}
  68. disabled={disabled}
  69. onChange={onChange}
  70. />
  71. );
  72. break;
  73. case 'DDDateRangeField': //时间区间控件
  74. component = (
  75. <DDDateRangeField
  76. format={format}
  77. disabled={disabled}
  78. onChange={onChange}
  79. />
  80. );
  81. break;
  82. case 'TextNote': //文本说明控件
  83. component = <TextNote value={placeholder} />;
  84. break;
  85. case 'PhoneField': //电话控件
  86. component = <PhoneField onChange={onChange} />;
  87. break;
  88. case 'DDPhotoField': //图片控件
  89. component = <DDPhotoField />;
  90. break;
  91. case 'MoneyField': //金额控件
  92. component = <Input placeholder={placeholder} onChange={onChange} />;
  93. break;
  94. case 'TableField': //明细控件
  95. component = <TableField item={item} />;
  96. break;
  97. case 'DDAttachment': //附件
  98. component = <DDAttachment onChange={onChange} />;
  99. // component = '附件控件未渲染!'
  100. console.info('附件控件未渲染!');
  101. break;
  102. case 'InnerContactField': //联系人控件
  103. component = <InnerContactField onChange={onChange}></InnerContactField>;
  104. break;
  105. case 'DepartmentField': //部门控件
  106. component = <DepartmentField onChange={onChange} />;
  107. break;
  108. case 'ProjectField':
  109. component = <ProjectField onChange={onChange} />;
  110. break;
  111. case 'ManufacturerField':
  112. component = <ManufacturerField onChange={onChange} />;
  113. break;
  114. case 'DIYTable':
  115. component = (
  116. <DIYTable
  117. tableID={item.props.id}
  118. columns={item.columns}
  119. onChange={onChange}
  120. />
  121. );
  122. break;
  123. case 'RelateField': //关联审批单
  124. component = '关联审批单控件未渲染!';
  125. break;
  126. case 'AddressField': //省市区控件
  127. component = '省市区控件未渲染!';
  128. break;
  129. case 'StarRatingField': //评分控件
  130. component = '评分控件未渲染!';
  131. break;
  132. case 'FormRelateField': //关联控件
  133. component = '关联控件未渲染!';
  134. break;
  135. }
  136. return (
  137. <>
  138. {component}
  139. {notUpper == 1 && <p>大写</p>}
  140. </>
  141. );
  142. }