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

main
白封羽 2022-12-29 00:16:34 +08:00
parent 0d9e429d86
commit a0308dcd86
2 changed files with 259 additions and 151 deletions

View File

@ -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;
}

View File

@ -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