fe_supplier_frontend/src/pages/supplier/admission/admissionReviewManagement/components/ViewModal.tsx

import React, { useState, useEffect } from 'react';
import { Modal, Descriptions } from 'antd';

import { coscoAccessWork } from '../services'

//数据接口
interface Data {
  coscoAccessWork: coscoAccessWorks;
  coscoAccessSupplierList: coscoAccessSupplierLists[];
  coscoAccessCategoryList: coscoAccessCategoryLists[];
  coscoAccessUserls: coscoAccessUserl[];
  coscoAccessWorkAttachments: coscoAccessWorkAttachments;
}

interface coscoAccessWorkAttachments {
  fileName: string;
  fileUrl: string;
}
interface coscoAccessUserl {
  deptId: string;
  deptName: string;
  userId: string;
}
interface coscoAccessCategoryLists {
  categoryName: string;
  [property: string]: any;
}
interface coscoAccessSupplierLists {
  supplierName: string;
  [property: string]: any;
}
interface coscoAccessWorks {
  deptId: string;
  deptName: string;
  startTime: string;
  endTime: string;
  reviewStatusText: string;
  accessType: string;
  accessDesc: string;
  approveStatusText: string;
}

const ViewModal: React.FC<{
  visible: boolean;
  record?: any;
  onCancel: () => void;
}> = ({ visible, record = {}, onCancel }) => {
  //渲染数据
  const [data, setData] = useState<Data | null>(null);
  //初始化
  useEffect(() => {
    if (record.id) {
      coscoAccessWork(record.id).then((res) => {
        const { code, data } = res;
        if (code == 200) {
          setData(data)
        }
      })
    }
  }, [record])

  return (
    <Modal title="查看详情" visible={visible} footer={null} onCancel={onCancel}>
      {data && (
        <Descriptions bordered column={1}  labelStyle={{ width: 160 }}>
          <Descriptions.Item label="准入部门" >{data.coscoAccessWork.deptName}</Descriptions.Item>
          <Descriptions.Item label="准入供应商">
            {data.coscoAccessSupplierList.map((item) => {
              return (
                <div style={{ margin: '5px' }}>{item.supplierName}</div>
              )
            })}
          </Descriptions.Item>

          {data.coscoAccessWork.accessType === 'scattered' && (
            <>
              <Descriptions.Item label="准入说明">{data.coscoAccessWork.accessDesc}</Descriptions.Item>
              <Descriptions.Item label="附件">
                <a href={data.coscoAccessWorkAttachments.fileUrl} target="_blank" rel="noreferrer">{data.coscoAccessWorkAttachments.fileName}</a>
              </Descriptions.Item>
            </>
          )}
          {data.coscoAccessWork.accessType === 'offline' && (
              <Descriptions.Item label="供应商符合性审查">
                  <a href={data.coscoAccessWorkAttachments.fileUrl} target="_blank" rel="noreferrer">{data.coscoAccessWorkAttachments.fileName}</a>
              </Descriptions.Item>
          )}


          {data.coscoAccessWork.accessType === 'online' && (
            <>
              <Descriptions.Item label="申请准入品类">
                {data.coscoAccessCategoryList.map((item) => {
                  return (
                    <div style={{ margin: '5px' }}>{item.categoryName}</div>
                  )
                })}
              </Descriptions.Item>
              <Descriptions.Item label="评审开始时间">{data.coscoAccessWork.startTime}</Descriptions.Item>
              <Descriptions.Item label="评审结束时间">{data.coscoAccessWork.endTime}</Descriptions.Item>
              <Descriptions.Item label="评审专家">
                {data.coscoAccessUserls.map((item) => {
                  return (
                    <div style={{ margin: '5px' }}>{item.deptName} - {item.userId}</div>
                  )
                })}
              </Descriptions.Item>
              <Descriptions.Item label="审批结果">{data.coscoAccessWork.approveStatusText}</Descriptions.Item>
            </>
          )}

        </Descriptions>
      )}
    </Modal>
  );
};

export default ViewModal;