动态生成受控组件

/*
* UI 真因
* */

import React, { useEffect, useMemo, useState } from 'react';
import {
  // eslint-disable-next-line no-unused-vars
  WingBlank, Flex, TextareaItem, InputItem, Button,
} from 'antd-mobile';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import SetIcon from '../../img/forcast.png';
import '../display/style.less';
import '../common.less';

// import * as actions from '../../../custom/actions';
import * as actions from '../../actions';
import { formatDateStr } from '../../../improve/lib';
import { INITIALIZATION_IS_REALLY_BECAUSE } from '../inputData';

const completeData = INITIALIZATION_IS_REALLY_BECAUSE();

// eslint-disable-next-line no-unused-vars
let j = 0; // 真因数量
// eslint-disable-next-line no-unused-vars
let k = 0; // 对策数量
// const REASON_LIST

function RealCause(props) {
  const {
    // eslint-disable-next-line react/prop-types,no-unused-vars
    loadIndexSelect, indexOptions, route, loadCalculateData, editable,
    // eslint-disable-next-line no-unused-vars
    updateImprovedata, currentDisplay, displayData,
  } = props;
  const {
    params, fetchParams,
  } = props[route];
  const {
    // eslint-disable-next-line no-unused-vars
    indexId = '', targetValue = '', unit = '', ym = '',
    // eslint-disable-next-line no-unused-vars
    startDate = '', endDate = '',
    // eslint-disable-next-line no-unused-vars
    indexValue = '',
    // eslint-disable-next-line no-unused-vars
    inputTargetValue = '', improveValue = '',
  } = params;
  // 编辑禁用
  // eslint-disable-next-line no-unused-vars
  const editDisabled = useMemo(() => ['display', 'summary'].includes(route), [route]);
  const handleUpdateParam = param => {
    updateImprovedata(state => ({
      [route]: {
        ...state[route],
        params: { ...state[route].params, ...param },
      },
    }));
  };

  // eslint-disable-next-line no-unused-vars
  const handleChangeIndex = value => {
    handleUpdateParam({ indexId: value });
  };
  // eslint-disable-next-line no-unused-vars
  const handleChangeDate = ([start, end]) => {
    const startYm = formatDateStr(start);
    const endYm = formatDateStr(end);
    handleUpdateParam({ startDate: startYm, endDate: endYm });
  };
  // eslint-disable-next-line no-unused-vars
  const handleTargetBlur = () => {
    if (inputTargetValue !== targetValue) {
      handleUpdateParam({ targetValue: inputTargetValue });
    }
  };
  useEffect(() => {
    !indexOptions && loadIndexSelect();
  }, []);

  useEffect(() => {
    const initCalculateData = async () => {
      await loadCalculateData({ indexId, targetValue }, route);
    };
    targetValue && initCalculateData();
  }, [targetValue, fetchParams]);
  // ===================
  // 添加
  const [isAdd, setIsAdd] = useState(false);
  useEffect(() => {
    if (params.route === 'add') {
      setIsAdd(true);
    }
  }, []);
  const INIT_DATA = () => {
    const addInput = { [`inputNameK${k}`]: '请输入' };
    const addInputJ = { [`inputNameJ${j}`]: '请输入' };
    return [
      {
        taskCaus: '',
        inputName: addInputJ,
        modUser: '',
        causEntityList: [
          {
            causMeas: '',
            inputName: addInput,
            modUser: '',
          },
        ],
      },
    ];
  };

  // eslint-disable-next-line no-unused-vars
  const addCountermeasureDATA = () => {
    // 处理受控组件的 name值
    // eslint-disable-next-line no-unused-vars
    const addInput = { [`inputNameK${k}`]: '请输入' };
    return {
      causMeas: '',
      inputName: addInput,
      modUser: '',
    };
  };

  // eslint-disable-next-line prefer-const
  let [causeList, setCauseList] = useState(INIT_DATA());

  // 添加对策及责任人
  const addCountermeasures = i => {
    k += 1;
    setCauseList(causeList.map((value, index) => ({
      ...value,
      causEntityList: index === i
        ? [...value.causEntityList, addCountermeasureDATA()]
        : value.causEntityList,
    })));
  };
  useEffect(() => {
    console.log('展示', displayData);
    if (!displayData) return;
    setCauseList(displayData);
    // causeList = displayData;
  }, [displayData]);
  // 添加真因
  const addRealCause = () => {
    j += 1;
    k += 1;
    setCauseList([...causeList, { ...INIT_DATA()[0] }]);
  };
  const CardHeader = () => (
    <Flex styleName="box-header" align="center">
      <img
        src={SetIcon}
        alt=""
        style={{
          width: '32px',
          height: '32px',
        }}
      />
      <h3>
        <span
          style={{
            paddingRight: '115px',
          }}
        >
          真因与对策
        </span>
        <span style={{
          fontWeight: '400',
        }}
        >
          填报人: 张三
        </span>
      </h3>
    </Flex>
  );
  /*
  * 输入框更改
  * j  // 真因数量
  * k  // 对策数量
  * l  // 改善目标值
  *
  * */
  function inputChange(index, kOrJ, event, index1, isItTheResponsiblePerson) {
    const { target } = event;
    // eslint-disable-next-line no-unused-vars
    const { value } = target;
    // eslint-disable-next-line no-unused-vars
    let name;
    // 处理真因
    if (kOrJ === 'j') {
      // eslint-disable-next-line prefer-destructuring
      name = Object.keys(causeList[index].inputName)[0];
      // 找到对应的真因对象
      const obj = causeList.find(item => Object.keys(item.inputName)[0] === name);
      obj[name] = value;
      obj.taskCaus = value;
      setCauseList(causeList);
    } else if (kOrJ === 'k') {
      // eslint-disable-next-line prefer-destructuring
      name = Object.keys(causeList[index].causEntityList[index1].inputName)[0];
      // const obj = causeList[index].find(item => (item.causEntityList.inputName === name));
      const obj = causeList[index].causEntityList[index1];
      obj[name] = value;
      if (isItTheResponsiblePerson === 'responsible') {
        obj.modUser = value;
      } else if (isItTheResponsiblePerson === 'countermeasure') {
        obj.taskCaus = value;
      }
      setCauseList(causeList);
    }
    // const obj = numm.find(item => Object.keys(item)[0] === name);
  }


  useEffect(() => {
    completeData.taskEntityList = causeList;
  }, [causeList]);

  useEffect(() => {
    console.log('editable', editable);
    causeList = displayData;
  }, [displayData]);
  return (
    <div styleName="cardBox">
      <WingBlank size="lg">
        <>
          <CardHeader />
          {/* 循环生成  对策 ------------------------- S */}
          {causeList.map((value, index) => (
            <div key={index}>
              <p>
                改善措施
                {index + 1}
              </p>
              <div styleName="set-row">
                <h4>
                  真因
                  {index + 1 }
                </h4>
                {
                  isAdd
                    ? (
                      <TextareaItem
                        disabled={!editable}
                        placeholder="请输入"
                        autoHeight
                        styleName="set-input set-texterea"
                        name={value.inputName}
                        onChange={() => {
                          // eslint-disable-next-line no-restricted-globals
                          inputChange(index, 'j', event);
                        }}
                      />
                    ) : (
                      <TextareaItem
                        value={value.taskCaus}
                        disabled={!editable}
                        placeholder="请输入"
                        autoHeight
                        styleName="set-input set-texterea"
                        name={value.inputName}
                        onChange={() => {
                        // eslint-disable-next-line no-restricted-globals
                          inputChange(index, 'j', event);
                        }}
                      />
                    )}
              </div>
              {value.causEntityList.map((value1, index1) => (
                <div key={index1}>
                  <WingBlank size="lg">
                    <div styleName="set-row">
                      <div styleName="set-label">对策</div>
                      {
                        isAdd
                          ? (
                            <TextareaItem
                              autoHeight
                              styleName="set-input set-texterea"
                              placeholder="对策对策对策对策对策对策对策对策对策"
                              onChange={() => {
                                // eslint-disable-next-line no-restricted-globals
                                inputChange(index, 'k', event, index1, 'countermeasure');
                              }}
                              disabled={!editable}
                              name={value1.inputName}
                            />
                          )
                          : (
                            <TextareaItem
                              value={value1.causMeas}
                              autoHeight
                              styleName="set-input set-texterea"
                              placeholder="对策对策对策对策对策对策对策对策对策"
                              onChange={() => {
                                // eslint-disable-next-line no-restricted-globals
                                inputChange(index, 'k', event, index1, 'countermeasure');
                              }}
                              disabled={!editable}
                              name={value1.inputName}
                            />
                          )
                      }
                    </div>
                  </WingBlank>
                  <div styleName="set-row">
                    <div styleName="set-label">
                      {
                        isAdd
                          ? (
                            <InputItem
                              disabled={!editable}
                              placeholder="李四"
                              name={value1.inputName}
                              onChange={() => {
                                // eslint-disable-next-line no-restricted-globals
                                inputChange(index, 'k', event, index1, 'responsible');
                              }}
                            >
                              责任人
                            </InputItem>
                          )
                          : (
                            <InputItem
                              disabled={!editable}
                              placeholder="李四"
                              name={value1.inputName}
                              value={value1.mainStafName}
                              onChange={() => {
                                // eslint-disable-next-line no-restricted-globals
                                inputChange(index, 'k', event, index1, 'responsible');
                              }}
                            >
                              责任人
                            </InputItem>
                          )
                      }
                    </div>
                  </div>
                </div>
              ))}
              {/* 添加责任人 ------------ */}
              {
                editable
                  ? (
                    <Button
                      onClick={() => {
                        addCountermeasures(index);
                      }}
                    >
                      + 添加对策及责任人
                    </Button>
                  )
                  : <div />
              }

            </div>
          ))}
          {/* 循环生成 对策 -------------------------E */}
          {/* 添加真因 */}
          {
            editable
              ? (
                <Button
                  styleName="btn add-btn"
                  type="ghost"
                  inline
                  style={{ width: '100%' }}
                  onClick={() => {
                    addRealCause();
                  }}
                >
                  添加真因
                </Button>
              )
              : <div />
          }
        </>


      </WingBlank>
    </div>
  );
}
RealCause.propTypes = {
  route: PropTypes.string,
  poleOptions: PropTypes.array,
  loadChartList: PropTypes.func,
  updateImprovedata: PropTypes.func,
  rangId: PropTypes.string,
  rangText: PropTypes.string,
  benchmarkText: PropTypes.string,
  getPoleType: PropTypes.func,
  chartOptions: PropTypes.object,
  currentDisplay: PropTypes.string,
  editable: PropTypes.bool,
  displayData: PropTypes.array,

};
export const newSubmissionData = () => completeData;
export default connect(state => ({
  ...state.custom,
}), { ...actions })(RealCause);

inputdata

export const INITIALIZATION_IS_REALLY_BECAUSE = () => ({
  // 改善指标
  indxName: '',
  // 改善指标值
  indxVal: '10',
  // 目标值
  targVal: '50',
  unit: '丰田',
  // 开始日期
  targBegnYmd: '20200909',
  // 结束日期
  targEndYmd: '20201010',
  regiUser: 'Alan',
  modUser: 'Alans',
  // 真因列表
  taskEntityList: [{
    taskCaus: '真因内容',
    creaStafName: 'Alan',
    // 对策列表
    causEntityList: [{
      // 对策内容
      causMeas: '对策',
      // 责任人
      mainStafName: '责任人',
    }],
  }],
});