React动态组件

FormDyNew

const formItem1 = {
  type: 'radio',
  payload: {
    label: '业务领域',
    name: 'service',
    // value: '1'；这里面不能穿死value的值
    options: [
      {label:'智能光伏', value:'1'},
      {label:'站点能源', value:'2'},
      {label:'数据中心', value:'3'},
      {label:'充电网络', value:'4'},
    ],
    deFaultValue: JSON.parse(sessionStorage.getItem('service'))||'',
    rules:[
      {
        required: true,
        message: 'Please input your password!',
      },
    ]
  },
  nextItem: (currentValue) => {
    if (currentValue === null || currentValue === '') {
      return null;
    }
    console.log("firstCurrentValue",currentValue,currentValue===1);
    if (currentValue === '1') {
      console.log("formItem1里面的2",formItem2);
      return formItem2;
    } else if (currentValue === '2') {
      return formItem3;
    }else if (currentValue === '3') {
      return formItem4;
    } else if (currentValue === '4') {
      return formItem5;
    } else {
      return null;
    }
  }
}

const formItem2 = {
  type: 'radio',
  payload: {
    label: '产品类型',
    name: 'product',
    // value: '1'；这里面不能穿死value的值
    options: [
      {label:'BCU',value:'1'},
      {label:'CMU',value:'2'},
      {label:'PCS',value:'3'},
      {label:'数采',value:'4'},
      {label:'STS',value:'5'},
      {label:'户用单项逆变器',value:'6'},
      {label:'EMMA',value:'7'},
      {label:'户用储能',value:'8'},
      {label:'储能液冷',value:'9'},
    ],
    rules:[
      {
        required: true,
        message: 'Please input your password!',
      },
    ],
    deFaultValue: JSON.parse(sessionStorage.getItem('product'))||'',

  },
  nextItem: (currentValue) => {
    if(currentValue === null || currentValue === '') {
      return null;
    }
    console.log(currentValue);
    if (currentValue === '1') {
      return formItem6;
    } else if (currentValue === '2') {
      return formItem7;
    } else {
      return formItem7;
    }
  }
}

const formItem3 = {
  type: 'radio',
  name: 'product',
  payload: {
    label: '产品类型',
    name: 'product',
    // value: '1'；这里面不能穿死value的值
    options: [
      {label:'CMU',value:'1'},
      {label:'锂电CAN',value:'2'},
      {label:'锂电MODBUS',value:'3'},
    ],
    rules:[
      {
        required: true,
        message: 'Please input your password!',
      },
    ],
    deFaultValue: JSON.parse(sessionStorage.getItem('product'))||'',

  },
  nextItem: (currentValue) => null
}

const formItem4 = {
  type: 'radio',
  payload: {
    label: '产品类型',
    name: 'product',
    // value: '1'；这里面不能穿死value的值
    options: [
      {label:'锂电',value:'1'},
      {label:'UPS',value:'2'},
    ],
    rules:[
      {
        required: true,
        message: 'Please input your password!',
      },
    ],
    deFaultValue: JSON.parse(sessionStorage.getItem('product'))||'',

  },
  nextItem: (currentValue) => null
}

const formItem5 = {
  type: 'radio',
  payload: {
    label: '产品类型',
    name: 'product',
    // value: '1'；这里面不能穿死value的值
    options: [
      {label:'直流',value:'1'},
      {label:'充电模块',value:'2'},
    ],
    rules:[
      {
        required: true,
        message: 'Please input your password!',
      },
    ],
    deFaultValue: JSON.parse(sessionStorage.getItem('product'))||'',

  },
  nextItem: (currentValue) => null
}

const formItem6 = {
  type: 'checkbox',
  payload: {
    label: '产品类型',
    name: 'logType',
    // value: '1'；这里面不能穿死value的值
    options: [
      {label:'性能',value:'1'},
      {label:'告警',value:'2'},
      {label:'5分钟研发数据',value:'3'},
      {label:'故障录波',value:'4'},
      {label:'告警快照',value:'5'},
      {label:'旁路日志',value:'6'},
      {label:'操作日志',value:'7'},
    ],
    rules:[
      {
        required: true,
        message: 'Please input your password!',
      },
    ],
    deFaultValue: JSON.parse(sessionStorage.getItem('logType'))||'',

  },
  nextItem: (currentValue) => null
}

