GtDigManageWeb/src/components/AuditForm/index.js

import React, { useState, useEffect, useMemo } from 'react';
import FormContent from './FormContent';
import ComponentLibrary from './ComponentLibrary';
import ItemAttribute from './ItemAttribute';
import { uuidv4 } from '@antv/xflow';
import { Button } from 'antd';
import RelModal from './RelModal';
import FormulaModal from './FormulaModal';

function AuditForm(props) {
  const { value, onChange } = props;
  const [formList, setFormList] = useState([]);
  const [select, setSelect] = useState('');
  const [selectList, setSelectList] = useState([]);
  const [visible, setVisible] = useState(false);

  const [relVisible, setRelVisible] = useState(false); //关联选项弹窗
  const [forVisible, setForVisible] = useState(false); //计算公式弹窗
  const [addToTable, setAddToTable] = useState(false);
  const [currentTableID, setCurrentTableID] = useState('');

  console.log('-----------------', formList);

  const handleAddItem = (item) => {
    if (addToTable) {
      // 新增列处理
      const column = generateItem(item);
      // 找到对应的表格
      const tableItem = formList.find(
        (item) => item.props.id === currentTableID,
      );
      column.isColumn = true;
      // 把新增的列加入到表格中
      tableItem.columns.push(column);
      // 把新增列的表格放回
      const newFormList = [];
      for (const item of formList) {
        if (item.props.id !== currentTableID) {
          newFormList.push(item);
        } else {
          newFormList.push(tableItem);
        }
      }
      handleChangeList(newFormList);
      setCurrentTableID('');
    } else {
      const formItem = generateItem(item);
      handleChangeList([...formList, formItem]);
    }
    setAddToTable(false);
    setVisible(false);
  };

  const generateItem = (item) => {
    let newItem = {
      ...item,
      props: { ...item.props, id: `${item.componentName}_${uuidv4()}` },
    };
    // 如果是表格的话
    if (item.props.label === '表格') {
      newItem.columns = [];
      newItem.isTable = true;
    }
    delete newItem.icon;
    return newItem;
  };

  const onChangeAttribute = (newItemProps) => {
    let oldFormItem = findFormItem();
    let newFormList = [];
    // 是列
    if (oldFormItem.isColumn) {
      // 找到表格和col然后改掉属性
      for (const item of formList) {
        if (item.isTable) {
          for (const column of item.columns) {
            if (column.props.id === selectList[selectList.length - 1]) {
              column.props = { ...column.props, ...newItemProps };
            }
          }
        }
        newFormList.push(item);
      }
    } else {
      for (const item of formList) {
        if (item.props.id === select) {
          item.props = { ...item.props, ...newItemProps };
        }
        newFormList.push(item);
      }
    }
    handleChangeList(newFormList);
  };

  const handleChangeList = (list) => {
    setFormList(list);
    onChange?.(list);
  };

  // 表格列变化时（新增，调整顺序）
  const handleTableColumnChange = (id, newCole = []) => {
    if (newCole.length) {
      // 调整col顺序
      const tableItem = formList.find((item) => item.props.id === id);
      tableItem.columns = newCole;
      const newFormList = [];
      for (const item of formList) {
        if (item.props.id !== currentTableID) {
          newFormList.push(item);
        } else {
          newFormList.push(tableItem);
        }
      }
      handleChangeList(newFormList);
    } else {
      setCurrentTableID(id);
      setAddToTable(true);
    }
  };

  const handleFormContentSelect = (ids) => {
    setSelectList(ids);
    setSelect(ids[0]);
  };

  const findFormItem = () => {
    let formItem = formList.find((item) => item.props.id === selectList[0]);

    if (formItem?.isTable) {
      // 如果是表格的话，还要寻找内部的被点击的col
      if (selectList.length === 1) {
        return formItem || null;
      }
      return (
        formItem.columns.find(
          (item) => item.props.id === selectList[selectList.length - 1],
        ) || null
      );
    } else {
      return formList.find((item) => item.props.id === select) || null;
    }
  };

  useEffect(() => {
    if (value instanceof Array) {
      setFormList([...value]);
      onChange?.([...value]);
    }
  }, [value]);

  return (
    <div>
      <Button onClick={() => setVisible(true)}>增加控件</Button>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          width: 1200,
          marginTop: 20,
        }}
      >
        <FormContent
          onSelect={handleFormContentSelect}
          onChange={handleChangeList}
          onTableColumnChange={handleTableColumnChange}
          list={formList}
        ></FormContent>
        <ItemAttribute
          formList={formList}
          key={selectList[selectList.length - 1]}
          item={findFormItem()}
          onRelClick={() => setRelVisible(true)}
          onFormulaClick={() => setForVisible(true)}
          onChange={onChangeAttribute}
        ></ItemAttribute>
      </div>
      <ComponentLibrary
        addToTable={addToTable}
        onOk={handleAddItem}
        visible={visible || addToTable}
        onCancel={() => {
          setVisible(false);
          setAddToTable(false);
        }}
      />
      <RelModal
        item={formList.find((item) => item.props.id === select)}
        formList={formList}
        visible={relVisible}
        onCancel={() => setRelVisible(false)}
        onChange={(value) => {
          setRelVisible(false);
          onChangeAttribute(value);
        }}
      />
      <FormulaModal
        item={formList.find((item) => item.props.id === select)}
        numFiledList={formList.filter(
          (item) => item.componentName == 'NumberField',
        )}
        visible={forVisible}
        onCancel={() => setForVisible(false)}
        onChange={(value) => {
          setForVisible(false);
          onChangeAttribute(value);
        }}
      />
    </div>
  );
}

export default AuditForm;