再等等

2023-01-03 17:02:28 +08:00 · 2023-01-03 17:02:28 +08:00 · 80f28e57a5
parent eb0d64b251
commit 80f28e57a5
3 changed files with 76 additions and 34 deletions
--- a/src/pages/reimbursement/mine/MyReimbursement.tsx
+++ b/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}
--- a/src/pages/reimbursement/mine/ReimbursementDetail.tsx
+++ b/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,86 +84,90 @@ 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 + "审批通过";
-            if (approvalSteps[i].approvalOpinion != null && approvalSteps[i].approvalOpinion !== ""){
-                description=(<>{approvalSteps[i].approvalStaff.staffName + "审批通过"}<Popover content={approvalSteps[i].approvalOpinion}><ExclamationCircleOutlined style={{marginLeft: 5}}/></Popover></>)
+            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></>)
            }
            items.push({
                // @ts-ignore
                title: statusEnum2[i - 1] + "审批",
                status: 'finish',
                subTitle: approvalSteps[i].approvalTime.replace("T", " "),
-                description:description
+                description: description
            })
        }
    }
    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 + "驳回申请";
-                if (approvalSteps[i].approvalOpinion != null && approvalSteps[i].approvalOpinion !== ""){
-                    description=(<>{approvalSteps[i].approvalStaff.staffName + "驳回申请"}<Popover content={approvalSteps[i].approvalOpinion}><ExclamationCircleOutlined style={{marginLeft: 5}}/></Popover></>)
+                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></>)
                }
                items.push({
                    // @ts-ignore
                    title: statusEnum2[i - 1] + "审批",
                    status: 'error',
                    subTitle: approvalSteps[i].approvalTime.replace("T", " "),
-                    description:description
+                    description: description
                })
            }
        }
        currentStep = items.length - 1;
    } else if (reimbursement.reimbursementStatus === 6) {
-        items.push({
-            title: '申请人终止',
-            status: 'error',
-            subTitle: reimbursement.reimbursementSubmitStaff.staffName + "终止申请",
-        })
-        currentStep = items.length - 1;
-        let nextLevel: string = "主管"
-        if (reimbursement.approvalProcesses !== null && reimbursement.approvalProcesses !== undefined) {
-            // @ts-ignore
-            nextLevel = statusEnum2[reimbursement.approvalProcesses.length]
+        for (let i = 0; i < approvalSteps.length; i++) {
+            if (approvalSteps[i].approvalResult === 6) {
+                items.push({
+                    title: '申请终止',
+                    status: 'error',
+                    subTitle: approvalSteps[i].approvalTime.replace("T", " "),
+                    description: "【" + reimbursement.reimbursementSubmitStaff.staffName + "】" + "终止申请",
+                })
+                currentStep = items.length - 1;
+            }
        }
        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}>
-                    <Col span={14}>
+                <Row gutter={40}>
+                    <Col span={15}>
                        {displayRawInfo(this.state.reimbursement)}
                    </Col>
-                    <Col span={10}>
-                        {displaySteps(this.state.reimbursement)}
+                    <Col span={9}>
+                        {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>
--- a/src/pages/reimbursement/mine/component/tempComponent.tsx
+++ b/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 (<></>)
+}