豆蘸盐牛

main
白封羽 2023-01-04 18:55:43 +08:00
parent 90b0d121ee
commit 1590505d2c
3 changed files with 368 additions and 7 deletions

View File

@ -1,6 +1,362 @@
function ReimbursementApproval() { import React from "react";
return( import {Button, Popover, Tabs} from "antd";
<div></div> 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 export default ReimbursementApproval

View File

@ -13,6 +13,7 @@ import qs from 'qs';
import ReimbursementCreate from "./ReimbursementCreate"; import ReimbursementCreate from "./ReimbursementCreate";
import ReimbursementDetail from "./ReimbursementDetail"; import ReimbursementDetail from "./ReimbursementDetail";
import {openNotification} from "./utils"; import {openNotification} from "./utils";
import {store} from "../../../models/store";
const valueEnum = { const valueEnum = {
0: 'success', 0: 'success',
@ -63,7 +64,7 @@ for (let i = 0; i < 94; i++) {
}) })
} }
const statusEnum = { export const statusEnum = {
0: {text: '已报销', status: 'Success'}, 0: {text: '已报销', status: 'Success'},
1: {text: '待主管审批', status: 'Processing'}, 1: {text: '待主管审批', status: 'Processing'},
2: {text: '待财务审批', status: 'Processing'}, 2: {text: '待财务审批', status: 'Processing'},
@ -83,10 +84,14 @@ class Subpage extends React.Component<any, any> {
searchWord: "", searchWord: "",
onCreated: false, onCreated: false,
detailedReimbursement: undefined, detailedReimbursement: undefined,
staffId:store.getState().token.staffId,
} }
store.subscribe(this.handleStoreChange);
this.pullDepartment() this.pullDepartment()
} }
handleStoreChange=()=>{
this.setState({staffId:store.getState().token.staffId})
}
createRef = React.createRef<ReimbursementCreate>(); createRef = React.createRef<ReimbursementCreate>();
columns: ProColumns<TableListItem>[] = [ columns: ProColumns<TableListItem>[] = [
{ {
@ -277,6 +282,7 @@ class Subpage extends React.Component<any, any> {
let params: any = { let params: any = {
pageNum: current - 1, pageNum: current - 1,
pageSize: pageSize, pageSize: pageSize,
reimbursementSubmitStaffId:store.getState().token.staffId,
} }
if (filter.status !== undefined && filter.status !== null && filter.status.length !== 0) { if (filter.status !== undefined && filter.status !== null && filter.status.length !== 0) {
params['reimbursementStatuses'] = "" params['reimbursementStatuses'] = ""

View File

@ -216,7 +216,6 @@ class ReimbursementDetail extends React.Component<any, any> {
} }
static getDerivedStateFromProps(nextProps: any, prevState: any) { static getDerivedStateFromProps(nextProps: any, prevState: any) {
console.log(nextProps);
if (nextProps.reimbursement !== prevState.reimbursement) { if (nextProps.reimbursement !== prevState.reimbursement) {
return { return {
open: nextProps.reimbursement !== undefined, open: nextProps.reimbursement !== undefined,