我的报销：改造了ui框架和接口

src/pages/reimbursement/mine/MyReimbursement.tsx

@@ -1,12 +1,13 @@
-import {DownOutlined} from '@ant-design/icons';
+import {DownOutlined,ExclamationCircleOutlined} from '@ant-design/icons';
 import type {ActionType, ProColumns, ProFormInstance} from '@ant-design/pro-components';
 import {ProTable} from '@ant-design/pro-components';
-import {Button, Dropdown, Input, Space, Typography} from 'antd';
+import {Button, Dropdown, Input, Popover, Space, Typography} from 'antd';
 import React, {ReactNode, useRef} from "react";
 import Search from "antd/es/input/Search";
 import axiosInstance from "../../../utils/axiosInstance";
 import {FormProps} from "antd/es/form/Form";
 import {FormInstance} from "antd/es/form";
+import {SortOrder} from "antd/es/table/interface";
 
 const valueEnum = {
     0: 'success',
@@ -16,112 +17,60 @@ const valueEnum = {
     4: 'wait4',
     5: 'failure'
 };
-
+export type Department = {
+    departmentId: number;
+    departmentName: string;
+}
 export type TableListItem = {
     id: string;
-    kind: string;
+    beginDate: number;
+    duration: number;
+    endDate: number;
+    OD: string[];
 
     amount: number;
-    status: string;
+    invoiceAmount: number;
-    department: string;
+    additionalAmount: number;
+    status: number;
+    departmentId: number;
     submitDateTime: number;
     detail: string;
+    back:boolean;
 };
-let fakeData: TableListItem[] = [
+let fakeData: TableListItem[] = [];
-
-    {
-        id: "123",
-        kind: "string",
-        amount: 5.0,
-        status: valueEnum[5],
-        department: "string",
-        submitDateTime: Date.now() - 100000000,
-        detail: "查看详情",
-    },
-    {
-        id: "123",
-        kind: "string",
-        detail: "查看详情",
-        amount: 4.0,
-        status: valueEnum[4],
-        department: "string",
-        submitDateTime: Date.now() - 100000000,
-    },
-
-    {
-        id: "123",
-        kind: "string",
-        detail: "查看详情",
-        amount: 3.0,
-        status: valueEnum[3],
-        department: "string",
-        submitDateTime: Date.now() - 100000000,
-    },
-    {
-        id: "123",
-        kind: "string",
-        detail: "查看详情",
-        amount: 2,
-        status: valueEnum[2],
-        department: "string",
-        submitDateTime: Date.now(),
-    },
-    {
-        id: "123",
-        kind: "string",
-        detail: "查看详情",
-        amount: 1,
-        status: valueEnum[1],
-        department: "string",
-        submitDateTime: Date.now() - 100000000,
-    },
-    {
-        id: "123",
-        kind: "string",
-        detail: "查看详情",
-        amount: 0.0,
-        status: valueEnum[0],
-        department: "string",
-        submitDateTime: Date.now() - 100000000,
-    },
-];
 for (let i = 0; i < 94; i++)
+    {
         fakeData.push({
-        id: "123",
+                id: "AX2022-" + i.toString(),
-        kind: "string",
+                beginDate: Date.UTC(2022, i % 11 + 1, i % 28 + 1),
+                endDate: Date.UTC(2022, i % 11 + 1, i % 28 + 1) + 1000 * 60 * 60 * 24 * i + 1,
+                duration: Math.ceil(Math.abs(1000 * 60 * 60 * 24 * i + 1) / 1000 / 60 / 60 / 24),
                 detail: "查看详情",
-        amount: i,
+                OD: ['上海', '北京'],
-        status: valueEnum[0],
+                amount: i + i,
-        department: "string",
+                invoiceAmount: i,
+                additionalAmount: i,
+                status: (i%6),
+                departmentId: i%3+1,
                 submitDateTime: Date.now() - 100000000,
+                back:(i&1)===1,
             })
-for (let i = 0; i < fakeData.length; i++)
+    }
-    fakeData[i].amount = i + 1
 
 
 
-
+class Subpage extends React.Component<any, any> {
-function pullAll() {
-    let params
-    axiosInstance({
-        url: 'reimbursement/list',
-        method: 'get',
-        params: params
-    }).then(response => {
-        console.log(response.data)
-    }).catch(function (error) {
-        console.log(error)
-    })
-}
-
-class Subpage extends React.Component {
     tableAction = React.createRef<ActionType>();
-    constructor(props: { }) {
+
+    constructor(props: {}) {
         super(props);
-        this.state={
+        this.state = {
-            searchWord:""
+            searchWord: "",
         }
+        this.pullDepartment()
     }
+    department = new Map<number, string>()
+
     columns: ProColumns<TableListItem>[] = [
         {
             title: '报销单号',
@@ -131,19 +80,40 @@ class Subpage extends React.Component {
             //render: (_) => <a>{_}</a>,
         },
         {
-            title: '报销类型',
+            title: '行程',
             width: 80,
-            dataIndex: 'kind',
+            dataIndex: 'OD',
             search: false,
+            render: (_, row) => <>{row.OD[0] + (row.back?"⇌":"→") + row.OD[1]}</>,
+        },
+        {
+            title: '出发日期',
+            width: 80,
+            dataIndex: 'beginDate',
+            search: false,
+            valueType: 'date',
             //render: (_) => <a>{_}</a>,
         },
         {
-            title: '金额',
+            title: '出差天数',
+            width: 80,
+            dataIndex: 'duration',
+            search: false,
+            //valueType: 'date',
+            render: (_) => <>{_}天</>,
+        },
+        {
+            title: '总金额',
             width: 80,
             dataIndex: 'amount',
             search: false,
-            //render: (_) => <a>{_}</a>,
+            render: (_,item) =>
-            sorter: (a, b) => a.amount - b.amount
+                <>{item.amount.toFixed(2)}元
+                    <Popover  content={<>报销金额：{item.invoiceAmount.toFixed(2)}元<br/>补贴金额：{item.additionalAmount.toFixed(2)}元</>}>
+                        <ExclamationCircleOutlined style={{marginLeft: 5}}/>
+                    </Popover>
+                </>
+            ,
         },
         {
             title: '状态',
@@ -153,12 +123,12 @@ class Subpage extends React.Component {
             onFilter: true,
             search: false,
             valueEnum: {
-                wait1: {text: '待主管审批', status: 'Processing'},
+                0: {text: '已报销', status: 'Success'},
-                wait2: {text: '待财务审批', status: 'Processing'},
+                1: {text: '待主管审批', status: 'Processing'},
-                wait3: {text: '待财务主管审批', status: 'Processing'},
+                2: {text: '待财务审批', status: 'Processing'},
-                wait4: {text: '待总经理审批', status: 'Processing'},
+                3: {text: '待财务主管审批', status: 'Processing'},
-                success: {text: '已报销', status: 'Success'},
+                4: {text: '待总经理审批', status: 'Warning'},
-                failure: {text: '审批未通过', status: 'Error'},
+                5: {text: '审批未通过', status: 'Error'},
             },
 
             //render: (_) => <a>{_}</a>,
@@ -167,7 +137,10 @@ class Subpage extends React.Component {
             title: '申请部门',
             width: 80,
             search: false,
-            dataIndex: 'department',
+            dataIndex: 'departmentId',
+            valueEnum: this.department,
+            filters: true,
+            onFilter: true,
             //render: (_) => <a>{_}</a>,
         },
         {
@@ -176,7 +149,6 @@ class Subpage extends React.Component {
             dataIndex: 'submitDateTime',
             valueType: 'dateTime',
             search: false,
-            sorter: (a, b) => a.submitDateTime - b.submitDateTime
             //render: (_) => <a>{_}</a>,
         },
 
@@ -190,6 +162,7 @@ class Subpage extends React.Component {
                     key="a"
                     onClick={() => {
                         this.showDetail(row)
+                        this.tableAction.current?.reload()
                     }}
                 >
                     查看详情
@@ -197,9 +170,10 @@ class Subpage extends React.Component {
             ],
         },
     ];
+
     search(value: string, form: FormProps['form'], dom: ReactNode[]) {
-        this.setState({searchWord:value});
+        this.setState({searchWord: value});
-        if(value===""){
+        if (value === "") {
             // @ts-ignore
             this.tableAction.current.reloadAndRest()
         }
@@ -207,39 +181,78 @@ class Subpage extends React.Component {
     }
 
     create() {
+        //TODO
         alert("123")
     }
 
     showDetail(row: TableListItem) {
+        //TODO
         alert((new Date(row.submitDateTime)))
     }
 
+    converter(value: any) {
+        let result: TableListItem[] = []
 
+        return result
+    }
 
-    updateRequest(current: number | undefined, pageSize: number | undefined){
+    pullDepartment() {
+        this.department.clear()
+        axiosInstance.get('common/department').then(response => {
+            console.log(response.data)
+            response.data.forEach((value: any) => {
+                    this.department.set(value.departmentId, value.departmentName)
+                }
+            )
+            console.log(this.department)
             // @ts-ignore
-        if(this.state.searchWord.trim()===""){
+            this.tableAction.current?.reset()
+        })
+
+    }
+
+    updateRequest(current: number | undefined, pageSize: number | undefined, sort: Record<string, SortOrder>, filter: Record<string, React.ReactText[] | null>) {
+        let tableListDataSource: TableListItem[] = []
+        let totalRecordLength = 0
+        if (this.state.searchWord.trim() === "") {
             current = (current === undefined ? 0 : current)
             pageSize = (pageSize === undefined ? 5 : pageSize)
-            let tableListDataSource = fakeData.slice(pageSize * current - pageSize, pageSize * current)
+            let params = {
-            console.log(current, pageSize, tableListDataSource.length)
+                current: current,
-            let totalRecordLength = fakeData.length
+                pageSize: pageSize
+            }
+            axiosInstance.get('common/reimbursement', {
+                params: params
+            }).then(response => {
+                console.log(response.data)
+                tableListDataSource = this.converter(response.data.records)
+                totalRecordLength = response.data.total
+            }).catch(function (error) {
+                console.log(error)
+            })
+
+            tableListDataSource = fakeData.slice(pageSize * current - pageSize, pageSize * current)
+            totalRecordLength = fakeData.length
+
+        } else {
+            axiosInstance.get('common/reimbursement/' + this.state.searchWord.trim(), {}).then(response => {
+                console.log(response.data)
+                tableListDataSource = this.converter(response.data.records)
+                totalRecordLength = tableListDataSource.length
+            }).catch(function (error) {
+                console.log(error)
+            })
+
+        }
+
         return Promise.resolve({
             data: tableListDataSource,
             success: true,
             total: totalRecordLength,
-                pageSize: pageSize
-            });
-        }else{
-            let tableListDataSource = fakeData.slice(0,1)
-            return Promise.resolve({
-                data: tableListDataSource,
-                success: true,
-                total: tableListDataSource.length,
         });
     }
 
-    }
+
     render() {
         return (
             <ProTable<TableListItem>
@@ -248,7 +261,7 @@ class Subpage extends React.Component {
                 request={async (params, sorter, filter) => {
                     // 表单搜索项会从 params 传入，传递给后端接口。
                     console.log(params, sorter, filter);
-                    return this.updateRequest(params.current, params.pageSize)
+                    return this.updateRequest(params.current, params.pageSize, sorter, filter)
 
                 }}
                 rowKey="key"