116 lines
3.2 KiB
TypeScript
116 lines
3.2 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import { Modal, Table, Spin, Descriptions } from 'antd';
|
||
import { supplierChangeApplyById } from '../services';
|
||
|
||
|
||
interface InfoItem {
|
||
fieldAnnotation?: string;
|
||
newValue?: string;
|
||
oldValue?: string;
|
||
title?: string;
|
||
changeDesc?: string;
|
||
supplierName?: string;
|
||
approveStatusText?: string;
|
||
coscoSupplierChangeHistoryList?: [];
|
||
}
|
||
interface DetailData {
|
||
fieldAnnotation?: string;
|
||
newValue?: string;
|
||
oldValue?: string;
|
||
title?: string;
|
||
changeDesc?: string;
|
||
supplierName?: string;
|
||
approveStatusText?: string;
|
||
coscoSupplierChangeHistoryList: InfoItem[];
|
||
}
|
||
interface DetailViewProps {
|
||
visible: boolean;
|
||
onClose: () => void;
|
||
detailId?: string;
|
||
}
|
||
|
||
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);
|
||
supplierChangeApplyById(detailId)
|
||
.then(res => {
|
||
if (res.code === 200) {
|
||
setDetailData(res.data);
|
||
}
|
||
})
|
||
.finally(() => setLoading(false));
|
||
}
|
||
if (!visible) setDetailData(null);
|
||
}, [visible, detailId]);
|
||
|
||
|
||
|
||
// 把info数组两两合并成一行显示
|
||
function renderInfoTable(infoArr: InfoItem[]) {
|
||
const rows = [];
|
||
for (let i = 0; i < infoArr.length; i++) {
|
||
rows.push(
|
||
<>
|
||
<Descriptions.Item label={`变更前-${infoArr[i].fieldAnnotation}` }>{infoArr[i].oldValue}</Descriptions.Item>
|
||
<Descriptions.Item label={`变更后-${infoArr[i].fieldAnnotation}` }>{infoArr[i].newValue}</Descriptions.Item>
|
||
</>
|
||
);
|
||
}
|
||
return (
|
||
<Descriptions bordered column={2}>
|
||
{rows}
|
||
</Descriptions>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
title="供应商信息变更"
|
||
visible={visible}
|
||
onCancel={onClose}
|
||
footer={null}
|
||
width={1000}
|
||
bodyStyle={{ padding: 24 }}
|
||
destroyOnClose
|
||
>
|
||
<Spin spinning={loading}>
|
||
{detailData && (
|
||
<div>
|
||
{/* 基本信息 */}
|
||
<Descriptions bordered column={1}>
|
||
<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>
|
||
) } */}
|
||
</Descriptions>
|
||
{/* 变更内容 */}
|
||
<div style={{ padding: '16px 0 10px 2px', color: '#333', fontSize: '14px' }}>变更内容：</div>
|
||
{renderInfoTable(detailData.coscoSupplierChangeHistoryList)}
|
||
</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;
|