129 lines
3.6 KiB
JavaScript
129 lines
3.6 KiB
JavaScript
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 MyApproval() {
|
||
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/${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();
|
||
const newPagination = {
|
||
...pagination,
|
||
current: 1,
|
||
};
|
||
setPagination(newPagination);
|
||
await fetchData(newPagination, 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, status }) => {
|
||
if (decision === 1) {
|
||
if (status === "APPROVED_ASSIST") {
|
||
return (
|
||
<Tag color="blue" key="decision">
|
||
通过，需要协助
|
||
</Tag>
|
||
);
|
||
} else {
|
||
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>
|
||
);
|
||
}
|