BigC
/
FinancialReimbursementSystem_frontend
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

还在报销

main
白封羽 2023-01-01 17:26:27 +08:00
parent 3fb745a430
commit a54402dffb
2 changed files with 137 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/reimbursement/mine/MyReimbursement.tsx
View File

@ -70,17 +70,17 @@ const statusEnum = {
class Subpage extends React.Component<any, any> {
tableAction = React.createRef<ActionType>();
departments=new Map<number,string>()
constructor(props: {}) {
super(props);
this.state = {
searchWord: "",
onCreated: false,
}
this.pullDepartment()
}
department = new Map<number, string>()
createRef = React.createRef<ReimbursementCreate>();
columns: ProColumns<TableListItem>[] = [
{
@ -145,7 +145,7 @@ class Subpage extends React.Component<any, any> {
width: 80,
search: false,
dataIndex: 'departmentId',
valueEnum: this.department,
valueEnum: this.departments,
filters: true,
onFilter: false,
//render: (_) => <a>{_}</a>,
@ -224,12 +224,13 @@ class Subpage extends React.Component<any, any> {
}
pullDepartment() {
this.department.clear()
axiosInstance.get('common/department').then(response => {
this.departments.clear()
response.data.forEach((value: any) => {
this.department.set(value.departmentId, value.departmentName)
this.departments.set(value.departmentId, value.departmentName)
}
)
console.log(this.departments)
this.tableAction.current?.reload()
})

168
src/pages/reimbursement/mine/ReimbursementCreate.tsx
View File

@ -1,6 +1,6 @@
import React, {ReactNode} from "react";
import React, {Key, ReactNode} from "react";
import {ReimbursementApplication} from "../../../models/Reimbursement";
import {Button, Col, Form, Input, InputNumber, Modal, Popover, Row, Select} from "antd";
import {Button, Card, Col, Form, Input, InputNumber, Modal, Popover, Radio, Row, Select} from "antd";
import {FormInstance} from "antd/es/form";
import {Invoice} from "../../../models/Reimbursement";
import axiosInstance from "../../../utils/axiosInstance";
@ -11,13 +11,81 @@ import {Dropdown, message, Space, Tooltip} from 'antd';
import {store} from "../../../models/store";
import {FieldData} from "rc-field-form/lib/interface";
function InvoiceCard(props: { invoice: Invoice }) {
const invoice = props.invoice;
return (
<Card
style={{width: 300}}
cover={
<img
alt="example"
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
/>
}
>
</Card>
)
}
class InvoiceRadioCard extends React.Component<any, any> {
constructor(props: {
invoice: any;
hidden: boolean;
selected: boolean;
index: number;
click: any;
}) {
super(props);
this.state = {
invoice: props.invoice,
hidden: props.hidden,
selected: props.selected,
index: props.index,
click: props.click
}
}
static getDerivedStateFromProps(props: {
invoice: any;
hidden: boolean;
selected: boolean;
index: number;
click: any;
}) {
return {
invoice: props.invoice,
hidden: props.hidden,
selected: props.selected,
index: props.index,
click: props.click
}
}
select(e: any) {
if (this.state.selected)
return
this.setState({selected: true})
this.props.click(this.props.index, true)
}
render() {
return (
<Card hidden={this.state.hidden}
cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"/>}
actions={[<Radio checked={this.state.selected} onClick={(e) => {
this.select(e)
}} defaultChecked={this.state.selected}/>]}>
</Card>
)
}
}
class SingleInvoiceSelector extends React.Component<any, any> {
value: any
onChange: any
constructor(props: {
invoices: Invoice[];
pickerOpen: boolean;
pickerTitle: string;
value: any;
@ -27,9 +95,10 @@ class SingleInvoiceSelector extends React.Component<any, any> {
this.value = props.value
this.onChange = props.onChange
this.state = {
selectedIndex: -1,
selectedInvoice: {},
singleLimit: true,
invoices: props.invoices,
invoices: [{invoiceId:1},{invoiceId:2},{invoiceId:3}],
pickerOpen: props.pickerOpen,
pickerTitle: props.pickerTitle
}
@ -40,21 +109,55 @@ class SingleInvoiceSelector extends React.Component<any, any> {
if (this.state.selectedInvoice.invoiceId === null || this.state.selectedInvoice.invoiceId === undefined) {
return (<>请选择一张{this.state.pickerTitle}</>)
}
return (<>
</>)
return (<InvoiceCard invoice={this.state.selectedInvoice}/>)
}
pickerOpen = (value: boolean) => {
this.setState({pickerOpen: value})
}
confirm = () => {
//TODO
this.onChange(this.state.selectedInvoice.invoiceId)
this.setState({pickerOpen: false})
}
cancelSelect = () => {
this.setState({selectedInvoices: []})
this.onChange({})
this.setState({selectedIndex: -1, selectedInvoice: {}})
}
click = (index: number, status: boolean) => {
if (status) {
this.setState({selectedIndex: index, selectedInvoice: this.state.invoices[index]})
this.onChange({invoice: this.state.invoices[index]})
}
}
cardList = () => {
let cards = []
for (let i = 0; i < this.state.invoices.length; i += 2) {
if (i + 1 >= this.state.invoices.length) {
cards.push(
<Row gutter={18}>
<Col span={12}>
<InvoiceRadioCard invoice={this.state.invoices[i]} selected={this.state.selectedIndex === i}
hidden={false} index={i} click={this.click}/>
</Col>
</Row>)
} else {
cards.push(
<Row gutter={18}>
<Col span={12}>
<InvoiceRadioCard invoice={this.state.invoices[i]} selected={this.state.selectedIndex === i}
hidden={false} index={i} click={this.click}/>
</Col>
<Col span={12}>
<InvoiceRadioCard invoice={this.state.invoices[i + 1]}
selected={this.state.selectedIndex === i + 1}
hidden={false} index={i + 1} click={this.click}/>
</Col>
</Row>)
}
}
return (
<>{cards}</>
)
}
render() {
@ -74,11 +177,16 @@ class SingleInvoiceSelector extends React.Component<any, any> {
onCancel={() => this.pickerOpen(false)}
destroyOnClose={true}
footer={[
<Button key="clear" type="primary" onClick={this.cancelSelect}>
清除
</Button>,
<Button key="confirm" type="primary" onClick={this.confirm}>
确定
</Button>
]}
>
{this.cardList()}
</Modal>
</>)
}
@ -141,14 +249,6 @@ class ReimbursementCreate extends React.Component<any, any> {
})
}
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: {
@ -173,23 +273,17 @@ class ReimbursementCreate extends React.Component<any, any> {
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)
let start = allFields['departureInvoiceId']
let end = allFields['destinationInvoiceId']
if (start !== undefined && end !== undefined && start.invoiceDate !== undefined && end.invoiceDate !== undefined) {
let x = Math.floor((Date.parse(end.invoiceDate) - Date.parse(start.invoiceDate)) / 24 / 60 / 60 / 1000) + 1
this.setState({back: true, duration: x})
this.formRef.current?.setFieldValue('duration', x)
}else{
this.setState({back: false, duration: 0})
this.formRef.current?.setFieldValue('duration', 0)
}
console.log(allFields)
}
render() {
@ -229,13 +323,13 @@ class ReimbursementCreate extends React.Component<any, any> {
<Row gutter={18}>
<Col span={12}>
<Form.Item label="出发票据" name="departureInvoiceId" rules={[{required: true}]}>
<Form.Item help="" label="出发票据" name="departureInvoice" 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}]}>
<Form.Item label="返程票据" name="destinationInvoice" rules={[{required: false}]}>
<SingleInvoiceSelector invoices={[]} pickerOpen={false}
pickerTitle={"返程票据"} ref={this.invoiceSelector2}/>
</Form.Item>