再等等

src/pages/reimbursement/mine/MyReimbursement.tsx

@@ -339,7 +339,7 @@ class Subpage extends React.Component<any, any> {
             <>
                 <ReimbursementDetail reimbursement={this.state.detailedReimbursement}
                                      closeDetail={this.closeDetail}
-                                     accessLevel={0}
+                                     accessLevel={1}
                 />
                 <ProTable<TableListItem>
                     actionRef={this.tableAction}

src/pages/reimbursement/mine/ReimbursementDetail.tsx

@@ -1,5 +1,5 @@
 import React, {ReactNode} from "react";
-import {Button, Col, Descriptions, Modal, Popconfirm, Popover, Row, StepProps, Steps, Tag} from "antd";
+import {Button, Checkbox, Col, Descriptions, Modal, Popconfirm, Popover, Row, StepProps, Steps, Tag} from "antd";
 import TextArea from "antd/es/input/TextArea";
 import {ApprovalProcess, Invoice, ReimbursementDetailModal} from "../../../models/ReimbursementDetailModal";
 import dayjs, {Dayjs} from "dayjs";
@@ -76,7 +76,7 @@ function displayRawInfo(reimbursement: ReimbursementDetailModal | undefined | nu
         </>)
 }
 
-function displaySteps(reimbursement: ReimbursementDetailModal | undefined | null) {
+function displaySteps(reimbursement: ReimbursementDetailModal | undefined | null, onApprove:boolean) {
     if (reimbursement == undefined)
         return null;
     let currentStep = 0;
@@ -84,16 +84,18 @@ function displaySteps(reimbursement: ReimbursementDetailModal | undefined | null
         title: '提交申请',
         status: 'finish',
         subTitle: reimbursement.reimbursementSubmitTime.replace("T", " "),
-        description: reimbursement.reimbursementSubmitStaff.staffName + "提交申请",
+        description: "【" + reimbursement.reimbursementSubmitStaff.staffName + "】" + "提交申请",
     }];
     let approvalSteps = reimbursement.approvalProcesses;
     if (approvalSteps == null)
         approvalSteps = []
     for (let i = 0; i < approvalSteps.length; i++) {
         if (approvalSteps[i].approvalResult === i) {
-            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 content={approvalSteps[i].approvalOpinion}><ExclamationCircleOutlined style={{marginLeft: 5}}/></Popover></>)
+                description = (<>{approvalSteps[i].approvalStaff.staffName + "】" + "审批通过"}<Popover
+                    content={approvalSteps[i].approvalOpinion}><ExclamationCircleOutlined
+                    style={{marginLeft: 5}}/></Popover></>)
             }
             items.push({
                 // @ts-ignore
@@ -107,25 +109,26 @@ function displaySteps(reimbursement: ReimbursementDetailModal | undefined | null
     if (reimbursement.reimbursementStatus >= 1 && reimbursement.reimbursementStatus <= 4) {
         items.push({
             // @ts-ignore
-            title: statusEnum[reimbursement.reimbursementStatus].text,
+            title: statusEnum2[approvalSteps.length] + "审批",
             status: 'process',
-            subTitle: "审批中",
+            subTitle: onApprove?"请您审批":"审批中",
             description: "",
         })
-        currentStep = items.length - 1;
+        currentStep = items.length - 2;
     } else if (reimbursement.reimbursementStatus === 0) {
         items.push({
             title: '通知出纳',
             status: 'finish',
-            description: "出纳已收到申请",
+            description: "报销申请成功",
         })
         currentStep = items.length - 1;
     } else if (reimbursement.reimbursementStatus === 5) {
         for (let i = 0; i < approvalSteps.length; i++) {
             if (approvalSteps[i].approvalResult === 5) {
-                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 content={approvalSteps[i].approvalOpinion}><ExclamationCircleOutlined style={{marginLeft: 5}}/></Popover></>)
+                    description = (<>{"【" + approvalSteps[i].approvalStaff.staffName + "】" + "驳回申请"}<Popover
+                        content={approvalSteps[i].approvalOpinion}><ExclamationCircleOutlined style={{marginLeft: 5}}/></Popover></>)
                 }
                 items.push({
                     // @ts-ignore
@@ -138,32 +141,33 @@ function displaySteps(reimbursement: ReimbursementDetailModal | undefined | null
         }
         currentStep = items.length - 1;
     } else if (reimbursement.reimbursementStatus === 6) {
+        for (let i = 0; i < approvalSteps.length; i++) {
+            if (approvalSteps[i].approvalResult === 6) {
                 items.push({
-            title: '申请人终止',
+                    title: '申请终止',
                     status: 'error',
-            subTitle: reimbursement.reimbursementSubmitStaff.staffName + "终止申请",
+                    subTitle: approvalSteps[i].approvalTime.replace("T", " "),
+                    description: "【" + reimbursement.reimbursementSubmitStaff.staffName + "】" + "终止申请",
                 })
                 currentStep = items.length - 1;
-        let nextLevel: string = "主管"
+            }
-        if (reimbursement.approvalProcesses !== null && reimbursement.approvalProcesses !== undefined) {
-            // @ts-ignore
-            nextLevel = statusEnum2[reimbursement.approvalProcesses.length]
         }
         items.push({
-            title: nextLevel + '审批',
+            // @ts-ignore
+            title: statusEnum2[approvalSteps.length - 1] + '审批',
             status: 'wait',
             subTitle: "",
         })
     }
+    console.log(items, currentStep)
     return (
         <>
             <Descriptions
                 title="流程进度"
-                column={{xxl: 1, xl: 1, lg: 1, md: 1, sm: 1, xs: 1}}
             >
             </Descriptions>
             <Steps
-                percent={50}
+                percent={99}
                 current={currentStep}
                 direction={"vertical"}
                 items={items}
@@ -258,6 +262,30 @@ class ReimbursementDetail extends React.Component<any, any> {
             return <></>
         }
     }
+    checkerMenu = () => {
+        if (this.props.accessLevel === 1) {
+            return (<>
+                    <TextArea autoSize={{minRows:2}} placeholder="审批意见" value={this.state.approvalOpinion} onChange={(e) => {
+                        this.setState({
+                            approvalOpinion: e.target.value,
+                        })
+                    }}/>
+                    <Row>
+                        <Col span={18}/>
+                        <Col span={6}>
+                            <Checkbox style={{whiteSpace:"nowrap"}} checked={this.state.approvalChecked} onChange={(e) => {
+                                this.setState({
+                                    approvalChecked: e.target.checked,
+                                })
+                            }}>批准</Checkbox>
+                        </Col>
+                    </Row>
+                </>
+            )
+        } else {
+            return <></>
+        }
+    }
 
     render() {
         return (
@@ -265,19 +293,25 @@ class ReimbursementDetail extends React.Component<any, any> {
                 title={<>报销单详情<Tag
                     style={{marginLeft: 20}}>{"单号:"}{this.state.reimbursement?.reimbursementId}</Tag></>}
                 onCancel={this.cancel} open={this.state.open}
-                width={1000}
+                width={900}
                 destroyOnClose={true}
                 footer={[
                     this.getSubmitButton(),
                     <Button key="next" type="default" onClick={this.cancel}>
                         关闭
                     </Button>]}>
-                <Row gutter={18}>
+                <Row gutter={40}>
-                    <Col span={14}>
+                    <Col span={15}>
                         {displayRawInfo(this.state.reimbursement)}
                     </Col>
-                    <Col span={10}>
+                    <Col span={9}>
-                        {displaySteps(this.state.reimbursement)}
+                        {displaySteps(this.state.reimbursement,this.props.accessLevel===1)}
+                        <Row style={{marginTop: 50}}>
+                            <Col span={20}>
+                                {this.checkerMenu()}
+                            </Col>
+                            <Col span={4}/>
+                        </Row>
                     </Col>
                 </Row>
             </Modal>

src/pages/reimbursement/mine/component/tempComponent.tsx

@@ -0,0 +1,8 @@
+import {Invoice} from "../../../../models/ReimbursementDetailModal";
+import React from "react";
+
+
+function displayInvoicesList(departureInvoice: Invoice, destinationInvoice: Invoice | null, otherInvoices: Invoice[]) {
+
+    return (<></>)
+}