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

import React, { useState, useEffect } from 'react';
import { Descriptions, Spin } from 'antd';
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;
  orgName: string;
  startTime: string;
  endTime: string;
  reviewStatusText: string;
  accessType: string;
  accessDesc: string;
  approveStatusText: string;
}

const ViewModal: React.FC<{
  visible: boolean;
  record?: any;
}> = ({ visible, record = {} }) => {
  //渲染数据
  const [data, setData] = useState<Data | null>(null);
  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>
      <Spin spinning={loading}>
        {data && (
          <Descriptions bordered column={1} labelStyle={{ width: 160 }}>
            {/* <Descriptions.Item label="准入单位">{data.coscoAccessWork.orgName}</Descriptions.Item>
            <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>
                )
              })}
            </Descriptions.Item>
            <Descriptions.Item label="申请准入品类">
              {data.coscoAccessCategoryList.map((item) => {
                return (
                  <div style={{ margin: '5px' }}>{item.categoryPathName}</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;