feat: 操作日志

src/components/ModalDescriptions/index.tsx

@@ -0,0 +1,72 @@
+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={{ minWidth: '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);