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
|
|
|
|
|
|
|
|
|
interface Qualification {
|
|
|
|
|
type: string;
|
|
|
|
|
name: string;
|
|
|
|
|
level: string;
|
|
|
|
|
number: string;
|
|
|
|
|
org: string;
|
|
|
|
|
issueDate: string;
|
|
|
|
|
validDate: string;
|
|
|
|
|
file?: string;
|
|
|
|
|
}
|
|
|
|
|
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-02 16:18:03 +08:00
|
|
|
|
coscoSupplierChangeApply: InfoItem;
|
|
|
|
|
coscoSupplierChangeHistoryList: InfoItem[];
|
2025-06-24 10:52:30 +08:00
|
|
|
|
qualifications: Qualification[];
|
|
|
|
|
}
|
|
|
|
|
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}>
|
|
|
|
|
<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>
|
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;
|