沧海之约

main
白封羽 2023-01-03 20:14:30 +08:00
parent 5a90b4d1a1
commit fd3e327df7
2 changed files with 90 additions and 35 deletions

View File

@ -197,10 +197,12 @@ class Subpage extends React.Component<any, any> {
closeDetail = () => { closeDetail = () => {
this.setState({detailedReimbursement: undefined}) this.setState({detailedReimbursement: undefined})
this.tableAction.current?.reload()
} }
showDetail(reimbursementId: number) { showDetail(reimbursementId: number) {
axiosInstance.get("common/reimbursement/" + reimbursementId).then((response) => { axiosInstance.get("common/reimbursement/" + reimbursementId).then((response) => {
console.log(response.data)
this.setState({detailedReimbursement: response.data}) this.setState({detailedReimbursement: response.data})
}).catch((error) => { }).catch((error) => {
openNotification("拉取报销单详情失败") openNotification("拉取报销单详情失败")
@ -224,7 +226,7 @@ class Subpage extends React.Component<any, any> {
amount: value.reimbursementInvoiceAmount + value.reimbursementAdditionalAmount, amount: value.reimbursementInvoiceAmount + value.reimbursementAdditionalAmount,
invoiceAmount: value.reimbursementInvoiceAmount, invoiceAmount: value.reimbursementInvoiceAmount,
additionalAmount: value.reimbursementAdditionalAmount, additionalAmount: value.reimbursementAdditionalAmount,
status: value.reimbursementStatus % 6, status: value.reimbursementStatus % 7,
departmentId: value.reimbursementSubmitDepartment.departmentId, departmentId: value.reimbursementSubmitDepartment.departmentId,
submitDateTime: Date.parse(value.reimbursementSubmitTime), submitDateTime: Date.parse(value.reimbursementSubmitTime),
detail: "查看详情", detail: "查看详情",
@ -243,7 +245,7 @@ class Subpage extends React.Component<any, any> {
amount: value[i].reimbursementInvoiceAmount + value[i].reimbursementAdditionalAmount, amount: value[i].reimbursementInvoiceAmount + value[i].reimbursementAdditionalAmount,
invoiceAmount: value[i].reimbursementInvoiceAmount, invoiceAmount: value[i].reimbursementInvoiceAmount,
additionalAmount: value[i].reimbursementAdditionalAmount, additionalAmount: value[i].reimbursementAdditionalAmount,
status: value[i].reimbursementStatus % 6, status: value[i].reimbursementStatus % 7,
departmentId: value[i].reimbursementSubmitDepartment.departmentId, departmentId: value[i].reimbursementSubmitDepartment.departmentId,
submitDateTime: Date.parse(value[i].reimbursementSubmitTime), submitDateTime: Date.parse(value[i].reimbursementSubmitTime),
detail: "查看详情", detail: "查看详情",
@ -339,7 +341,7 @@ class Subpage extends React.Component<any, any> {
<> <>
<ReimbursementDetail reimbursement={this.state.detailedReimbursement} <ReimbursementDetail reimbursement={this.state.detailedReimbursement}
closeDetail={this.closeDetail} closeDetail={this.closeDetail}
accessLevel={1} accessLevel={0}
/> />
<ProTable<TableListItem> <ProTable<TableListItem>
actionRef={this.tableAction} actionRef={this.tableAction}

View File

@ -1,10 +1,31 @@
import React, {ReactNode} from "react"; import React, {ReactNode} from "react";
import {Button, Checkbox, Col, Descriptions, Modal, Popconfirm, Popover, Row, StepProps, Steps, Tag} from "antd"; import {
Button, Radio,
Col,
Descriptions,
Modal,
Popconfirm,
Popover,
Row,
Select,
StepProps,
Steps,
Tag
} from "antd";
import TextArea from "antd/es/input/TextArea"; import TextArea from "antd/es/input/TextArea";
import {ApprovalProcess, Invoice, ReimbursementDetailModal} from "../../../models/ReimbursementDetailModal"; import {ApprovalProcess, Invoice, ReimbursementDetailModal} from "../../../models/ReimbursementDetailModal";
import dayjs, {Dayjs} from "dayjs"; import dayjs, {Dayjs} from "dayjs";
import {ExclamationCircleOutlined} from "@ant-design/icons"; import {ExclamationCircleOutlined} from "@ant-design/icons";
import displayInvoicesList from "./component/tempComponent"; import displayInvoicesList from "./component/tempComponent";
import {
CheckCircleOutlined,
ClockCircleOutlined,
CloseCircleOutlined,
MinusCircleOutlined,
SyncOutlined,
} from '@ant-design/icons';
import axiosInstance from "../../../utils/axiosInstance";
import {openNotification} from "./utils";
const statusEnum = { const statusEnum = {
0: {text: '已报销', status: 'Success'}, 0: {text: '已报销', status: 'Success'},
@ -77,7 +98,7 @@ function displayRawInfo(reimbursement: ReimbursementDetailModal | undefined | nu
</>) </>)
} }
function displaySteps(reimbursement: ReimbursementDetailModal | undefined | null, onApprove:boolean) { function displaySteps(reimbursement: ReimbursementDetailModal | undefined | null, onApprove: boolean) {
if (reimbursement == undefined) if (reimbursement == undefined)
return null; return null;
let currentStep = 0; let currentStep = 0;
@ -91,16 +112,16 @@ function displaySteps(reimbursement: ReimbursementDetailModal | undefined | null
if (approvalSteps == null) if (approvalSteps == null)
approvalSteps = [] approvalSteps = []
for (let i = 0; i < approvalSteps.length; i++) { for (let i = 0; i < approvalSteps.length; i++) {
if (approvalSteps[i].approvalResult === i) { if (approvalSteps[i].approvalResult === i + 1) {
let description: string | ReactNode = approvalSteps[i].approvalStaff.staffName + "】" + "审批通过"; let description: string | ReactNode = "【" + approvalSteps[i].approvalStaff.staffName + "】" + "审批通过";
if (approvalSteps[i].approvalOpinion != null && approvalSteps[i].approvalOpinion !== "") { if (approvalSteps[i].approvalOpinion != null && approvalSteps[i].approvalOpinion !== "") {
description = (<>{approvalSteps[i].approvalStaff.staffName + "】" + "审批通过"}<Popover description = (<>{"【" + approvalSteps[i].approvalStaff.staffName + "】" + "审批通过"}<Popover
content={approvalSteps[i].approvalOpinion}><ExclamationCircleOutlined content={approvalSteps[i].approvalOpinion}><ExclamationCircleOutlined
style={{marginLeft: 5}}/></Popover></>) style={{marginLeft: 5}}/></Popover></>)
} }
items.push({ items.push({
// @ts-ignore // @ts-ignore
title: statusEnum2[i - 1] + "审批", title: statusEnum2[i] + "审批",
status: 'finish', status: 'finish',
subTitle: approvalSteps[i].approvalTime.replace("T", " "), subTitle: approvalSteps[i].approvalTime.replace("T", " "),
description: description description: description
@ -112,7 +133,7 @@ function displaySteps(reimbursement: ReimbursementDetailModal | undefined | null
// @ts-ignore // @ts-ignore
title: statusEnum2[approvalSteps.length] + "审批", title: statusEnum2[approvalSteps.length] + "审批",
status: 'process', status: 'process',
subTitle: onApprove?"请您审批":"审批中", subTitle: onApprove ? "请您审核" : "审核中",
description: "", description: "",
}) })
currentStep = items.length - 2; currentStep = items.length - 2;
@ -211,14 +232,24 @@ class ReimbursementDetail extends React.Component<any, any> {
} }
approve = () => { approve = () => {
//TODO: approve let params = {approvalOpinion: this.state.approvalOpinion}
console.log("approve"); axiosInstance.put("approval/" + this.state.reimbursement.reimbursementId.toString() + "/"+(this.state.approvalChecked?"1":"0"), params).then((res) => {
this.props.closeDetail(); openNotification("审核成功");
this.props.closeDetail();
}).catch((err) => {
openNotification(err.response.data.msg==null?"操作失败,请稍后重试":err.response.data.msg);
console.log(err);
})
} }
terminate = () => { terminate = () => {
//TODO: terminate let params = {approvalOpinion: ""}
console.log("terminate"); axiosInstance.put("approval/" + this.state.reimbursement.reimbursementId.toString() + "/-1", params).then((res) => {
this.props.closeDetail(); openNotification("已终止申请");
this.props.closeDetail();
}).catch((err) => {
openNotification(err.response.data.msg==null?"操作失败,请稍后重试":err.response.data.msg);
console.log(err);
})
} }
getSubmitButton = () => { getSubmitButton = () => {
if (this.state.reimbursement === undefined || this.state.reimbursement.reimbursementStatus === 0 if (this.state.reimbursement === undefined || this.state.reimbursement.reimbursementStatus === 0
@ -245,7 +276,7 @@ class ReimbursementDetail extends React.Component<any, any> {
okText="确定" okText="确定"
cancelText="取消" cancelText="取消"
> >
<Button type="primary" danger></Button> <Button type="primary" danger></Button>
</Popconfirm>) </Popconfirm>)
} else if (this.props.accessLevel === 0) { } else if (this.props.accessLevel === 0) {
return ( return (
@ -264,22 +295,24 @@ class ReimbursementDetail extends React.Component<any, any> {
} }
} }
checkerMenu = () => { checkerMenu = () => {
if (this.props.accessLevel === 1) { if (this.props.accessLevel === 1 && this.state.reimbursement != undefined &&
this.state.reimbursement.reimbursementStatus >= 1 && this.state.reimbursement.reimbursementStatus <= 4) {
return (<> return (<>
<TextArea autoSize={{minRows:2}} placeholder="审批意见" value={this.state.approvalOpinion} onChange={(e) => {
this.setState({
approvalOpinion: e.target.value,
})
}}/>
<Row> <Row>
<Col span={18}/> <TextArea autoSize={{minRows: 2}} placeholder="审批意见" value={this.state.approvalOpinion}
<Col span={6}> onChange={(e) => {
<Checkbox style={{whiteSpace:"nowrap"}} checked={this.state.approvalChecked} onChange={(e) => { this.setState({
this.setState({ approvalOpinion: e.target.value,
approvalChecked: e.target.checked, })
}) }}/>
}}></Checkbox> </Row>
</Col> <Row style={{marginTop:15}}>
<Radio.Group buttonStyle="solid" style={{width:'100%'}} defaultValue={true} onChange={(value) => {
this.setState({approvalChecked: value.target.value})
}}>
<Radio.Button value={true} checked={true} style={{width:'50%',textAlign:"center"}}></Radio.Button>
<Radio.Button value={false} style={{width:'50%',textAlign:"center"}}></Radio.Button>
</Radio.Group>
</Row> </Row>
</> </>
) )
@ -287,14 +320,34 @@ class ReimbursementDetail extends React.Component<any, any> {
return <></> return <></>
} }
} }
getTag = () => {
if (this.state.reimbursement == undefined)
return <></>
if (this.state.reimbursement.reimbursementStatus === 0)
return (<Tag icon={<CheckCircleOutlined/>} color="success" style={{marginLeft: 20, scale: "1.1"}}>
{this.state.reimbursement.reimbursementId}
</Tag>)
else if (this.state.reimbursement.reimbursementStatus >= 5) {
return (
<Tag icon={<CloseCircleOutlined/>} color="error" style={{marginLeft: 20, scale: "1.1"}}>
{this.state.reimbursement.reimbursementId}
</Tag>
)
} else {
return (
<Tag icon={<ClockCircleOutlined/>} color="processing" style={{marginLeft: 20, scale: "1.1"}}>
{this.state.reimbursement.reimbursementId}
</Tag>
)
}
}
render() { render() {
return ( return (
<Modal <Modal
title={<><Tag title={<>{this.getTag()}</>}
style={{marginLeft: 20}}>{"单号:"}{this.state.reimbursement?.reimbursementId}</Tag></>}
onCancel={this.cancel} open={this.state.open} onCancel={this.cancel} open={this.state.open}
width={900} width={1000}
destroyOnClose={true} destroyOnClose={true}
footer={[ footer={[
this.getSubmitButton(), this.getSubmitButton(),
@ -306,7 +359,7 @@ class ReimbursementDetail extends React.Component<any, any> {
{displayRawInfo(this.state.reimbursement)} {displayRawInfo(this.state.reimbursement)}
</Col> </Col>
<Col span={9}> <Col span={9}>
{displaySteps(this.state.reimbursement,this.props.accessLevel===1)} {displaySteps(this.state.reimbursement, this.props.accessLevel === 1)}
<Row style={{marginTop: 50}}> <Row style={{marginTop: 50}}>
<Col span={20}> <Col span={20}>
{this.checkerMenu()} {this.checkerMenu()}