BigC
/
FinancialReimbursementSystem_frontend
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

main
白封羽 2022-12-29 00:16:34 +08:00
parent 0d9e429d86
commit a0308dcd86
2 changed files with 259 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/models/Staff.ts
View File

@ -124,3 +124,18 @@ export class InvoiceCommit {
//this.invoiceExtraInfo = props.get("invoiceExtraInfo")!. //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;
}

395
src/pages/reimbursement/mine/MyReimbursement.tsx
View File

@ -1,9 +1,12 @@
import { DownOutlined } from '@ant-design/icons'; 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 {ProTable} from '@ant-design/pro-components';
import {Button, Dropdown, Input, Space, Typography} from 'antd'; 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 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 = { const valueEnum = {
0: 'success', 0: 'success',
@ -15,7 +18,7 @@ const valueEnum = {
}; };
export type TableListItem = { export type TableListItem = {
id:string; id: string;
kind: string; kind: string;
amount: number; amount: number;
@ -24,203 +27,293 @@ export type TableListItem = {
submitDateTime: number; submitDateTime: number;
detail: string; detail: string;
}; };
const tableListDataSource: TableListItem[] = [ let fakeData: TableListItem[] = [
{ {
id:"123", id: "123",
kind: "string", kind: "string",
amount: 1200.0, amount: 5.0,
status: valueEnum[5], status: valueEnum[5],
department: "string", department: "string",
submitDateTime: Date.now()-100000000, submitDateTime: Date.now() - 100000000,
detail: "查看详情", detail: "查看详情",
}, },
{ {
id:"123", id: "123",
kind: "string", kind: "string",
detail: "查看详情", detail: "查看详情",
amount: 1200.0, amount: 4.0,
status: valueEnum[4], status: valueEnum[4],
department: "string", department: "string",
submitDateTime: Date.now()-100000000, submitDateTime: Date.now() - 100000000,
}, },
{ {
id:"123", id: "123",
kind: "string", kind: "string",
detail: "查看详情", detail: "查看详情",
amount: 1200.0, amount: 3.0,
status: valueEnum[3], status: valueEnum[3],
department: "string", department: "string",
submitDateTime: Date.now()-100000000, submitDateTime: Date.now() - 100000000,
}, },
{ {
id:"123", id: "123",
kind: "string", kind: "string",
detail: "查看详情", detail: "查看详情",
amount: 500, amount: 2,
status: valueEnum[2], status: valueEnum[2],
department: "string", department: "string",
submitDateTime: Date.now(), submitDateTime: Date.now(),
}, },
{ {
id:"123", id: "123",
kind: "string", kind: "string",
detail: "查看详情", detail: "查看详情",
amount: 1200.0, amount: 1,
status: valueEnum[1], status: valueEnum[1],
department: "string", department: "string",
submitDateTime: Date.now()-100000000, submitDateTime: Date.now() - 100000000,
}, },
{ {
id:"123", id: "123",
kind: "string", kind: "string",
detail: "查看详情", detail: "查看详情",
amount: 1200.0, amount: 0.0,
status: valueEnum[0], status: valueEnum[0],
department: "string", 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: '报销单号', function pullAll() {
width: 80, let params
dataIndex: 'id', axiosInstance({
search:false, url: 'reimbursement/list',
//render: (_) => <a>{_}</a>, method: 'get',
}, params: params
{ }).then(response => {
title: '报销类型', console.log(response.data)
width: 80, }).catch(function (error) {
dataIndex: 'kind', console.log(error)
search:false, })
//render: (_) => <a>{_}</a>, }
},
{ class Subpage extends React.Component {
title: '金额', tableAction = React.createRef<ActionType>();
width: 80, constructor(props: { }) {
dataIndex: 'amount', super(props);
search:false, this.state={
//render: (_) => <a>{_}</a>, searchWord:""
sorter:(a,b)=> a.amount - b.amount }
}, }
{ columns: ProColumns<TableListItem>[] = [
title: '状态', {
width: 80, title: '报销单号',
dataIndex: 'status', width: 80,
filters: true, dataIndex: 'id',
onFilter: true, search: false,
search:false, //render: (_) => <a>{_}</a>,
valueEnum: { },
wait1: { text: '待主管审批', status: 'Processing' }, {
wait2: { text: '待财务审批', status: 'Processing' }, title: '报销类型',
wait3: { text: '待财务主管审批', status: 'Processing' }, width: 80,
wait4: { text: '待总经理审批', status: 'Processing' }, dataIndex: 'kind',
success: { text: '已报销', status: 'Success' }, search: false,
failure: { text: '审批未通过', status: 'Error' }, //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,
title: '申请部门', dataIndex: 'detail',
width: 80, search: false,
search:false, render: (_, row, index, action) => [
dataIndex: 'department', <a
//render: (_) => <a>{_}</a>, key="a"
}, onClick={() => {
{ this.showDetail(row)
title: '申请时间', }}
width: 80, >
dataIndex: 'submitDateTime', 查看详情
valueType: 'dateTime', </a>,
search:false, ],
sorter:(a,b)=> a.submitDateTime-b.submitDateTime },
//render: (_) => <a>{_}</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()
}
{ create() {
title: '申请详情', alert("123")
width: 80, }
dataIndex: 'detail',
search:false,
render: (_) => <a>{_}</a>,
},
];
function makeTable() { showDetail(row: TableListItem) {
return ( alert((new Date(row.submitDateTime)))
<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) => {
}}
style={{width: 304,marginLeft:-30}}
enterButton
/>,
<Button key="create" type="primary" onClick={() => console.log(6668)} style={{width:100}}> updateRequest(current: number | undefined, pageSize: number | undefined){
新建报销单 // @ts-ignore
</Button> if(this.state.searchWord.trim()===""){
] current = (current === undefined ? 0 : current)
} pageSize = (pageSize === undefined ? 5 : pageSize)
}} let tableListDataSource = fakeData.slice(pageSize * current - pageSize, pageSize * current)
dateFormatter="string" console.log(current, pageSize, tableListDataSource.length)
// toolBarRender={() => [ let totalRecordLength = fakeData.length
// <Button key="show">查看日志</Button>, return Promise.resolve({
// <Button key="out"> data: tableListDataSource,
// 导出数据 success: true,
// <DownOutlined /> total: totalRecordLength,
// </Button>, pageSize: pageSize
// <Button type="primary" key="primary"> });
// 创建应用 }else{
// </Button>, 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() { function MyReimbursement() {
return( return (
<> <>
{makeTable()} <Subpage/>
</> </>
) )
} }
export default MyReimbursement export default MyReimbursement