feat: 实现团队负责人查看历史审批页面

src/config/menuConfig.js

@@ -4,7 +4,6 @@ import {
   UnorderedListOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import { lazy } from "react";
 
 const menuConfig = [
   {
@@ -31,6 +30,12 @@ const menuConfig = [
     icon: FileDoneOutlined,
     roles: ["LEADER"],
   },
+  {
+    path: "/leader/my-approval",
+    label: "审批记录",
+    icon: UnorderedListOutlined,
+    roles: ["LEADER"],
+  },
 ];
 
 export default menuConfig;

src/pages/leader/Approval.jsx

@@ -2,9 +2,8 @@ import { Button, message, Space, Table } from "antd";
 import Column from "antd/es/table/Column";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { selectUserId } from "../../features/auth/authSlice";
 import axiosInstance from "../../api/axios";
-import { current } from "@reduxjs/toolkit";
+import { selectUserId } from "../../features/auth/authSlice";
 
 export default function LeaderApproval() {
   const [reservations, setReservations] = useState([]);

src/pages/leader/MyApproval.jsx

@@ -0,0 +1,121 @@
+import { Button, Form, Input, Table, Tag } from "antd";
+import { useForm } from "antd/es/form/Form";
+import Column from "antd/es/table/Column";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import axiosInstance from "../../api/axios";
+import { selectUserId } from "../../features/auth/authSlice";
+
+export default function LeaderMyApproval() {
+  const [approvals, setApprovals] = useState([]);
+  const [form] = useForm();
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  });
+
+  const userId = useSelector(selectUserId);
+
+  const fetchData = async (pagination, searchParam) => {
+    const data = await axiosInstance.get(`/approval/leader/${userId}`, {
+      params: {
+        page: pagination.current,
+        size: pagination.pageSize,
+        applicantName: searchParam?.applicantName,
+        deviceName: searchParam?.deviceName,
+      },
+    });
+
+    setApprovals(data.records);
+    setPagination({
+      ...pagination,
+      total: data.total,
+    });
+  };
+
+  useEffect(() => {
+    fetchData(pagination);
+  }, []);
+
+  const handlePageChange = async (pagination) => {
+    const values = await form.validateFields();
+    fetchData(pagination, values);
+  };
+
+  const handleSearch = async () => {
+    const values = await form.validateFields();
+    fetchData(
+      {
+        current: 1,
+        pageSize: pagination.pageSize,
+      },
+      values
+    );
+  };
+
+  return (
+    <div className="p-2 pt-4">
+      <Form form={form} layout="inline" onFinish={handleSearch}>
+        <Form.Item name="applicantName">
+          <Input placeholder="请输入预约人姓名" allowClear />
+        </Form.Item>
+        <Form.Item name="deviceName">
+          <Input placeholder="请输入设备名称" allowClear />
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" htmlType="submit">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+      <Table
+        dataSource={approvals}
+        pagination={pagination}
+        onChange={handlePageChange}
+        className="mt-4"
+        rowKey="approvalId"
+      >
+        <Column title="预约人" key="applicantName" dataIndex="applicantName" />
+        <Column
+          title="所属团队"
+          key="applicantTeam"
+          dataIndex="applicantTeam"
+        />
+        <Column
+          title="联系方式"
+          key="applicantContact"
+          dataIndex="applicantContact"
+        />
+        <Column title="预约设备" key="deviceName" dataIndex="deviceName" />
+        <Column title="开始时间" key="startTime" dataIndex="startTime" />
+        <Column title="结束时间" key="endTime" dataIndex="endTime" />
+        <Column
+          title="审批情况"
+          key="decision"
+          render={(_, { decision }) => {
+            if (decision === 1) {
+              return (
+                <Tag color="green" key="decision">
+                  通过
+                </Tag>
+              );
+            }
+            if (decision === 0) {
+              return (
+                <Tag color="red" key="decision">
+                  拒绝
+                </Tag>
+              );
+            }
+            return (
+              <Tag color="grey" key="decision">
+                ERROR
+              </Tag>
+            );
+          }}
+        />
+      </Table>
+    </div>
+  );
+}

src/router/index.jsx

@@ -6,6 +6,7 @@ import Reserve from "../pages/user/Reserve";
 import MyReservation from "../pages/user/MyReservation";
 import UserDetail from "../pages/user/UserDetail";
 import LeaderApproval from "../pages/leader/Approval";
+import LeaderMyApproval from "../pages/leader/MyApproval";
 
 const router = createBrowserRouter([
   {
@@ -46,6 +47,10 @@ const router = createBrowserRouter([
             path: "approval",
             element: <LeaderApproval />,
           },
+          {
+            path: "my-approval",
+            element: <LeaderMyApproval />,
+          },
         ],
       },
     ],