98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
import { Button, Divider, Drawer, Form, Input, Modal, Popconfirm, Space, Table } from 'antd';
|
|
import { ColumnsType } from 'antd/lib/table';
|
|
import moment from 'moment';
|
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
import OpButton, { DelOpButton, EditOpButton } from '../../components/crud/OpButton';
|
|
import { DamItem } from '../../models/_/defs';
|
|
import { IContextProp } from './_';
|
|
import type { DrawerProps } from 'antd/es/drawer';
|
|
import imgurl from '../../../public/assets/rzbw/bw1.png'
|
|
|
|
|
|
const DataTable: React.FC<{
|
|
ctx: IContextProp
|
|
}> = ({ ctx }) => {
|
|
|
|
const { pager, crud } = ctx;
|
|
const [myForm] = Form.useForm(); // 可以获取表单元素实例
|
|
|
|
const columns = useMemo<ColumnsType<DamItem>>(() => [
|
|
{ title: '序号', key: 'id', align: 'center', width: 80, render: (_1: any, _2: any, index: number) => ctx.pager.noRender(index) },
|
|
{ title: '站名', key: '站名', dataIndex: '站名', width: 120, align: 'center' },
|
|
{ title: '测站编码', key: '测站编码', dataIndex: '测站编码', width: 120, align: 'center' },
|
|
{
|
|
title: '发送时间', key: '发送时间', dataIndex: '发送时间', width: 120, align: 'center',
|
|
render: rec => (<span>{moment().format("YYYY-MM-DD HH:mm:ss")}</span>)
|
|
},
|
|
{
|
|
title: '接收时间', key: '接收时间', dataIndex: '接收时间', width: 120, align: 'center',
|
|
render: rec => (<span>{moment().format("YYYY-MM-DD HH:mm:ss")}</span>)
|
|
|
|
},
|
|
{ title: '归属协议', key: '归属协议', dataIndex: '归属协议', width: 120, align: 'center' },
|
|
|
|
// {
|
|
// title: '操作', key: '_', width: 130, align: 'center', fixed: 'right',render: (value:any,row:any) => (
|
|
// <Space split={<Divider type="vertical" />}>
|
|
// <div className='act-but'><Button className='but3' type="link"
|
|
// onClick={async() =>
|
|
// {
|
|
// console.log("www",row)
|
|
|
|
// myForm.setFieldsValue(row);
|
|
// }}>详情</Button></div>
|
|
// </Space>
|
|
// )
|
|
// }
|
|
], []);
|
|
|
|
|
|
// 弹框
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const [size, setSize] = useState<DrawerProps['size']>();
|
|
const [imgIndex, setImgIndex] = useState<any>(1);
|
|
|
|
const showLargeDrawer = () => {
|
|
setSize('large');
|
|
setOpen(true);
|
|
};
|
|
|
|
const onClose = () => {
|
|
setOpen(false);
|
|
};
|
|
|
|
|
|
return (
|
|
<>
|
|
<Table
|
|
columns={columns}
|
|
rowKey={row => row.大坝代码}
|
|
{...pager.tableProps}
|
|
onRow = {(record,rowKey) => {
|
|
return {
|
|
onClick:(event) => {
|
|
console.log('onROW事件',rowKey);
|
|
showLargeDrawer()
|
|
//@ts-ignore
|
|
setImgIndex( rowKey + 1)
|
|
// 获取值 引出值
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
<Drawer title="报文历史"
|
|
placement="right"
|
|
size={size}
|
|
onClose={onClose}
|
|
open={open}
|
|
mask={false}
|
|
>
|
|
{/* < img src={`${process.env.PUBLIC_URL}/assets/rzbw/bw${imgIndex}.png`} alt=""/> */}
|
|
<img src={require('../../../public/assets/rzbw/bw'+ [imgIndex] + '.png')}></img>
|
|
</Drawer>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default DataTable |