完成搜索,分页逻辑;待接入数据通信,新建报销单,查看详情
白封羽
parent
0d9e429d86
commit
a0308dcd86
|
|
@ -123,4 +123,19 @@ export class InvoiceCommit {
|
|||
this.invoiceSellerTaxCode = props.get("invoiceSellerTaxCode")!.toString()
|
||||
//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;
|
||||
}
|
||||
|
|
@ -1,9 +1,12 @@
|
|||
import { DownOutlined } from '@ant-design/icons';
|
||||
import type { ProColumns } from '@ant-design/pro-components';
|
||||
import { ProTable } from '@ant-design/pro-components';
|
||||
import {DownOutlined} 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 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',
|
||||
|
|
@ -15,7 +18,7 @@ const valueEnum = {
|
|||
};
|
||||
|
||||
export type TableListItem = {
|
||||
id:string;
|
||||
id: string;
|
||||
kind: string;
|
||||
|
||||
amount: number;
|
||||
|
|
@ -24,203 +27,293 @@ export type TableListItem = {
|
|||
submitDateTime: number;
|
||||
detail: string;
|
||||
};
|
||||
const tableListDataSource: TableListItem[] = [
|
||||
let fakeData: TableListItem[] = [
|
||||
|
||||
{
|
||||
id:"123",
|
||||
id: "123",
|
||||
kind: "string",
|
||||
amount: 1200.0,
|
||||
amount: 5.0,
|
||||
status: valueEnum[5],
|
||||
department: "string",
|
||||
submitDateTime: Date.now()-100000000,
|
||||
submitDateTime: Date.now() - 100000000,
|
||||
detail: "查看详情",
|
||||
},
|
||||
{
|
||||
id:"123",
|
||||
id: "123",
|
||||
kind: "string",
|
||||
detail: "查看详情",
|
||||
amount: 1200.0,
|
||||
amount: 4.0,
|
||||
status: valueEnum[4],
|
||||
department: "string",
|
||||
submitDateTime: Date.now()-100000000,
|
||||
submitDateTime: Date.now() - 100000000,
|
||||
},
|
||||
|
||||
{
|
||||
id:"123",
|
||||
id: "123",
|
||||
kind: "string",
|
||||
detail: "查看详情",
|
||||
amount: 1200.0,
|
||||
amount: 3.0,
|
||||
status: valueEnum[3],
|
||||
department: "string",
|
||||
submitDateTime: Date.now()-100000000,
|
||||
submitDateTime: Date.now() - 100000000,
|
||||
},
|
||||
{
|
||||
id:"123",
|
||||
id: "123",
|
||||
kind: "string",
|
||||
detail: "查看详情",
|
||||
amount: 500,
|
||||
amount: 2,
|
||||
status: valueEnum[2],
|
||||
department: "string",
|
||||
submitDateTime: Date.now(),
|
||||
},
|
||||
{
|
||||
id:"123",
|
||||
id: "123",
|
||||
kind: "string",
|
||||
detail: "查看详情",
|
||||
amount: 1200.0,
|
||||
amount: 1,
|
||||
status: valueEnum[1],
|
||||
department: "string",
|
||||
submitDateTime: Date.now()-100000000,
|
||||
submitDateTime: Date.now() - 100000000,
|
||||
},
|
||||
{
|
||||
id:"123",
|
||||
id: "123",
|
||||
kind: "string",
|
||||
detail: "查看详情",
|
||||
amount: 1200.0,
|
||||
amount: 0.0,
|
||||
status: valueEnum[0],
|
||||
department: "string",
|
||||
submitDateTime: Date.now()-100000000,
|
||||
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>[] = [
|
||||
{
|
||||
title: '报销单号',
|
||||
width: 80,
|
||||
dataIndex: 'id',
|
||||
search:false,
|
||||
//render: (_) => <a>{_}</a>,
|
||||
},
|
||||
{
|
||||
title: '报销类型',
|
||||
width: 80,
|
||||
dataIndex: 'kind',
|
||||
search:false,
|
||||
//render: (_) => <a>{_}</a>,
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
width: 80,
|
||||
dataIndex: 'amount',
|
||||
search:false,
|
||||
//render: (_) => <a>{_}</a>,
|
||||
sorter:(a,b)=> a.amount - b.amount
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
width: 80,
|
||||
dataIndex: 'status',
|
||||
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' },
|
||||
|
||||
|
||||
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,
|
||||
dataIndex: 'id',
|
||||
search: false,
|
||||
//render: (_) => <a>{_}</a>,
|
||||
},
|
||||
{
|
||||
title: '报销类型',
|
||||
width: 80,
|
||||
dataIndex: 'kind',
|
||||
search: false,
|
||||
//render: (_) => <a>{_}</a>,
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
width: 80,
|
||||
dataIndex: 'amount',
|
||||
search: false,
|
||||
//render: (_) => <a>{_}</a>,
|
||||
sorter: (a, b) => a.amount - b.amount
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
width: 80,
|
||||
dataIndex: 'status',
|
||||
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>,
|
||||
},
|
||||
{
|
||||
title: '申请时间',
|
||||
width: 80,
|
||||
dataIndex: 'submitDateTime',
|
||||
valueType: 'dateTime',
|
||||
search: false,
|
||||
sorter: (a, b) => a.submitDateTime - b.submitDateTime
|
||||
//render: (_) => <a>{_}</a>,
|
||||
},
|
||||
|
||||
//render: (_) => <a>{_}</a>,
|
||||
},
|
||||
{
|
||||
title: '申请部门',
|
||||
width: 80,
|
||||
search:false,
|
||||
dataIndex: 'department',
|
||||
//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: (_, 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()
|
||||
}
|
||||
|
||||
{
|
||||
title: '申请详情',
|
||||
width: 80,
|
||||
dataIndex: 'detail',
|
||||
search:false,
|
||||
render: (_) => <a>{_}</a>,
|
||||
},
|
||||
];
|
||||
create() {
|
||||
alert("123")
|
||||
}
|
||||
|
||||
function makeTable() {
|
||||
return (
|
||||
<ProTable<TableListItem>
|
||||
columns={columns}
|
||||
request={(params, sorter, filter) => {
|
||||
// 表单搜索项会从 params 传入，传递给后端接口。
|
||||
console.log(params, sorter, filter);
|
||||
return Promise.resolve({
|
||||
data: tableListDataSource,
|
||||
success: true,
|
||||
});
|
||||
}}
|
||||
rowKey="key"
|
||||
pagination={{
|
||||
pageSize:5,
|
||||
showQuickJumper: true,
|
||||
}}
|
||||
// toolbar={{
|
||||
// title: '这里是标题',
|
||||
// subTitle: '这里是子标题',
|
||||
// tooltip: '这是一个段描述',
|
||||
// search: {
|
||||
// onSearch: (value: string) => {
|
||||
// alert(value);
|
||||
// },
|
||||
// },
|
||||
// }}
|
||||
search={{
|
||||
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) => {
|
||||
showDetail(row: TableListItem) {
|
||||
alert((new Date(row.submitDateTime)))
|
||||
}
|
||||
|
||||
}}
|
||||
style={{width: 304,marginLeft:-30}}
|
||||
enterButton
|
||||
|
||||
/>,
|
||||
<Button key="create" type="primary" onClick={() => console.log(6668)} style={{width:100}}>
|
||||
新建报销单
|
||||
</Button>
|
||||
]
|
||||
}
|
||||
}}
|
||||
dateFormatter="string"
|
||||
// toolBarRender={() => [
|
||||
// <Button key="show">查看日志</Button>,
|
||||
// <Button key="out">
|
||||
// 导出数据
|
||||
// <DownOutlined />
|
||||
// </Button>,
|
||||
// <Button type="primary" key="primary">
|
||||
// 创建应用
|
||||
// </Button>,
|
||||
// ]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
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={{
|
||||
defaultPageSize: 5,
|
||||
pageSizeOptions: [5, 10, 20, 50, 100],
|
||||
showQuickJumper: true,
|
||||
}}
|
||||
// toolbar={{
|
||||
// title: '这里是标题',
|
||||
// subTitle: '这里是子标题',
|
||||
// tooltip: '这是一个段描述',
|
||||
// search: {
|
||||
// onSearch: (value: string) => {
|
||||
// alert(value);
|
||||
// },
|
||||
// },
|
||||
// }}
|
||||
search={{
|
||||
defaultCollapsed: false,
|
||||
labelWidth: 'auto',
|
||||
optionRender: ({searchText}, {form}, dom) => {
|
||||
// console.log(searchConfig, formProps, dom)
|
||||
return [
|
||||
<div style={{flexWrap: "nowrap", display: "flex", justifyContent: "flex-end"}}>
|
||||
<Search className="searchBar"
|
||||
addonBefore={"报销单号："}
|
||||
placeholder={""}
|
||||
allowClear
|
||||
onSearch={(value) => {
|
||||
this.search(value, form, dom)
|
||||
}}
|
||||
enterButton
|
||||
|
||||
/>
|
||||
<Button key="create" type="primary" onClick={() => this.create()} style={{width: 100}}>
|
||||
新建报销单
|
||||
</Button>
|
||||
</div>
|
||||
]
|
||||
}
|
||||
}}
|
||||
|
||||
dateFormatter="string"
|
||||
// toolBarRender={() => [
|
||||
// <Button key="show">查看日志</Button>,
|
||||
// <Button key="out">
|
||||
// 导出数据
|
||||
// <DownOutlined />
|
||||
// </Button>,
|
||||
// <Button type="primary" key="primary">
|
||||
// 创建应用
|
||||
// </Button>,
|
||||
// ]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function MyReimbursement() {
|
||||
return(
|
||||
return (
|
||||
<>
|
||||
{makeTable()}
|
||||
<Subpage/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MyReimbursement
|
||||
Loading…
Reference in New Issue