管理员日志

src/pages/system/adminlog/compenents/detail-dialog.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from "react";
+import { Modal, Form } from "antd";
+
+interface PropInterface {
+  param: string;
+  result: string;
+  open: boolean;
+  onCancel: () => void;
+}
+
+export const AdminLogDetailDialog: React.FC<PropInterface> = ({
+  param,
+  open,
+  onCancel,
+  result,
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const onFinish = (values: any) => {};
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  return (
+    <>
+      <Modal
+        title="日志详情"
+        centered
+        forceRender
+        open={open}
+        width={416}
+        onOk={() => onCancel()}
+        onCancel={() => onCancel()}
+        footer={null}
+        maskClosable={false}
+      >
+        <div className="mt-24">
+          <Form
+            form={form}
+            name="adminlog-detail"
+            labelCol={{ span: 5 }}
+            wrapperCol={{ span: 19 }}
+            initialValues={{ remember: true }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item label="Param">{param}</Form.Item>
+            <Form.Item label="Result">{result}</Form.Item>
+          </Form>
+        </div>
+      </Modal>
+    </>
+  );
+};

src/pages/system/adminlog/index.tsx

@@ -1,9 +1,18 @@
 import { useEffect, useState } from "react";
-import { Table, Typography, Input, Select, Button, DatePicker } from "antd";
+import {
+  Table,
+  Typography,
+  Input,
+  Select,
+  Space,
+  Button,
+  DatePicker,
+} from "antd";
 import { adminLog } from "../../../api";
 // import styles from "./index.module.less";
 import type { ColumnsType } from "antd/es/table";
 import { dateWholeFormat } from "../../../utils/index";
+import { AdminLogDetailDialog } from "./compenents/detail-dialog";
 const { RangePicker } = DatePicker;
 import moment from "moment";
 
@@ -17,6 +26,8 @@ interface DataType {
   created_at: string;
   title: string;
   ip_area: string;
+  param: string;
+  result: string;
 }
 
 const SystemLogPage = () => {
@@ -30,6 +41,9 @@ const SystemLogPage = () => {
   const [adminId, setAdminId] = useState(0);
   const [created_at, setCreatedAt] = useState<any>([]);
   const [createdAts, setCreatedAts] = useState<any>([]);
+  const [param, setParam] = useState("");
+  const [result, setResult] = useState("");
+  const [visiable, setVisiable] = useState(false);
 
   useEffect(() => {
     getData();
@@ -115,6 +129,25 @@ const SystemLogPage = () => {
         <span>{dateWholeFormat(created_at)}</span>
       ),
     },
+    {
+      title: "操作",
+      key: "action",
+      fixed: "right",
+      width: 160,
+      render: (_, record) => (
+        <Button
+          type="link"
+          className="b-link c-red"
+          onClick={() => {
+            setParam(record.param);
+            setResult(record.result);
+            setVisiable(true);
+          }}
+        >
+          详情
+        </Button>
+      ),
+    },
   ];
 
   return (
@@ -162,6 +195,12 @@ const SystemLogPage = () => {
           pagination={paginationProps}
         />
       </div>
+      <AdminLogDetailDialog
+        param={param}
+        result={result}
+        open={visiable}
+        onCancel={() => setVisiable(false)}
+      ></AdminLogDetailDialog>
     </div>
   );
 };