仍在报销
parent
30cd60c925
commit
08001d5f32
|
@ -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"/>
|
||||||
</>);
|
</>);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
|
@ -0,0 +1,11 @@
|
||||||
|
import {notification} from "antd";
|
||||||
|
|
||||||
|
export const openNotification = (hint: string) => {
|
||||||
|
notification.open({
|
||||||
|
message: hint,
|
||||||
|
duration: 1,
|
||||||
|
onClick: () => {
|
||||||
|
console.log('Notification Clicked!');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
Loading…
Reference in New Issue