From 1590505d2c58a596bafcb0b5d0244b8cefbfaa88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E5=B0=81=E7=BE=BD?= <2360164671@qq.com> Date: Wed, 4 Jan 2023 18:55:43 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B1=86=E8=98=B8=E7=9B=90=E7=89=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../approval/ReimbursementApproval.tsx | 364 +++++++++++++++++- .../reimbursement/mine/MyReimbursement.tsx | 10 +- .../mine/ReimbursementDetail.tsx | 1 - 3 files changed, 368 insertions(+), 7 deletions(-) diff --git a/src/pages/reimbursement/approval/ReimbursementApproval.tsx b/src/pages/reimbursement/approval/ReimbursementApproval.tsx index 05f2e56..a0d2a96 100644 --- a/src/pages/reimbursement/approval/ReimbursementApproval.tsx +++ b/src/pages/reimbursement/approval/ReimbursementApproval.tsx @@ -1,6 +1,362 @@ -function ReimbursementApproval() { - return( -
报销审批
- ) +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 { + tableAction = React.createRef(); + departments = new Map() + columns: ProColumns[] = [ + { + title: '报销单号', + width: 60, + dataIndex: 'id', + search: false, + sorter: true, + //render: (_) => {_}, + }, + + { + 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: (_) => {_}, + }, + { + title: '总金额', + width: 60, + dataIndex: 'amount', + search: false, + render: (_, item) => + <>{(item.amount / 100.0).toFixed(2)}元 + 报销金额：{(item.invoiceAmount / 100.0).toFixed(2)}元
补贴金额：{(item.additionalAmount / 100.0).toFixed(2)}元}> + + + + , + }, + { + title: '状态', + width: 80, + dataIndex: 'status', + filters: true, + onFilter: false, + search: false, + valueEnum: statusEnum, + //render: (_) => {_}, + }, + { + title: '申请部门', + width: 120, + search: false, + dataIndex: 'departmentId', + valueEnum: this.departments, + filters: true, + onFilter: false, + //render: (_) => {_}, + }, + { + title: '申请时间', + width: 80, + dataIndex: 'submitDateTime', + valueType: 'dateTime', + search: false, + sorter: true, + //render: (_) => {_}, + }, + + { + title: '申请详情', + width: 60, + dataIndex: 'detail', + search: false, + render: (_, row, index, action) => [ + { + this.showDetail(row.id) + this.tableAction.current?.reload() + }}> + + {this.state.mode === 0 ? "审核" : "查看详情"} + + , + ], + }, + ]; + + 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, filter: Record) { + 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 <> + + + 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={() => [ + // , + // , + // , + // ]} + /> + ; + } } + +class ReimbursementApproval extends React.Component { + ref = [React.createRef(), React.createRef(), React.createRef()] + + constructor(props: any) { + super(props); + this.state = { + activatedTab: 0 + } + } + + tabItems = () => { + return [{ + label: "等待审批", + key: "0", + children: + }, + { + label: "审批历史", + key: "1", + children: + }, + { + label: "全部记录", + key: "2", + children: + }] + } + tabChange = (key: string) => { + this.setState({activatedTab: Number(key)}) + } + + render() { + return ( + + ); + } +} + export default ReimbursementApproval \ No newline at end of file diff --git a/src/pages/reimbursement/mine/MyReimbursement.tsx b/src/pages/reimbursement/mine/MyReimbursement.tsx index 0f53073..24d986f 100644 --- a/src/pages/reimbursement/mine/MyReimbursement.tsx +++ b/src/pages/reimbursement/mine/MyReimbursement.tsx @@ -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 { 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(); columns: ProColumns[] = [ { @@ -277,6 +282,7 @@ class Subpage extends React.Component { 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'] = "" diff --git a/src/pages/reimbursement/mine/ReimbursementDetail.tsx b/src/pages/reimbursement/mine/ReimbursementDetail.tsx index d2133e9..e59ddbc 100644 --- a/src/pages/reimbursement/mine/ReimbursementDetail.tsx +++ b/src/pages/reimbursement/mine/ReimbursementDetail.tsx @@ -216,7 +216,6 @@ class ReimbursementDetail extends React.Component { } static getDerivedStateFromProps(nextProps: any, prevState: any) { - console.log(nextProps); if (nextProps.reimbursement !== prevState.reimbursement) { return { open: nextProps.reimbursement !== undefined,