AuditDetailed.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. import { Button, Form, Input, InputNumber, Select, DatePicker, Rate, Upload } from 'antd';
  2. import { InnerContactField } from '@/components/DDComponents';
  3. import { PlusOutlined } from '@ant-design/icons';
  4. import React, { useState } from 'react';
  5. const { Option } = Select;
  6. const { RangePicker } = DatePicker;
  7. const layout = {
  8. labelCol: {
  9. span: 8,
  10. },
  11. wrapperCol: {
  12. span: 16,
  13. },
  14. };
  15. const AuditDetailed = ({ items }) => {
  16. const onFinish = values => {
  17. console.log(values);
  18. };
  19. const selectBefore = (
  20. <Select defaultValue="是" className="select-before">
  21. <Option value="是">是</Option>
  22. <Option value="否">否</Option>
  23. </Select>
  24. );
  25. const prefixSelector = (
  26. <Form.Item name="prefix" noStyle>
  27. <Select style={{ width: 70 }}>
  28. <Option value="86">+86</Option>
  29. <Option value="87">+87</Option>
  30. </Select>
  31. </Form.Item>
  32. );
  33. const children = [];
  34. for (let i = 10; i < 36; i++) {
  35. children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
  36. }
  37. const handleChange = value => {
  38. console.log(`selected ${value}`);
  39. };
  40. const GetComponent = item => {
  41. const {
  42. id,
  43. label,
  44. bizAlias,
  45. required,
  46. placeholder,
  47. options,
  48. align,
  49. statField,
  50. hideLabel,
  51. objOptions,
  52. format,
  53. pushToAttendance,
  54. labelEditableFreeze,
  55. requiredEditableFreeze,
  56. unit,
  57. extract,
  58. link,
  59. payEnable,
  60. bizType,
  61. childFieldVisible,
  62. notPrint,
  63. verticalPrint,
  64. hiddenInApprovalDetail,
  65. disabled,
  66. notUpper,
  67. children, // 子控件
  68. } = item.props;
  69. //{ id: startId, label: startLabel, upper, unit } = statField;是个array
  70. //objOptions ={value}
  71. // children ={componentName, props ={ id,label,bizAlias,required,}}
  72. console.log(item.props);
  73. let component;
  74. switch (item.componentName) {
  75. case 'TextField': //单行输入
  76. component = <Input disabled={disabled} placeholder={placeholder} />;
  77. break;
  78. case 'TextareaField': //多行输入
  79. component = <Input.TextArea disabled={disabled} placeholder={placeholder} />;
  80. break;
  81. case 'NumberField': //数字输入
  82. component = <InputNumber disabled={disabled} formatter={value => `${value}${unit}`} />;
  83. break;
  84. case 'DDSelectField': //单选框
  85. component = (
  86. <Select style={{ width: '100%' }} defaultValue="">
  87. {options.map(cur => (
  88. <Option key={cur.key} value={cur.key}>
  89. {cur.value}
  90. </Option>
  91. ))}
  92. </Select>
  93. );
  94. break;
  95. case 'DDMultiSelectField': //多选框
  96. component = (
  97. <Select mode="multiple" allowClear style={{ width: '100%' }} defaultValue="">
  98. {options.map(cur => (
  99. <Option value={cur}>{cur}</Option>
  100. ))}
  101. </Select>
  102. );
  103. break;
  104. case 'DDDateField': //日期控件
  105. component = <DatePicker format={format} />;
  106. break;
  107. case 'DDDateRangeField': //时间区间控件
  108. component = <RangePicker format={format} />;
  109. break;
  110. case 'TextNote': //文本说明控件
  111. // component = <p style={{textAlign: align}}></p>
  112. break;
  113. case 'PhoneField': //电话控件
  114. component = <Input type="phone" disabled={disabled} placeholder={placeholder} />;
  115. break;
  116. case 'DDPhotoField': //图片控件
  117. component = (
  118. <Upload>
  119. <Button icon={<PlusOutlined />}>添加图片</Button>
  120. </Upload>
  121. );
  122. break;
  123. case 'MoneyField': //金额控件
  124. component = <Input placeholder={placeholder} />;
  125. break;
  126. case 'TableField': //明细控件
  127. break;
  128. case 'DDAttachment': //附件
  129. component = (
  130. <Upload>
  131. <Button icon={<PlusOutlined />}>添加附件</Button>
  132. </Upload>
  133. );
  134. break;
  135. case 'InnerContactField': //联系人控件
  136. component = <InnerContactField></InnerContactField>;
  137. break;
  138. case 'DepartmentField': //部门控件
  139. break;
  140. case 'RelateField': //关联审批单
  141. break;
  142. case 'AddressField': //省市区控件
  143. break;
  144. case 'StarRatingField': //评分控件
  145. break;
  146. case 'FormRelateField': //关联控件
  147. break;
  148. }
  149. return (
  150. <Form.Item
  151. name={['user', 'introduction']}
  152. label={bizAlias || label}
  153. rules={[
  154. {
  155. required,
  156. },
  157. ]}
  158. >
  159. {component}
  160. {notUpper == 1 && <p>大写</p>}
  161. </Form.Item>
  162. );
  163. };
  164. return (
  165. <Form
  166. style={{ height: '300px', overflowY: 'scroll' }}
  167. layout="vertical"
  168. autoComplete="off"
  169. onFinish={onFinish}
  170. >
  171. {/* <Form.Item
  172. name={['user', 'name']}
  173. label="单行输入"
  174. rules={[
  175. {
  176. required: true,
  177. },
  178. ]}
  179. >
  180. <Input placeholder="Basic usage" />
  181. </Form.Item>
  182. <Form.Item
  183. name={['user', 'name']}
  184. label="金额输入"
  185. rules={[
  186. {
  187. required: true,
  188. },
  189. ]}
  190. >
  191. <Input placeholder="Basic usage" />
  192. <p>大写</p>
  193. </Form.Item>
  194. <Form.Item
  195. name={['user', 'age']}
  196. label="数字输入"
  197. rules={[
  198. {
  199. type: 'number',
  200. min: 0,
  201. max: 99,
  202. },
  203. ]}
  204. >
  205. <InputNumber placeholder="Basic usage" />
  206. </Form.Item>
  207. <Form.Item
  208. name={['user', 'introduction']}
  209. tooltip="This is a required field"
  210. label="多行输入"
  211. >
  212. <Input.TextArea placeholder="Basic usage" />
  213. </Form.Item>
  214. <Form.Item
  215. name="phone"
  216. label="Phone Number"
  217. rules={[{ required: true, message: 'Please input your phone number!' }]}
  218. >
  219. <Input addonBefore={prefixSelector} style={{ width: '100%' }} />
  220. </Form.Item>
  221. <Form.Item name={['user', 'introduction']} label="单选框">
  222. <Select style={{ width: '30%' }} defaultValue="Home">
  223. <Option value="Home">Home</Option>
  224. <Option value="Company">Company</Option>
  225. </Select>
  226. </Form.Item>
  227. <Form.Item name={['user', 'introduction']} label="多选框">
  228. <Select
  229. mode="multiple"
  230. allowClear
  231. style={{ width: '100%' }}
  232. placeholder="Please select"
  233. defaultValue={['a10', 'c12']}
  234. onChange={handleChange}
  235. >
  236. {children}
  237. </Select>
  238. </Form.Item>
  239. <Form.Item name={['user', 'introduction']} label="时间组件">
  240. <DatePicker onChange={() => {}} />
  241. </Form.Item>
  242. <Form.Item name={['user', 'introduction']} label="开始时间">
  243. <DatePicker onChange={() => {}} />
  244. <Select style={{ width: '30%' }} defaultValue="Home">
  245. <Option value="Home">上午</Option>
  246. <Option value="Company">下午</Option>
  247. </Select>
  248. </Form.Item>
  249. <Form.Item name={['user', 'introduction']} label="结束时间">
  250. <DatePicker onChange={() => {}} />
  251. <Select style={{ width: '30%' }} defaultValue="Home">
  252. <Option value="Home">上午</Option>
  253. <Option value="Company">下午</Option>
  254. </Select>
  255. </Form.Item>
  256. <Form.Item name={['user', 'introduction']} label="评分">
  257. <Rate />
  258. </Form.Item> */}
  259. {/* <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
  260. <Button type="primary" htmlType="submit">
  261. Submit
  262. </Button>
  263. </Form.Item> */}
  264. {items.map(item => GetComponent(item))}
  265. </Form>
  266. );
  267. };
  268. export default AuditDetailed;