正在报销

main
白封羽 2023-01-01 01:55:00 +08:00
parent 68431ef6e6
commit 3fb745a430
3 changed files with 296 additions and 10 deletions

View File

@ -11,7 +11,19 @@ export interface ApifoxModal {
records: Reimbursement[];
total: number;
}
export interface ReimbursementApplication {
reimbursementDepartureInvoiceId: number;
reimbursementDepartureName: string;
reimbursementDestinationInvoiceId?: number;
reimbursementDestinationName: string;
reimbursementNote: string;
reimbursementOtherInvoiceIds: number[];
/**
*
*/
reimbursementTripDuration?: number;
submitDepartmentId: number;
}
/**
* invoice
*/

View File

@ -10,6 +10,7 @@ import {FormInstance} from "antd/es/form";
import {SortOrder} from "antd/es/table/interface";
import {Reimbursement} from "../../../models/Reimbursement";
import qs from 'qs';
import ReimbursementCreate from "./ReimbursementCreate";
const valueEnum = {
0: 'success',
@ -74,12 +75,13 @@ class Subpage extends React.Component<any, any> {
super(props);
this.state = {
searchWord: "",
onCreated: false,
}
this.pullDepartment()
}
department = new Map<number, string>()
createRef = React.createRef<ReimbursementCreate>();
columns: ProColumns<TableListItem>[] = [
{
title: '报销单号',
@ -187,8 +189,7 @@ class Subpage extends React.Component<any, any> {
}
create() {
//TODO
alert("123")
this.createRef.current?.setState({open: true})
}
showDetail(reimbursementId: number) {
@ -196,10 +197,6 @@ class Subpage extends React.Component<any, any> {
alert(reimbursementId)
}
async getInvoiceDate(invoiceId: number | undefined) {
//TODO
return Date.now()
}
async converter(value: Reimbursement[] | undefined, pageSize: number | undefined) {
if (value === undefined) {
@ -218,7 +215,7 @@ class Subpage extends React.Component<any, any> {
additionalAmount: value[i].reimbursementAdditionalAmount,
status: value[i].reimbursementStatus % 6,
departmentId: value[i].reimbursementSubmitDepartment.departmentId,
submitDateTime: (new Date(value[i].reimbursementSubmitTime)).getTime(),
submitDateTime: Date.parse(value[i].reimbursementSubmitTime),
detail: "查看详情",
back: value[i].reimbursementDestinationInvoice !== undefined,
})
@ -294,6 +291,8 @@ class Subpage extends React.Component<any, any> {
render() {
return (
<>
<ReimbursementCreate ref={this.createRef} open={this.state.onCreated} wrapClassName="Subpage" />
<ProTable<TableListItem>
actionRef={this.tableAction}
columns={this.columns}
@ -356,7 +355,7 @@ class Subpage extends React.Component<any, any> {
// </Button>,
// ]}
/>
);
</>);
}
}

View File

@ -0,0 +1,275 @@
import React, {ReactNode} from "react";
import {ReimbursementApplication} from "../../../models/Reimbursement";
import {Button, Col, Form, Input, InputNumber, Modal, Popover, Row, Select} from "antd";
import {FormInstance} from "antd/es/form";
import {Invoice} from "../../../models/Reimbursement";
import axiosInstance from "../../../utils/axiosInstance";
import Column from "antd/es/table/Column";
import type {MenuProps} from 'antd';
import {ExclamationCircleOutlined, UserOutlined} from "@ant-design/icons";
import {Dropdown, message, Space, Tooltip} from 'antd';
import {store} from "../../../models/store";
import {FieldData} from "rc-field-form/lib/interface";
class SingleInvoiceSelector extends React.Component<any, any> {
value: any
onChange: any
constructor(props: {
invoices: Invoice[];
pickerOpen: boolean;
pickerTitle: string;
value: any;
onChange: any;
}) {
super(props);
this.value = props.value
this.onChange = props.onChange
this.state = {
selectedInvoice: {},
singleLimit: true,
invoices: props.invoices,
pickerOpen: props.pickerOpen,
pickerTitle: props.pickerTitle
}
}
invoiceCard = () => {
if (this.state.selectedInvoice.invoiceId === null || this.state.selectedInvoice.invoiceId === undefined) {
return (<>{this.state.pickerTitle}</>)
}
return (<>
</>)
}
pickerOpen = (value: boolean) => {
this.setState({pickerOpen: value})
}
confirm = () => {
//TODO
this.onChange(this.state.selectedInvoice.invoiceId)
this.setState({pickerOpen: false})
}
cancelSelect = () => {
this.setState({selectedInvoices: []})
}
render() {
return (
<>
<Button name={"select"} onClick={() => this.pickerOpen(true)}>
</Button>
<Popover
content={this.invoiceCard}>
<ExclamationCircleOutlined style={{marginLeft: 5}}/>
</Popover>
<Modal
open={this.state.pickerOpen}
title={this.state.pickerTitle + "选择"}
onOk={this.confirm}
onCancel={() => this.pickerOpen(false)}
destroyOnClose={true}
footer={[
<Button key="confirm" type="primary" onClick={this.confirm}>
</Button>
]}
>
</Modal>
</>)
}
}
class ReimbursementCreate extends React.Component<any, any> {
formRef = React.createRef<FormInstance>();
invoiceSelector1 = React.createRef<SingleInvoiceSelector>();
invoiceSelector2 = React.createRef<SingleInvoiceSelector>();
//invoiceSelector3 = React.createRef<InvoiceSelector>();
departments: { departmentId: number, departmentName: string }[] = [];
constructor(props: {}) {
super(props);
if (store.getState().staff.managingDepartment != null && store.getState().staff.managingDepartment !== undefined) {
this.departments.push({
departmentId: store.getState().staff.managingDepartment.departmentId,
departmentName: store.getState().staff.managingDepartment.departmentName,
})
}
store.getState().staff.staffDepartments.forEach((item) => {
this.departments.push({
departmentId: item.departmentId,
departmentName: item.departmentName,
})
})
let departmentsPropItems: any[] = [];
this.departments.map((item) => {
departmentsPropItems.push({
label: item.departmentName,
key: item.departmentId,
icon: <UserOutlined/>,
})
})
this.state = {
loading: false,
open: this.props.open,
invoices: [],
selectedDepartment: {id: this.departments[0].departmentId, name: this.departments[0].departmentName},
departmentsProps: {
items: departmentsPropItems,
onClick: this.handleMenuClick,
},
back: false,
duration: 0,
}
let params = {
pageNum: 0,
pageSize: 100,
invoiceStatus: 0,
invoiceUploaderId: store.getState().token.staffId,
}
axiosInstance.get("common/invoice", {
params: params
}).then((res) => {
this.setState({
invoices: res.data.records
})
this.formRef.current?.setFieldValue("invoices", this.state.invoices)
})
}
findInvoiceById = (id: number):null|Invoice => {
//return this.state.invoices[0]
this.state.invoices.map((item:Invoice)=>{
if(item.invoiceId === id)
return item
})
return null
}
handleMenuClick: MenuProps['onClick'] = (e) => {
this.setState({
selectedDepartment: {
id: Number(e.key),
name: this.departments.find((item) => item.departmentId === Number(e.key))?.departmentName
}
})
this.formRef.current?.setFieldValue("departmentId", Number(e.key))
//console.log('click', e.key,this.departments.find((item)=>item.departmentId.toString()===e.key));
};
submit = () => {
console.log(this.formRef.current?.getFieldsValue())
}
cancel = () => {
this.setState({open: false})
}
changeDuration = (value: number | null) => {
if (value === null)
value = 0
this.setState({duration: value})
}
formFieldsChange = (changedFields: any, allFields: any) => {
let block = false
let startId = allFields['departureInvoiceId']
let endId = allFields['destinationInvoiceId']
if (typeof startId == "number" && typeof endId == "number") {
let s = this.findInvoiceById(startId)
let t = this.findInvoiceById(endId)
if (s !== null && t !== null) {
let x=Math.floor((Date.parse(t.invoiceDate)-Date.parse(s.invoiceDate))/24/60/60/1000) + 1
this.setState({back:true,duration:x})
this.formRef.current?.setFieldValue('duration',x)
block = true
}
}
if(!block){
this.setState({back:false,duration:0})
this.formRef.current?.setFieldValue('duration',0)
}
}
render() {
return (
<Modal
open={this.state.open}
title="出差报销单"
onOk={this.submit}
onCancel={this.cancel}
destroyOnClose={true}
footer={[
<Button key="next" type="primary" loading={this.state.loading} onClick={this.submit}>
</Button>]}
>
<Form ref={this.formRef} onFieldsChange={this.formFieldsChange}
initialValues={{
departmentId: this.state.selectedDepartment.id,
destinationName: '',
departureName: '',
duration: 0
}}>
<Row gutter={18}>
<Col span={12}>
<Form.Item label="出发地" name="departureName" rules={[{required: true}]}>
<Input/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="目的地" name="destinationName" rules={[{required: true}]}>
<Input/>
</Form.Item>
</Col>
</Row>
<Row gutter={18}>
<Col span={12}>
<Form.Item label="出发票据" name="departureInvoiceId" rules={[{required: true}]}>
<SingleInvoiceSelector invoices={[]} pickerOpen={false}
pickerTitle={"出发票据"} ref={this.invoiceSelector1}/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="返程票据" name="destinationInvoiceId" rules={[{required: false}]}>
<SingleInvoiceSelector invoices={[]} pickerOpen={false}
pickerTitle={"返程票据"} ref={this.invoiceSelector2}/>
</Form.Item>
</Col>
</Row>
<Row gutter={18}>
<Col span={12}>
<Form.Item label="出差时长" name={"duration"} rules={[{required: true}]}>
<InputNumber addonAfter={"天"} min={0} max={1000} disabled={this.state.back}
onChange={this.changeDuration}/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="所属部门" name="departmentId" rules={[{required: true}]}>
<Dropdown.Button menu={this.state.departmentsProps}
buttonsRender={([leftButton, rightButton]) => [
<Button>
{this.state.selectedDepartment.name}
</Button>,
React.cloneElement(rightButton as React.ReactElement<any, string>, {loading: false}),
]}>
</Dropdown.Button>
</Form.Item>
</Col>
</Row>
<Form.Item label="备注信息" name="note" rules={[{required: false}]}>
<Input.TextArea/>
</Form.Item>
</Form>
</Modal>)
}
}
export default ReimbursementCreate;