145 lines
3.9 KiB
TypeScript
145 lines
3.9 KiB
TypeScript
![]() |
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;
|