123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276 |
- import { Button, Form, Input, InputNumber, Select, DatePicker, Rate, Upload } from 'antd';
- import { InnerContactField } from '@/components/DDComponents';
- import { PlusOutlined } from '@ant-design/icons';
- import React, { useState } from 'react';
- const { Option } = Select;
- const { RangePicker } = DatePicker;
- const layout = {
- labelCol: {
- span: 8,
- },
- wrapperCol: {
- span: 16,
- },
- };
- const AuditDetailed = ({ items }) => {
- const onFinish = values => {
- console.log(values);
- };
- const selectBefore = (
- <Select defaultValue="是" className="select-before">
- <Option value="是">是</Option>
- <Option value="否">否</Option>
- </Select>
- );
- const prefixSelector = (
- <Form.Item name="prefix" noStyle>
- <Select style={{ width: 70 }}>
- <Option value="86">+86</Option>
- <Option value="87">+87</Option>
- </Select>
- </Form.Item>
- );
- const children = [];
- for (let i = 10; i < 36; i++) {
- children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
- }
- const handleChange = value => {
- console.log(`selected ${value}`);
- };
- const GetComponent = item => {
- 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;
- //{ id: startId, label: startLabel, upper, unit } = statField;是个array
- //objOptions ={value}
- // children ={componentName, props ={ id,label,bizAlias,required,}}
- console.log(item.props);
- let component;
- switch (item.componentName) {
- case 'TextField': //单行输入
- component = <Input disabled={disabled} placeholder={placeholder} />;
- break;
- case 'TextareaField': //多行输入
- component = <Input.TextArea disabled={disabled} placeholder={placeholder} />;
- break;
- case 'NumberField': //数字输入
- component = <InputNumber disabled={disabled} formatter={value => `${value}${unit}`} />;
- break;
- case 'DDSelectField': //单选框
- component = (
- <Select style={{ width: '100%' }} defaultValue="">
- {options.map(cur => (
- <Option key={cur.key} value={cur.key}>
- {cur.value}
- </Option>
- ))}
- </Select>
- );
- break;
- case 'DDMultiSelectField': //多选框
- component = (
- <Select mode="multiple" allowClear style={{ width: '100%' }} defaultValue="">
- {options.map(cur => (
- <Option value={cur}>{cur}</Option>
- ))}
- </Select>
- );
- break;
- case 'DDDateField': //日期控件
- component = <DatePicker format={format} />;
- break;
- case 'DDDateRangeField': //时间区间控件
- component = <RangePicker format={format} />;
- break;
- case 'TextNote': //文本说明控件
- // component = <p style={{textAlign: align}}></p>
- break;
- case 'PhoneField': //电话控件
- component = <Input type="phone" disabled={disabled} placeholder={placeholder} />;
- break;
- case 'DDPhotoField': //图片控件
- component = (
- <Upload>
- <Button icon={<PlusOutlined />}>添加图片</Button>
- </Upload>
- );
- break;
- case 'MoneyField': //金额控件
- component = <Input placeholder={placeholder} />;
- break;
- case 'TableField': //明细控件
- break;
- case 'DDAttachment': //附件
- component = (
- <Upload>
- <Button icon={<PlusOutlined />}>添加附件</Button>
- </Upload>
- );
- break;
- case 'InnerContactField': //联系人控件
- component = <InnerContactField></InnerContactField>;
- break;
- case 'DepartmentField': //部门控件
- break;
- case 'RelateField': //关联审批单
- break;
- case 'AddressField': //省市区控件
- break;
- case 'StarRatingField': //评分控件
- break;
- case 'FormRelateField': //关联控件
- break;
- }
- return (
- <Form.Item
- name={['user', 'introduction']}
- label={bizAlias || label}
- rules={[
- {
- required,
- },
- ]}
- >
- {component}
- {notUpper == 1 && <p>大写</p>}
- </Form.Item>
- );
- };
- return (
- <Form
- style={{ height: '300px', overflowY: 'scroll' }}
- layout="vertical"
- autoComplete="off"
- onFinish={onFinish}
- >
- {/* <Form.Item
- name={['user', 'name']}
- label="单行输入"
- rules={[
- {
- required: true,
- },
- ]}
- >
- <Input placeholder="Basic usage" />
- </Form.Item>
- <Form.Item
- name={['user', 'name']}
- label="金额输入"
- rules={[
- {
- required: true,
- },
- ]}
- >
- <Input placeholder="Basic usage" />
- <p>大写</p>
- </Form.Item>
- <Form.Item
- name={['user', 'age']}
- label="数字输入"
- rules={[
- {
- type: 'number',
- min: 0,
- max: 99,
- },
- ]}
- >
- <InputNumber placeholder="Basic usage" />
- </Form.Item>
- <Form.Item
- name={['user', 'introduction']}
- tooltip="This is a required field"
- label="多行输入"
- >
- <Input.TextArea placeholder="Basic usage" />
- </Form.Item>
- <Form.Item
- name="phone"
- label="Phone Number"
- rules={[{ required: true, message: 'Please input your phone number!' }]}
- >
- <Input addonBefore={prefixSelector} style={{ width: '100%' }} />
- </Form.Item>
- <Form.Item name={['user', 'introduction']} label="单选框">
- <Select style={{ width: '30%' }} defaultValue="Home">
- <Option value="Home">Home</Option>
- <Option value="Company">Company</Option>
- </Select>
- </Form.Item>
- <Form.Item name={['user', 'introduction']} label="多选框">
- <Select
- mode="multiple"
- allowClear
- style={{ width: '100%' }}
- placeholder="Please select"
- defaultValue={['a10', 'c12']}
- onChange={handleChange}
- >
- {children}
- </Select>
- </Form.Item>
- <Form.Item name={['user', 'introduction']} label="时间组件">
- <DatePicker onChange={() => {}} />
- </Form.Item>
- <Form.Item name={['user', 'introduction']} label="开始时间">
- <DatePicker onChange={() => {}} />
- <Select style={{ width: '30%' }} defaultValue="Home">
- <Option value="Home">上午</Option>
- <Option value="Company">下午</Option>
- </Select>
- </Form.Item>
- <Form.Item name={['user', 'introduction']} label="结束时间">
- <DatePicker onChange={() => {}} />
- <Select style={{ width: '30%' }} defaultValue="Home">
- <Option value="Home">上午</Option>
- <Option value="Company">下午</Option>
- </Select>
- </Form.Item>
- <Form.Item name={['user', 'introduction']} label="评分">
- <Rate />
- </Form.Item> */}
- {/* <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
- <Button type="primary" htmlType="submit">
- Submit
- </Button>
- </Form.Item> */}
- {items.map(item => GetComponent(item))}
- </Form>
- );
- };
- export default AuditDetailed;
|