106 lines
2.8 KiB
TypeScript
106 lines
2.8 KiB
TypeScript
|
import { Modal, Table } from 'antd';
|
||
|
|
import type { ProColumns } from '@ant-design/pro-components';
|
||
|
|
import { ProDescriptions } from '@ant-design/pro-components';
|
||
|
|
import React, { useEffect } from 'react';
|
||
|
|
|
||
|
|
export type StorageFormProps = {
|
||
|
|
onCancel: (flag?: boolean, formVals?: unknown) => void;
|
||
|
|
open: boolean;
|
||
|
|
values?: Partial<API.StorageDetection.StorageItem>;
|
||
|
|
};
|
||
|
|
|
||
|
|
const ViewStorageDetail: React.FC<StorageFormProps> = (props) => {
|
||
|
|
const detailColumns: ProColumns<API.StorageDetection.StorageDetailItem>[] = [
|
||
|
|
// {
|
||
|
|
// title: '详情ID',
|
||
|
|
// dataIndex: 'detailId',
|
||
|
|
// key: 'detailId',
|
||
|
|
// width: 80,
|
||
|
|
// ellipsis: true,
|
||
|
|
// },
|
||
|
|
{
|
||
|
|
title: '入库来源网站名称',
|
||
|
|
dataIndex: 'websiteName',
|
||
|
|
key: 'websiteName',
|
||
|
|
width: 150,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '入库成功数量',
|
||
|
|
dataIndex: 'successNumber',
|
||
|
|
key: 'successNumber',
|
||
|
|
width: 120,
|
||
|
|
align: 'center',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '入库失败数量',
|
||
|
|
dataIndex: 'failedNumber',
|
||
|
|
key: 'failedNumber',
|
||
|
|
width: 120,
|
||
|
|
align: 'center',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '入库数据详情',
|
||
|
|
dataIndex: 'storageDetail',
|
||
|
|
key: 'storageDetail',
|
||
|
|
width: 200,
|
||
|
|
ellipsis: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '入库具体时间',
|
||
|
|
dataIndex: 'storageTime',
|
||
|
|
key: 'storageTime',
|
||
|
|
width: 180,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const handleCancel = () => {
|
||
|
|
props.onCancel();
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Modal
|
||
|
|
title="入库监测详情"
|
||
|
|
open={props.open}
|
||
|
|
width={1200}
|
||
|
|
onCancel={handleCancel}
|
||
|
|
footer={null}
|
||
|
|
destroyOnClose
|
||
|
|
>
|
||
|
|
{/* 基本信息 */}
|
||
|
|
<div style={{ marginBottom: 24 }}>
|
||
|
|
<h3 style={{ marginBottom: 16 }}>基本信息</h3>
|
||
|
|
<ProDescriptions<API.StorageDetection.StorageItem>
|
||
|
|
column={2}
|
||
|
|
dataSource={props.values || {}}
|
||
|
|
bordered
|
||
|
|
>
|
||
|
|
{/* <ProDescriptions.Item dataIndex="detectionId" label="监测ID" /> */}
|
||
|
|
<ProDescriptions.Item dataIndex="storageDate" label="采集入库日期" />
|
||
|
|
<ProDescriptions.Item dataIndex="storageNumber" label="采集入库数量" />
|
||
|
|
<ProDescriptions.Item dataIndex="storageResult" label="采集入库结果" />
|
||
|
|
<ProDescriptions.Item
|
||
|
|
dataIndex="storageDetail"
|
||
|
|
label="入库数据详情"
|
||
|
|
span={2}
|
||
|
|
/>
|
||
|
|
</ProDescriptions>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 入库数据来源详情列表 */}
|
||
|
|
<div>
|
||
|
|
<h3 style={{ marginBottom: 16 }}>入库数据来源详情</h3>
|
||
|
|
<Table<API.StorageDetection.StorageDetailItem>
|
||
|
|
columns={detailColumns}
|
||
|
|
dataSource={props.values?.details || []}
|
||
|
|
rowKey="detailId"
|
||
|
|
pagination={false}
|
||
|
|
bordered
|
||
|
|
size="middle"
|
||
|
|
scroll={{ x: 800 }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ViewStorageDetail;
|