完成搜索,分页逻辑;待接入数据通信,新建报销单,查看详情

src/models/Staff.ts

@@ -124,3 +124,18 @@ export class InvoiceCommit {
         //this.invoiceExtraInfo = props.get("invoiceExtraInfo")!.
     }
 }
+export interface Reimbursement {
+    reimbursementActualAmount:       number;
+    reimbursementBillingTime:        string;
+    reimbursementId:                 number;
+    reimbursementKindId:             string;
+    reimbursementNote:               string;
+    reimbursementSubmitDepartmentId: number;
+    reimbursementSubmitStaffId:      string;
+    reimbursementSubmitTime:         string;
+    approvalOpinion:                 string;
+    approvalResult:                  number;
+    approvalStaffId:                 string;
+    approvalStaffName:               string;
+    processOrder:                    number;
+}

src/pages/reimbursement/mine/MyReimbursement.tsx

@@ -1,9 +1,12 @@
 import {DownOutlined} from '@ant-design/icons';
-import type { ProColumns } from '@ant-design/pro-components';
+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 React from "react";
+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";
 
 const valueEnum = {
     0: 'success',
@@ -24,12 +27,12 @@ export type TableListItem = {
     submitDateTime: number;
     detail: string;
 };
-const tableListDataSource: TableListItem[] = [
+let fakeData: TableListItem[] = [
 
     {
         id: "123",
         kind: "string",
-        amount: 1200.0,
+        amount: 5.0,
         status: valueEnum[5],
         department: "string",
         submitDateTime: Date.now() - 100000000,
@@ -39,7 +42,7 @@ const tableListDataSource: TableListItem[] = [
         id: "123",
         kind: "string",
         detail: "查看详情",
-        amount: 1200.0,
+        amount: 4.0,
         status: valueEnum[4],
         department: "string",
         submitDateTime: Date.now() - 100000000,
@@ -49,7 +52,7 @@ const tableListDataSource: TableListItem[] = [
         id: "123",
         kind: "string",
         detail: "查看详情",
-        amount: 1200.0,
+        amount: 3.0,
         status: valueEnum[3],
         department: "string",
         submitDateTime: Date.now() - 100000000,
@@ -58,7 +61,7 @@ const tableListDataSource: TableListItem[] = [
         id: "123",
         kind: "string",
         detail: "查看详情",
-        amount: 500,
+        amount: 2,
         status: valueEnum[2],
         department: "string",
         submitDateTime: Date.now(),
@@ -67,7 +70,7 @@ const tableListDataSource: TableListItem[] = [
         id: "123",
         kind: "string",
         detail: "查看详情",
-        amount: 1200.0,
+        amount: 1,
         status: valueEnum[1],
         department: "string",
         submitDateTime: Date.now() - 100000000,
@@ -76,15 +79,50 @@ const tableListDataSource: TableListItem[] = [
         id: "123",
         kind: "string",
         detail: "查看详情",
-        amount: 1200.0,
+        amount: 0.0,
         status: valueEnum[0],
         department: "string",
         submitDateTime: Date.now() - 100000000,
     },
 ];
+for (let i = 0; i < 94; i++)
+    fakeData.push({
+        id: "123",
+        kind: "string",
+        detail: "查看详情",
+        amount: i,
+        status: valueEnum[0],
+        department: "string",
+        submitDateTime: Date.now() - 100000000,
+    })
+for (let i = 0; i < fakeData.length; i++)
+    fakeData[i].amount = i + 1
 
 
-const columns: ProColumns<TableListItem>[] = [
+
+
+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: { }) {
+        super(props);
+        this.state={
+            searchWord:""
+        }
+    }
+    columns: ProColumns<TableListItem>[] = [
         {
             title: '报销单号',
             width: 80,
@@ -147,25 +185,76 @@ const columns: ProColumns<TableListItem>[] = [
             width: 80,
             dataIndex: 'detail',
             search: false,
-        render: (_) => <a>{_}</a>,
+            render: (_, row, index, action) => [
+                <a
+                    key="a"
+                    onClick={() => {
+                        this.showDetail(row)
+                    }}
+                >
+                    查看详情
+                </a>,
+            ],
         },
     ];
+    search(value: string, form: FormProps['form'], dom: ReactNode[]) {
+        this.setState({searchWord:value});
+        if(value===""){
+            // @ts-ignore
+            this.tableAction.current.reloadAndRest()
+        }
+        this.tableAction.current?.reload()
+    }
 
-function makeTable() {
+    create() {
-    return (
+        alert("123")
-        <ProTable<TableListItem>
+    }
-            columns={columns}
+
-            request={(params, sorter, filter) => {
+    showDetail(row: TableListItem) {
-                // 表单搜索项会从 params 传入，传递给后端接口。
+        alert((new Date(row.submitDateTime)))
-                console.log(params, sorter, filter);
+    }
+
+
+
+    updateRequest(current: number | undefined, pageSize: number | undefined){
+        // @ts-ignore
+        if(this.state.searchWord.trim()===""){
+            current = (current === undefined ? 0 : current)
+            pageSize = (pageSize === undefined ? 5 : pageSize)
+            let tableListDataSource = fakeData.slice(pageSize * current - pageSize, pageSize * current)
+            console.log(current, pageSize, tableListDataSource.length)
+            let totalRecordLength = fakeData.length
             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>
+                actionRef={this.tableAction}
+                columns={this.columns}
+                request={async (params, sorter, filter) => {
+                    // 表单搜索项会从 params 传入，传递给后端接口。
+                    console.log(params, sorter, filter);
+                    return this.updateRequest(params.current, params.pageSize)
+
                 }}
                 rowKey="key"
                 pagination={{
-                pageSize:5,
+                    defaultPageSize: 5,
+                    pageSizeOptions: [5, 10, 20, 50, 100],
                     showQuickJumper: true,
                 }}
                 // toolbar={{
@@ -181,27 +270,28 @@ function makeTable() {
                 search={{
                     defaultCollapsed: false,
                     labelWidth: 'auto',
-                resetText:" ",
+                    optionRender: ({searchText}, {form}, dom) => {
-                optionRender: ({ searchText }, { form }) => {
                         // console.log(searchConfig, formProps, dom)
                         return [
+                            <div style={{flexWrap: "nowrap", display: "flex", justifyContent: "flex-end"}}>
                                 <Search className="searchBar"
                                         addonBefore={"报销单号："}
-                                placeholder={"this.state.searchContent"}
+                                        placeholder={""}
                                         allowClear
                                         onSearch={(value) => {
-
+                                            this.search(value, form, dom)
                                         }}
-                                style={{width: 304,marginLeft:-30}}
                                         enterButton
 
-                        />,
+                                />
-                        <Button key="create" type="primary" onClick={() => console.log(6668)} style={{width:100}}>
+                                <Button key="create" type="primary" onClick={() => this.create()} style={{width: 100}}>
                                     新建报销单
                                 </Button>
+                            </div>
                         ]
                     }
                 }}
+
                 dateFormatter="string"
                 // toolBarRender={() => [
                 //     <Button key="show">查看日志</Button>,
@@ -215,12 +305,15 @@ function makeTable() {
                 // ]}
             />
         );
-};
+    }
+}
+
 function MyReimbursement() {
     return (
         <>
-            {makeTable()}
+            <Subpage/>
         </>
     )
 }
+
 export default MyReimbursement