我的报销：改造了ui框架和接口
白封羽
parent
2ad5c124b0
commit
1444a1638d
|
|
@ -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 {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 Search from "antd/es/input/Search";
|
||||
import axiosInstance from "../../../utils/axiosInstance";
|
||||
import {FormProps} from "antd/es/form/Form";
|
||||
import {FormInstance} from "antd/es/form";
|
||||
import {SortOrder} from "antd/es/table/interface";
|
||||
|
||||
const valueEnum = {
|
||||
0: 'success',
|
||||
|
|
@ -16,112 +17,60 @@ const valueEnum = {
|
|||
4: 'wait4',
|
||||
5: 'failure'
|
||||
};
|
||||
|
||||
export type Department = {
|
||||
departmentId: number;
|
||||
departmentName: string;
|
||||
}
|
||||
export type TableListItem = {
|
||||
id: string;
|
||||
kind: string;
|
||||
beginDate: number;
|
||||
duration: number;
|
||||
endDate: number;
|
||||
OD: string[];
|
||||
|
||||
amount: number;
|
||||
status: string;
|
||||
department: string;
|
||||
invoiceAmount: number;
|
||||
additionalAmount: number;
|
||||
status: number;
|
||||
departmentId: number;
|
||||
submitDateTime: number;
|
||||
detail: string;
|
||||
back:boolean;
|
||||
};
|
||||
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,
|
||||
},
|
||||
];
|
||||
let fakeData: TableListItem[] = [];
|
||||
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
|
||||
|
||||
|
||||
|
||||
|
||||
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:""
|
||||
}
|
||||
{
|
||||
fakeData.push({
|
||||
id: "AX2022-" + i.toString(),
|
||||
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: "查看详情",
|
||||
OD: ['上海', '北京'],
|
||||
amount: i + i,
|
||||
invoiceAmount: i,
|
||||
additionalAmount: i,
|
||||
status: (i%6),
|
||||
departmentId: i%3+1,
|
||||
submitDateTime: Date.now() - 100000000,
|
||||
back:(i&1)===1,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
class Subpage extends React.Component<any, any> {
|
||||
tableAction = React.createRef<ActionType>();
|
||||
|
||||
constructor(props: {}) {
|
||||
super(props);
|
||||
this.state = {
|
||||
searchWord: "",
|
||||
}
|
||||
this.pullDepartment()
|
||||
}
|
||||
department = new Map<number, string>()
|
||||
|
||||
columns: ProColumns<TableListItem>[] = [
|
||||
{
|
||||
title: '报销单号',
|
||||
|
|
@ -131,19 +80,40 @@ class Subpage extends React.Component {
|
|||
//render: (_) => <a>{_}</a>,
|
||||
},
|
||||
{
|
||||
title: '报销类型',
|
||||
title: '行程',
|
||||
width: 80,
|
||||
dataIndex: 'kind',
|
||||
dataIndex: 'OD',
|
||||
search: false,
|
||||
render: (_, row) => <>{row.OD[0] + (row.back?"⇌":"→") + row.OD[1]}</>,
|
||||
},
|
||||
{
|
||||
title: '出发日期',
|
||||
width: 80,
|
||||
dataIndex: 'beginDate',
|
||||
search: false,
|
||||
valueType: 'date',
|
||||
//render: (_) => <a>{_}</a>,
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
title: '出差天数',
|
||||
width: 80,
|
||||
dataIndex: 'duration',
|
||||
search: false,
|
||||
//valueType: 'date',
|
||||
render: (_) => <>{_}天</>,
|
||||
},
|
||||
{
|
||||
title: '总金额',
|
||||
width: 80,
|
||||
dataIndex: 'amount',
|
||||
search: false,
|
||||
//render: (_) => <a>{_}</a>,
|
||||
sorter: (a, b) => a.amount - b.amount
|
||||
render: (_,item) =>
|
||||
<>{item.amount.toFixed(2)}元
|
||||
<Popover content={<>报销金额：{item.invoiceAmount.toFixed(2)}元<br/>补贴金额：{item.additionalAmount.toFixed(2)}元</>}>
|
||||
<ExclamationCircleOutlined style={{marginLeft: 5}}/>
|
||||
</Popover>
|
||||
</>
|
||||
,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
|
|
@ -153,12 +123,12 @@ class Subpage extends React.Component {
|
|||
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'},
|
||||
0: {text: '已报销', status: 'Success'},
|
||||
1: {text: '待主管审批', status: 'Processing'},
|
||||
2: {text: '待财务审批', status: 'Processing'},
|
||||
3: {text: '待财务主管审批', status: 'Processing'},
|
||||
4: {text: '待总经理审批', status: 'Warning'},
|
||||
5: {text: '审批未通过', status: 'Error'},
|
||||
},
|
||||
|
||||
//render: (_) => <a>{_}</a>,
|
||||
|
|
@ -167,7 +137,10 @@ class Subpage extends React.Component {
|
|||
title: '申请部门',
|
||||
width: 80,
|
||||
search: false,
|
||||
dataIndex: 'department',
|
||||
dataIndex: 'departmentId',
|
||||
valueEnum: this.department,
|
||||
filters: true,
|
||||
onFilter: true,
|
||||
//render: (_) => <a>{_}</a>,
|
||||
},
|
||||
{
|
||||
|
|
@ -176,7 +149,6 @@ class Subpage extends React.Component {
|
|||
dataIndex: 'submitDateTime',
|
||||
valueType: 'dateTime',
|
||||
search: false,
|
||||
sorter: (a, b) => a.submitDateTime - b.submitDateTime
|
||||
//render: (_) => <a>{_}</a>,
|
||||
},
|
||||
|
||||
|
|
@ -190,6 +162,7 @@ class Subpage extends React.Component {
|
|||
key="a"
|
||||
onClick={() => {
|
||||
this.showDetail(row)
|
||||
this.tableAction.current?.reload()
|
||||
}}
|
||||
>
|
||||
查看详情
|
||||
|
|
@ -197,9 +170,10 @@ class Subpage extends React.Component {
|
|||
],
|
||||
},
|
||||
];
|
||||
|
||||
search(value: string, form: FormProps['form'], dom: ReactNode[]) {
|
||||
this.setState({searchWord:value});
|
||||
if(value===""){
|
||||
this.setState({searchWord: value});
|
||||
if (value === "") {
|
||||
// @ts-ignore
|
||||
this.tableAction.current.reloadAndRest()
|
||||
}
|
||||
|
|
@ -207,39 +181,78 @@ class Subpage extends React.Component {
|
|||
}
|
||||
|
||||
create() {
|
||||
//TODO
|
||||
alert("123")
|
||||
}
|
||||
|
||||
showDetail(row: TableListItem) {
|
||||
//TODO
|
||||
alert((new Date(row.submitDateTime)))
|
||||
}
|
||||
|
||||
converter(value: any) {
|
||||
let result: TableListItem[] = []
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
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,
|
||||
});
|
||||
}
|
||||
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
|
||||
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() === "") {
|
||||
current = (current === undefined ? 0 : current)
|
||||
pageSize = (pageSize === undefined ? 5 : pageSize)
|
||||
let params = {
|
||||
current: current,
|
||||
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({
|
||||
data: tableListDataSource,
|
||||
success: true,
|
||||
total: totalRecordLength,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ProTable<TableListItem>
|
||||
|
|
@ -248,7 +261,7 @@ class Subpage extends React.Component {
|
|||
request={async (params, sorter, filter) => {
|
||||
// 表单搜索项会从 params 传入，传递给后端接口。
|
||||
console.log(params, sorter, filter);
|
||||
return this.updateRequest(params.current, params.pageSize)
|
||||
return this.updateRequest(params.current, params.pageSize, sorter, filter)
|
||||
|
||||
}}
|
||||
rowKey="key"
|
||||
|
|
|
|||
Loading…
Reference in New Issue