BomWeb/src/pages/Detail/AuditDetailed.js

import DDComponents from '@/components/DDComponents';
import React, { useMemo, useState } from 'react';
import { Button, Form } from 'antd';
import { FormulaType } from '@/components/AuditForm/FormulaModal';

const AuditDetailed = props => {
  const { allValues = [], items, form, onValuesChange, onTableValChange } = props;
  const depId = useMemo(() => {
    const id = items.find(item => item.componentName === 'DepartmentField')?.props.id;
    const value = allValues.find(item => item.id === id)?.value;
    if (value) return value[0];
  }, [allValues, items]);

  const data = useMemo(() => {
    let linkedData = {};
    items.forEach(d => {
      const item = d.props;
      if (item.linked) {
        linkedData = { ...linkedData, [item.id]: item.linked };
      }
    });
    const linkedList =
      items
        ?.map(item => {
          const linked = item.props.linked;
          return linked ? Object.values(linked).flat() : [];
        })
        .flat() || [];
    return { linkedData, linkedList };
  }, [items]);

  const onFinish = values => {
    console.log(values);
  };

  const GetComponent = item => {
    const { id, label, bizAlias, required, notUpper } = item.props;
    console.log(label);
    // 判断是否关联项
    if (data.linkedList.findIndex(curId => curId == id) !== -1) {
      let control = null; // 当前空间是否显示的条件 当id为control.id的组件选择的选项值为control.value 时显示
      Object.keys(data.linkedData).forEach(ctlIs => {
        const linked = data.linkedData[ctlIs];
        Object.keys(linked).forEach(value => {
          const ids = linked[value];
          if (ids.findIndex(curId => curId == id) !== -1) {
            control = { id: ctlIs, value };
          }
        });
      });
      let currentValue = form.getFieldValue(control?.id);
      if (currentValue != control?.value) return null;
    }

    let formLabel;
    if (bizAlias !== undefined) {
      formLabel = bizAlias;
    } else {
      try {
        // 判断label是否为JSON数组
        formLabel = JSON.parse(label).join(',');
      } catch (error) {
        formLabel = label;
      }
    }

    const renderComponents = () => {
      let content = '';
      if (item.componentName === 'CodeField') {
        content = <DDComponents item={item} depId={depId} />;
      } else if (item.componentName === 'FormulaField') {
        const strList = item.props?.formula?.map(formu => {
          if (formu.type === FormulaType.Filed) {
            const numItem = allValues?.find(item => item.id == formu.id);
            return numItem?.value[0] || 0;
          }
          return formu.label;
        });
        console.log('-------formula-------------', item, strList);
        const evalStr = strList?.join('');
        content = <DDComponents item={item} evalStr={evalStr} />;
      } else {
        content = <DDComponents item={item} />;
      }
      return content;
    };

    // const component = DDComponents({ item });
    // if (!component) return null;
    return (
      <>
        {item?.isTable === undefined ? (
          <Form.Item key={id} name={id} label={formLabel} rules={[{ required }]}>
            {renderComponents()}
          </Form.Item>
        ) : (
          <DDComponents item={item} onChange={onTableValChange} />
        )}
      </>
    );
  };

  return (
    <Form
      form={form}
      style={{ minHeight: '80vh', overflowY: 'auto', paddingRight: 20 }}
      layout="vertical"
      autoComplete="off"
      onValuesChange={onValuesChange}
      onFinish={onFinish}
    >
      {items.map(item => GetComponent(item))}
    </Form>
  );
};

export default AuditDetailed;