管理员日志详情组件优化

src/api/admin-log.ts

@@ -19,3 +19,7 @@ export function adminLogList(
     end_time: end_time,
   });
 }
+
+export function adminLogDetail(id: number) {
+  return client.get(`/backend/v1/admin/log/detail/${id}`, {});
+}

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

@@ -1,21 +1,35 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Modal, Form } from "antd";
+import { adminLog } from "../../../../api";
 
 interface PropInterface {
-  param: string;
+  id: number;
-  result: string;
   open: boolean;
   onCancel: () => void;
 }
 
 export const AdminLogDetailDialog: React.FC<PropInterface> = ({
-  param,
+  id,
   open,
   onCancel,
-  result,
 }) => {
   const [form] = Form.useForm();
-  const [loading, setLoading] = useState(true);
+  const [param, setParam] = useState("");
+  const [result, setResult] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (open && id > 0) {
+      getDetail();
+    }
+  }, [open, id]);
+
+  const getDetail = () => {
+    adminLog.adminLogDetail(id).then((res: any) => {
+      setParam(res.data.param);
+      setResult(res.data.result);
+    });
+  };
 
   const onFinish = (values: any) => {};
 
@@ -31,18 +45,21 @@ export const AdminLogDetailDialog: React.FC<PropInterface> = ({
           centered
           forceRender
           open={true}
-          width={416}
+          width={600}
           onOk={() => onCancel()}
           onCancel={() => onCancel()}
           footer={null}
           maskClosable={false}
         >
-          <div className="mt-24">
+          <div
+            className="mt-24"
+            style={{ maxHeight: 600, overflowY: "auto", overflowX: "hidden" }}
+          >
             <Form
               form={form}
               name="adminlog-detail"
-              labelCol={{ span: 5 }}
+              labelCol={{ span: 3 }}
-              wrapperCol={{ span: 19 }}
+              wrapperCol={{ span: 21 }}
               initialValues={{ remember: true }}
               onFinish={onFinish}
               onFinishFailed={onFinishFailed}

src/pages/system/adminlog/index.tsx

@@ -37,9 +37,8 @@ const SystemLogPage = () => {
   const [adminName, setAdminName] = useState("");
   const [created_at, setCreatedAt] = useState<string[]>([]);
   const [createdAts, setCreatedAts] = useState<any>([]);
-  const [param, setParam] = useState("");
-  const [result, setResult] = useState("");
   const [visiable, setVisiable] = useState(false);
+  const [admId, setAdmId] = useState(0);
 
   useEffect(() => {
     getData();
@@ -131,8 +130,7 @@ const SystemLogPage = () => {
           type="link"
           className="b-link c-red"
           onClick={() => {
-            setParam(record.param);
+            setAdmId(Number(record.id));
-            setResult(record.result);
             setVisiable(true);
           }}
         >
@@ -215,8 +213,7 @@ const SystemLogPage = () => {
         />
       </div>
       <AdminLogDetailDialog
-        param={param}
+        id={admId}
-        result={result}
         open={visiable}
         onCancel={() => setVisiable(false)}
       ></AdminLogDetailDialog>