diff --git a/src/pages/reimbursement/approval/ReimbursementApproval.tsx b/src/pages/reimbursement/approval/ReimbursementApproval.tsx
index 05f2e56..a0d2a96 100644
--- a/src/pages/reimbursement/approval/ReimbursementApproval.tsx
+++ b/src/pages/reimbursement/approval/ReimbursementApproval.tsx
@@ -1,6 +1,362 @@
-function ReimbursementApproval() {
-    return(
-        <div>报销审批</div>
-    )
+import React from "react";
+import {Button, Popover, Tabs} from "antd";
+import {ActionType, ProColumns, ProTable} from "@ant-design/pro-components";
+import Search from "antd/es/input/Search";
+import {statusEnum} from "../mine/MyReimbursement";
+import axiosInstance from "../../../utils/axiosInstance";
+import {ExclamationCircleOutlined} from "@ant-design/icons";
+import {openNotification} from "../mine/utils";
+import {SortOrder} from "antd/es/table/interface";
+import {Reimbursement} from "../../../models/Reimbursement";
+import ReimbursementDetail from "../mine/ReimbursementDetail";
+import {store} from "../../../models/store";
+
+export type TableListItem = {
+    key: number;
+    id: number;
+    beginDate: number;
+    uploaderName: string;
+    endDate: number;
+    OD: string[];
+
+    amount: number;
+    invoiceAmount: number;
+    additionalAmount: number;
+    status: number;
+    departmentId: number;
+    submitDateTime: number;
+    detail: string;
+    back: boolean;
+};
+
+class ReimbursementTab extends React.Component<any, any> {
+    tableAction = React.createRef<ActionType>();
+    departments = new Map<number, string>()
+    columns: ProColumns<TableListItem>[] = [
+        {
+            title: '报销单号',
+            width: 60,
+            dataIndex: 'id',
+            search: false,
+            sorter: true,
+            //render: (_) => <a>{_}</a>,
+        },
+
+        {
+            title: '申请人',
+            width: 60,
+            dataIndex: 'uploaderName',
+            search: false,
+            sorter: false,
+            //valueType: 'date',
+            //render: (_) => <>{_}天</>,
+        },
+        {
+            title: '行程',
+            width: 60,
+            dataIndex: 'OD',
+            search: false,
+            render: (_, row) => <>{row.OD[0] + (row.back ? " ⇌ " : " → ") + row.OD[1]}</>,
+        },
+        {
+            title: '出发日期',
+            width: 70,
+            dataIndex: 'beginDate',
+            search: false,
+            valueType: 'date',
+            sorter: true,
+            //render: (_) => <a>{_}</a>,
+        },
+        {
+            title: '总金额',
+            width: 60,
+            dataIndex: 'amount',
+            search: false,
+            render: (_, item) =>
+                <>{(item.amount / 100.0).toFixed(2)}元
+                    <Popover
+                        content={<>报销金额：{(item.invoiceAmount / 100.0).toFixed(2)}元<br/>补贴金额：{(item.additionalAmount / 100.0).toFixed(2)}元</>}>
+                        <ExclamationCircleOutlined style={{marginLeft: 5}}/>
+                    </Popover>
+                </>
+            ,
+        },
+        {
+            title: '状态',
+            width: 80,
+            dataIndex: 'status',
+            filters: true,
+            onFilter: false,
+            search: false,
+            valueEnum: statusEnum,
+            //render: (_) => <a>{_}</a>,
+        },
+        {
+            title: '申请部门',
+            width: 120,
+            search: false,
+            dataIndex: 'departmentId',
+            valueEnum: this.departments,
+            filters: true,
+            onFilter: false,
+            //render: (_) => <a>{_}</a>,
+        },
+        {
+            title: '申请时间',
+            width: 80,
+            dataIndex: 'submitDateTime',
+            valueType: 'dateTime',
+            search: false,
+            sorter: true,
+            //render: (_) => <a>{_}</a>,
+        },
+
+        {
+            title: '申请详情',
+            width: 60,
+            dataIndex: 'detail',
+            search: false,
+            render: (_, row, index, action) => [
+                <a
+                    key="a"
+                    style={{alignContent: "center"}}
+                    onClick={() => {
+                        this.showDetail(row.id)
+                        this.tableAction.current?.reload()
+                    }}>
+
+                    {this.state.mode === 0 ? "审核" : "查看详情"}
+
+                </a>,
+            ],
+        },
+    ];
+
+    constructor(props: any) {
+        super(props);
+        this.state = {
+            mode: props.mode,
+            detailedReimbursement: undefined,
+            activate: props.activate,
+            reload: () => {
+                this.tableAction.current?.reload()
+            },
+        }
+        this.pullDepartment()
+    }
+
+    static getDerivedStateFromProps(nextProps: any, prevState: any) {
+        prevState.reload()
+        if (nextProps.activate !== prevState.activate) {
+            return {
+                mode: nextProps.mode,
+                activate: nextProps.activate,
+                detailedReimbursement: undefined,
+            }
+        }
+        return null
+    }
+
+    reload = () => {
+        this.tableAction.current?.reload()
+    }
+
+    pullDepartment() {
+        axiosInstance.get('common/department').then(response => {
+            this.departments.clear()
+            response.data.forEach((value: any) => {
+                    this.departments.set(value.departmentId, value.departmentName)
+                }
+            )
+            this.tableAction.current?.reload()
+        })
+
+    }
+
+    showDetail(reimbursementId: number) {
+        axiosInstance.get("common/reimbursement/" + reimbursementId).then((response) => {
+            console.log(response.data)
+            this.setState({detailedReimbursement: response.data})
+        }).catch((error) => {
+            openNotification("拉取报销单详情失败")
+        })
+    }
+
+    closeDetail = () => {
+        this.setState({detailedReimbursement: undefined})
+        this.tableAction.current?.reload()
+    }
+
+    async updateRequest(current: number | undefined, pageSize: number | undefined, sort: Record<string, SortOrder>, filter: Record<string, React.ReactText[] | null>) {
+        let tableListDataSource: TableListItem[] = []
+        let totalRecordLength = 0
+
+        current = (current === undefined ? 1 : current)
+        pageSize = (pageSize === undefined ? 5 : pageSize)
+        let params: any = {
+            pageNum: current - 1,
+            pageSize: pageSize,
+        }
+        if (filter.status !== undefined && filter.status !== null && filter.status.length !== 0) {
+            params['reimbursementStatuses'] = ""
+            for (let i = 0; i < filter.status.length; i++) {
+                if (i !== 0)
+                    params['reimbursementStatuses'] += ','
+                params['reimbursementStatuses'] += filter.status[i].toString()
+            }
+        }
+        if (filter.departmentId !== undefined && filter.departmentId !== null && filter.departmentId.length !== 0) {
+            params['reimbursementSubmitDepartments'] = ""
+            for (let i = 0; i < filter.departmentId.length; i++) {
+                if (i !== 0)
+                    params['reimbursementSubmitDepartments'] += ','
+                params['reimbursementSubmitDepartments'] += filter.departmentId[i].toString()
+            }
+        }
+        if (sort.id !== undefined && sort.id !== null) {
+            params['sortBy'] = "reimbursementId"
+            params['asc'] = (sort.id === "ascend")
+        }
+        if (sort.duration !== undefined && sort.duration !== null) {
+            params['sortBy'] = "reimbursementTripDuration"
+            params['asc'] = (sort.duration === "ascend")
+        }
+        if (sort.submitDateTime !== undefined && sort.submitDateTime !== null) {
+            params['sortBy'] = "reimbursementSubmitTime"
+            params['asc'] = (sort.submitDateTime === "ascend")
+        }
+        if (sort.beginDate !== undefined && sort.beginDate !== null) {
+            params['sortBy'] = "reimbursementDepartureDate"
+            params['asc'] = (sort.beginDate === "ascend")
+        }
+        let url: string = ""
+        if (this.state.mode === 0)
+            url = "approval/reimbursement"
+        else if (this.state.mode === 1)
+            url = "approval/reimbursement/history"
+        else {
+            if (store.getState().staff.managingDepartment?.departmentId !== 1) {
+                params['reimbursementSubmitDepartments'] = store.getState().staff.managingDepartment?.departmentId
+            }
+            url = "common/reimbursement"
+        }
+
+        let response = await axiosInstance.get(url, {params: params})
+        tableListDataSource = await this.converter(response.data.records, pageSize)
+        totalRecordLength = response.data.total
+        return Promise.resolve({
+            data: tableListDataSource,
+            success: true,
+            total: totalRecordLength,
+        });
+    }
+
+    async converter(value: Reimbursement[] | undefined | null, pageSize: number | undefined) {
+        if (value == undefined) {
+            return []
+        }
+        let result: TableListItem[] = []
+        for (let i = 0; i < value.length; i++) {
+            result.push({
+                key: i,
+                id: value[i].reimbursementId,
+                beginDate: Date.parse(value[i].reimbursementDepartureInvoice.invoiceDate),
+                endDate: Date.parse(value[i].reimbursementDepartureInvoice.invoiceDate) + value[i].reimbursementTripDuration * 24 * 60 * 60 * 1000,
+                uploaderName: value[i].reimbursementSubmitStaff.staffName,
+                OD: [value[i].reimbursementDepartureName, value[i].reimbursementDestinationName],
+                amount: value[i].reimbursementInvoiceAmount + value[i].reimbursementAdditionalAmount,
+                invoiceAmount: value[i].reimbursementInvoiceAmount,
+                additionalAmount: value[i].reimbursementAdditionalAmount,
+                status: value[i].reimbursementStatus % 7,
+                departmentId: value[i].reimbursementSubmitDepartment.departmentId,
+                submitDateTime: Date.parse(value[i].reimbursementSubmitTime),
+                detail: "查看详情",
+                back: value[i].reimbursementDestinationInvoice != undefined,
+            })
+        }
+        return result
+    }
+
+    render() {
+        return <>
+            <ReimbursementDetail reimbursement={this.state.detailedReimbursement}
+                                 closeDetail={this.closeDetail}
+                                 accessLevel={this.props.accessLevel}
+            />
+            <ProTable<TableListItem>
+                actionRef={this.tableAction}
+                columns={this.columns}
+                request={async (params, sorter, filter) => {
+                    return this.updateRequest(params.current, params.pageSize, sorter, filter)
+                }}
+                rowKey="key"
+                pagination={{
+                    defaultPageSize: 5,
+                    pageSizeOptions: ['5', '20', '50', '100'],
+                    showQuickJumper: true,
+                }}
+                search={false}
+                dateFormatter="string"
+                // toolBarRender={() => [
+                //     <Button key="show">查看日志</Button>,
+                //     <Button key="out">
+                //         导出数据
+                //         <DownOutlined />
+                //     </Button>,
+                //     <Button type="primary" key="primary">
+                //         创建应用
+                //     </Button>,
+                // ]}
+            />
+        </>;
+    }
 }
+
+class ReimbursementApproval extends React.Component<any, any> {
+    ref = [React.createRef<ReimbursementTab>(), React.createRef<ReimbursementTab>(), React.createRef<ReimbursementTab>()]
+
+    constructor(props: any) {
+        super(props);
+        this.state = {
+            activatedTab: 0
+        }
+    }
+
+    tabItems = () => {
+        return [{
+            label: "等待审批",
+            key: "0",
+            children: <ReimbursementTab ref={this.ref[0]} mode={0} activate={this.state.activatedTab === 0}
+                                        accessLevel={1}/>
+        },
+            {
+                label: "审批历史",
+                key: "1",
+                children: <ReimbursementTab ref={this.ref[1]} mode={1} activate={this.state.activatedTab === 1}
+                                            accessLevel={-1}/>
+            },
+            {
+                label: "全部记录",
+                key: "2",
+                children: <ReimbursementTab ref={this.ref[2]} mode={2} activate={this.state.activatedTab === 2}
+                                            accessLevel={-1}/>
+            }]
+    }
+    tabChange = (key: string) => {
+        this.setState({activatedTab: Number(key)})
+    }
+
+    render() {
+        return (
+                <Tabs
+                    style={{backgroundColor: "white",paddingLeft:10}}
+                    activeKey={this.state.activatedTab.toString()}
+                    onChange={this.tabChange}
+                    type="line"
+                    items={this.tabItems()}
+                />
+        );
+    }
+}
+
 export default ReimbursementApproval
\ No newline at end of file
diff --git a/src/pages/reimbursement/mine/MyReimbursement.tsx b/src/pages/reimbursement/mine/MyReimbursement.tsx
index 0f53073..24d986f 100644
--- a/src/pages/reimbursement/mine/MyReimbursement.tsx
+++ b/src/pages/reimbursement/mine/MyReimbursement.tsx
@@ -13,6 +13,7 @@ import qs from 'qs';
 import ReimbursementCreate from "./ReimbursementCreate";
 import ReimbursementDetail from "./ReimbursementDetail";
 import {openNotification} from "./utils";
+import {store} from "../../../models/store";
 
 const valueEnum = {
     0: 'success',
@@ -63,7 +64,7 @@ for (let i = 0; i < 94; i++) {
     })
 }
 
