diff --git a/src/pages/reimbursement/mine/MyReimbursement.tsx b/src/pages/reimbursement/mine/MyReimbursement.tsx index f316598..ca14c8c 100644 --- a/src/pages/reimbursement/mine/MyReimbursement.tsx +++ b/src/pages/reimbursement/mine/MyReimbursement.tsx @@ -70,7 +70,8 @@ const statusEnum = { class Subpage extends React.Component { tableAction = React.createRef(); - departments=new Map() + departments = new Map() + constructor(props: {}) { super(props); this.state = { @@ -207,7 +208,7 @@ class Subpage extends React.Component { result.push({ id: value[i].reimbursementSubmitDepartment.departmentId, 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, duration: value[i].reimbursementTripDuration, OD: [value[i].reimbursementDepartureName, value[i].reimbursementDestinationName], amount: value[i].reimbursementInvoiceAmount + value[i].reimbursementAdditionalAmount, @@ -249,10 +250,20 @@ class Subpage extends React.Component { pageSize: pageSize, } if (filter.status !== undefined && filter.status !== null && filter.status.length !== 0) { - params['reimbursementStatuses'] = qs.stringify({reimbursementStatuses: filter.status}, {arrayFormat: 'indices'}) + params['reimbursementStatuses'] = "" + for (let i = 0; i < filter.status.length; i++) { + if (i !== 0) + params['reimbursementStatuses'] += ',' + params['reimbursementStatuses'] += filter.status[i].toString() + } } if (filter.departmentId !== undefined && filter.departmentId !== null && filter.departmentId.length !== 0) { - params['reimbursementSubmitDepartments'] = qs.stringify({reimbursementSubmitDepartments: filter.departmentId}, {arrayFormat: 'indices'}) + params['reimbursementSubmitDepartments'] = "" + for (let i = 0; i < filter.departmentId.length; i++) { + if (i !== 0) + params['reimbursementSubmitDepartments'] += ',' + params['reimbursementSubmitDepartments'] += filter.departmentId[i].toString() + } } if (sort.id !== undefined && sort.id !== null) { params['sortBy'] = "reimbursementId" @@ -266,7 +277,7 @@ class Subpage extends React.Component { params['sortBy'] = "reimbursementSubmitTime" params['asc'] = (sort.submitDateTime === "ascend") } - if(sort.beginDate !== undefined && sort.beginDate !== null){ + if (sort.beginDate !== undefined && sort.beginDate !== null) { params['sortBy'] = "reimbursementDepartureDate" params['asc'] = (sort.beginDate === "ascend") } @@ -293,69 +304,70 @@ class Subpage extends React.Component { render() { return ( <> - - - actionRef={this.tableAction} - columns={this.columns} - request={async (params, sorter, filter) => { - // 表单搜索项会从 params 传入，传递给后端接口。 - console.log(params, sorter, filter); - return this.updateRequest(params.current, params.pageSize, sorter, filter) + + + actionRef={this.tableAction} + columns={this.columns} + request={async (params, sorter, filter) => { + // 表单搜索项会从 params 传入，传递给后端接口。 + console.log(params, sorter, filter); + return this.updateRequest(params.current, params.pageSize, sorter, filter) - }} - rowKey="key" - pagination={{ - defaultPageSize: 5, - pageSizeOptions: [5, 10, 20, 50, 100], - showQuickJumper: true, - }} - // toolbar={{ - // title: '这里是标题', - // subTitle: '这里是子标题', - // tooltip: '这是一个段描述', - // search: { - // onSearch: (value: string) => { - // alert(value); - // }, - // }, - // }} - search={{ - defaultCollapsed: false, - labelWidth: 'auto', - optionRender: ({searchText}, {form}, dom) => { - // console.log(searchConfig, formProps, dom) - return [ -
- { - this.search(value, form, dom) - }} - enterButton + }} + rowKey="key" + pagination={{ + defaultPageSize: 5, + pageSizeOptions: [5, 10, 20, 50, 100], + showQuickJumper: true, + }} + // toolbar={{ + // title: '这里是标题', + // subTitle: '这里是子标题', + // tooltip: '这是一个段描述', + // search: { + // onSearch: (value: string) => { + // alert(value); + // }, + // }, + // }} + search={{ + defaultCollapsed: false, + labelWidth: 'auto', + optionRender: ({searchText}, {form}, dom) => { + // console.log(searchConfig, formProps, dom) + return [ +
+ { + this.search(value, form, dom) + }} + enterButton - /> - -
- ] - } - }} + /> + +
+ ] + } + }} - dateFormatter="string" - // toolBarRender={() => [ - // , - // , - // , - // ]} - /> + dateFormatter="string" + // toolBarRender={() => [ + // , + // , + // , + // ]} + /> ); } } diff --git a/src/pages/reimbursement/mine/ReimbursementCreate.tsx b/src/pages/reimbursement/mine/ReimbursementCreate.tsx index aa503e0..6eb1322 100644 --- a/src/pages/reimbursement/mine/ReimbursementCreate.tsx +++ b/src/pages/reimbursement/mine/ReimbursementCreate.tsx @@ -1,202 +1,44 @@ import React, {Key, ReactNode} from "react"; import {ReimbursementApplication} from "../../../models/Reimbursement"; -import {Button, Card, Col, Form, Input, InputNumber, Modal, Popover, Radio, Row, Select} from "antd"; +import { + Button, + Col, + Form, + Input, + InputNumber, + Modal, notification, + Row +} from "antd"; import {FormInstance} from "antd/es/form"; import {Invoice} from "../../../models/Reimbursement"; -import axiosInstance from "../../../utils/axiosInstance"; +import axiosInstance, {baseUrl} 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"; +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; - 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: { - pickerOpen: boolean; - pickerTitle: string; - value: any; - onChange: any; - }) { - super(props); - this.value = props.value - this.onChange = props.onChange - this.state = { - selectedIndex: -1, - selectedInvoice: {}, - singleLimit: true, - invoices: [{invoiceId:1},{invoiceId:2},{invoiceId:3}], - 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 = () => { - this.setState({pickerOpen: false}) - } - cancelSelect = () => { - 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() { - 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: {}) { @@ -207,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, @@ -221,6 +64,7 @@ class ReimbursementCreate extends React.Component { icon: , }) }) + console.log(store.getState().staff.staffDepartments) this.state = { loading: false, open: this.props.open, @@ -232,21 +76,14 @@ class ReimbursementCreate extends React.Component { }, back: false, duration: 0, + departureInvoice: null, + destinationInvoice: null, + otherInvoices: [], + departureName: "", + destinationName: "", + note: "", + departmentId: -1, } - 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) - }) } handleMenuClick: MenuProps['onClick'] = (e) => { @@ -260,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}) @@ -272,23 +144,57 @@ class ReimbursementCreate extends React.Component { value = 0 this.setState({duration: value}) } - formFieldsChange = (changedFields: any, allFields: any) => { - 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) + formValuesChange = (changedValues: any, allValues: any) => { + let state: any = {} + console.log(allValues) + if (allValues.departureInvoice !== undefined && allValues.departureInvoice !== null && allValues.destinationInvoice !== undefined && allValues.destinationInvoice !== null) { + state['back'] = true + state["duration"] = (Number(Date.parse(allValues.destinationInvoice.invoiceDate)) - Number(Date.parse(allValues.departureInvoice.invoiceDate))) / 1000 / 60 / 60 / 24 + 1 + if (state["duration"] < 0) + state["duration"] = 0 + } else { + state['back'] = false + state["duration"] = 0 } - console.log(allFields) + this.formRef.current?.setFieldsValue({duration: state["duration"]}) + state['departureInvoice'] = allValues.departureInvoice + state["destinationInvoice"] = allValues.destinationInvoice + state["otherInvoices"] = allValues.otherInvoices + state["departureName"] = allValues.departureName + state["destinationName"] = allValues.destinationName + state["note"] = changedValues.note + state["departmentId"] = allValues.departmentId + + this.setState(state) + } + 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) + res.push(this.state.destinationInvoice) + } 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) + res.push(this.state.departureInvoice) + if (this.state.destinationInvoice !== null && this.state.destinationInvoice !== undefined) + res.push(this.state.destinationInvoice) + } + return res } render() { return ( { ]} > -
{ - - + @@ -356,11 +268,51 @@ class ReimbursementCreate extends React.Component { - + + + - + + + + + + + + 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 ( + + ) + } +} + +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 ( + + ) + } +} + +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