GtDigManageWeb/src/pages/Flow/components/FormAndFilesNode.js

import { Card, Col, Row, Empty } from 'antd';
import { Form } from 'antd';
import { useMemo, useState } from 'react';
import { useModel } from 'umi';
import AttachmentTable from '@/components/AttachmentTable';
import InnerContactField from '@/components/DDComponents/InnerContactField';
import DepartmentField from '@/components/DDComponents/DepartmentField';
import ProjectField from '@/components/DDComponents/ProjectField';

const FormAndFilesNode = (props) => {
  const { formData, fileList } = props;

  const renderFormItem = (type, value) => {
    switch (type) {
      case 'InnerContactField':
        return <InnerContactField value={value} disabled={true} />;
      case 'DepartmentField':
        return <DepartmentField value={value} disabled={true} />;
      case 'ProjectField':
        return <ProjectField value={value} disabled={true} />;
      default:
        return (
          <div
            style={{
              width: '100%',
              padding: '4px 12px',
              backgroundColor: 'rgb(0,0,0,0.04)',
              border: '1px solid #D9D9D9',
              borderRadius: '6px',
              color: 'rgb(0,0,0,0.25) ',
            }}
          >
            {value}
          </div>
        );
    }
  };

  const renderForm = (data) => {
    if (!data) return <Empty description="没有表单信息" />;
    try {
      const formData = JSON.parse(data);
      if (formData.length == 0) return <Empty description="没有表单信息" />;
      return (
        <>
          {formData.map((item, idx) => {
            const value = item.value.join(',');
            return (
              <Form.Item
                key={`FormAndFilesNode_${idx}`}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                label={item.name}
              >
                {renderFormItem(item.type, value)}
              </Form.Item>
            );
          })}
        </>
      );
    } catch {
      return <Empty description="没有表单信息" />;
    }
  };

  const FormContent = useMemo(() => {
    return renderForm(formData);
  }, [formData]);

  return (
    <Card title="审批信息">
      <Row gutter={20}>
        <Col span={12}>{FormContent}</Col>

        <Col span={12}>
          <AttachmentTable excelFileList={fileList} />
        </Col>
      </Row>
    </Card>
  );
};

export default FormAndFilesNode;