From a54402dffb30ec073e8d10503b8cc3526fb596e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E5=B0=81=E7=BE=BD?= <2360164671@qq.com> Date: Sun, 1 Jan 2023 17:26:27 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BF=98=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 | 11 +- .../mine/ReimbursementCreate.tsx | 168 ++++++++++++++---- 2 files changed, 137 insertions(+), 42 deletions(-) diff --git a/src/pages/reimbursement/mine/MyReimbursement.tsx b/src/pages/reimbursement/mine/MyReimbursement.tsx index 96c5f5e..f316598 100644 --- a/src/pages/reimbursement/mine/MyReimbursement.tsx +++ b/src/pages/reimbursement/mine/MyReimbursement.tsx @@ -70,17 +70,17 @@ const statusEnum = { class Subpage extends React.Component { tableAction = React.createRef(); - + departments=new Map() constructor(props: {}) { super(props); this.state = { searchWord: "", onCreated: false, + } this.pullDepartment() } - department = new Map() createRef = React.createRef(); columns: ProColumns[] = [ { @@ -145,7 +145,7 @@ class Subpage extends React.Component { width: 80, search: false, dataIndex: 'departmentId', - valueEnum: this.department, + valueEnum: this.departments, filters: true, onFilter: false, //render: (_) => {_}, @@ -224,12 +224,13 @@ class Subpage extends React.Component { } 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() }) diff --git a/src/pages/reimbursement/mine/ReimbursementCreate.tsx b/src/pages/reimbursement/mine/ReimbursementCreate.tsx index 6adbfc2..aa503e0 100644 --- a/src/pages/reimbursement/mine/ReimbursementCreate.tsx +++ b/src/pages/reimbursement/mine/ReimbursementCreate.tsx @@ -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 ( + + } + > + + ) +} + +class InvoiceRadioCard extends React.Component { + 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 ( + + ) + } +} class SingleInvoiceSelector extends React.Component { value: any onChange: any constructor(props: { - invoices: Invoice[]; pickerOpen: boolean; pickerTitle: string; value: any; @@ -27,9 +95,10 @@ class SingleInvoiceSelector extends React.Component { 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 { if (this.state.selectedInvoice.invoiceId === null || this.state.selectedInvoice.invoiceId === undefined) { return (<>请选择一张{this.state.pickerTitle}) } - return (<> - - - ) + return () } 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( + + + ) + } else { + cards.push( + + + ) + } + } + return ( + <>{cards} + ) } render() { @@ -74,11 +177,16 @@ class SingleInvoiceSelector extends React.Component { onCancel={() => this.pickerOpen(false)} destroyOnClose={true} footer={[ + , ]} > + + {this.cardList()} ) } @@ -141,14 +249,6 @@ class ReimbursementCreate extends React.Component { }) } - 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 { 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 { - + - +