搭建表格

src/pages/reimbursement/mine/MyReimbursement.tsx

@@ -1,34 +1,86 @@
 import { DownOutlined } from '@ant-design/icons';
 import type { ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
-import { Button } from 'antd';
+import {Button, Dropdown, Input, Space, Typography} from 'antd';
+import React from "react";
+import Search from "antd/es/input/Search";
 
 const valueEnum = {
-    0: 'close',
+    0: 'success',
-    1: 'running',
+    1: 'wait1',
-    2: 'online',
+    2: 'wait2',
-    3: 'error',
+    3: 'wait3',
+    4: 'wait4',
+    5: 'failure'
 };
 
 export type TableListItem = {
     id:string;
     kind: string;
-    invoiceKind: string;
+
     amount: number;
     status: string;
     department: string;
-    submitDateTime: string;
+    submitDateTime: number;
+    detail: string;
 };
 const tableListDataSource: TableListItem[] = [
+
     {
         id:"123",
         kind: "string",
-        invoiceKind: "string",
+        amount: 1200.0,
-        amount: 1234,
+        status: valueEnum[5],
-        status: "string",
         department: "string",
-        submitDateTime: "string",
+        submitDateTime: Date.now()-100000000,
-    }
+        detail: "查看详情",
+    },
+    {
+        id:"123",
+        kind: "string",
+        detail: "查看详情",
+        amount: 1200.0,
+        status: valueEnum[4],
+        department: "string",
+        submitDateTime: Date.now()-100000000,
+    },
+
+    {
+        id:"123",
+        kind: "string",
+        detail: "查看详情",
+        amount: 1200.0,
+        status: valueEnum[3],
+        department: "string",
+        submitDateTime: Date.now()-100000000,
+    },
+    {
+        id:"123",
+        kind: "string",
+        detail: "查看详情",
+        amount: 500,
+        status: valueEnum[2],
+        department: "string",
+        submitDateTime: Date.now(),
+    },
+    {
+        id:"123",
+        kind: "string",
+        detail: "查看详情",
+        amount: 1200.0,
+        status: valueEnum[1],
+        department: "string",
+        submitDateTime: Date.now()-100000000,
+    },
+    {
+        id:"123",
+        kind: "string",
+        detail: "查看详情",
+        amount: 1200.0,
+        status: valueEnum[0],
+        department: "string",
+        submitDateTime: Date.now()-100000000,
+    },
 ];
 
 
@@ -37,43 +89,64 @@ const columns: ProColumns<TableListItem>[] = [
         title: '报销单号',
         width: 80,
         dataIndex: 'id',
-        render: (_) => <a>{_}</a>,
+        search:false,
+        //render: (_) => <a>{_}</a>,
     },
     {
-        title: '申请事由',
+        title: '报销类型',
         width: 80,
         dataIndex: 'kind',
-        render: (_) => <a>{_}</a>,
+        search:false,
-    },
+        //render: (_) => <a>{_}</a>,
-    {
-        title: '发票类型',
-        width: 80,
-        dataIndex: 'invoiceKind',
-        render: (_) => <a>{_}</a>,
     },
     {
         title: '金额',
         width: 80,
         dataIndex: 'amount',
-        render: (_) => <a>{_}</a>,
+        search:false,
+        //render: (_) => <a>{_}</a>,
         sorter:(a,b)=> a.amount - b.amount
     },
     {
         title: '状态',
         width: 80,
         dataIndex: 'status',
-        render: (_) => <a>{_}</a>,
+        filters: true,
+        onFilter: true,
+        search:false,
+        valueEnum: {
+            wait1: { text: '待主管审批', status: 'Processing' },
+            wait2: { text: '待财务审批', status: 'Processing' },
+            wait3: { text: '待财务主管审批', status: 'Processing' },
+            wait4: { text: '待总经理审批', status: 'Processing' },
+            success: { text: '已报销', status: 'Success' },
+            failure: { text: '审批未通过', status: 'Error' },
+        },
+
+        //render: (_) => <a>{_}</a>,
     },
     {
         title: '申请部门',
         width: 80,
+        search:false,
         dataIndex: 'department',
-        render: (_) => <a>{_}</a>,
+        //render: (_) => <a>{_}</a>,
     },
     {
         title: '申请时间',
         width: 80,
         dataIndex: 'submitDateTime',
+        valueType: 'dateTime',
+        search:false,
+        sorter:(a,b)=> a.submitDateTime-b.submitDateTime
+        //render: (_) => <a>{_}</a>,
+    },
+
+    {
+        title: '申请详情',
+        width: 80,
+        dataIndex: 'detail',
+        search:false,
         render: (_) => <a>{_}</a>,
     },
 ];
@@ -92,32 +165,62 @@ function makeTable() {
             }}
             rowKey="key"
             pagination={{
+                pageSize:5,
                 showQuickJumper: true,
             }}
+            // toolbar={{
+            //     title: '这里是标题',
+            //     subTitle: '这里是子标题',
+            //     tooltip: '这是一个段描述',
+            //     search: {
+            //         onSearch: (value: string) => {
+            //             alert(value);
+            //         },
+            //     },
+            // }}
             search={{
-                optionRender: false,
+                defaultCollapsed: false,
-                collapsed: false,
+                labelWidth: 'auto',
+                resetText:" ",
+                optionRender: ({ searchText }, { form }) => {
+                    // console.log(searchConfig, formProps, dom)
+                    return [
+                        <Search className="searchBar"
+                                addonBefore={"报销单号："}
+                                placeholder={"this.state.searchContent"}
+                                allowClear
+                                onSearch={(value) => {
+
+                                }}
+                                style={{width: 304,marginLeft:-30}}
+                                enterButton
+
+                        />,
+                        <Button key="create" type="primary" onClick={() => console.log(6668)} style={{width:100}}>
+                            新建报销单
+                        </Button>
+                ]
+                }
             }}
             dateFormatter="string"
-            headerTitle="表格标题"
+            // toolBarRender={() => [
-            toolBarRender={() => [
+            //     <Button key="show">查看日志</Button>,
-                <Button key="show">查看日志</Button>,
+            //     <Button key="out">
-                <Button key="out">
+            //         导出数据
-                    导出数据
+            //         <DownOutlined />
-                    <DownOutlined />
+            //     </Button>,
-                </Button>,
+            //     <Button type="primary" key="primary">
-                <Button type="primary" key="primary">
+            //         创建应用
-                    创建应用
+            //     </Button>,
-                </Button>,
+            // ]}
-            ]}
         />
     );
 };
 function MyReimbursement() {
     return(
-        <div>我的报销
+        <>
             {makeTable()}
-        </div>
+        </>
     )
 }
 export default MyReimbursement