合并代码

src/pages/supplier/backend/changeProgressInquiry/components/DetailView.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, Table, Spin } from 'antd';
-import { getSupplierChangeDetail } from '../services';
+import { Modal, Table, Spin, Descriptions } from 'antd';
+import { supplierChangeApplyById } from '../services';
 
 interface Qualification {
   type: string;
@@ -13,18 +13,24 @@ interface Qualification {
   file?: string;
 }
 interface InfoItem {
-  label: string;
-  value: string;
+  fieldAnnotation?: string;
+  newValue?: string;
+  oldValue?: string;
+  title?: string;
+  changeDesc?: string;
+  supplierName?: string;
+  approveStatusText?: string;
+  coscoSupplierChangeHistoryList?: [];
 }
 interface DetailData {
-  baseInfo: InfoItem[];
-  changeInfo: InfoItem[];
+  coscoSupplierChangeApply: InfoItem;
+  coscoSupplierChangeHistoryList: InfoItem[];
   qualifications: Qualification[];
 }
 interface DetailViewProps {
   visible: boolean;
   onClose: () => void;
-  detailId?: string | number;
+  detailId?: string;
 }
 
 const DetailView: React.FC<DetailViewProps> = ({ visible, onClose, detailId }) => {
@@ -35,7 +41,7 @@ const DetailView: React.FC<DetailViewProps> = ({ visible, onClose, detailId }) =
   useEffect(() => {
     if (visible && detailId) {
       setLoading(true);
-      getSupplierChangeDetail(detailId)
+      supplierChangeApplyById(detailId)
         .then(res => {
           if (res.code === 200) {
             setDetailData(res.data);
@@ -46,55 +52,29 @@ const DetailView: React.FC<DetailViewProps> = ({ visible, onClose, detailId }) =
     if (!visible) setDetailData(null);
   }, [visible, detailId]);
 
-  const columns = [
-    { title: '资质证书类型', dataIndex: 'type', width: 120 },
-    { title: '资质名称', dataIndex: 'name', width: 120 },
-    { title: '资质类别和等级', dataIndex: 'level', width: 120 },
-    { title: '资质证书编号', dataIndex: 'number', width: 120 },
-    { title: '发证机构', dataIndex: 'org', width: 120 },
-    { title: '发证日期', dataIndex: 'issueDate', width: 120 },
-    { title: '资质有效期至', dataIndex: 'validDate', width: 120 },
-    {
-      title: '附件',
-      dataIndex: 'file',
-      width: 120,
-      render: (file: string) =>
-        file ? (
-          <span>
-            <img src={file} alt="附件" style={{ width: 30, verticalAlign: 'middle', marginRight: 8 }} />
-            <a>更多</a>
-          </span>
-        ) : (
-          '-'
-        ),
-    },
-  ];
+  
 
   // 把info数组两两合并成一行显示
   function renderInfoTable(infoArr: InfoItem[]) {
     const rows = [];
     for (let i = 0; i < infoArr.length; i += 2) {
-      const left = infoArr[i];
-      const right = infoArr[i + 1] || { label: '', value: '' };
       rows.push(
-        <tr key={i}>
-          <td style={tdStyleTitle}>{left.label}</td>
-          <td style={tdStyle}>{left.value}</td>
-          <td style={tdStyleTitle}>{right.label}</td>
-          <td style={tdStyle}>{right.value}</td>
-        </tr>
+        <>
+          <Descriptions.Item label={`变更前-${infoArr[i].fieldAnnotation}` }>{infoArr[i].oldValue}</Descriptions.Item>
+          <Descriptions.Item label={`变更后-${infoArr[i].fieldAnnotation}` }>{infoArr[i].newValue}</Descriptions.Item>
+        </>
       );
     }
     return (
-      <table style={{ width: '100%', borderCollapse: 'collapse', background: '#fff', marginBottom: 8 }}>
-        <tbody>{rows}</tbody>
-      </table>
+       <Descriptions bordered column={2}>
+          {rows}
+       </Descriptions>
     );
   }
 
   return (
     <Modal
-      title="供应商信息变更审批"
+      title="供应商信息变更"
       visible={visible}
       onCancel={onClose}
       footer={null}
@@ -106,21 +86,16 @@ const DetailView: React.FC<DetailViewProps> = ({ visible, onClose, detailId }) =
         {detailData && (
           <div>
             {/* 基本信息 */}
-            {renderInfoTable(detailData.baseInfo)}
+            <Descriptions bordered column={1}>
+                <Descriptions.Item label="变更标题" labelStyle={{width: '140px'}}>{detailData.coscoSupplierChangeApply?.title}</Descriptions.Item>
+                <Descriptions.Item label="变更说明">{detailData.coscoSupplierChangeApply?.changeDesc}</Descriptions.Item>
+                {detailData.coscoSupplierChangeApply?.coscoSupplierChangeHistoryList  && (
+                 <Descriptions.Item label="附件">{detailData.coscoSupplierChangeApply?.changeDesc}</Descriptions.Item>
+                  ) }
+            </Descriptions>
             {/* 变更内容 */}
-            <div style={{ padding: '16px 0 0 2px', fontWeight: 700 }}>变更内容：</div>
-            {renderInfoTable(detailData.changeInfo)}
-            {/* 新增资质 */}
-            <div style={{ padding: '0 0 6px 2px', fontWeight: 700 }}>新增资质1</div>
-            <Table
-              columns={columns}
-              dataSource={detailData.qualifications}
-              rowKey="number"
-              size="small"
-              pagination={false}
-              bordered
-              style={{ margin: '0 0 16px 0' }}
-            />
+            <div style={{ padding: '16px 0 10px 2px', color: '#333', fontSize: '14px' }}>变更内容：</div>
+            {renderInfoTable(detailData.coscoSupplierChangeHistoryList)}
           </div>
         )}
       </Spin>