沧海之约

src/pages/reimbursement/mine/MyReimbursement.tsx

@@ -197,10 +197,12 @@ class Subpage extends React.Component<any, any> {
 
     closeDetail = () => {
         this.setState({detailedReimbursement: undefined})
+        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("拉取报销单详情失败")
@@ -224,7 +226,7 @@ class Subpage extends React.Component<any, any> {
                 amount: value.reimbursementInvoiceAmount + value.reimbursementAdditionalAmount,
                 invoiceAmount: value.reimbursementInvoiceAmount,
                 additionalAmount: value.reimbursementAdditionalAmount,
-                status: value.reimbursementStatus % 6,
+                status: value.reimbursementStatus % 7,
                 departmentId: value.reimbursementSubmitDepartment.departmentId,
                 submitDateTime: Date.parse(value.reimbursementSubmitTime),
                 detail: "查看详情",
@@ -243,7 +245,7 @@ class Subpage extends React.Component<any, any> {
                 amount: value[i].reimbursementInvoiceAmount + value[i].reimbursementAdditionalAmount,
                 invoiceAmount: value[i].reimbursementInvoiceAmount,
                 additionalAmount: value[i].reimbursementAdditionalAmount,
-                status: value[i].reimbursementStatus % 6,
+                status: value[i].reimbursementStatus % 7,
                 departmentId: value[i].reimbursementSubmitDepartment.departmentId,
                 submitDateTime: Date.parse(value[i].reimbursementSubmitTime),
                 detail: "查看详情",
@@ -339,7 +341,7 @@ class Subpage extends React.Component<any, any> {
             <>
                 <ReimbursementDetail reimbursement={this.state.detailedReimbursement}
                                      closeDetail={this.closeDetail}
-                                     accessLevel={1}
+                                     accessLevel={0}
                 />
                 <ProTable<TableListItem>
                     actionRef={this.tableAction}

src/pages/reimbursement/mine/ReimbursementDetail.tsx

@@ -1,10 +1,31 @@
 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 {ApprovalProcess, Invoice, ReimbursementDetailModal} from "../../../models/ReimbursementDetailModal";
 import dayjs, {Dayjs} from "dayjs";
 import {ExclamationCircleOutlined} from "@ant-design/icons";
 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 = {
     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)
         return null;
     let currentStep = 0;
@@ -91,16 +112,16 @@ function displaySteps(reimbursement: ReimbursementDetailModal | undefined | null
     if (approvalSteps == null)
         approvalSteps = []
     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 !== "") {
-                description = (<>{approvalSteps[i].approvalStaff.staffName + "】" + "审批通过"}<Popover
+                description = (<>{"【" + approvalSteps[i].approvalStaff.staffName + "】" + "审批通过"}<Popover
                     content={approvalSteps[i].approvalOpinion}><ExclamationCircleOutlined
                     style={{marginLeft: 5}}/></Popover></>)
             }
             items.push({
                 // @ts-ignore
-                title: statusEnum2[i - 1] + "审批",
+                title: statusEnum2[i] + "审批",
                 status: 'finish',
                 subTitle: approvalSteps[i].approvalTime.replace("T", " "),
                 description: description
@@ -112,7 +133,7 @@ function displaySteps(reimbursement: ReimbursementDetailModal | undefined | null
             // @ts-ignore
             title: statusEnum2[approvalSteps.length] + "审批",
             status: 'process',
-            subTitle: onApprove?"请您审批":"审批中",
+            subTitle: onApprove ? "请您审核" : "审核中",
             description: "",
         })
         currentStep = items.length - 2;
@@ -211,14 +232,24 @@ class ReimbursementDetail extends React.Component<any, any> {
     }
 
     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 = () => {
-        //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 = () => {
         if (this.state.reimbursement === undefined || this.state.reimbursement.reimbursementStatus === 0
@@ -245,7 +276,7 @@ class ReimbursementDetail extends React.Component<any, any> {
                         okText="确定"
                         cancelText="取消"
                     >
-                        <Button type="primary" danger>驳回报销</Button>
+                        <Button type="primary" danger>驳回申请</Button>
                     </Popconfirm>)
         } else if (this.props.accessLevel === 0) {
             return (
@@ -264,22 +295,24 @@ class ReimbursementDetail extends React.Component<any, any> {
         }
     }
     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 (<>
-                    <TextArea autoSize={{minRows:2}} placeholder="审批意见" value={this.state.approvalOpinion} onChange={(e) => {
-                        this.setState({
-                            approvalOpinion: e.target.value,
-                        })
-                    }}/>
                     <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>
                 </>
             )
@@ -287,14 +320,34 @@ class ReimbursementDetail extends React.Component<any, any> {
             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() {
         return (
             <Modal
-                title={<>报销单详情<Tag
+                title={<>报销单详情{this.getTag()}</>}
-                    style={{marginLeft: 20}}>{"单号:"}{this.state.reimbursement?.reimbursementId}</Tag></>}
                 onCancel={this.cancel} open={this.state.open}
-                width={900}
+                width={1000}
                 destroyOnClose={true}
                 footer={[
                     this.getSubmitButton(),
@@ -306,7 +359,7 @@ class ReimbursementDetail extends React.Component<any, any> {
                         {displayRawInfo(this.state.reimbursement)}
                     </Col>
                     <Col span={9}>
-                        {displaySteps(this.state.reimbursement,this.props.accessLevel===1)}
+                        {displaySteps(this.state.reimbursement, this.props.accessLevel === 1)}
                         <Row style={{marginTop: 50}}>
                             <Col span={20}>
                                 {this.checkerMenu()}