豆蘸盐牛
白封羽
parent
90b0d121ee
commit
1590505d2c
|
|
@ -1,6 +1,362 @@
|
|||
function ReimbursementApproval() {
|
||||
return(
|
||||
<div>报销审批</div>
|
||||
)
|
||||
import React from "react";
|
||||
import {Button, Popover, Tabs} from "antd";
|
||||
import {ActionType, ProColumns, ProTable} from "@ant-design/pro-components";
|
||||
import Search from "antd/es/input/Search";
|
||||
import {statusEnum} from "../mine/MyReimbursement";
|
||||
import axiosInstance from "../../../utils/axiosInstance";
|
||||
import {ExclamationCircleOutlined} from "@ant-design/icons";
|
||||
import {openNotification} from "../mine/utils";
|
||||
import {SortOrder} from "antd/es/table/interface";
|
||||
import {Reimbursement} from "../../../models/Reimbursement";
|
||||
import ReimbursementDetail from "../mine/ReimbursementDetail";
|
||||
import {store} from "../../../models/store";
|
||||
|
||||
export type TableListItem = {
|
||||
key: number;
|
||||
id: number;
|
||||
beginDate: number;
|
||||
uploaderName: string;
|
||||
endDate: number;
|
||||
OD: string[];
|
||||
|
||||
amount: number;
|
||||
invoiceAmount: number;
|
||||
additionalAmount: number;
|
||||
status: number;
|
||||
departmentId: number;
|
||||
submitDateTime: number;
|
||||
detail: string;
|
||||
back: boolean;
|
||||
};
|
||||
|
||||
class ReimbursementTab extends React.Component<any, any> {
|
||||
tableAction = React.createRef<ActionType>();
|
||||
departments = new Map<number, string>()
|
||||
columns: ProColumns<TableListItem>[] = [
|
||||
{
|
||||
title: '报销单号',
|
||||
width: 60,
|
||||
dataIndex: 'id',
|
||||
search: false,
|
||||
sorter: true,
|
||||
//render: (_) => <a>{_}</a>,
|
||||
},
|
||||
|
||||
{
|
||||
title: '申请人',
|
||||
width: 60,
|
||||
dataIndex: 'uploaderName',
|
||||
search: false,
|
||||
sorter: false,
|
||||
//valueType: 'date',
|
||||
//render: (_) => <>{_}天</>,
|
||||
},
|
||||
{
|
||||
title: '行程',
|
||||
width: 60,
|
||||
dataIndex: 'OD',
|
||||
search: false,
|
||||
render: (_, row) => <>{row.OD[0] + (row.back ? " ⇌ " : " → ") + row.OD[1]}</>,
|
||||
},
|
||||
{
|
||||
title: '出发日期',
|
||||
width: 70,
|
||||
dataIndex: 'beginDate',
|
||||
search: false,
|
||||
valueType: 'date',
|
||||
sorter: true,
|
||||
//render: (_) => <a>{_}</a>,
|
||||
},
|
||||
{
|
||||
title: '总金额',
|
||||
width: 60,
|
||||
dataIndex: 'amount',
|
||||
search: false,
|
||||
render: (_, item) =>
|
||||
<>{(item.amount / 100.0).toFixed(2)}元
|
||||
<Popover
|
||||
content={<>报销金额：{(item.invoiceAmount / 100.0).toFixed(2)}元<br/>补贴金额：{(item.additionalAmount / 100.0).toFixed(2)}元</>}>
|
||||
<ExclamationCircleOutlined style={{marginLeft: 5}}/>
|
||||
</Popover>
|
||||
</>
|
||||
,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
width: 80,
|
||||
dataIndex: 'status',
|
||||
filters: true,
|
||||
onFilter: false,
|
||||
search: false,
|
||||
valueEnum: statusEnum,
|
||||
//render: (_) => <a>{_}</a>,
|
||||
},
|
||||
{
|
||||
title: '申请部门',
|
||||
width: 120,
|
||||
search: false,
|
||||
dataIndex: 'departmentId',
|
||||
valueEnum: this.departments,
|
||||
filters: true,
|
||||
onFilter: false,
|
||||
//render: (_) => <a>{_}</a>,
|
||||
},
|
||||
{
|
||||
title: '申请时间',
|
||||
width: 80,
|
||||
dataIndex: 'submitDateTime',
|
||||
valueType: 'dateTime',
|
||||
search: false,
|
||||
sorter: true,
|
||||
//render: (_) => <a>{_}</a>,
|
||||
},
|
||||
|
||||
{
|
||||
title: '申请详情',
|
||||
width: 60,
|
||||
dataIndex: 'detail',
|
||||
search: false,
|
||||
render: (_, row, index, action) => [
|
||||
<a
|
||||
key="a"
|
||||
style={{alignContent: "center"}}
|
||||
onClick={() => {
|
||||
this.showDetail(row.id)
|
||||
this.tableAction.current?.reload()
|
||||
}}>
|
||||
|
||||
{this.state.mode === 0 ? "审核" : "查看详情"}
|
||||
|
||||
</a>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = {
|
||||
mode: props.mode,
|
||||
detailedReimbursement: undefined,
|
||||
activate: props.activate,
|
||||
reload: () => {
|
||||
this.tableAction.current?.reload()
|
||||
},
|
||||
}
|
||||
this.pullDepartment()
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps: any, prevState: any) {
|
||||
prevState.reload()
|
||||
if (nextProps.activate !== prevState.activate) {
|
||||
return {
|
||||
mode: nextProps.mode,
|
||||
activate: nextProps.activate,
|
||||
detailedReimbursement: undefined,
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
reload = () => {
|
||||
this.tableAction.current?.reload()
|
||||
}
|
||||
|
||||
pullDepartment() {
|
||||
axiosInstance.get('common/department').then(response => {
|
||||
this.departments.clear()
|
||||
response.data.forEach((value: any) => {
|
||||
this.departments.set(value.departmentId, value.departmentName)
|
||||
}
|
||||
)
|
||||
this.tableAction.current?.reload()
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
showDetail(reimbursementId: number) {
|
||||
axiosInstance.get("common/reimbursement/" + reimbursementId).then((response) => {
|
||||
console.log(response.data)
|
||||
this.setState({detailedReimbursement: response.data})
|
||||
}).catch((error) => {
|
||||
openNotification("拉取报销单详情失败")
|
||||
})
|
||||
}
|
||||
|
||||
closeDetail = () => {
|
||||
this.setState({detailedReimbursement: undefined})
|
||||
this.tableAction.current?.reload()
|
||||
}
|
||||
|
||||
async updateRequest(current: number | undefined, pageSize: number | undefined, sort: Record<string, SortOrder>, filter: Record<string, React.ReactText[] | null>) {
|
||||
let tableListDataSource: TableListItem[] = []
|
||||
let totalRecordLength = 0
|
||||
|
||||
current = (current === undefined ? 1 : current)
|
||||
pageSize = (pageSize === undefined ? 5 : pageSize)
|
||||
let params: any = {
|
||||
pageNum: current - 1,
|
||||
pageSize: pageSize,
|
||||
}
|
||||
if (filter.status !== undefined && filter.status !== null && filter.status.length !== 0) {
|
||||
params['reimbursementStatuses'] = ""
|
||||
for (let i = 0; i < filter.status.length; i++) {
|
||||
if (i !== 0)
|
||||
params['reimbursementStatuses'] += ','
|
||||
params['reimbursementStatuses'] += filter.status[i].toString()
|
||||
}
|
||||
}
|
||||
if (filter.departmentId !== undefined && filter.departmentId !== null && filter.departmentId.length !== 0) {
|
||||
params['reimbursementSubmitDepartments'] = ""
|
||||
for (let i = 0; i < filter.departmentId.length; i++) {
|
||||
if (i !== 0)
|
||||
params['reimbursementSubmitDepartments'] += ','
|
||||
params['reimbursementSubmitDepartments'] += filter.departmentId[i].toString()
|
||||
}
|
||||
}
|
||||
if (sort.id !== undefined && sort.id !== null) {
|
||||
params['sortBy'] = "reimbursementId"
|
||||
params['asc'] = (sort.id === "ascend")
|
||||
}
|
||||
if (sort.duration !== undefined && sort.duration !== null) {
|
||||
params['sortBy'] = "reimbursementTripDuration"
|
||||
params['asc'] = (sort.duration === "ascend")
|
||||
}
|
||||
if (sort.submitDateTime !== undefined && sort.submitDateTime !== null) {
|
||||
params['sortBy'] = "reimbursementSubmitTime"
|
||||
params['asc'] = (sort.submitDateTime === "ascend")
|
||||
}
|
||||
if (sort.beginDate !== undefined && sort.beginDate !== null) {
|
||||
params['sortBy'] = "reimbursementDepartureDate"
|
||||
params['asc'] = (sort.beginDate === "ascend")
|
||||
}
|
||||
let url: string = ""
|
||||
if (this.state.mode === 0)
|
||||
url = "approval/reimbursement"
|
||||
else if (this.state.mode === 1)
|
||||
url = "approval/reimbursement/history"
|
||||
else {
|
||||
if (store.getState().staff.managingDepartment?.departmentId !== 1) {
|
||||
params['reimbursementSubmitDepartments'] = store.getState().staff.managingDepartment?.departmentId
|
||||
}
|
||||
url = "common/reimbursement"
|
||||
}
|
||||
|
||||
let response = await axiosInstance.get(url, {params: params})
|
||||
tableListDataSource = await this.converter(response.data.records, pageSize)
|
||||
totalRecordLength = response.data.total
|
||||
return Promise.resolve({
|
||||
data: tableListDataSource,
|
||||
success: true,
|
||||
total: totalRecordLength,
|
||||
});
|
||||
}
|
||||
|
||||
async converter(value: Reimbursement[] | undefined | null, pageSize: number | undefined) {
|
||||
if (value == undefined) {
|
||||
return []
|
||||
}
|
||||
let result: TableListItem[] = []
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
result.push({
|
||||
key: i,
|
||||
id: value[i].reimbursementId,
|
||||
beginDate: Date.parse(value[i].reimbursementDepartureInvoice.invoiceDate),
|
||||
endDate: Date.parse(value[i].reimbursementDepartureInvoice.invoiceDate) + value[i].reimbursementTripDuration * 24 * 60 * 60 * 1000,
|
||||
uploaderName: value[i].reimbursementSubmitStaff.staffName,
|
||||
OD: [value[i].reimbursementDepartureName, value[i].reimbursementDestinationName],
|
||||
amount: value[i].reimbursementInvoiceAmount + value[i].reimbursementAdditionalAmount,
|
||||
invoiceAmount: value[i].reimbursementInvoiceAmount,
|
||||
additionalAmount: value[i].reimbursementAdditionalAmount,
|
||||
status: value[i].reimbursementStatus % 7,
|
||||
departmentId: value[i].reimbursementSubmitDepartment.departmentId,
|
||||
submitDateTime: Date.parse(value[i].reimbursementSubmitTime),
|
||||
detail: "查看详情",
|
||||
back: value[i].reimbursementDestinationInvoice != undefined,
|
||||
})
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
render() {
|
||||
return <>
|
||||
<ReimbursementDetail reimbursement={this.state.detailedReimbursement}
|
||||
closeDetail={this.closeDetail}
|
||||
accessLevel={this.props.accessLevel}
|
||||
/>
|
||||
<ProTable<TableListItem>
|
||||
actionRef={this.tableAction}
|
||||
columns={this.columns}
|
||||
request={async (params, sorter, filter) => {
|
||||
return this.updateRequest(params.current, params.pageSize, sorter, filter)
|
||||
}}
|
||||
rowKey="key"
|
||||
pagination={{
|
||||
defaultPageSize: 5,
|
||||
pageSizeOptions: ['5', '20', '50', '100'],
|
||||
showQuickJumper: true,
|
||||
}}
|
||||
search={false}
|
||||
dateFormatter="string"
|
||||
// toolBarRender={() => [
|
||||
// <Button key="show">查看日志</Button>,
|
||||
// <Button key="out">
|
||||
// 导出数据
|
||||
// <DownOutlined />
|
||||
// </Button>,
|
||||
// <Button type="primary" key="primary">
|
||||
// 创建应用
|
||||
// </Button>,
|
||||
// ]}
|
||||
/>
|
||||
</>;
|
||||
}
|
||||
}
|
||||
|
||||
class ReimbursementApproval extends React.Component<any, any> {
|
||||
ref = [React.createRef<ReimbursementTab>(), React.createRef<ReimbursementTab>(), React.createRef<ReimbursementTab>()]
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = {
|
||||
activatedTab: 0
|
||||
}
|
||||
}
|
||||
|
||||
tabItems = () => {
|
||||
return [{
|
||||
label: "等待审批",
|
||||
key: "0",
|
||||
children: <ReimbursementTab ref={this.ref[0]} mode={0} activate={this.state.activatedTab === 0}
|
||||
accessLevel={1}/>
|
||||
},
|
||||
{
|
||||
label: "审批历史",
|
||||
key: "1",
|
||||
children: <ReimbursementTab ref={this.ref[1]} mode={1} activate={this.state.activatedTab === 1}
|
||||
accessLevel={-1}/>
|
||||
},
|
||||
{
|
||||
label: "全部记录",
|
||||
key: "2",
|
||||
children: <ReimbursementTab ref={this.ref[2]} mode={2} activate={this.state.activatedTab === 2}
|
||||
accessLevel={-1}/>
|
||||
}]
|
||||
}
|
||||
tabChange = (key: string) => {
|
||||
this.setState({activatedTab: Number(key)})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Tabs
|
||||
style={{backgroundColor: "white",paddingLeft:10}}
|
||||
activeKey={this.state.activatedTab.toString()}
|
||||
onChange={this.tabChange}
|
||||
type="line"
|
||||
items={this.tabItems()}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ReimbursementApproval
|
||||
|
|
@ -13,6 +13,7 @@ import qs from 'qs';
|
|||
import ReimbursementCreate from "./ReimbursementCreate";
|
||||
import ReimbursementDetail from "./ReimbursementDetail";
|
||||
import {openNotification} from "./utils";
|
||||
import {store} from "../../../models/store";
|
||||
|
||||
const valueEnum = {
|
||||
0: 'success',
|
||||
|
|
@ -63,7 +64,7 @@ for (let i = 0; i < 94; i++) {
|
|||
})
|
||||
}
|
||||
|
||||
const statusEnum = {
|
||||
export const statusEnum = {
|
||||
0: {text: '已报销', status: 'Success'},
|
||||
1: {text: '待主管审批', status: 'Processing'},
|
||||
2: {text: '待财务审批', status: 'Processing'},
|
||||
|
|
@ -83,10 +84,14 @@ class Subpage extends React.Component<any, any> {
|
|||
searchWord: "",
|
||||
onCreated: false,
|
||||
detailedReimbursement: undefined,
|
||||
staffId:store.getState().token.staffId,
|
||||
}
|
||||
store.subscribe(this.handleStoreChange);
|
||||
this.pullDepartment()
|
||||
}
|
||||
|
||||
handleStoreChange=()=>{
|
||||
this.setState({staffId:store.getState().token.staffId})
|
||||
}
|
||||
createRef = React.createRef<ReimbursementCreate>();
|
||||
columns: ProColumns<TableListItem>[] = [
|
||||
{
|
||||
|
|
@ -277,6 +282,7 @@ class Subpage extends React.Component<any, any> {
|
|||
let params: any = {
|
||||
pageNum: current - 1,
|
||||
pageSize: pageSize,
|
||||
reimbursementSubmitStaffId:store.getState().token.staffId,
|
||||
}
|
||||
if (filter.status !== undefined && filter.status !== null && filter.status.length !== 0) {
|
||||
params['reimbursementStatuses'] = ""
|
||||
|
|
|
|||
|
|
@ -216,7 +216,6 @@ class ReimbursementDetail extends React.Component<any, any> {
|
|||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps: any, prevState: any) {
|
||||
console.log(nextProps);
|
||||
if (nextProps.reimbursement !== prevState.reimbursement) {
|
||||
return {
|
||||
open: nextProps.reimbursement !== undefined,
|
||||
|
|
|
|||
Loading…
Reference in New Issue