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

116 lines
3.2 KiB
TypeScript
Raw Normal View History

2025-06-24 10:52:30 +08:00
import React, { useEffect, useState } from 'react';
2025-07-02 16:18:03 +08:00
import { Modal, Table, Spin, Descriptions } from 'antd';
import { supplierChangeApplyById } from '../services';
2025-06-24 10:52:30 +08:00
2025-07-15 09:07:43 +08:00
2025-06-24 10:52:30 +08:00
interface InfoItem {
2025-07-02 16:18:03 +08:00
fieldAnnotation?: string;
newValue?: string;
oldValue?: string;
title?: string;
changeDesc?: string;
supplierName?: string;
approveStatusText?: string;
coscoSupplierChangeHistoryList?: [];
2025-06-24 10:52:30 +08:00
}
interface DetailData {
2025-07-15 09:07:43 +08:00
fieldAnnotation?: string;
newValue?: string;
oldValue?: string;
title?: string;
changeDesc?: string;
supplierName?: string;
approveStatusText?: string;
2025-07-02 16:18:03 +08:00
coscoSupplierChangeHistoryList: InfoItem[];
2025-06-24 10:52:30 +08:00
}
interface DetailViewProps {
visible: boolean;
onClose: () => void;
2025-07-02 16:18:03 +08:00
detailId?: string;
2025-06-24 10:52:30 +08:00
}
const DetailView: React.FC<DetailViewProps> = ({ visible, onClose, detailId }) => {
const [loading, setLoading] = useState(false);
const [detailData, setDetailData] = useState<DetailData | null>(null);
useEffect(() => {
if (visible && detailId) {
setLoading(true);
2025-07-02 16:18:03 +08:00
supplierChangeApplyById(detailId)
2025-06-24 10:52:30 +08:00
.then(res => {
if (res.code === 200) {
setDetailData(res.data);
}
})
.finally(() => setLoading(false));
}
if (!visible) setDetailData(null);
}, [visible, detailId]);
2025-07-02 16:18:03 +08:00
2025-06-24 10:52:30 +08:00
// 把info数组两两合并成一行显示
function renderInfoTable(infoArr: InfoItem[]) {
const rows = [];
for (let i = 0; i < infoArr.length; i += 2) {
rows.push(
2025-07-02 16:18:03 +08:00
<>
<Descriptions.Item label={`变更前-${infoArr[i].fieldAnnotation}` }>{infoArr[i].oldValue}</Descriptions.Item>
<Descriptions.Item label={`变更后-${infoArr[i].fieldAnnotation}` }>{infoArr[i].newValue}</Descriptions.Item>
</>
2025-06-24 10:52:30 +08:00
);
}
return (
2025-07-02 16:18:03 +08:00
<Descriptions bordered column={2}>
{rows}
</Descriptions>
2025-06-24 10:52:30 +08:00
);
}
return (
<Modal
2025-07-02 16:18:03 +08:00
title="供应商信息变更"
2025-06-24 10:52:30 +08:00
visible={visible}
onCancel={onClose}
footer={null}
width={1000}
bodyStyle={{ padding: 24 }}
destroyOnClose
>
<Spin spinning={loading}>
{detailData && (
<div>
{/* 基本信息 */}
2025-07-02 16:18:03 +08:00
<Descriptions bordered column={1}>
2025-07-15 09:07:43 +08:00
<Descriptions.Item label="变更标题" labelStyle={{width: '140px'}}>{detailData?.title}</Descriptions.Item>
<Descriptions.Item label="变更说明">{detailData?.changeDesc}</Descriptions.Item>
{/* {detailData?.coscoSupplierChangeHistoryList && (
<Descriptions.Item label="附件">{detailData?.changeDesc}</Descriptions.Item>
) } */}
2025-07-02 16:18:03 +08:00
</Descriptions>
2025-06-24 10:52:30 +08:00
{/* 变更内容 */}
2025-07-02 16:18:03 +08:00
<div style={{ padding: '16px 0 10px 2px', color: '#333', fontSize: '14px' }}></div>
{renderInfoTable(detailData.coscoSupplierChangeHistoryList)}
2025-06-24 10:52:30 +08:00
</div>
)}
</Spin>
</Modal>
);
};
const tdStyleTitle: React.CSSProperties = {
background: '#fafafa',
fontWeight: 700,
width: 130,
padding: 8,
border: '1px solid #f0f0f0',
};
const tdStyle: React.CSSProperties = {
background: '#fff',
padding: 8,
border: '1px solid #f0f0f0',
};
export default DetailView;