仍在报销

main
白封羽 2023-01-02 23:33:23 +08:00
parent 30cd60c925
commit 08001d5f32
4 changed files with 118 additions and 42 deletions

View File

@ -11,6 +11,8 @@ import {SortOrder} from "antd/es/table/interface";
import {Reimbursement} from "../../../models/Reimbursement"; import {Reimbursement} from "../../../models/Reimbursement";
import qs from 'qs'; import qs from 'qs';
import ReimbursementCreate from "./ReimbursementCreate"; import ReimbursementCreate from "./ReimbursementCreate";
import ReimbursementDetail from "./ReimbursementDetail";
import {openNotification} from "./utils";
const valueEnum = { const valueEnum = {
0: 'success', 0: 'success',
@ -25,7 +27,7 @@ export type Department = {
departmentName: string; departmentName: string;
} }
export type TableListItem = { export type TableListItem = {
key:number; key: number;
id: number; id: number;
beginDate: number; beginDate: number;
duration: number; duration: number;
@ -44,7 +46,7 @@ export type TableListItem = {
let fakeData: TableListItem[] = []; let fakeData: TableListItem[] = [];
for (let i = 0; i < 94; i++) { for (let i = 0; i < 94; i++) {
fakeData.push({ fakeData.push({
key:i, key: i,
id: i + 1, id: i + 1,
beginDate: Date.UTC(2022, i % 11 + 1, i % 28 + 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, 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 = { this.state = {
searchWord: "", searchWord: "",
onCreated: false, onCreated: false,
detailedReimbursement: undefined,
} }
this.pullDepartment() this.pullDepartment()
} }
@ -88,7 +90,7 @@ class Subpage extends React.Component<any, any> {
columns: ProColumns<TableListItem>[] = [ columns: ProColumns<TableListItem>[] = [
{ {
title: '报销单号', title: '报销单号',
width: 40, width: 60,
dataIndex: 'id', dataIndex: 'id',
search: false, search: false,
sorter: true, sorter: true,
@ -96,7 +98,7 @@ class Subpage extends React.Component<any, any> {
}, },
{ {
title: '行程', title: '行程',
width: 80, width: 60,
dataIndex: 'OD', dataIndex: 'OD',
search: false, search: false,
render: (_, row) => <>{row.OD[0] + (row.back ? " ⇌ " : " → ") + row.OD[1]}</>, render: (_, row) => <>{row.OD[0] + (row.back ? " ⇌ " : " → ") + row.OD[1]}</>,
@ -112,7 +114,7 @@ class Subpage extends React.Component<any, any> {
}, },
{ {
title: '出差天数', title: '出差天数',
width: 50, width: 60,
dataIndex: 'duration', dataIndex: 'duration',
search: false, search: false,
sorter: true, sorter: true,
@ -125,9 +127,9 @@ class Subpage extends React.Component<any, any> {
dataIndex: 'amount', dataIndex: 'amount',
search: false, search: false,
render: (_, item) => render: (_, item) =>
<>{(item.amount/100.0).toFixed(2)} <>{(item.amount / 100.0).toFixed(2)}
<Popover <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}}/> <ExclamationCircleOutlined style={{marginLeft: 5}}/>
</Popover> </Popover>
</> </>
@ -145,7 +147,7 @@ class Subpage extends React.Component<any, any> {
}, },
{ {
title: '申请部门', title: '申请部门',
width: 90, width: 120,
search: false, search: false,
dataIndex: 'departmentId', dataIndex: 'departmentId',
valueEnum: this.departments, valueEnum: this.departments,
@ -192,9 +194,16 @@ class Subpage extends React.Component<any, any> {
this.createRef.current?.setState({open: true}) this.createRef.current?.setState({open: true})
} }
closeDetail = () => {
this.setState({detailedReimbursement: undefined})
}
showDetail(reimbursementId: number) { showDetail(reimbursementId: number) {
//TODO axiosInstance.get("common/reimbursement/" + reimbursementId).then((response) => {
alert(reimbursementId) this.setState({detailedReimbursement: response.data})
}).catch((error) => {
openNotification("拉取报销单详情失败")
})
} }
@ -203,9 +212,9 @@ class Subpage extends React.Component<any, any> {
return [] return []
} }
let result: TableListItem[] = [] let result: TableListItem[] = []
if("reimbursementAdditionalAmount" in value){ if ("reimbursementAdditionalAmount" in value) {
result.push({ result.push({
key:1, key: 1,
id: value.reimbursementId, id: value.reimbursementId,
beginDate: Date.parse(value.reimbursementDepartureInvoice.invoiceDate), beginDate: Date.parse(value.reimbursementDepartureInvoice.invoiceDate),
endDate: Date.parse(value.reimbursementDepartureInvoice.invoiceDate) + value.reimbursementTripDuration * 24 * 60 * 60 * 1000, 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++) { for (let i = 0; i < value.length; i++) {
result.push({ result.push({
key:i, key: i,
id: value[i].reimbursementId, id: value[i].reimbursementId,
beginDate: Date.parse(value[i].reimbursementDepartureInvoice.invoiceDate), beginDate: Date.parse(value[i].reimbursementDepartureInvoice.invoiceDate),
endDate: Date.parse(value[i].reimbursementDepartureInvoice.invoiceDate) + value[i].reimbursementTripDuration * 24 * 60 * 60 * 1000, 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>) { async updateRequest(current: number | undefined, pageSize: number | undefined, sort: Record<string, SortOrder>, filter: Record<string, React.ReactText[] | null>) {
let tableListDataSource: TableListItem[] = [] let tableListDataSource: TableListItem[] = []
let totalRecordLength = 0 let totalRecordLength = 0
console.log(filter)
console.log(sort)
if (this.state.searchWord.trim() === "") { if (this.state.searchWord.trim() === "") {
current = (current === undefined ? 0 : current) current = (current === undefined ? 0 : current)
pageSize = (pageSize === undefined ? 5 : pageSize) pageSize = (pageSize === undefined ? 5 : pageSize)
@ -329,6 +336,10 @@ class Subpage extends React.Component<any, any> {
render() { render() {
return ( return (
<> <>
<ReimbursementDetail reimbursement={this.state.detailedReimbursement}
closeDetail={this.closeDetail}
accessLevel={0}
/>
<ProTable<TableListItem> <ProTable<TableListItem>
actionRef={this.tableAction} actionRef={this.tableAction}
columns={this.columns} columns={this.columns}
@ -392,7 +403,8 @@ class Subpage extends React.Component<any, any> {
// </Button>, // </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"/>
</>); </>);
} }
} }

View File

@ -22,18 +22,10 @@ import {invoiceTypeNameMap} from "../../../models/Invoice";
import SingleInvoiceSelector from "./component/SingleInvoiceSelector"; import SingleInvoiceSelector from "./component/SingleInvoiceSelector";
import MultiInvoiceSelector from "./component/MultiInvoiceSelector"; import MultiInvoiceSelector from "./component/MultiInvoiceSelector";
import {ActionType, StatisticCard} from "@ant-design/pro-components"; import {ActionType, StatisticCard} from "@ant-design/pro-components";
import {openNotification} from "./utils";
const {Operation} = StatisticCard; 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> { class ReimbursementCreate extends React.Component<any, any> {
formRef = React.createRef<FormInstance>(); formRef = React.createRef<FormInstance>();
@ -139,7 +131,7 @@ class ReimbursementCreate extends React.Component<any, any> {
}; };
submitCheck = () => { submitCheck = () => {
//TODO: check
return {ok: true, msg: ""} return {ok: true, msg: ""}
} }
submit = () => { submit = () => {
@ -192,6 +184,13 @@ class ReimbursementCreate extends React.Component<any, any> {
value = 0 value = 0
this.setState({duration: value}) 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) => { formValuesChange = (changedValues: any, allValues: any) => {
let state: any = {} let state: any = {}
console.log(allValues) 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 state["duration"] = (Number(Date.parse(allValues.destinationInvoice.invoiceDate)) - Number(Date.parse(allValues.departureInvoice.invoiceDate))) / 1000 / 60 / 60 / 24 + 1
if (state["duration"] < 0) if (state["duration"] < 0)
state["duration"] = 0 state["duration"] = 0
this.formRef.current?.setFieldsValue({duration: state["duration"]})
} else { } else {
state['back'] = false state['back'] = false
state["duration"] = allValues["duration"] state["duration"] = allValues["duration"]
@ -212,6 +210,7 @@ class ReimbursementCreate extends React.Component<any, any> {
state["destinationName"] = allValues.destinationName state["destinationName"] = allValues.destinationName
state["note"] = changedValues.note state["note"] = changedValues.note
state["departmentId"] = allValues.departmentId state["departmentId"] = allValues.departmentId
this.formRef.current?.setFieldsValue({duration: state["duration"]})
this.setState(state) this.setState(state)
} }
@ -238,22 +237,25 @@ class ReimbursementCreate extends React.Component<any, any> {
return res return res
} }
calculateAddition = () => { calculateAddition = () => {
if(store.getState().staff.staffBase===this.formRef.current?.getFieldValue("destinationName")) if (store.getState().staff.staffBase === this.formRef.current?.getFieldValue("destinationName"))
return {value:0,hint:"出差地点与基地相同,无补贴"} return {value: 0, hint: "出差地点与基地相同,无补贴"}
let addition = 0 let addition = 0
this.place.map((item)=>{ this.place.map((item) => {
if(addition===this.formRef.current?.getFieldValue("destinationName")) if (item.placeName === this.formRef.current?.getFieldValue("destinationName"))
addition=item.subsidyPerDay addition = item.subsidyPerDay
}) })
let days=0 let days = 0
if(this.state.duration!==undefined) if (this.state.duration !== undefined)
days=this.state.duration days = this.state.duration
return {value:addition*days,hint:"每日补贴"+addition+"元,共"+days+"天"} return {
value: (addition * days / 100.0).toFixed(2),
hint: "每日补贴" + (addition / 100.0).toFixed(2) + "元,共" + days + "天"
}
} }
render() { render() {
return ( return (
<Modal <Modal
width={800} width={800}
open={this.state.open} open={this.state.open}
title="出差报销单" title="出差报销单"
@ -276,7 +278,8 @@ class ReimbursementCreate extends React.Component<any, any> {
<Row gutter={18} key={1}> <Row gutter={18} key={1}>
<Col span={12}> <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 <Select
showSearch showSearch
placeholder="请选择出发地" placeholder="请选择出发地"
@ -291,7 +294,9 @@ class ReimbursementCreate extends React.Component<any, any> {
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={12}> <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 <Select
showSearch showSearch
placeholder="请选择目的地" placeholder="请选择目的地"
@ -351,8 +356,9 @@ class ReimbursementCreate extends React.Component<any, any> {
<Row style={{fontSize: 15, marginBottom: 5}} key={4}> <Row style={{fontSize: 15, marginBottom: 5}} key={4}>
<Popover content={this.calculateAddition().hint} title="出差补贴" trigger="hover"> <Popover content={this.calculateAddition().hint} title="出差补贴" trigger="hover">
<Tag color={store.getState().staff.staffBase===this.formRef.current?.getFieldValue("destinationName")? <Tag
"red":"green"}> color={store.getState().staff.staffBase === this.formRef.current?.getFieldValue("destinationName") ?
"red" : "green"}>
{this.calculateAddition().value} {this.calculateAddition().value}
</Tag> </Tag>
</Popover> </Popover>

View File

@ -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

View File

@ -0,0 +1,11 @@
import {notification} from "antd";
export const openNotification = (hint: string) => {
notification.open({
message: hint,
duration: 1,
onClick: () => {
console.log('Notification Clicked!');
},
});
};