Merge remote-tracking branch 'origin/main' into main

src/models/Invoice.ts

@@ -89,7 +89,7 @@ export interface InvoiceDetail {
     invoiceUploader: Staff;
     invoiceUploadTime: string|Dayjs;
     modified: boolean;
-    reimbursement: Reimbursement;
+    reimbursement?: Reimbursement;
 }
 
 export interface InvoiceIdentifyResponse {

src/models/Reimbursement.ts

@@ -69,12 +69,13 @@ export interface Reimbursement {
     reimbursementInvoiceAmount: number;
     reimbursementNote?:         string;
     /**
-     * 0: success
+     * 0: 已报销
      * 1: 待主管审批
      * 2: 待财务审批
      * 3: 待财务主管审批
      * 4: 待总经理审批
      * 5: 未通过
+     * 6: 已终止
      */
     reimbursementStatus:           number;
     reimbursementSubmitDepartment: Department;

src/models/ReimbursementDetailModal.ts

@@ -0,0 +1,450 @@
+// To parse this data:
+//
+//   import { Convert, ReimbursementDetailModal } from "./file";
+//
+//   const reimbursementDetailModal = Convert.toReimbursementDetailModal(json);
+//
+// These functions will throw an error if the JSON doesn't
+// match the expected interface, even if the JSON is valid.
+
+export interface Invoice {
+    /**
+     * 发票金额
+     */
+    invoiceAmount?: number;
+    /**
+     * 发票代码
+     */
+    invoiceCode?: string;
+    /**
+     * 开票日期
+     */
+    invoiceDate: string;
+    /**
+     * 出发地名称
+     */
+    invoiceDeparture?: null | string;
+    /**
+     * 目的地名称
+     */
+    invoiceDestination?: null | string;
+    /**
+     * 发票原图URI
+     */
+    invoiceFileUri?: string;
+    /**
+     * 发票ID
+     */
+    invoiceId: number;
+    /**
+     * 发票种类
+     */
+    invoiceKind?: number;
+    /**
+     * 发票名称
+     */
+    invoiceName?: null | string;
+    /**
+     * 发票编号
+     */
+    invoiceNo?: string;
+    /**
+     * 备注
+     */
+    invoiceNote?: null | string;
+    /**
+     * 发票状态，-1: 不合格 0: 已上传 1: 报销中 2: 已报销
+     */
+    invoiceState?: number;
+    /**
+     * 发票缩略图URI
+     */
+    invoiceThumbnailUri?: string;
+    /**
+     * 上传员工
+     */
+    invoiceUploader?: Staff;
+    /**
+     * 上传时间
+     */
+    invoiceUploadTime?: string;
+    /**
+     * 是否被修改
+     */
+    modified?: boolean;
+    /**
+     * 所属报销单
+     */
+    reimbursement?: ReimbursementDetailModal;
+}
+
+/**
+ * ApprovalProcess
+ */
+export interface ApprovalProcess {
+    /**
+     * 审批意见
+     */
+    approvalOpinion: string;
+    /**
+     * 审批结果
+     */
+    approvalResult: number;
+    /**
+     * 审批员工
+     */
+    approvalStaff: Staff;
+    approvalTime: string;
+    /**
+     * 进程顺序
+     */
+    processOrder: number;
+    /**
+     * 报销单
+     */
+    reimbursement?: ReimbursementDetailModal;
+}
+
+/**
+ * Reimbursement
+ *
+ * 报销单
+ *
+ * 所属报销单
+ */
+export interface ReimbursementDetailModal {
+    /**
+     * 审批进程
+     */
+    approvalProcesses?: ApprovalProcess[];
+    /**
+     * 其他发票
+     */
+    invoices: Array<Invoice>;
+    /**
+     * 补助总金额
+     */
+    reimbursementAdditionalAmount: number;
+    /**
+     * 往程交通发票
+     */
+    reimbursementDepartureInvoice:Invoice;
+    /**
+     * 出发地名
+     */
+    reimbursementDepartureName: string;
+    /**
+     * 返程交通发票
+     */
+    reimbursementDestinationInvoice: null | Invoice;
+    /**
+     * 目的地名
+     */
+    reimbursementDestinationName: string;
+    /**
+     * 报销单ID
+     */
+    reimbursementId: number;
+    /**
+     * 发票总金额
+     */
+    reimbursementInvoiceAmount: number;
+    /**
+     * 备注
+     */
+    reimbursementNote?: null | string;
+    /**
+     * 报销单状态，0: success
+     * 1: 待主管审批
+     * 2: 待财务审批
+     * 3: 待财务主管审批
+     * 4: 待总经理审批
+     * 5: 未通过
+     * 6: 被终止
+     */
+    reimbursementStatus: number;
+    /**
+     * 提交部门
+     */
+    reimbursementSubmitDepartment: Department;
+    /**
+     * 提交员工
+     */
+    reimbursementSubmitStaff: Staff;
+    /**
+     * 提交时间
+     */
+    reimbursementSubmitTime: string;
+    /**
+     * 出差天数，单位为天
+     */
+    reimbursementTripDuration: number;
+}
+
+/**
+ * 主管部门
+ *
+ * Department
+ *
+ * 提交部门
+ */
+export interface Department {
+    /**
+     * 部门ID
+     */
+    departmentId: number;
+    /**
+     * 部门主管
+     */
+    departmentManager?: Staff;
+    /**
+     * 部门名
+     */
+    departmentName?: string;
+    /**
+     * 部门员工
+     */
+    staff?: Staff[];
+}
+
+/**
+ * 审批员工
+ *
+ * Staff
+ *
+ * 部门主管
+ *
+ * 上传员工
+ *
+ * 提交员工
+ */
+export interface Staff {
+    /**
+     * 主管部门
+     */
+    managingDepartment?: Department;
+    /**
+     * 员工工作地点
+     */
+    staffBase?: string;
+    /**
+     * 工作部门
+     */
+    staffDepartments?: Department[];
+    /**
+     * 员工工号
+     */
+    staffId: string;
+    /**
+     * 员工姓名
+     */
+    staffName: string;
+    /**
+     * 密码
+     */
+    staffPassword?: string;
+}
+
+// Converts JSON strings to/from your types
+// and asserts the results of JSON.parse at runtime
+export class Convert {
+    public static toReimbursementDetailModal(json: string): ReimbursementDetailModal {
+        return cast(JSON.parse(json), r("ReimbursementDetailModal"));
+    }
+
+    public static reimbursementDetailModalToJson(value: ReimbursementDetailModal): string {
+        return JSON.stringify(uncast(value, r("ReimbursementDetailModal")), null, 2);
+    }
+}
+
+function invalidValue(typ: any, val: any, key: any = ''): never {
+    if (key) {
+        throw Error(`Invalid value for key "${key}". Expected type ${JSON.stringify(typ)} but got ${JSON.stringify(val)}`);
+    }
+    throw Error(`Invalid value ${JSON.stringify(val)} for type ${JSON.stringify(typ)}`, );
+}
+
+function jsonToJSProps(typ: any): any {
+    if (typ.jsonToJS === undefined) {
+        const map: any = {};
+        typ.props.forEach((p: any) => map[p.json] = { key: p.js, typ: p.typ });
+        typ.jsonToJS = map;
+    }
+    return typ.jsonToJS;
+}
+
+function jsToJSONProps(typ: any): any {
+    if (typ.jsToJSON === undefined) {
+        const map: any = {};
+        typ.props.forEach((p: any) => map[p.js] = { key: p.json, typ: p.typ });
+        typ.jsToJSON = map;
+    }
+    return typ.jsToJSON;
+}
+
+function transform(val: any, typ: any, getProps: any, key: any = ''): any {
+    function transformPrimitive(typ: string, val: any): any {
+        if (typeof typ === typeof val) return val;
+        return invalidValue(typ, val, key);
+    }
+
+    function transformUnion(typs: any[], val: any): any {
+        // val must validate against one typ in typs
+        const l = typs.length;
+        for (let i = 0; i < l; i++) {
+            const typ = typs[i];
+            try {
+                return transform(val, typ, getProps);
+            } catch (_) {}
+        }
+        return invalidValue(typs, val);
+    }
+
+    function transformEnum(cases: string[], val: any): any {
+        if (cases.indexOf(val) !== -1) return val;
+        return invalidValue(cases, val);
+    }
+
+    function transformArray(typ: any, val: any): any {
+        // val must be an array with no invalid elements
+        if (!Array.isArray(val)) return invalidValue("array", val);
+        return val.map(el => transform(el, typ, getProps));
+    }
+
+    function transformDate(val: any): any {
+        if (val === null) {
+            return null;
+        }
+        const d = new Date(val);
+        if (isNaN(d.valueOf())) {
+            return invalidValue("Date", val);
+        }
+        return d;
+    }
+
+    function transformObject(props: { [k: string]: any }, additional: any, val: any): any {
+        if (val === null || typeof val !== "object" || Array.isArray(val)) {
+            return invalidValue("object", val);
+        }
+        const result: any = {};
+        Object.getOwnPropertyNames(props).forEach(key => {
+            const prop = props[key];
+            const v = Object.prototype.hasOwnProperty.call(val, key) ? val[key] : undefined;
+            result[prop.key] = transform(v, prop.typ, getProps, prop.key);
+        });
+        Object.getOwnPropertyNames(val).forEach(key => {
+            if (!Object.prototype.hasOwnProperty.call(props, key)) {
+                result[key] = transform(val[key], additional, getProps, key);
+            }
+        });
+        return result;
+    }
+
+    if (typ === "any") return val;
+    if (typ === null) {
+        if (val === null) return val;
+        return invalidValue(typ, val);
+    }
+    if (typ === false) return invalidValue(typ, val);
+    while (typeof typ === "object" && typ.ref !== undefined) {
+        typ = typeMap[typ.ref];
+    }
+    if (Array.isArray(typ)) return transformEnum(typ, val);
+    if (typeof typ === "object") {
+        return typ.hasOwnProperty("unionMembers") ? transformUnion(typ.unionMembers, val)
+            : typ.hasOwnProperty("arrayItems")    ? transformArray(typ.arrayItems, val)
+                : typ.hasOwnProperty("props")         ? transformObject(getProps(typ), typ.additional, val)
+                    : invalidValue(typ, val);
+    }
+    // Numbers can be parsed by Date but shouldn't be.
+    if (typ === Date && typeof val !== "number") return transformDate(val);
+    return transformPrimitive(typ, val);
+}
+
+function cast<T>(val: any, typ: any): T {
+    return transform(val, typ, jsonToJSProps);
+}
+
+function uncast<T>(val: T, typ: any): any {
+    return transform(val, typ, jsToJSONProps);
+}
+
+function a(typ: any) {
+    return { arrayItems: typ };
+}
+
+function u(...typs: any[]) {
+    return { unionMembers: typs };
+}
+
+function o(props: any[], additional: any) {
+    return { props, additional };
+}
+
+function m(additional: any) {
+    return { props: [], additional };
+}
+
+function r(name: string) {
+    return { ref: name };
+}
+
+const typeMap: any = {
+    "Invoice": o([
+        { json: "invoiceAmount", js: "invoiceAmount", typ: u(undefined, 0) },
+        { json: "invoiceCode", js: "invoiceCode", typ: u(undefined, "") },
+        { json: "invoiceDate", js: "invoiceDate", typ: u(undefined, "") },
+        { json: "invoiceDeparture", js: "invoiceDeparture", typ: u(undefined, u(null, "")) },
+        { json: "invoiceDestination", js: "invoiceDestination", typ: u(undefined, u(null, "")) },
+        { json: "invoiceFileUri", js: "invoiceFileUri", typ: u(undefined, "") },
+        { json: "invoiceId", js: "invoiceId", typ: 0 },
+        { json: "invoiceKind", js: "invoiceKind", typ: u(undefined, 0) },
+        { json: "invoiceName", js: "invoiceName", typ: u(undefined, u(null, "")) },
+        { json: "invoiceNo", js: "invoiceNo", typ: u(undefined, "") },
+        { json: "invoiceNote", js: "invoiceNote", typ: u(undefined, u(null, "")) },
+        { json: "invoiceState", js: "invoiceState", typ: u(undefined, 0) },
+        { json: "invoiceThumbnailUri", js: "invoiceThumbnailUri", typ: u(undefined, "") },
+        { json: "invoiceUploader", js: "invoiceUploader", typ: u(undefined, r("Staff")) },
+        { json: "invoiceUploadTime", js: "invoiceUploadTime", typ: u(undefined, "") },
+        { json: "modified", js: "modified", typ: u(undefined, true) },
+        { json: "reimbursement", js: "reimbursement", typ: u(undefined, r("ReimbursementDetailModal")) },
+    ], "any"),
+    "ApprovalProcess": o([
+        { json: "approvalOpinion", js: "approvalOpinion", typ: "" },
+        { json: "approvalResult", js: "approvalResult", typ: 0 },
+        { json: "approvalStaff", js: "approvalStaff", typ: r("Staff") },
+        { json: "processOrder", js: "processOrder", typ: 0 },
+        { json: "reimbursement", js: "reimbursement", typ: u(undefined, r("ReimbursementDetailModal")) },
+    ], "any"),
+    "ReimbursementDetailModal": o([
+        { json: "approvalProcesses", js: "approvalProcesses", typ: u(undefined, a(r("ApprovalProcess"))) },
+        { json: "invoices", js: "invoices", typ: u(undefined, a(u(null, r("Invoice")))) },
+        { json: "reimbursementAdditionalAmount", js: "reimbursementAdditionalAmount", typ: 0 },
+        { json: "reimbursementDepartureInvoice", js: "reimbursementDepartureInvoice", typ: u(null, r("Invoice")) },
+        { json: "reimbursementDepartureName", js: "reimbursementDepartureName", typ: "" },
+        { json: "reimbursementDestinationInvoice", js: "reimbursementDestinationInvoice", typ: u(null, r("Invoice")) },
+        { json: "reimbursementDestinationName", js: "reimbursementDestinationName", typ: "" },
+        { json: "reimbursementId", js: "reimbursementId", typ: 0 },
+        { json: "reimbursementInvoiceAmount", js: "reimbursementInvoiceAmount", typ: 0 },
+        { json: "reimbursementNote", js: "reimbursementNote", typ: u(undefined, u(null, "")) },
+        { json: "reimbursementStatus", js: "reimbursementStatus", typ: 0 },
+        { json: "reimbursementSubmitDepartment", js: "reimbursementSubmitDepartment", typ: r("Department") },
+        { json: "reimbursementSubmitStaff", js: "reimbursementSubmitStaff", typ: r("Staff") },
+        { json: "reimbursementSubmitTime", js: "reimbursementSubmitTime", typ: "" },
+        { json: "reimbursementTripDuration", js: "reimbursementTripDuration", typ: 0 },
+    ], "any"),
+    "Department": o([
+        { json: "departmentId", js: "departmentId", typ: 0 },
+        { json: "departmentManager", js: "departmentManager", typ: u(undefined, r("Staff")) },
+        { json: "departmentName", js: "departmentName", typ: u(undefined, "") },
+        { json: "staff", js: "staff", typ: u(undefined, a(r("Staff"))) },
+    ], "any"),
+    "Staff": o([
+        { json: "managingDepartment", js: "managingDepartment", typ: u(undefined, r("Department")) },
+        { json: "staffBase", js: "staffBase", typ: u(undefined, "") },
+        { json: "staffDepartments", js: "staffDepartments", typ: u(undefined, a(r("Department"))) },
+        { json: "staffId", js: "staffId", typ: "" },
+        { json: "staffName", js: "staffName", typ: "" },
+        { json: "staffPassword", js: "staffPassword", typ: u(undefined, "") },
+    ], "any"),
+};

src/pages/reimbursement/mine/MyReimbursement.tsx

@@ -70,6 +70,7 @@ const statusEnum = {
     3: {text: '待财务主管审批', status: 'Processing'},
     4: {text: '待总经理审批', status: 'Warning'},
     5: {text: '审批未通过', status: 'Error'},
+    6: {text: '已终止', status: 'Error'},
 }
 
 class Subpage extends React.Component<any, any> {
@@ -196,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("拉取报销单详情失败")
@@ -207,12 +210,12 @@ class Subpage extends React.Component<any, any> {
     }
 
 
-    async converter(value: Reimbursement[] | undefined | Reimbursement, pageSize: number | undefined) {
-        if (value === undefined) {
+    async converter(value: Reimbursement[] | undefined | Reimbursement | null, pageSize: number | undefined) {
+        if (value == undefined) {
             return []
         }
         let result: TableListItem[] = []
-        if ("reimbursementAdditionalAmount" in value) {
+        if ("reimbursementId" in value) {
             result.push({
                 key: 1,
                 id: value.reimbursementId,
@@ -223,11 +226,11 @@ 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: "查看详情",
-                back: value.reimbursementDestinationInvoice !== undefined,
+                back: value.reimbursementDestinationInvoice != undefined,
             })
             return result
         }
@@ -242,11 +245,11 @@ 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: "查看详情",
-                back: value[i].reimbursementDestinationInvoice !== undefined,
+                back: value[i].reimbursementDestinationInvoice != undefined,
             })
         }
         return result
@@ -344,7 +347,6 @@ class Subpage extends React.Component<any, any> {
                     actionRef={this.tableAction}
                     columns={this.columns}
                     request={async (params, sorter, filter) => {
-                        // 表单搜索项会从 params 传入，传递给后端接口。
                         console.log(params, sorter, filter);
                         return this.updateRequest(params.current, params.pageSize, sorter, filter)
 
@@ -352,7 +354,7 @@ class Subpage extends React.Component<any, any> {
                     rowKey="key"
                     pagination={{
                         defaultPageSize: 5,
-                        pageSizeOptions: [5, 10, 20, 50, 100],
+                        pageSizeOptions: ['5', '20', '50', '100'],
                         showQuickJumper: true,
                     }}
                     // toolbar={{

src/pages/reimbursement/mine/ReimbursementCreate.tsx

@@ -22,7 +22,8 @@ import {invoiceTypeNameMap} from "../../../models/Invoice";
 import SingleInvoiceSelector from "./component/SingleInvoiceSelector";
 import MultiInvoiceSelector from "./component/MultiInvoiceSelector";
 import {ActionType, StatisticCard} from "@ant-design/pro-components";
-import {openNotification} from "./utils";
+import {openNotification, openErrorNotification} from "./utils";
+import {NotificationPlacement} from "antd/es/notification/interface";
 
 const {Operation} = StatisticCard;
 
@@ -132,12 +133,24 @@ class ReimbursementCreate extends React.Component<any, any> {
 
     submitCheck = () => {
         //TODO: check
-        return {ok: true, msg: ""}
+        let msgContent:string = ""
+        if(this.state.departureName == "" ) {
+            msgContent = "未填写出发地"
+        } else if(this.state.destinationName == "") {
+            msgContent = "未填写目的地"
+        } else if(this.state.departureInvoice == null) {
+            msgContent = "未上传出发票据"
+        } else if(this.state.selectedDepartment == null || this.state.selectedDepartment.isEmpty()) {
+            msgContent = "未选择报销部门"
+        } else {
+            return {ok: true, msg: ""}
+        }
+        return {ok: false, msg: msgContent}
     }
     submit = () => {
         let checkResult = this.submitCheck()
         if (!checkResult.ok) {
-            openNotification(checkResult.msg)
+            openErrorNotification(checkResult.msg)
             return
         }
         let params = {

src/pages/reimbursement/mine/ReimbursementDetail.tsx

@@ -1,11 +1,207 @@
-import React from "react";
-import {Reimbursement} from "../../../models/Reimbursement";
-import {Button, Modal} from "antd";
+import React, {ReactNode} from "react";
+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/ReimbursementDetailFiles";
+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'},
+    1: {text: '待主管审批', status: 'Processing'},
+    2: {text: '待财务审批', status: 'Processing'},
+    3: {text: '待财务主管审批', status: 'Processing'},
+    4: {text: '待总经理审批', status: 'Warning'},
+    5: {text: '审批未通过', status: 'Error'},
+    6: {text: '已终止', status: 'Error'},
+}
+const statusEnum2 = {
+    0: "主管",
+    1: "财务",
+    2: "财务主管",
+    3: "总经理",
+}
+
+// function displayInvoicesList(departureInvoice: Invoice, destinationInvoice: Invoice | null, otherInvoices: Invoice[]) {
+//
+//     return (<></>)
+// }
+
+function displayRawInfo(reimbursement: ReimbursementDetailModal | undefined | null) {
+    if (reimbursement == undefined)
+        return null;
+    return (
+        <>
+            <Descriptions
+                title="基本信息"
+                bordered
+                column={{xxl: 2, xl: 2, lg: 2, md: 2, sm: 1, xs: 1}}
+            >
+                <Descriptions.Item span={1} style={{whiteSpace: "nowrap"}}
+                                   label="行程">{reimbursement.reimbursementDepartureName}
+                    {reimbursement.reimbursementDestinationInvoice != undefined ? " ⇌ " : " → "}
+                    {reimbursement.reimbursementDestinationName}
+                </Descriptions.Item>
+                <Descriptions.Item span={1} style={{whiteSpace: "pre-wrap", textAlign: "center"}}
+                                   label="日期">
+                    {reimbursement.reimbursementDepartureInvoice.invoiceDate}<br/>
+                    至<br/>
+                    {reimbursement.reimbursementDestinationInvoice !== null ? reimbursement.reimbursementDestinationInvoice.invoiceDate :
+                        dayjs(Date.parse(reimbursement.reimbursementDepartureInvoice.invoiceDate) + 24 * 60 * 60 * 1000 * reimbursement.reimbursementTripDuration).format("YYYY-MM-DD")}
+                </Descriptions.Item>
+                <Descriptions.Item span={1} style={{whiteSpace: "nowrap"}}
+                                   label="申请人">{reimbursement.reimbursementSubmitStaff.staffName}</Descriptions.Item>
+                <Descriptions.Item span={1} style={{whiteSpace: "normal"}}
+                                   label="申请部门">{reimbursement.reimbursementSubmitDepartment.departmentName}</Descriptions.Item>
+                <Descriptions.Item span={1} label="总金额">¥{((reimbursement.reimbursementAdditionalAmount +
+                    reimbursement.reimbursementInvoiceAmount) / 100.0).toFixed(2)}
+                </Descriptions.Item>
+                <Descriptions.Item span={1} style={{whiteSpace: "nowrap"}}
+                                   label="出差时长">{reimbursement.reimbursementTripDuration}天
+                </Descriptions.Item>
+                <Descriptions.Item span={1} label="差旅账单" style={{whiteSpace: "nowrap"}}>
+                    ¥{reimbursement.reimbursementInvoiceAmount / 100.0}{reimbursement.reimbursementDestinationInvoice == undefined ? "(单程)" : "(往返)"}
+                </Descriptions.Item>
+                <Descriptions.Item span={1} label="公司补贴" style={{whiteSpace: "nowrap"}}>
+                    ¥{reimbursement.reimbursementAdditionalAmount / 100.0}
+                </Descriptions.Item>
+                <Descriptions.Item span={2} style={{whiteSpace: "pre-wrap"}} label="申请人备注"
+                                   labelStyle={{whiteSpace: "nowrap"}}>
+                    {reimbursement.reimbursementNote}
+                </Descriptions.Item>
+                <Descriptions.Item span={2} label="附件列表">
+                    <DisplayInvoicesList departureInvoice={reimbursement.reimbursementDepartureInvoice}
+                                            destinationInvoice={reimbursement.reimbursementDestinationInvoice}
+                                            otherInvoices={reimbursement.invoices}/>
+                </Descriptions.Item>
+            </Descriptions>
+        </>)
+}
+
+function displaySteps(reimbursement: ReimbursementDetailModal | undefined | null, onApprove: boolean) {
+    if (reimbursement == undefined)
+        return null;
+    let currentStep = 0;
+    let items: StepProps[] = [{
+        title: '提交申请',
+        status: 'finish',
+        subTitle: reimbursement.reimbursementSubmitTime.replace("T", " "),
+        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 + 1) {
+            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] + "审批",
+                status: 'finish',
+                subTitle: approvalSteps[i].approvalTime.replace("T", " "),
+                description: description
+            })
+        }
+    }
+    if (reimbursement.reimbursementStatus >= 1 && reimbursement.reimbursementStatus <= 4) {
+        items.push({
+            // @ts-ignore
+            title: statusEnum2[approvalSteps.length] + "审批",
+            status: 'process',
+            subTitle: onApprove ? "请您审核" : "审核中",
+            description: "",
+        })
+        currentStep = items.length - 2;
+    } else if (reimbursement.reimbursementStatus === 0) {
+        items.push({
+            title: '通知出纳',
+            status: 'finish',
+            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></>)
+                }
+                items.push({
+                    // @ts-ignore
+                    title: statusEnum2[i - 1] + "审批",
+                    status: 'error',
+                    subTitle: approvalSteps[i].approvalTime.replace("T", " "),
+                    description: description
+                })
+            }
+        }
+        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: '申请终止',
+                    status: 'error',
+                    subTitle: approvalSteps[i].approvalTime.replace("T", " "),
+                    description: "【" + reimbursement.reimbursementSubmitStaff.staffName + "】" + "终止申请",
+                })
+                currentStep = items.length - 1;
+            }
+        }
+        items.push({
+            // @ts-ignore
+            title: statusEnum2[approvalSteps.length - 1] + '审批',
+            status: 'wait',
+            subTitle: "",
+        })
+    }
+    console.log(items, currentStep)
+    return (
+        <>
+            <Descriptions
+                title="流程进度"
+            >
+            </Descriptions>
+            <Steps
+                percent={99}
+                current={currentStep}
+                direction={"vertical"}
+                items={items}
+            />
+
+        </>)
+}
 
 class ReimbursementDetail extends React.Component<any, any> {
     constructor(props: {
-        reimbursement: Reimbursement | undefined;
+        reimbursement: ReimbursementDetailModal | undefined;
         closeDetail: any;
         accessLevel: number;
     }) {
@@ -14,14 +210,19 @@ class ReimbursementDetail extends React.Component<any, any> {
         this.state = {
             open: props.reimbursement !== undefined,
             reimbursement: props.reimbursement,
+            approvalOpinion: "",
+            approvalChecked: props.accessLevel === 1,
         }
     }
 
     static getDerivedStateFromProps(nextProps: any, prevState: any) {
+        console.log(nextProps);
         if (nextProps.reimbursement !== prevState.reimbursement) {
             return {
                 open: nextProps.reimbursement !== undefined,
                 reimbursement: nextProps.reimbursement,
+                approvalOpinion: "",
+                approvalChecked: nextProps.accessLevel === 1,
             };
         } else return null;
     }
@@ -31,16 +232,145 @@ class ReimbursementDetail extends React.Component<any, any> {
         this.props.closeDetail();
     }
 
+    approve = () => {
+        let params = {approvalOpinion: this.state.approvalOpinion}
+        axiosInstance.put("approval/" + this.state.reimbursement.reimbursementId.toString() + "/"+(this.state.approvalChecked?"1":"0"), params).then((res) => {
+            openNotification("审核成功");
+            this.props.closeDetail();
+        }).catch((err) => {
+            openNotification(err.response.data.msg==null?"操作失败，请稍后重试":err.response.data.msg);
+            console.log(err);
+        })
+    }
+    terminate = () => {
+        let params = {approvalOpinion: ""}
+        axiosInstance.put("approval/" + this.state.reimbursement.reimbursementId.toString() + "/-1", params).then((res) => {
+            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
+            || this.state.reimbursement.reimbursementStatus === 5
+            || this.state.reimbursement.reimbursementStatus === 6)
+            return null;
+        if (this.props.accessLevel === 1) {
+            if (this.state.approvalChecked)
+                return (
+                    <Popconfirm
+                        title="确定批准申请吗？"
+                        onConfirm={this.approve}
+                        okText="确定"
+                        cancelText="取消"
+                    >
+                        <Button type="primary">批准报销</Button>
+                    </Popconfirm>
+                )
+            else
+                return (
+                    <Popconfirm
+                        title="确定驳回流程吗？"
+                        onConfirm={this.approve}
+                        okText="确定"
+                        cancelText="取消"
+                    >
+                        <Button type="primary" danger>驳回申请</Button>
+                    </Popconfirm>)
+        } else if (this.props.accessLevel === 0) {
+            return (
+                <Popconfirm
+                    title="确定终止流程吗？"
+                    onConfirm={this.terminate}
+                    okText="确定"
+                    cancelText="取消"
+                >
+                    <Button danger type="primary">终止流程</Button>
+                </Popconfirm>
+            )
+
+        } else {
+            return <></>
+        }
+    }
+    checkerMenu = () => {
+        if (this.props.accessLevel === 1 && this.state.reimbursement != undefined &&
+            this.state.reimbursement.reimbursementStatus >= 1 && this.state.reimbursement.reimbursementStatus <= 4) {
+            return (<>
+                    <Row>
+                    <TextArea autoSize={{minRows: 2}} placeholder="审批意见" value={this.state.approvalOpinion}
+                              onChange={(e) => {
+                                  this.setState({
+                                      approvalOpinion: e.target.value,
+                                  })
+                              }}/>
+                    </Row>
+                    <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>
+                </>
+            )
+        } else {
+            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={"报销单详情"} onCancel={this.cancel} open={this.state.open} width={1000}
-                   destroyOnClose={true}
-                   footer={[
-                       <Button key="next" type="primary" onClick={this.cancel}>
-                           关闭
-                       </Button>]}>
-                {this.props.reimbursement === undefined ? "123" : this.props.reimbursement.reimbursementId}
-            </Modal>)
+            <Modal
+                title={<>报销单详情{this.getTag()}</>}
+                onCancel={this.cancel} open={this.state.open}
+                width={1000}
+                destroyOnClose={true}
+                footer={[
+                    this.getSubmitButton(),
+                    <Button key="next" type="default" onClick={this.cancel}>
+                        关闭
+                    </Button>]}>
+                <Row gutter={40}>
+                    <Col span={15}>
+                        {displayRawInfo(this.state.reimbursement)}
+                    </Col>
+                    <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>
+        )
     }
 }
 

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

@@ -335,7 +335,6 @@ class MultiInvoiceSelector extends React.Component<any, any> {
     render() {
         return (
             <>
-
                 <Button name={"select"} onClick={() => this.pickerOpen(true)}>
 
                     {this.state.selectedInvoice === null || this.state.selectedInvoice === undefined ||

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

@@ -0,0 +1,121 @@
+import {Invoice} from "../../../../models/ReimbursementDetailModal";
+import {InvoiceDetail} from "../../../../models/Invoice";
+import {Staff} from "../../../../models/Staff";
+import React, {useState} from "react";
+import {Tree} from 'antd';
+import type {DataNode, DirectoryTreeProps} from 'antd/es/tree';
+import {SwapRightOutlined, SwapLeftOutlined} from '@ant-design/icons'
+import InvoiceDetailModal from "../../../Invoice/InvoiceDetailModal";
+import axiosInstance from "../../../../utils/axiosInstance";
+
+const {DirectoryTree} = Tree;
+
+function toInvoiceDetail(invoice: Invoice) {
+    let uploader = invoice.invoiceUploader;
+    let initStaff: Staff = {
+        managingDepartment: null,
+        staffBase: "",
+        staffDepartments: [],
+        staffId: "0000",
+        staffName: ""
+    }
+    let resInvoiceDetail: InvoiceDetail = {
+        invoiceAmount: invoice.invoiceAmount ? invoice.invoiceAmount : 0,
+        invoiceNote: invoice.invoiceNote ? invoice.invoiceNote : "",
+        invoiceState: invoice.invoiceState ? invoice.invoiceState : 0,
+        invoiceUploadTime: invoice.invoiceUploadTime ? invoice.invoiceUploadTime : "",
+        invoiceUploader: initStaff,
+        modified: invoice.modified ? invoice.modified : false,
+        invoiceNo: invoice.invoiceNo ? invoice.invoiceNo : "Undefined",
+        invoiceCode: invoice.invoiceCode ? invoice.invoiceCode : "Undefined",
+        invoiceDate: invoice.invoiceDate,
+        invoiceDeparture: invoice.invoiceDeparture ? invoice.invoiceDeparture : "",
+        invoiceDestination: invoice.invoiceDestination ? invoice.invoiceDestination : "",
+        invoiceFileUri: invoice.invoiceFileUri ? invoice.invoiceFileUri : "",
+        invoiceThumbnailUri: invoice.invoiceThumbnailUri ? invoice.invoiceThumbnailUri : "",
+        invoiceId: invoice.invoiceId,
+        invoiceKind: invoice.invoiceKind ? invoice.invoiceKind : 0
+    };
+    return resInvoiceDetail;
+
+}
+
+function DisplayInvoicesList(props:{departureInvoice: Invoice, destinationInvoice: Invoice | null, otherInvoices: Invoice[]}) {
+    let departureInvoice = props.departureInvoice;
+    let destinationInvoice = props.destinationInvoice;
+    let otherInvoices = props.otherInvoices;
+
+    const [invoiceDetail, setInvoiceDetail] = useState(departureInvoice)
+    const [detailModalOpen, setDetailModalOpen] = useState(false)
+    function getTreeData() {
+        let treeData: DataNode[] = [];
+        let mainData = {
+            title: '往返票据',
+            key: '0-0',
+            children: [
+                {
+                    title: '出发票据',
+                    key: departureInvoice.invoiceId.toString(),
+                    isLeaf: true,
+                    icon: <SwapRightOutlined/>,
+                    style: {color: '\t#6495ED'},
+                },
+            ]
+        };
+        if (destinationInvoice != null) {
+            mainData.children.push({
+                title: '返程票据',
+                key: destinationInvoice.invoiceId.toString(),
+                isLeaf: true,
+                icon: <SwapLeftOutlined/>,
+                style: {color: '\t#6495ED'},
+            });
+        }
+        mainData.title+=`(${mainData.children.length})`;
+        let othersData: DataNode = {
+            title: '其他票据',
+            key: '0-1',
+            children: []
+        };
+        let cnt = 0
+        for (let i = 0; i < otherInvoices.length; i++) {
+            if (otherInvoices[i].invoiceId != departureInvoice.invoiceId && otherInvoices[i].invoiceId != destinationInvoice?.invoiceId) {
+                othersData.children?.push({
+                    title: `附加票据-${cnt + 1}`,
+                    key: otherInvoices[i].invoiceId.toString(),
+                    isLeaf: true,
+                    style: {color: '\t#6495ED'},
+                });
+                cnt++;
+            }
+        }
+        othersData.title+=`(${cnt})`;
+        treeData.push(mainData)
+        treeData.push(othersData)
+        return treeData;
+    }
+
+    const onSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {
+        if (keys[0] == '0-0' || keys[0] == '0-1') {
+            return;
+        }
+        let invoiceId = Number(keys[0]);
+        axiosInstance.get("common/invoice/" + invoiceId).then((res) => {
+            setInvoiceDetail(res.data);
+            setDetailModalOpen(true);
+        })
+    };
+
+    return (<>
+        <DirectoryTree
+            selectedKeys={[]}
+            onSelect={onSelect}
+            treeData={getTreeData()}
+        />
+        <InvoiceDetailModal invoiceDetail={invoiceDetail} open={detailModalOpen} onClose={() => {
+            setDetailModalOpen(false)
+        }}/>
+    </>)
+}
+
+export default DisplayInvoicesList

src/pages/reimbursement/mine/utils.ts

@@ -8,4 +8,10 @@ export const openNotification = (hint: string) => {
             console.log('Notification Clicked!');
         },
     });
-};
+};
+
+export const openErrorNotification = (placement: string) => {
+    notification.error({
+        message: `${placement}`
+    });
+}