From 08001d5f32637810906d74ab123a992902e8a9da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E5=B0=81=E7=BE=BD?= <2360164671@qq.com> Date: Mon, 2 Jan 2023 23:33:23 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=8D=E5=9C=A8=E6=8A=A5=E9=94=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reimbursement/mine/MyReimbursement.tsx | 46 +++++++++------ .../mine/ReimbursementCreate.tsx | 56 ++++++++++--------- .../mine/ReimbursementDetail.tsx | 47 ++++++++++++++++ src/pages/reimbursement/mine/utils.ts | 11 ++++ 4 files changed, 118 insertions(+), 42 deletions(-) create mode 100644 src/pages/reimbursement/mine/ReimbursementDetail.tsx create mode 100644 src/pages/reimbursement/mine/utils.ts diff --git a/src/pages/reimbursement/mine/MyReimbursement.tsx b/src/pages/reimbursement/mine/MyReimbursement.tsx index edca481..12c4cea 100644 --- 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 { this.state = { searchWord: "", onCreated: false, - + detailedReimbursement: undefined, } this.pullDepartment() } @@ -88,7 +90,7 @@ class Subpage extends React.Component { columns: ProColumns[] = [ { title: '报销单号', - width: 40, + width: 60, dataIndex: 'id', search: false, sorter: true, @@ -96,7 +98,7 @@ class Subpage extends React.Component { }, { 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 { }, { title: '出差天数', - width: 50, + width: 60, dataIndex: 'duration', search: false, sorter: true, @@ -125,9 +127,9 @@ class Subpage extends React.Component { dataIndex: 'amount', search: false, render: (_, item) => - <>{(item.amount/100.0).toFixed(2)}元 + <>{(item.amount / 100.0).toFixed(2)}元 报销金额：{(item.invoiceAmount/100.0).toFixed(2)}元
补贴金额：{(item.additionalAmount/100.0).toFixed(2)}元}> + content={<>报销金额：{(item.invoiceAmount / 100.0).toFixed(2)}元
补贴金额：{(item.additionalAmount / 100.0).toFixed(2)}元}> @@ -145,7 +147,7 @@ class Subpage extends React.Component { }, { title: '申请部门', - width: 90, + width: 120, search: false, dataIndex: 'departmentId', valueEnum: this.departments, @@ -192,9 +194,16 @@ class Subpage extends React.Component { 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 { 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 { } 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 { async updateRequest(current: number | undefined, pageSize: number | undefined, sort: Record, filter: Record) { 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 { render() { return ( <> + actionRef={this.tableAction} columns={this.columns} @@ -392,7 +403,8 @@ class Subpage extends React.Component { // , // ]} /> - + ); } } diff --git a/src/pages/reimbursement/mine/ReimbursementCreate.tsx b/src/pages/reimbursement/mine/ReimbursementCreate.tsx index 80e87e6..3596448 100644 --- 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 { formRef = React.createRef(); @@ -139,7 +131,7 @@ class ReimbursementCreate extends React.Component { }; submitCheck = () => { - + //TODO: check return {ok: true, msg: ""} } submit = () => { @@ -192,6 +184,13 @@ class ReimbursementCreate extends React.Component { 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 { 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 { 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 { 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 ( { - + { 补贴金额： - + {this.calculateAddition().value}元 diff --git a/src/pages/reimbursement/mine/ReimbursementDetail.tsx b/src/pages/reimbursement/mine/ReimbursementDetail.tsx new file mode 100644 index 0000000..d08fd0b --- /dev/null +++ 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 { + 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 ( + + 关闭 + ]}> + {this.props.reimbursement === undefined ? "123" : this.props.reimbursement.reimbursementId} + ) + } +} + +export default ReimbursementDetail \ No newline at end of file diff --git a/src/pages/reimbursement/mine/utils.ts b/src/pages/reimbursement/mine/utils.ts new file mode 100644 index 0000000..1f84ffc --- /dev/null +++ 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!'); + }, + }); +}; \ No newline at end of file