我的报销:改造了ui框架和接口

main
白封羽 2022-12-30 16:56:47 +08:00
parent 2ad5c124b0
commit 1444a1638d
1 changed files with 150 additions and 137 deletions

View File

@ -1,12 +1,13 @@
import {DownOutlined} from '@ant-design/icons'; import {DownOutlined,ExclamationCircleOutlined} from '@ant-design/icons';
import type {ActionType, ProColumns, ProFormInstance} 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, Popover, Space, Typography} from 'antd';
import React, {ReactNode, useRef} 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 axiosInstance from "../../../utils/axiosInstance";
import {FormProps} from "antd/es/form/Form"; import {FormProps} from "antd/es/form/Form";
import {FormInstance} from "antd/es/form"; import {FormInstance} from "antd/es/form";
import {SortOrder} from "antd/es/table/interface";
const valueEnum = { const valueEnum = {
0: 'success', 0: 'success',
@ -16,112 +17,60 @@ const valueEnum = {
4: 'wait4', 4: 'wait4',
5: 'failure' 5: 'failure'
}; };
export type Department = {
departmentId: number;
departmentName: string;
}
export type TableListItem = { export type TableListItem = {
id: string; id: string;
kind: string; beginDate: number;
duration: number;
endDate: number;
OD: string[];
amount: number; amount: number;
status: string; invoiceAmount: number;
department: string; additionalAmount: number;
status: number;
departmentId: number;
submitDateTime: number; submitDateTime: number;
detail: string; detail: string;
back:boolean;
}; };
let fakeData: TableListItem[] = [ let fakeData: TableListItem[] = [];
{
id: "123",
kind: "string",
amount: 5.0,
status: valueEnum[5],
department: "string",
submitDateTime: Date.now() - 100000000,
detail: "查看详情",
},
{
id: "123",
kind: "string",
detail: "查看详情",
amount: 4.0,
status: valueEnum[4],
department: "string",
submitDateTime: Date.now() - 100000000,
},
{
id: "123",
kind: "string",
detail: "查看详情",
amount: 3.0,
status: valueEnum[3],
department: "string",
submitDateTime: Date.now() - 100000000,
},
{
id: "123",
kind: "string",
detail: "查看详情",
amount: 2,
status: valueEnum[2],
department: "string",
submitDateTime: Date.now(),
},
{
id: "123",
kind: "string",
detail: "查看详情",
amount: 1,
status: valueEnum[1],
department: "string",
submitDateTime: Date.now() - 100000000,
},
{
id: "123",
kind: "string",
detail: "查看详情",
amount: 0.0,
status: valueEnum[0],
department: "string",
submitDateTime: Date.now() - 100000000,
},
];
for (let i = 0; i < 94; i++) for (let i = 0; i < 94; i++)
{
fakeData.push({ fakeData.push({
id: "123", id: "AX2022-" + i.toString(),
kind: "string", beginDate: Date.UTC(2022, i % 11 + 1, i % 28 + 1),
endDate: Date.UTC(2022, i % 11 + 1, i % 28 + 1) + 1000 * 60 * 60 * 24 * i + 1,
duration: Math.ceil(Math.abs(1000 * 60 * 60 * 24 * i + 1) / 1000 / 60 / 60 / 24),
detail: "查看详情", detail: "查看详情",
amount: i, OD: ['上海', '北京'],
status: valueEnum[0], amount: i + i,
department: "string", invoiceAmount: i,
additionalAmount: i,
status: (i%6),
departmentId: i%3+1,
submitDateTime: Date.now() - 100000000, submitDateTime: Date.now() - 100000000,
}) back:(i&1)===1,
for (let i = 0; i < fakeData.length; i++)
fakeData[i].amount = i + 1
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 {
class Subpage extends React.Component<any, any> {
tableAction = React.createRef<ActionType>(); tableAction = React.createRef<ActionType>();
constructor(props: {}) { constructor(props: {}) {
super(props); super(props);
this.state = { this.state = {
searchWord:"" searchWord: "",
} }
this.pullDepartment()
} }
department = new Map<number, string>()
columns: ProColumns<TableListItem>[] = [ columns: ProColumns<TableListItem>[] = [
{ {
title: '报销单号', title: '报销单号',
@ -131,19 +80,40 @@ class Subpage extends React.Component {
//render: (_) => <a>{_}</a>, //render: (_) => <a>{_}</a>,
}, },
{ {
title: '报销类型', title: '行程',
width: 80, width: 80,
dataIndex: 'kind', dataIndex: 'OD',
search: false, search: false,
render: (_, row) => <>{row.OD[0] + (row.back?"⇌":"→") + row.OD[1]}</>,
},
{
title: '出发日期',
width: 80,
dataIndex: 'beginDate',
search: false,
valueType: 'date',
//render: (_) => <a>{_}</a>, //render: (_) => <a>{_}</a>,
}, },
{ {
title: '金额', title: '出差天数',
width: 80,
dataIndex: 'duration',
search: false,
//valueType: 'date',
render: (_) => <>{_}</>,
},
{
title: '总金额',
width: 80, width: 80,
dataIndex: 'amount', dataIndex: 'amount',
search: false, search: false,
//render: (_) => <a>{_}</a>, render: (_,item) =>
sorter: (a, b) => a.amount - b.amount <>{item.amount.toFixed(2)}
<Popover content={<>{item.invoiceAmount.toFixed(2)}<br/>{item.additionalAmount.toFixed(2)}</>}>
<ExclamationCircleOutlined style={{marginLeft: 5}}/>
</Popover>
</>
,
}, },
{ {
title: '状态', title: '状态',
@ -153,12 +123,12 @@ class Subpage extends React.Component {
onFilter: true, onFilter: true,
search: false, search: false,
valueEnum: { valueEnum: {
wait1: {text: '待主管审批', status: 'Processing'}, 0: {text: '已报销', status: 'Success'},
wait2: {text: '待财务审批', status: 'Processing'}, 1: {text: '待主管审批', status: 'Processing'},
wait3: {text: '待财务主管审批', status: 'Processing'}, 2: {text: '待财务审批', status: 'Processing'},
wait4: {text: '待总经理审批', status: 'Processing'}, 3: {text: '待财务主管审批', status: 'Processing'},
success: {text: '已报销', status: 'Success'}, 4: {text: '待总经理审批', status: 'Warning'},
failure: {text: '审批未通过', status: 'Error'}, 5: {text: '审批未通过', status: 'Error'},
}, },
//render: (_) => <a>{_}</a>, //render: (_) => <a>{_}</a>,
@ -167,7 +137,10 @@ class Subpage extends React.Component {
title: '申请部门', title: '申请部门',
width: 80, width: 80,
search: false, search: false,
dataIndex: 'department', dataIndex: 'departmentId',
valueEnum: this.department,
filters: true,
onFilter: true,
//render: (_) => <a>{_}</a>, //render: (_) => <a>{_}</a>,
}, },
{ {
@ -176,7 +149,6 @@ class Subpage extends React.Component {
dataIndex: 'submitDateTime', dataIndex: 'submitDateTime',
valueType: 'dateTime', valueType: 'dateTime',
search: false, search: false,
sorter: (a, b) => a.submitDateTime - b.submitDateTime
//render: (_) => <a>{_}</a>, //render: (_) => <a>{_}</a>,
}, },
@ -190,6 +162,7 @@ class Subpage extends React.Component {
key="a" key="a"
onClick={() => { onClick={() => {
this.showDetail(row) this.showDetail(row)
this.tableAction.current?.reload()
}} }}
> >
@ -197,6 +170,7 @@ class Subpage extends React.Component {
], ],
}, },
]; ];
search(value: string, form: FormProps['form'], dom: ReactNode[]) { search(value: string, form: FormProps['form'], dom: ReactNode[]) {
this.setState({searchWord: value}); this.setState({searchWord: value});
if (value === "") { if (value === "") {
@ -207,39 +181,78 @@ class Subpage extends React.Component {
} }
create() { create() {
//TODO
alert("123") alert("123")
} }
showDetail(row: TableListItem) { showDetail(row: TableListItem) {
//TODO
alert((new Date(row.submitDateTime))) alert((new Date(row.submitDateTime)))
} }
converter(value: any) {
let result: TableListItem[] = []
return result
}
updateRequest(current: number | undefined, pageSize: number | undefined){ pullDepartment() {
this.department.clear()
axiosInstance.get('common/department').then(response => {
console.log(response.data)
response.data.forEach((value: any) => {
this.department.set(value.departmentId, value.departmentName)
}
)
console.log(this.department)
// @ts-ignore // @ts-ignore
this.tableAction.current?.reset()
})
}
updateRequest(current: number | undefined, pageSize: number | undefined, sort: Record<string, SortOrder>, filter: Record<string, React.ReactText[] | null>) {
let tableListDataSource: TableListItem[] = []
let totalRecordLength = 0
if (this.state.searchWord.trim() === "") { if (this.state.searchWord.trim() === "") {
current = (current === undefined ? 0 : current) current = (current === undefined ? 0 : current)
pageSize = (pageSize === undefined ? 5 : pageSize) pageSize = (pageSize === undefined ? 5 : pageSize)
let tableListDataSource = fakeData.slice(pageSize * current - pageSize, pageSize * current) let params = {
console.log(current, pageSize, tableListDataSource.length) current: current,
let totalRecordLength = fakeData.length pageSize: pageSize
}
axiosInstance.get('common/reimbursement', {
params: params
}).then(response => {
console.log(response.data)
tableListDataSource = this.converter(response.data.records)
totalRecordLength = response.data.total
}).catch(function (error) {
console.log(error)
})
tableListDataSource = fakeData.slice(pageSize * current - pageSize, pageSize * current)
totalRecordLength = fakeData.length
} else {
axiosInstance.get('common/reimbursement/' + this.state.searchWord.trim(), {}).then(response => {
console.log(response.data)
tableListDataSource = this.converter(response.data.records)
totalRecordLength = tableListDataSource.length
}).catch(function (error) {
console.log(error)
})
}
return Promise.resolve({ return Promise.resolve({
data: tableListDataSource, data: tableListDataSource,
success: true, success: true,
total: totalRecordLength, total: totalRecordLength,
pageSize: pageSize
});
}else{
let tableListDataSource = fakeData.slice(0,1)
return Promise.resolve({
data: tableListDataSource,
success: true,
total: tableListDataSource.length,
}); });
} }
}
render() { render() {
return ( return (
<ProTable<TableListItem> <ProTable<TableListItem>
@ -248,7 +261,7 @@ class Subpage extends React.Component {
request={async (params, sorter, filter) => { request={async (params, sorter, filter) => {
// 表单搜索项会从 params 传入,传递给后端接口。 // 表单搜索项会从 params 传入,传递给后端接口。
console.log(params, sorter, filter); console.log(params, sorter, filter);
return this.updateRequest(params.current, params.pageSize) return this.updateRequest(params.current, params.pageSize, sorter, filter)
}} }}
rowKey="key" rowKey="key"