|  | @@ -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);
 |