-const statusEnum = {
+export const statusEnum = {
     0: {text: '已报销', status: 'Success'},
     1: {text: '待主管审批', status: 'Processing'},
     2: {text: '待财务审批', status: 'Processing'},
@@ -83,10 +84,14 @@ class Subpage extends React.Component<any, any> {
             searchWord: "",
             onCreated: false,
             detailedReimbursement: undefined,
+            staffId:store.getState().token.staffId,
         }
+        store.subscribe(this.handleStoreChange);
         this.pullDepartment()
     }
-
+    handleStoreChange=()=>{
+        this.setState({staffId:store.getState().token.staffId})
+    }
     createRef = React.createRef<ReimbursementCreate>();
     columns: ProColumns<TableListItem>[] = [
         {
@@ -277,6 +282,7 @@ class Subpage extends React.Component<any, any> {
             let params: any = {
                 pageNum: current - 1,
                 pageSize: pageSize,
+                reimbursementSubmitStaffId:store.getState().token.staffId,
             }
             if (filter.status !== undefined && filter.status !== null && filter.status.length !== 0) {
                 params['reimbursementStatuses'] = ""
diff --git a/src/pages/reimbursement/mine/ReimbursementDetail.tsx b/src/pages/reimbursement/mine/ReimbursementDetail.tsx
index d2133e9..e59ddbc 100644
--- a/src/pages/reimbursement/mine/ReimbursementDetail.tsx
+++ b/src/pages/reimbursement/mine/ReimbursementDetail.tsx
@@ -216,7 +216,6 @@ class ReimbursementDetail extends React.Component<any, any> {
     }
 
     static getDerivedStateFromProps(nextProps: any, prevState: any) {
-        console.log(nextProps);
         if (nextProps.reimbursement !== prevState.reimbursement) {
             return {
                 open: nextProps.reimbursement !== undefined,