仍在报销

2023-01-02 23:33:23 +08:00 · 2023-01-02 23:33:23 +08:00 · 08001d5f32
parent 30cd60c925
commit 08001d5f32
4 changed files with 118 additions and 42 deletions
--- a/src/pages/reimbursement/mine/MyReimbursement.tsx
+++ b/src/pages/reimbursement/mine/MyReimbursement.tsx
@ -11,6 +11,8 @@ import {SortOrder} from "antd/es/table/interface";
 import {Reimbursement} from "../../../models/Reimbursement";
 import qs from 'qs';
 import ReimbursementCreate from "./ReimbursementCreate";
+import ReimbursementDetail from "./ReimbursementDetail";
+import {openNotification} from "./utils";

 const valueEnum = {
    0: 'success',
@ -25,7 +27,7 @@ export type Department = {
    departmentName: string;
 }
 export type TableListItem = {
-    key:number;
+    key: number;
    id: number;
    beginDate: number;
    duration: number;
@ -44,7 +46,7 @@ export type TableListItem = {
 let fakeData: TableListItem[] = [];
 for (let i = 0; i < 94; i++) {
    fakeData.push({
-        key:i,
+        key: i,
        id: i + 1,
        beginDate: Date.UTC(2022, i % 11 + 1, i % 28 + 1),
        endDate: Date.UTC(2022, i % 11 + 1, i % 28 + 1) + 1000 * 60 * 60 * 24 * i + 1,
@ -79,7 +81,7 @@ class Subpage extends React.Component<any, any> {
        this.state = {
            searchWord: "",
            onCreated: false,
-
+            detailedReimbursement: undefined,
        }
        this.pullDepartment()
    }
@ -88,7 +90,7 @@ class Subpage extends React.Component<any, any> {
    columns: ProColumns<TableListItem>[] = [
        {
            title: '报销单号',
-            width: 40,
+            width: 60,
            dataIndex: 'id',
            search: false,
            sorter: true,
@ -96,7 +98,7 @@ class Subpage extends React.Component<any, any> {
        },
        {
            title: '行程',
-            width: 80,
+            width: 60,
            dataIndex: 'OD',
            search: false,
            render: (_, row) => <>{row.OD[0] + (row.back ? " ⇌ " : " → ") + row.OD[1]}</>,
@ -112,7 +114,7 @@ class Subpage extends React.Component<any, any> {
        },
        {
            title: '出差天数',
-            width: 50,
+            width: 60,
            dataIndex: 'duration',
            search: false,
            sorter: true,
@ -125,9 +127,9 @@ class Subpage extends React.Component<any, any> {
            dataIndex: 'amount',
            search: false,
            render: (_, item) =>
-                <>{(item.amount/100.0).toFixed(2)}元
+                <>{(item.amount / 100.0).toFixed(2)}元
                    <Popover
-                        content={<>报销金额：{(item.invoiceAmount/100.0).toFixed(2)}元<br/>补贴金额：{(item.additionalAmount/100.0).toFixed(2)}元</>}>
+                        content={<>报销金额：{(item.invoiceAmount / 100.0).toFixed(2)}元<br/>补贴金额：{(item.additionalAmount / 100.0).toFixed(2)}元</>}>
                        <ExclamationCircleOutlined style={{marginLeft: 5}}/>
                    </Popover>
                </>
@ -145,7 +147,7 @@ class Subpage extends React.Component<any, any> {
        },
        {
            title: '申请部门',
-            width: 90,
+            width: 120,
            search: false,
            dataIndex: 'departmentId',
            valueEnum: this.departments,
@ -192,9 +194,16 @@ class Subpage extends React.Component<any, any> {
        this.createRef.current?.setState({open: true})
    }

+    closeDetail = () => {
+        this.setState({detailedReimbursement: undefined})
+    }
+
    showDetail(reimbursementId: number) {
-        //TODO
-        alert(reimbursementId)
+        axiosInstance.get("common/reimbursement/" + reimbursementId).then((response) => {
+            this.setState({detailedReimbursement: response.data})
+        }).catch((error) => {
+            openNotification("拉取报销单详情失败")
+        })
    }


@ -203,9 +212,9 @@ class Subpage extends React.Component<any, any> {
            return []
        }
        let result: TableListItem[] = []
-        if("reimbursementAdditionalAmount" in value){
+        if ("reimbursementAdditionalAmount" in value) {
            result.push({
-                key:1,
+                key: 1,
                id: value.reimbursementId,
                beginDate: Date.parse(value.reimbursementDepartureInvoice.invoiceDate),
                endDate: Date.parse(value.reimbursementDepartureInvoice.invoiceDate) + value.reimbursementTripDuration * 24 * 60 * 60 * 1000,
@ -224,7 +233,7 @@ class Subpage extends React.Component<any, any> {
        }
        for (let i = 0; i < value.length; i++) {
            result.push({
-                key:i,
+                key: i,
                id: value[i].reimbursementId,
                beginDate: Date.parse(value[i].reimbursementDepartureInvoice.invoiceDate),
                endDate: Date.parse(value[i].reimbursementDepartureInvoice.invoiceDate) + value[i].reimbursementTripDuration * 24 * 60 * 60 * 1000,
@ -259,8 +268,6 @@ class Subpage extends React.Component<any, any> {
    async updateRequest(current: number | undefined, pageSize: number | undefined, sort: Record<string, SortOrder>, filter: Record<string, React.ReactText[] | null>) {
        let tableListDataSource: TableListItem[] = []
        let totalRecordLength = 0
-        console.log(filter)
-        console.log(sort)
        if (this.state.searchWord.trim() === "") {
            current = (current === undefined ? 0 : current)
            pageSize = (pageSize === undefined ? 5 : pageSize)
@ -329,6 +336,10 @@ class Subpage extends React.Component<any, any> {
    render() {
        return (
            <>
+                <ReimbursementDetail reimbursement={this.state.detailedReimbursement}
+                                     closeDetail={this.closeDetail}
+                                     accessLevel={0}
+                />
                <ProTable<TableListItem>
                    actionRef={this.tableAction}
                    columns={this.columns}
@ -392,7 +403,8 @@ class Subpage extends React.Component<any, any> {
                    //     </Button>,
                    // ]}
                />
-                <ReimbursementCreate tableAction={this.tableAction} ref={this.createRef} open={this.state.onCreated} wrapClassName="Subpage"/>
+                <ReimbursementCreate tableAction={this.tableAction} ref={this.createRef} open={this.state.onCreated}
+                                     wrapClassName="Subpage"/>
            </>);
    }
 }
--- a/src/pages/reimbursement/mine/ReimbursementCreate.tsx
+++ b/src/pages/reimbursement/mine/ReimbursementCreate.tsx
@ -22,18 +22,10 @@ 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";

 const {Operation} = StatisticCard;

-const openNotification = (hint: string) => {
-    notification.open({
-        message: hint,
-        duration: 1,
-        onClick: () => {
-            console.log('Notification Clicked!');
-        },
-    });
-};

 class ReimbursementCreate extends React.Component<any, any> {
    formRef = React.createRef<FormInstance>();
@ -139,7 +131,7 @@ class ReimbursementCreate extends React.Component<any, any> {
    };

    submitCheck = () => {
-
+        //TODO: check
        return {ok: true, msg: ""}
    }
    submit = () => {
@ -192,6 +184,13 @@ class ReimbursementCreate extends React.Component<any, any> {
            value = 0
        this.setState({duration: value})
    }
+    destinationValidator = (rule: any, value: any, callback: any) => {
+        if (this.state.departureName !== undefined && this.state.departureName !== null && this.state.departureName !== "") {
+            if (this.state.departureName === this.state.destinationName) {
+                callback("目的地和出发地不能相同")
+            }
+        }
+    }
    formValuesChange = (changedValues: any, allValues: any) => {
        let state: any = {}
        console.log(allValues)
@ -200,7 +199,6 @@ class ReimbursementCreate extends React.Component<any, any> {
            state["duration"] = (Number(Date.parse(allValues.destinationInvoice.invoiceDate)) - Number(Date.parse(allValues.departureInvoice.invoiceDate))) / 1000 / 60 / 60 / 24 + 1
            if (state["duration"] < 0)
                state["duration"] = 0
-            this.formRef.current?.setFieldsValue({duration: state["duration"]})
        } else {
            state['back'] = false
            state["duration"] = allValues["duration"]
@ -212,6 +210,7 @@ class ReimbursementCreate extends React.Component<any, any> {
        state["destinationName"] = allValues.destinationName
        state["note"] = changedValues.note
        state["departmentId"] = allValues.departmentId
+        this.formRef.current?.setFieldsValue({duration: state["duration"]})

        this.setState(state)
    }
@ -238,22 +237,25 @@ class ReimbursementCreate extends React.Component<any, any> {
        return res
    }
    calculateAddition = () => {
-        if(store.getState().staff.staffBase===this.formRef.current?.getFieldValue("destinationName"))
-            return {value:0,hint:"出差地点与基地相同，无补贴"}
+        if (store.getState().staff.staffBase === this.formRef.current?.getFieldValue("destinationName"))
+            return {value: 0, hint: "出差地点与基地相同，无补贴"}
        let addition = 0
-        this.place.map((item)=>{
-            if(addition===this.formRef.current?.getFieldValue("destinationName"))
-                addition=item.subsidyPerDay
+        this.place.map((item) => {
+            if (item.placeName === this.formRef.current?.getFieldValue("destinationName"))
+                addition = item.subsidyPerDay
        })
-        let days=0
-        if(this.state.duration!==undefined)
-            days=this.state.duration
-        return {value:addition*days,hint:"每日补贴"+addition+"元，共"+days+"天"}
+        let days = 0
+        if (this.state.duration !== undefined)
+            days = this.state.duration
+        return {
+            value: (addition * days / 100.0).toFixed(2),
+            hint: "每日补贴" + (addition / 100.0).toFixed(2) + "元，共" + days + "天"
        }
+    }
+
    render() {
        return (
            <Modal
-
                width={800}
                open={this.state.open}
                title="出差报销单"
@ -276,7 +278,8 @@ class ReimbursementCreate extends React.Component<any, any> {

                    <Row gutter={18} key={1}>
                        <Col span={12}>
-                            <Form.Item label="出发地" name="departureName" rules={[{required: true}]}>
+                            <Form.Item label="出发地" name="departureName" dependencies={['destinationName']}
+                                       rules={[{required: true,validator:this.destinationValidator}]}>
                                <Select
                                    showSearch
                                    placeholder="请选择出发地"
@ -291,7 +294,9 @@ class ReimbursementCreate extends React.Component<any, any> {
                            </Form.Item>
                        </Col>
                        <Col span={12}>
-                            <Form.Item label="目的地" name="destinationName" rules={[{required: true}]}>
+                            <Form.Item label="目的地" name="destinationName"
+                                       dependencies={['departureName']}
+                                       rules={[{required: true, validator: this.destinationValidator}]}>
                                <Select
                                    showSearch
                                    placeholder="请选择目的地"
@ -351,8 +356,9 @@ class ReimbursementCreate extends React.Component<any, any> {
                    <Row style={{fontSize: 15, marginBottom: 5}} key={4}>
                        补贴金额：
                        <Popover content={this.calculateAddition().hint} title="出差补贴" trigger="hover">
-                            <Tag color={store.getState().staff.staffBase===this.formRef.current?.getFieldValue("destinationName")?
-                                        "red":"green"}>
+                            <Tag
+                                color={store.getState().staff.staffBase === this.formRef.current?.getFieldValue("destinationName") ?
+                                    "red" : "green"}>
                                {this.calculateAddition().value}元
                            </Tag>
                        </Popover>
--- a/src/pages/reimbursement/mine/ReimbursementDetail.tsx
+++ b/src/pages/reimbursement/mine/ReimbursementDetail.tsx
@ -0,0 +1,47 @@
+import React from "react";
+import {Reimbursement} from "../../../models/Reimbursement";
+import {Button, Modal} from "antd";
+
+
+class ReimbursementDetail extends React.Component<any, any> {
+    constructor(props: {
+        reimbursement: Reimbursement | undefined;
+        closeDetail: any;
+        accessLevel: number;
+    }) {
+        console.log(props);
+        super(props);
+        this.state = {
+            open: props.reimbursement !== undefined,
+            reimbursement: props.reimbursement,
+        }
+    }
+
+    static getDerivedStateFromProps(nextProps: any, prevState: any) {
+        if (nextProps.reimbursement !== prevState.reimbursement) {
+            return {
+                open: nextProps.reimbursement !== undefined,
+                reimbursement: nextProps.reimbursement,
+            };
+        } else return null;
+    }
+
+    cancel = () => {
+        console.log("cancel");
+        this.props.closeDetail();
+    }
+
+    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>)
+    }
+}
+
+export default ReimbursementDetail
--- a/src/pages/reimbursement/mine/utils.ts
+++ b/src/pages/reimbursement/mine/utils.ts
@ -0,0 +1,11 @@
+import {notification} from "antd";
+
+export const openNotification = (hint: string) => {
+    notification.open({
+        message: hint,
+        duration: 1,
+        onClick: () => {
+            console.log('Notification Clicked!');
+        },
+    });
+};