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

import { Card, Col, Row, Empty } from 'antd';
import { Form, Table } 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';
import DIYTable from '../../../components/DDComponents/DIYTable';

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

  const renderFormItem = (type, value, item) => {
    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 (
              <>
                {item.type !== 'DIYTable' ? (
                  <Form.Item
                    key={`FormAndFilesNode_${idx}`}
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    label={item.name}
                    labelAlign="left"
                  >
                    {renderFormItem(item.type, value, item)}
                  </Form.Item>
                ) : (
                  <div style={{ marginBottom: '24px' }}>
                    <DIYTable
                      table={item}
                      columns={item.value}
                      displayOnly={true}
                    ></DIYTable>
                  </div>
                )}
              </>
            );
          })}
        </>
      );
    } 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;