搭建表格
白封羽
parent
e7705bbe65
commit
0d9e429d86
|
|
@ -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',
|
||||
1: 'running',
|
||||
2: 'online',
|
||||
3: 'error',
|
||||
0: 'success',
|
||||
1: 'wait1',
|
||||
2: 'wait2',
|
||||
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: 1234,
|
||||
status: "string",
|
||||
amount: 1200.0,
|
||||
status: valueEnum[5],
|
||||
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>,
|
||||
},
|
||||
{
|
||||
title: '发票类型',
|
||||
width: 80,
|
||||
dataIndex: 'invoiceKind',
|
||||
render: (_) => <a>{_}</a>,
|
||||
search:false,
|
||||
//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,
|
||||
collapsed: false,
|
||||
defaultCollapsed: 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={() => [
|
||||
<Button key="show">查看日志</Button>,
|
||||
<Button key="out">
|
||||
导出数据
|
||||
<DownOutlined />
|
||||
</Button>,
|
||||
<Button type="primary" key="primary">
|
||||
创建应用
|
||||
</Button>,
|
||||
]}
|
||||
// toolBarRender={() => [
|
||||
// <Button key="show">查看日志</Button>,
|
||||
// <Button key="out">
|
||||
// 导出数据
|
||||
// <DownOutlined />
|
||||
// </Button>,
|
||||
// <Button type="primary" key="primary">
|
||||
// 创建应用
|
||||
// </Button>,
|
||||
// ]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
function MyReimbursement() {
|
||||
return(
|
||||
<div>我的报销
|
||||
<>
|
||||
{makeTable()}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default MyReimbursement
|
||||
Loading…
Reference in New Issue