const formItem7 = {
  type: 'checkbox',
  payload: {
    label: '产品类型',
    name: 'logType',
    // value: '1'；这里面不能穿死value的值
    options: [
      {label:'性能',value:'1'},
      {label:'告警',value:'2'},
      {label:'5分钟研发数据',value:'2'},
      {label:'故障录波',value:'2'},
    ],
    deFaultValue: '1',
    rules:[
      {
        required: true,
        message: 'Please input your password!',
      },
    ],
    deFaultValue: JSON.parse(sessionStorage.getItem('logType'))||'',
  },
  nextItem: (currentValue) => null
}

export {
  formItem1
}

FromItemDyNew：

import { useEffect,useState } from 'react';
import {Radio, Select ,Checkbox, Form, Button} from 'antd';
import {formItem1} from './Item.config';
function FromItemDyNew() {
  const [useform] = Form.useForm();


  const onFinish = (values) => {
    console.log('Success:', values);

  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (<>
    FormDyNew动态表单：
    <br />
    <Form
    form={useform}
    name="basic"
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 600,
    }}
    initialValues={{
      remember: true,
    }}
    // initialValues	表单默认值，只有初始化以及重置时生效	object
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <DeepFormItem config ={formItem1} useform={useform}/>
    <Form.Item
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form.Item>
  </Form>
  </>)
};
export default FromItemDyNew;

function DeepFormItem({config, useform}) {
  const [filedValue, setFiledValue] = useState("");
  const [nextConfig, setNextConfig] = useState(null);

  const handleInputChange = () => {

  };

  const handleSelectChange = (e) => {
    setFiledValue(e);
  };

  const handleRadioChange = (e) => {
    setFiledValue(e.target.value);
  };

  const handleCheckboxChange = (e) => {
    console.log(e);
    setFiledValue(e);
  };

  useEffect(() => {
    // config的时候第一次渲染。
    if (config === null) {
      return;
    }
    // if (config.name === 'logType') {
    //   const res = config.nextItem(filedValue);
    //   setNextConfig(res);
    //   return;
    // }

    let commonValue = '';
    
    if (filedValue === '') {
      console.log("config",config);
      commonValue = config.payload.deFaultValue;
      useform.setFieldsValue({
        [config.payload.name]: commonValue,
      });
      if(commonValue !== '') {
        sessionStorage.setItem([config.payload.name], JSON.stringify(commonValue));
      }
      // session取出字符串变成数组： 这里面需要字符串数组变成数组。取出来的时候是数组。
    } else {
      sessionStorage.setItem([config.payload.name], JSON.stringify(filedValue));
      commonValue = filedValue;
    }
    const nextI = config.nextItem(commonValue);
    setNextConfig(nextI);
  }, [config,filedValue]);
  

  return (
    <>{
      (config !== null) && (<>
        {/* <Form.Item 
          label={config.payload.label}
          name={config.payload.name}
          rules={[
            {
              required: true,
              message: 'Please input your password!',
            },
          ]}
        > */}
        {config.type === 'select' && 
                <Form.Item 
                label={config.payload.label}
                name={config.payload.name}
                // initialvalues={config?.payload?.deFaultValue} 现在不起作用了
                rules={[
                  {
                    required: true,
                    message: 'Please input your password!',
                  },
                ]}
              >
            <Select 
              value={filedValue} 
              options={config.payload.options}
              onChange={handleSelectChange}
            />
            </Form.Item>
          }
          {config.type === 'radio' && 
            <Form.Item 
            label={config.payload.label}
            name={config.payload.name}
                // initialvalues={config?.payload?.deFaultValue} 现在不起作用了
            rules={[
              {
                required: true,
                message: 'Please input your password!',
              },
            ]}
          >
            <Radio.Group 
              value={filedValue} 
              options={config.payload.options}
              onChange={handleRadioChange}
            />
            </Form.Item>
          }
          {config.type === 'checkbox' && 
            <Form.Item 
            label={config.payload.label}
            name={config.payload.name}
            // initialvalues={config?.payload?.deFaultValue} 现在不起作用了
            rules={[
              {
                required: true,
                message: 'Please input your password!',
              },
            ]}
          >
            <Checkbox.Group
              value={filedValue} 
              options={config.payload.options}
              onChange={handleCheckboxChange}
            />
            </Form.Item>
          }
        {/* </Form.Item> */}
        <DeepFormItem config={nextConfig} useform={useform}/>
      </>)
    }
    </>
  );
}
// 我现在的想法是。如果选择到了，产品类型，给你默认全部选择。
// 能不能给产品类型初始化呢？啥意思呢。就是给产品类型。useState进行初始化。
// 那我在config 里面进行传值就行了。如果config里面配置一个。