fe_supplier_frontend/src/pages/supplier/ViewReviewPage/components/ViewModal.tsx

import React, { useState, useEffect } from 'react';
import { Modal, Descriptions, Spin } from 'antd';
import { useSupplierDetailModal } from '@/components/SupplierDetailModalContext/SupplierDetailModalContext';
import GlobalModal from '../GlobalModal/index'
import { coscoAccessWork } from '../services'

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

interface coscoAccessWorkAttachments {
  fileName: string;
  fileUrl: string;
}
interface coscoAccessUserl {
  deptName: string;
  deptId: string;
  userName: 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);
  const supplierDetailModal = useSupplierDetailModal();
  const [loading, setLoading] = useState(false);
  const [visibleGlobalModal, setVisibleGlobalModal] = useState(false);
  const [id, setId] = useState('');

  //初始化
  useEffect(() => {
    console.log(record,visible);
    
    if (visible && record?.id) {
      setLoading(true);
      coscoAccessWork(record.id)
        .then((res) => {
          const { code, data } = res;
          if (code == 200) {
            setData(data);
          }
        })
        .finally(() => setLoading(false));
    } else {
      setData(null);
    }
  }, [visible, record]);

  return (
    <div>
      <h2 style={{ margin: '20px 0' }}>查看详情</h2>
      <Spin spinning={loading}>
        {data && (
          <Descriptions bordered column={1} labelStyle={{ width: 160 }}>
            <Descriptions.Item label="准入部门">{data.coscoAccessWork.deptName}</Descriptions.Item>
            <Descriptions.Item label="准入供应商">
              {data.coscoAccessSupplierList.map((item) => {
                return (
                   <a
                  onClick={() => {
                    setId(item.supplierId)
                    setVisibleGlobalModal(true)
                  }}
                >
                  {item.supplierName}
                </a>
                  // <div style={{ margin: '5px', color: '#004f8e', cursor: 'pointer' }} onClick={() => supplierDetailModal?.(item.supplierId)} >{item.supplierName}</div>

                )
              })}
            </Descriptions.Item>

            {data.coscoAccessWork.accessType === 'scattered' && (
              <>
                <Descriptions.Item label="申请准入品类">
                  {data.coscoAccessCategoryList.map((item) => {
                    return (
                      <div style={{ margin: '5px' }}>{item.categoryPathName}</div>
                    )
                  })}
                </Descriptions.Item>
                <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="申请准入品类">
                  {data.coscoAccessCategoryList.map((item) => {
                    return (
                      <div style={{ margin: '5px' }}>{item.categoryPathName}</div>
                    )
                  })}
                </Descriptions.Item>
                <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.categoryPathName}</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.userName}</div>
                    )
                  })}
                </Descriptions.Item>
                <Descriptions.Item label="审批结果">{data.coscoAccessWork.approveStatusText}</Descriptions.Item>
              </>
            )}

          </Descriptions>
        )}
      </Spin>
      <GlobalModal visible={visibleGlobalModal} id={id}  onCancel={() => setVisibleGlobalModal(false)}  />
    </div>
  );
};

export default ViewModal;