|
@@ -1,7 +1,10 @@
|
|
|
-import { Button, Form, Input, InputNumber, Select, DatePicker, Rate, Upload } from 'antd';
|
|
|
+import { Button, Input, InputNumber, Select, DatePicker, Rate, Upload } from 'antd';
|
|
|
import { InnerContactField } from '@/components/DDComponents';
|
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
|
-import React, { useState } from 'react';
|
|
|
+import React, { useMemo, useState } from 'react';
|
|
|
+import { Form } from '@ant-design/compatible';
|
|
|
+import '@ant-design/compatible/assets/index.css';
|
|
|
+
|
|
|
const { Option } = Select;
|
|
|
const { RangePicker } = DatePicker;
|
|
|
const layout = {
|
|
@@ -13,33 +16,56 @@ const layout = {
|
|
|
},
|
|
|
};
|
|
|
|
|
|
-const AuditDetailed = ({ items }) => {
|
|
|
+const AuditDetailed = props => {
|
|
|
+ // const [form] = Form.useForm();
|
|
|
+ const { items, form } = props;
|
|
|
+
|
|
|
+ const behavior = useMemo(() => {
|
|
|
+ let data = {};
|
|
|
+ let watchList = {};
|
|
|
+ items.forEach(d => {
|
|
|
+ const item = d.props;
|
|
|
+ if (item.behaviorLinkage) {
|
|
|
+ const key = item.id;
|
|
|
+ item.behaviorLinkage.forEach(b => {
|
|
|
+ const value = b.value;
|
|
|
+ b.targets.forEach(t => {
|
|
|
+ data[t.fieldId] = { key, value };
|
|
|
+ });
|
|
|
+ watchList[key] = true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ return data;
|
|
|
+ }, [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 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 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 handleChange = value => {
|
|
|
+ // console.log(`selected ${value}`);
|
|
|
+ // };
|
|
|
|
|
|
const GetComponent = item => {
|
|
|
const {
|
|
@@ -70,11 +96,21 @@ const AuditDetailed = ({ items }) => {
|
|
|
notUpper,
|
|
|
children, // 子控件
|
|
|
} = item.props;
|
|
|
+ // 判断是否属于关联项
|
|
|
+ if (behavior[id]) {
|
|
|
+ const { key, value } = behavior[id];
|
|
|
+ let currentValue = form.getFieldValue(key);
|
|
|
+ // 判断是否需要渲染
|
|
|
+ if (currentValue instanceof Array) {
|
|
|
+ if (currentValue?.indexOf(value) == -1) return null;
|
|
|
+ } else {
|
|
|
+ if (currentValue != value) return null;
|
|
|
+ }
|
|
|
+ }
|
|
|
//{ 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': //单行输入
|
|
@@ -88,21 +124,35 @@ const AuditDetailed = ({ items }) => {
|
|
|
break;
|
|
|
case 'DDSelectField': //单选框
|
|
|
component = (
|
|
|
- <Select style={{ width: '100%' }} defaultValue="">
|
|
|
- {options.map(cur => (
|
|
|
- <Option key={cur.key} value={cur.key}>
|
|
|
- {cur.value}
|
|
|
- </Option>
|
|
|
- ))}
|
|
|
+ <Select style={{ width: '100%' }} onChange={e => console.log(e)}>
|
|
|
+ {options.map(cur => {
|
|
|
+ if (typeof cur == 'string') {
|
|
|
+ cur = JSON.parse(cur);
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <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 mode="multiple" allowClear style={{ width: '100%' }}>
|
|
|
+ {options.map(cur => {
|
|
|
+ if (typeof cur == 'string') {
|
|
|
+ cur = JSON.parse(cur);
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Option key={cur.key} value={cur.key}>
|
|
|
+ {cur.value}
|
|
|
+ </Option>
|
|
|
+ );
|
|
|
+ })}
|
|
|
</Select>
|
|
|
);
|
|
|
break;
|
|
@@ -151,17 +201,21 @@ const AuditDetailed = ({ items }) => {
|
|
|
case 'FormRelateField': //关联控件
|
|
|
break;
|
|
|
}
|
|
|
+ if (!component) return null;
|
|
|
return (
|
|
|
<Form.Item
|
|
|
- name={['user', 'introduction']}
|
|
|
+ // name={id}
|
|
|
label={bizAlias || label}
|
|
|
- rules={[
|
|
|
- {
|
|
|
- required,
|
|
|
- },
|
|
|
- ]}
|
|
|
+ // rules={[
|
|
|
+ // {
|
|
|
+ // required,
|
|
|
+ // },
|
|
|
+ // ]}
|
|
|
>
|
|
|
- {component}
|
|
|
+ {form.getFieldDecorator(id, {
|
|
|
+ rules: [{ required }],
|
|
|
+ })(component)}
|
|
|
+ {/* {component} */}
|
|
|
{notUpper == 1 && <p>大写</p>}
|
|
|
</Form.Item>
|
|
|
);
|
|
@@ -172,8 +226,23 @@ const AuditDetailed = ({ items }) => {
|
|
|
style={{ height: '300px', overflowY: 'scroll' }}
|
|
|
layout="vertical"
|
|
|
autoComplete="off"
|
|
|
+ form={form}
|
|
|
onFinish={onFinish}
|
|
|
>
|
|
|
+ {/* <Form.Item name={'DDSelectField_4XTULZ7SMI80'} label="单选框">
|
|
|
+ <Select
|
|
|
+ style={{ width: '30%' }}
|
|
|
+ defaultValue="Home"
|
|
|
+ onChange={e => {
|
|
|
+ form.setFieldsValue({
|
|
|
+ DDSelectField_4XTULZ7SMI80: e,
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Option value="option_0">option_0</Option>
|
|
|
+ <Option value="option_1">option_1</Option>
|
|
|
+ </Select>
|
|
|
+ </Form.Item> */}
|
|
|
{/* <Form.Item
|
|
|
name={['user', 'name']}
|
|
|
label="单行输入"
|
|
@@ -273,4 +342,4 @@ const AuditDetailed = ({ items }) => {
|
|
|
);
|
|
|
};
|
|
|
|
|
|
-export default AuditDetailed;
|
|
|
+export default Form.create()(AuditDetailed);
|