From 6ce784fdcc5d560f9475c5bbeb75b28ee8d96b2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E5=B0=81=E7=BE=BD?= <2360164671@qq.com>
Date: Mon, 2 Jan 2023 13:30:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=86=E5=88=86=E4=BA=86=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../mine/ReimbursementCreate.tsx | 455 +++++-------------
.../mine/component/MultiInvoiceSelector.tsx | 371 ++++++++++++++
.../mine/component/SingleInvoiceSelector.tsx | 369 ++++++++++++++
3 files changed, 849 insertions(+), 346 deletions(-)
create mode 100644 src/pages/reimbursement/mine/component/MultiInvoiceSelector.tsx
create mode 100644 src/pages/reimbursement/mine/component/SingleInvoiceSelector.tsx
diff --git a/src/pages/reimbursement/mine/ReimbursementCreate.tsx b/src/pages/reimbursement/mine/ReimbursementCreate.tsx
index aabf78f..6eb1322 100644
--- a/src/pages/reimbursement/mine/ReimbursementCreate.tsx
+++ b/src/pages/reimbursement/mine/ReimbursementCreate.tsx
@@ -2,18 +2,12 @@ import React, {Key, ReactNode} from "react";
import {ReimbursementApplication} from "../../../models/Reimbursement";
import {
Button,
- Card,
Col,
Form,
Input,
InputNumber,
- Modal,
- Pagination,
- PaginationProps,
- Popover,
- Radio,
- Row,
- Select, Tag
+ Modal, notification,
+ Row
} from "antd";
import {FormInstance} from "antd/es/form";
import {Invoice} from "../../../models/Reimbursement";
@@ -25,338 +19,26 @@ import {Dropdown, message, Space, Tooltip} from 'antd';
import {store} from "../../../models/store";
import {FieldData} from "rc-field-form/lib/interface";
import {invoiceTypeNameMap} from "../../../models/Invoice";
+import SingleInvoiceSelector from "./component/SingleInvoiceSelector";
+import MultiInvoiceSelector from "./component/MultiInvoiceSelector";
+import {StatisticCard} from "@ant-design/pro-components";
-function InvoiceCard(props: { invoice: Invoice }) {
- const invoice = props.invoice;
- console.log(invoice);
- return (
- }
- >
-
-
¥{(invoice.invoiceAmount / 100.0).toFixed(2)}
- {invoiceTypeNameMap.get(invoice.invoiceKind)}
- {(invoice.invoiceDeparture !== null && invoice.invoiceDestination !== null &&
- {invoice.invoiceDeparture}{" → "}
- {invoice.invoiceDestination})}
- {invoice.invoiceDate}
-
-
- )
-}
-
-class InvoiceRadioCard extends React.Component {
-
- constructor(props: {
- invoice: any;
- hidden: boolean;
- selected: number;
- 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: number;
- index: number;
- }) {
- return {
- invoice: props.invoice,
- hidden: props.hidden,
- selected: props.selected,
- index: props.index,
- }
- }
-
- select(e: any) {
- if (this.state.selected !== 0)
- return
- this.setState({selected: 1})
- this.props.click(this.props.invoice, true)
- }
-
- getTag = () => {
- if (this.state.selected === 1)
- return 已选择
- else if (this.state.selected === 0)
- return 待选择
- else if (this.state.selected === -1)
- return 不可选
- else if (this.state.selected === -2)
- return 不可选
- else if (this.state.selected === -3)
- return 不可选
- }
-
- render() {
- return (
- =0 ? 1 : 0.7)}}
- onClick={(e) => {
- this.select(e)
- }}
- cover={}
- // actions={[ {
- // this.select(e)
- // }} defaultChecked={this.state.selected}/>]}
- >
-
-
-
¥{(this.state.invoice.invoiceAmount / 100.0).toFixed(2)}
- {this.getTag()}
-
- {invoiceTypeNameMap.get(this.state.invoice.invoiceKind)}
- {(this.state.invoice.invoiceDeparture !== null && this.state.invoice.invoiceDestination !== null &&
- {this.state.invoice.invoiceDeparture}{" → "}
- {this.state.invoice.invoiceDestination})}
- {this.state.invoice.invoiceDate}
-
-
-
- )
- }
-}
-
-class SingleInvoiceSelector extends React.Component {
- value: any
- onChange: any
- availableInvoiceKinds = [0, 2, 5, 9, 10, 13]
-
- constructor(props: {
- disabled: boolean;
- pickerOpen: boolean;
- pickerTitle: string;
- value: any;
- onChange: any;
- after: number;
- before: number;
- occupiedInvoices: Invoice[];
- }) {
- super(props);
- this.value = props.value
- this.onChange = props.onChange
- this.state = {
- disabled: props.disabled,
- occupiedInvoices: props.occupiedInvoices,
- selectedInvoice: {},
- singleLimit: true,
- invoices: [],
- pickerOpen: props.pickerOpen,
- pickerTitle: props.pickerTitle,
- currentPage: 1,
- pageSize: 4,
- total: 0,
- after: props.after,
- before: props.before,
- searchOptions: {
- invoiceNote: "",
- invoiceDateStart: 0,
- invoiceDateEnd: 0,
- invoiceKind: -1,
- }
- }
- this.requestInvoices(1, this.state.searchOptions)
- }
-
-
- requestInvoices(page: number, searchOptions: any) {
- let params: any = {
- pageNum: page - 1,
- pageSize: this.state.pageSize,
- invoiceUploaderId: store.getState().token.staffId,
- invoiceStatus: 0,
- sortBy: "invoiceDate",
- asc: true,
- }
- if (searchOptions.invoiceNote !== "") {
- params.invoiceNote = searchOptions.invoiceNote
- }
- if (searchOptions.invoiceDateStart !== 0) {
- params.invoiceDateStart = searchOptions.invoiceDateStart
- }
- if (searchOptions.invoiceDateEnd !== 0) {
- params.invoiceDateEnd = searchOptions.invoiceDateEnd
- }
- if (searchOptions.invoiceKind !== -1) {
- params.invoiceKinds = searchOptions.invoiceKind
- } else {
- params.invoiceKinds = "0,2,5,9,10,13"
- }
- console.log(params)
- axiosInstance.get('common/invoice', {params: params}).then(response => {
- this.setState({
- total: response.data.total, invoices: response.data.records,
- currentPage: page, searchOptions: searchOptions
- })
- }).catch(error => {
- console.log(error)
- })
-
- }
-
- setSearchOptions = (options: any) => {
- this.setState({searchOptions: options})
- }
- invoiceCard = () => {
- if (this.state.selectedInvoice.invoiceId === null || this.state.selectedInvoice.invoiceId === undefined) {
- return (<>请选择一张{this.state.pickerTitle}>)
- }
- return ()
- }
- pickerOpen = (value: boolean) => {
- if (this.state.disabled) {
- alert("请先选择出发票据")
- } else {
- this.setState({pickerOpen: value})
- }
-
- }
- confirm = () => {
- this.setState({pickerOpen: false})
- }
- cancelSelect = () => {
- this.onChange(undefined)
- this.setState({selectedInvoice: {}})
- }
-
- click = (invoice: any, status: boolean) => {
- if (status) {
- this.setState({selectedInvoice: invoice})
- this.onChange(invoice)
- }
- }
-
- static getDerivedStateFromProps(nextProps: any, prevState: any) {
- return {
- after: nextProps.after,
- before: nextProps.before,
- occupiedInvoices: nextProps.occupiedInvoices,
- }
- }
-
- changePage: PaginationProps['onChange'] = (page) => {
- console.log(this.state.ocuppiedInvoices)
- this.requestInvoices(page, this.state.searchOptions)
- };
- checkSelected = (invoice: Invoice) => {
- for (let i = 0; i < this.state.occupiedInvoices.length; i++) {
- if (this.state.occupiedInvoices[i].invoiceId === invoice.invoiceId) {
- return -3
- }
- }
- if (this.state.after !== 0 && this.state.after > Number(Date.parse(invoice.invoiceDate)))
- return -1
- if (this.state.before !== 0 && this.state.before < Number(Date.parse(invoice.invoiceDate)))
- return -2
- if (this.state.selectedInvoice.invoiceId === invoice.invoiceId)
- return 1
- return 0
- }
- cardList = () => {
- let cards = []
- const maxSize = Math.min(4, this.state.invoices.length)
- for (let i = 0; i < maxSize; i += 2) {
- if (i + 1 >= this.state.invoices.length) {
- cards.push(
-
-
-
-
-
)
- } else {
- cards.push(
-
-
-
-
-
-
-
-
)
- }
- }
- return (
- <>{cards}>
- )
- }
-
- render() {
- return (
- <>
-
-
-
-
-
-
- this.pickerOpen(false)}
- destroyOnClose={true}
- footer={[
- ,
-
- ]}
- >
-
- {this.cardList()}
-
-
- >)
- }
-}
+const {Operation} = StatisticCard;
+const openNotification = (hint: string) => {
+ notification.open({
+ message: hint,
+ duration: 1,
+ onClick: () => {
+ console.log('Notification Clicked!');
+ },
+ });
+};
class ReimbursementCreate extends React.Component {
formRef = React.createRef();
invoiceSelector1 = React.createRef();
invoiceSelector2 = React.createRef();
- //invoiceSelector3 = React.createRef();
+ invoiceSelector3 = React.createRef();
departments: { departmentId: number, departmentName: string }[] = [];
constructor(props: {}) {
@@ -367,6 +49,7 @@ class ReimbursementCreate extends React.Component {
departmentName: store.getState().staff.managingDepartment.departmentName,
})
}
+ console.log(store.getState().staff.staffDepartments)
store.getState().staff.staffDepartments.forEach((item) => {
this.departments.push({
departmentId: item.departmentId,
@@ -381,6 +64,7 @@ class ReimbursementCreate extends React.Component {
icon: ,
})
})
+ console.log(store.getState().staff.staffDepartments)
this.state = {
loading: false,
open: this.props.open,
@@ -413,9 +97,44 @@ class ReimbursementCreate extends React.Component {
//console.log('click', e.key,this.departments.find((item)=>item.departmentId.toString()===e.key));
};
+ submitCheck = () => {
+ return {ok:true,msg:""}
+ }
submit = () => {
- console.log(this.formRef.current?.getFieldsValue())
+ let checkResult = this.submitCheck()
+ if(!checkResult.ok){
+ openNotification(checkResult.msg)
+ return
+ }
+ let otherInvoices = null
+ if(this.state.otherInvoices?.length>0){
+ otherInvoices = ""
+ for(let i=0;i {
+
+ openNotification("提交成功")
+ this.setState({open: false})
+ }).catch(error => {
+ console.log(error)
+ openNotification("提交失败")
+ })
}
cancel = () => {
this.setState({open: false})
@@ -448,31 +167,34 @@ class ReimbursementCreate extends React.Component {
this.setState(state)
}
- getOccupiedInvoices = (type:number) => {
- let res=[]
- if(type===1){
- this.state.otherInvoices?.forEach((item:Invoice)=>{
+ getOccupiedInvoices = (type: number) => {
+ let res = []
+ if (type === 1) {
+ this.state.otherInvoices?.forEach((item: Invoice) => {
res.push(item)
})
- if(this.state.destinationInvoice!==null&&this.state.destinationInvoice!==undefined)
+ if (this.state.destinationInvoice !== null && this.state.destinationInvoice !== undefined)
res.push(this.state.destinationInvoice)
- }else if(type===2) {
+ } else if (type === 2) {
this.state.otherInvoices?.forEach((item: Invoice) => {
res.push(item)
})
if (this.state.departureInvoice !== null && this.state.departureInvoice !== undefined)
res.push(this.state.departureInvoice)
- }else if(type===3){
- if(this.state.departureInvoice!==null&&this.state.departureInvoice!==undefined)
+ } else if (type === 3) {
+ if (this.state.departureInvoice !== null && this.state.departureInvoice !== undefined)
res.push(this.state.departureInvoice)
- if(this.state.destinationInvoice!==null&&this.state.destinationInvoice!==undefined)
+ if (this.state.destinationInvoice !== null && this.state.destinationInvoice !== undefined)
res.push(this.state.destinationInvoice)
}
return res
}
+
render() {
return (
{
{
-
+
+
+
-
+
+
+ +
+
+ +
+ 0 ?
+ (this.state.otherInvoices.map((item:Invoice) => item.invoiceAmount).reduce((a:number, b:number) => a + b)/100.0).toFixed(2) : 0,
+ }}
+ />
+ =
+ 0 ?
+ this.state.otherInvoices.map((item:Invoice) => item.invoiceAmount).reduce((a:number, b:number) => a + b) : 0))/100.0).toFixed(2) ,
+ suffix: '元',
+ }}
+ />
+
)
}
diff --git a/src/pages/reimbursement/mine/component/MultiInvoiceSelector.tsx b/src/pages/reimbursement/mine/component/MultiInvoiceSelector.tsx
new file mode 100644
index 0000000..391e8a9
--- /dev/null
+++ b/src/pages/reimbursement/mine/component/MultiInvoiceSelector.tsx
@@ -0,0 +1,371 @@
+import {Invoice} from "../../../../models/Reimbursement";
+import {Button, Card, Col, Modal, Pagination, PaginationProps, Popover, Row, Tag} from "antd";
+import axiosInstance, {baseUrl} from "../../../../utils/axiosInstance";
+import {invoiceTypeNameMap} from "../../../../models/Invoice";
+import React from "react";
+import {store} from "../../../../models/store";
+import {ExclamationCircleOutlined} from "@ant-design/icons";
+
+
+class InvoiceCheckboxCard extends React.Component {
+
+ constructor(props: {
+ invoice: any;
+ hidden: boolean;
+ selected: number;
+ 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: number;
+ index: number;
+ }) {
+ return {
+ invoice: props.invoice,
+ hidden: props.hidden,
+ selected: props.selected,
+ index: props.index,
+ }
+ }
+
+ select(e: any) {
+ if (this.state.selected === 0) {
+ this.setState({selected: 1})
+ this.props.click(this.state.invoice, true)
+ } else if (this.state.selected === 1) {
+ this.setState({selected: 0})
+ this.props.click(this.state.invoice, false)
+ }
+ }
+
+ getTag = () => {
+ if (this.state.selected === 1)
+ return 已选择
+ else if (this.state.selected === 0)
+ return 待选择
+ else if (this.state.selected === -1)
+ return 不可选
+ else if (this.state.selected === -2)
+ return 不可选
+ else if (this.state.selected === -3)
+ return 不可选
+ }
+
+ render() {
+ return (
+ = 0 ? 1 : 0.7)
+ }}
+ onClick={(e) => {
+ this.select(e)
+ }}
+ cover={}
+ // actions={[ {
+ // this.select(e)
+ // }} defaultChecked={this.state.selected}/>]}
+ >
+
+
+
¥{(this.state.invoice.invoiceAmount / 100.0).toFixed(2)}
+ {this.getTag()}
+
+ {invoiceTypeNameMap.get(this.state.invoice.invoiceKind)}
+ {this.state.invoice.invoiceName}
+ {this.state.invoice.invoiceNote}
+ {this.state.invoice.invoiceDate}
+
+
+
+ )
+ }
+}
+
+class MultiInvoiceSelector extends React.Component {
+ value: any
+ onChange: any
+ availableInvoiceKinds = [0, 2, 5, 9, 10, 13]
+
+ constructor(props: {
+ disabled: boolean;
+ pickerOpen: boolean;
+ pickerTitle: string;
+ value: any;
+ onChange: any;
+ after: number;
+ before: number;
+ occupiedInvoices: Invoice[];
+ }) {
+ super(props);
+ this.value = props.value
+ this.onChange = props.onChange
+ this.state = {
+ disabled: props.disabled,
+ occupiedInvoices: props.occupiedInvoices,
+ selectedInvoice: [],
+ singleLimit: false,
+ invoices: [],
+ pickerOpen: props.pickerOpen,
+ pickerTitle: props.pickerTitle,
+ currentPage: 1,
+ pageSize: 6,
+ total: 0,
+ after: props.after,
+ before: props.before,
+ searchOptions: {
+ invoiceNote: "",
+ invoiceDateStart: 0,
+ invoiceDateEnd: 0,
+ invoiceKind: -1,
+ }
+ }
+ this.requestInvoices(1, this.state.searchOptions)
+ }
+
+
+ requestInvoices(page: number, searchOptions: any) {
+ let params: any = {
+ pageNum: page - 1,
+ pageSize: this.state.pageSize,
+ invoiceUploaderId: store.getState().token.staffId,
+ invoiceStatus: 0,
+ sortBy: "invoiceDate",
+ asc: true,
+ }
+ if (searchOptions.invoiceNote !== "") {
+ params.invoiceNote = searchOptions.invoiceNote
+ }
+ if (searchOptions.invoiceDateStart !== 0) {
+ params.invoiceDateStart = searchOptions.invoiceDateStart
+ }
+ if (searchOptions.invoiceDateEnd !== 0) {
+ params.invoiceDateEnd = searchOptions.invoiceDateEnd
+ }
+ if (searchOptions.invoiceKind !== -1) {
+ params.invoiceKinds = searchOptions.invoiceKind
+ } else {
+ // params.invoiceKinds = "0,2,5,9,10,13"
+ }
+ console.log(params)
+ axiosInstance.get('common/invoice', {params: params}).then(response => {
+ this.setState({
+ total: response.data.total, invoices: response.data.records,
+ currentPage: page, searchOptions: searchOptions
+ })
+ }).catch(error => {
+ console.log(error)
+ })
+
+ }
+
+ static getDerivedStateFromProps(props: {
+ after: number;
+ before: number;
+ occupiedInvoices: Invoice[];
+ onChange: any;
+ }, state: any) {
+ let prev = state.selectedInvoice
+ let changed = false
+ if (props.after !== 0) {
+ for (let i = 0; i < prev.length; i++) {
+ if (Number(Date.parse(prev[i].invoiceDate) < props.after)) {
+ prev.splice(i, 1)
+ changed = true
+ }
+ }
+ }
+ if (!changed)
+ return {
+ after: props.after,
+ before: props.before,
+ occupiedInvoices: props.occupiedInvoices,
+ }
+
+ return {
+ selectedInvoice: prev,
+ after: props.after,
+ before: props.before,
+ occupiedInvoices: props.occupiedInvoices,
+ }
+ }
+
+ setSearchOptions = (options: any) => {
+ this.setState({searchOptions: options})
+ }
+ pickerOpen = (value: boolean) => {
+ if (this.state.disabled) {
+ alert("请先选择出发票据")
+ } else {
+ this.setState({pickerOpen: value})
+ }
+
+ }
+ confirm = () => {
+ this.setState({pickerOpen: false})
+ }
+ cancelSelect = () => {
+ this.onChange(undefined)
+ this.setState({selectedInvoice: []})
+ }
+
+ click = (invoice: any, status: boolean) => {
+
+ console.log(invoice)
+ if (status) {
+ let prev = this.state.selectedInvoice
+ for (let i = 0; i < prev.length; i++) {
+ if (prev[i].invoiceId === invoice.invoiceId) {
+ return
+ }
+ }
+ prev.push(invoice)
+ this.setState({selectedInvoice: prev})
+ this.onChange(prev)
+ } else {
+ let prev = this.state.selectedInvoice
+ console.log(prev)
+ for (let i = 0; i < prev.length; i++) {
+ if (prev[i].invoiceId === invoice.invoiceId) {
+ prev.splice(i, 1)
+ this.setState({selectedInvoice: prev})
+ this.onChange(prev)
+ return
+ }
+ }
+ }
+ }
+
+
+ changePage: PaginationProps['onChange'] = (page) => {
+ console.log(this.state.ocuppiedInvoices)
+ this.requestInvoices(page, this.state.searchOptions)
+ };
+ checkSelected = (invoice: Invoice) => {
+ for (let i = 0; i < this.state.occupiedInvoices.length; i++) {
+ if (this.state.occupiedInvoices[i].invoiceId === invoice.invoiceId) {
+ return -3
+ }
+ }
+ if (this.state.after !== 0 && this.state.after > Number(Date.parse(invoice.invoiceDate)))
+ return -1
+ // if (this.state.before !== 0 && this.state.before < Number(Date.parse(invoice.invoiceDate)))
+ // return -2
+ for (let i = 0; i < this.state.selectedInvoice.length; i++) {
+ if (this.state.selectedInvoice[i] === invoice) {
+ return 1
+ }
+ }
+ return 0
+ }
+ cardList = () => {
+ let cards = []
+ const maxSize = Math.min(this.state.pageSize, this.state.invoices.length)
+ for (let i = 0; i < maxSize; i += 3) {
+ if (i + 1 >= this.state.invoices.length) {
+ cards.push(
+
+
+
+
+
)
+ } else if (i + 2 >= this.state.invoices.length) {
+ cards.push(
+
+
+
+
+
+
+
+
)
+ } else {
+ cards.push(
+
+
+
+
+
+
+
+
+
+
+
)
+ }
+ }
+ return (
+ <>{cards}>
+ )
+ }
+
+ render() {
+ return (
+ <>
+
+
+
+ this.pickerOpen(false)}
+ destroyOnClose={true}
+ footer={[
+ ,
+
+ ]}
+ >
+
+ {this.cardList()}
+
+
+ >)
+ }
+}
+
+export default MultiInvoiceSelector;
\ No newline at end of file
diff --git a/src/pages/reimbursement/mine/component/SingleInvoiceSelector.tsx b/src/pages/reimbursement/mine/component/SingleInvoiceSelector.tsx
new file mode 100644
index 0000000..0c4d703
--- /dev/null
+++ b/src/pages/reimbursement/mine/component/SingleInvoiceSelector.tsx
@@ -0,0 +1,369 @@
+import {Invoice} from "../../../../models/Reimbursement";
+import {Button, Card, Col, Modal, Pagination, PaginationProps, Popover, Row, Tag, notification} from "antd";
+import axiosInstance, {baseUrl} from "../../../../utils/axiosInstance";
+import {invoiceTypeNameMap} from "../../../../models/Invoice";
+import React from "react";
+import {store} from "../../../../models/store";
+import {ExclamationCircleOutlined} from "@ant-design/icons";
+
+const openNotification = (hint: string) => {
+ notification.open({
+ message: hint,
+ duration: 1,
+ onClick: () => {
+ console.log('Notification Clicked!');
+ },
+ });
+};
+
+function InvoiceCard(props: { invoice: Invoice }) {
+ const invoice = props.invoice;
+ console.log(invoice);
+ return (
+ }
+ >
+
+
¥{(invoice.invoiceAmount / 100.0).toFixed(2)}
+ {invoiceTypeNameMap.get(invoice.invoiceKind)}
+ {(invoice.invoiceDeparture !== null && invoice.invoiceDestination !== null &&
+ {invoice.invoiceDeparture}{" → "}
+ {invoice.invoiceDestination})}
+ {invoice.invoiceDate}
+
+
+ )
+}
+
+class InvoiceRadioCard extends React.Component {
+
+ constructor(props: {
+ invoice: any;
+ hidden: boolean;
+ selected: number;
+ 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: number;
+ index: number;
+ }) {
+ return {
+ invoice: props.invoice,
+ hidden: props.hidden,
+ selected: props.selected,
+ index: props.index,
+ }
+ }
+
+ select(e: any) {
+ if (this.state.selected !== 0)
+ return
+ this.setState({selected: 1})
+ this.props.click(this.props.invoice, true)
+ }
+
+ getTag = () => {
+ if (this.state.selected === 1)
+ return 已选择
+ else if (this.state.selected === 0)
+ return 待选择
+ else if (this.state.selected === -1)
+ return 不可选
+ else if (this.state.selected === -2)
+ return 不可选
+ else if (this.state.selected === -3)
+ return 不可选
+ }
+
+ render() {
+ return (
+ = 0 ? 1 : 0.7)
+ }}
+ onClick={(e) => {
+ this.select(e)
+ }}
+ cover={}
+ // actions={[ {
+ // this.select(e)
+ // }} defaultChecked={this.state.selected}/>]}
+ >
+
+
+
¥{(this.state.invoice.invoiceAmount / 100.0).toFixed(2)}
+ {this.getTag()}
+
+ {invoiceTypeNameMap.get(this.state.invoice.invoiceKind)}
+ {(this.state.invoice.invoiceDeparture !== null && this.state.invoice.invoiceDestination !== null &&
+ {this.state.invoice.invoiceDeparture}{" → "}
+ {this.state.invoice.invoiceDestination})}
+ {this.state.invoice.invoiceDate}
+
+
+
+ )
+ }
+}
+
+class SingleInvoiceSelector extends React.Component {
+ value: any
+ onChange: any
+ availableInvoiceKinds = [0, 2, 5, 9, 10, 13]
+
+ constructor(props: {
+ disabled: boolean;
+ pickerOpen: boolean;
+ pickerTitle: string;
+ value: any;
+ onChange: any;
+ after: number;
+ before: number;
+ occupiedInvoices: Invoice[];
+ }) {
+ super(props);
+ this.value = props.value
+ this.onChange = props.onChange
+ this.state = {
+ disabled: props.disabled,
+ occupiedInvoices: props.occupiedInvoices,
+ selectedInvoice: {},
+ singleLimit: true,
+ invoices: [],
+ pickerOpen: props.pickerOpen,
+ pickerTitle: props.pickerTitle,
+ currentPage: 1,
+ pageSize: 6,
+ total: 0,
+ after: props.after,
+ before: props.before,
+ searchOptions: {
+ invoiceNote: "",
+ invoiceDateStart: 0,
+ invoiceDateEnd: 0,
+ invoiceKind: -1,
+ }
+ }
+ this.requestInvoices(1, this.state.searchOptions)
+ }
+
+
+ requestInvoices(page: number, searchOptions: any) {
+ let params: any = {
+ pageNum: page - 1,
+ pageSize: this.state.pageSize,
+ invoiceUploaderId: store.getState().token.staffId,
+ invoiceStatus: 0,
+ sortBy: "invoiceDate",
+ asc: true,
+ }
+ if (searchOptions.invoiceNote !== "") {
+ params.invoiceNote = searchOptions.invoiceNote
+ }
+ if (searchOptions.invoiceDateStart !== 0) {
+ params.invoiceDateStart = searchOptions.invoiceDateStart
+ }
+ if (searchOptions.invoiceDateEnd !== 0) {
+ params.invoiceDateEnd = searchOptions.invoiceDateEnd
+ }
+ if (searchOptions.invoiceKind !== -1) {
+ params.invoiceKinds = searchOptions.invoiceKind
+ } else {
+ params.invoiceKinds = "0,2,5,9,10,13"
+ }
+ console.log(params)
+ axiosInstance.get('common/invoice', {params: params}).then(response => {
+ this.setState({
+ total: response.data.total, invoices: response.data.records,
+ currentPage: page, searchOptions: searchOptions
+ })
+ }).catch(error => {
+ console.log(error)
+ })
+
+ }
+
+ setSearchOptions = (options: any) => {
+ this.setState({searchOptions: options})
+ }
+ invoiceCard = () => {
+ if (this.state.selectedInvoice.invoiceId === null || this.state.selectedInvoice.invoiceId === undefined) {
+ return (<>请选择一张{this.state.pickerTitle}>)
+ }
+ return ()
+ }
+ pickerOpen = (value: boolean) => {
+ if (this.state.disabled) {
+ openNotification("请先选择出发票据")
+ } else {
+ this.setState({pickerOpen: value})
+ }
+
+ }
+ confirm = () => {
+ this.setState({pickerOpen: false})
+ }
+ cancelSelect = () => {
+ this.onChange(undefined)
+ this.setState({selectedInvoice: {}})
+ }
+
+ click = (invoice: any, status: boolean) => {
+ if (status) {
+ this.setState({selectedInvoice: invoice})
+ this.onChange(invoice)
+ }
+ }
+
+ static getDerivedStateFromProps(nextProps: any, prevState: any) {
+ return {
+ after: nextProps.after,
+ before: nextProps.before,
+ occupiedInvoices: nextProps.occupiedInvoices,
+ disabled: nextProps.disabled,
+ }
+ }
+
+ changePage: PaginationProps['onChange'] = (page) => {
+ console.log(this.state.ocuppiedInvoices)
+ this.requestInvoices(page, this.state.searchOptions)
+ };
+ checkSelected = (invoice: Invoice) => {
+ for (let i = 0; i < this.state.occupiedInvoices.length; i++) {
+ if (this.state.occupiedInvoices[i].invoiceId === invoice.invoiceId) {
+ return -3
+ }
+ }
+ if (this.state.after !== 0 && this.state.after > Number(Date.parse(invoice.invoiceDate)))
+ return -1
+ if (this.state.before !== 0 && this.state.before < Number(Date.parse(invoice.invoiceDate)))
+ return -2
+ if (this.state.selectedInvoice.invoiceId === invoice.invoiceId)
+ return 1
+ return 0
+ }
+ cardList = () => {
+ let cards = []
+ const maxSize = Math.min(this.state.pageSize, this.state.invoices.length)
+ for (let i = 0; i < maxSize; i += 3) {
+ if (i + 1 >= this.state.invoices.length) {
+ cards.push(
+
+
+
+
+
)
+ } else if (i + 2 >= this.state.invoices.length) {
+ cards.push(
+
+
+
+
+
+
+
+
)
+ } else {
+ cards.push(
+
+
+
+
+
+
+
+
+
+
+
)
+ }
+ }
+ return (
+ <>{cards}>
+ )
+ }
+
+ render() {
+ return (
+ <>
+
+
+
+
+
+
+ this.pickerOpen(false)}
+ destroyOnClose={true}
+ footer={[
+ ,
+
+ ]}
+ >
+
+ {this.cardList()}
+
+
+ >)
+ }
+}
+
+export default SingleInvoiceSelector
\ No newline at end of file