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

145 lines
3.9 KiB
TypeScript
Raw Normal View History

2025-06-24 10:52:30 +08:00
import React, { useEffect, useState } from 'react';
import { Modal, Table, Spin } from 'antd';
import { getSupplierChangeDetail } from '../services';
interface Qualification {
type: string;
name: string;
level: string;
number: string;
org: string;
issueDate: string;
validDate: string;
file?: string;
}
interface InfoItem {
label: string;
value: string;
}
interface DetailData {
baseInfo: InfoItem[];
changeInfo: InfoItem[];
qualifications: Qualification[];
}
interface DetailViewProps {
visible: boolean;
onClose: () => void;
detailId?: string | number;
}
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);
getSupplierChangeDetail(detailId)
.then(res => {
if (res.code === 200) {
setDetailData(res.data);
}
})
.finally(() => setLoading(false));
}
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>
);
}
return (
<table style={{ width: '100%', borderCollapse: 'collapse', background: '#fff', marginBottom: 8 }}>
<tbody>{rows}</tbody>
</table>
);
}
return (
<Modal
title="供应商信息变更审批"
visible={visible}
onCancel={onClose}
footer={null}
width={1000}
bodyStyle={{ padding: 24 }}
destroyOnClose
>
<Spin spinning={loading}>
{detailData && (
<div>
{/* 基本信息 */}
{renderInfoTable(detailData.baseInfo)}
{/* 变更内容 */}
<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>
)}
</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;