73 lines
1.6 KiB
TypeScript
73 lines
1.6 KiB
TypeScript
import {
|
|
ProDescriptions,
|
|
type ProDescriptionsItemProps,
|
|
} from '@ant-design/pro-components';
|
|
import { type DescriptionsProps, Modal } from 'antd';
|
|
import React, {
|
|
forwardRef,
|
|
useCallback,
|
|
useImperativeHandle,
|
|
useState,
|
|
} from 'react';
|
|
export interface DescriptionsFormRef {
|
|
open: (data?: Record<string, any>) => void;
|
|
close: () => void;
|
|
}
|
|
|
|
interface Props {
|
|
columns: ProDescriptionsItemProps<Record<string, any>, 'text'>[];
|
|
title: string;
|
|
}
|
|
|
|
const ModalDescriptions = forwardRef((props: Props, ref) => {
|
|
const { columns, title } = props;
|
|
const [visible, setVisible] = useState<boolean>(false);
|
|
const [data, setData] = useState<DescriptionsProps['items']>([]);
|
|
useImperativeHandle(ref, () => ({
|
|
open: (data: DescriptionsProps['items']) => {
|
|
console.log(data);
|
|
if (data) {
|
|
setData(data);
|
|
}
|
|
setVisible(true);
|
|
},
|
|
close: () => setVisible(false),
|
|
}));
|
|
|
|
const changeVisible = useCallback(
|
|
(flag: boolean) => {
|
|
setVisible(flag);
|
|
},
|
|
[visible],
|
|
);
|
|
|
|
return (
|
|
<Modal
|
|
open={visible}
|
|
width={800}
|
|
onCancel={() => changeVisible(false)}
|
|
footer={null}
|
|
>
|
|
<ProDescriptions
|
|
labelStyle={{ width: '200px' }}
|
|
columns={columns}
|
|
dataSource={data}
|
|
bordered
|
|
column={1}
|
|
size="small"
|
|
title={title}
|
|
// tooltip="操作日志详情"
|
|
></ProDescriptions>
|
|
{/* <Descriptions
|
|
title="操作日志"
|
|
column={1}
|
|
bordered
|
|
size="small"
|
|
items={data}
|
|
/> */}
|
|
</Modal>
|
|
);
|
|
});
|
|
|
|
export default React.memo(ModalDescriptions);
|