Merge remote-tracking branch 'origin/main' into main
# Conflicts: # src/pages/Invoice/mine/InvoiceListView.tsxmain
commit
83f000fe47
|
|
@ -71,6 +71,7 @@ const statusEnum = {
|
|||
class Subpage extends React.Component<any, any> {
|
||||
tableAction = React.createRef<ActionType>();
|
||||
departments = new Map<number, string>()
|
||||
|
||||
constructor(props: {}) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
|
@ -249,10 +250,20 @@ class Subpage extends React.Component<any, any> {
|
|||
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"
|
||||
|
|
@ -336,7 +347,8 @@ class Subpage extends React.Component<any, any> {
|
|||
enterButton
|
||||
|
||||
/>
|
||||
<Button key="create" type="primary" onClick={() => this.create()} style={{width: 100}}>
|
||||
<Button key="create" type="primary" onClick={() => this.create()}
|
||||
style={{width: 100}}>
|
||||
新建报销单
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<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: {
|
||||
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 (<InvoiceCard invoice={this.state.selectedInvoice}/>)
|
||||
}
|
||||
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(
|
||||
<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() {
|
||||
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="clear" type="primary" onClick={this.cancelSelect}>
|
||||
清除
|
||||
</Button>,
|
||||
<Button key="confirm" type="primary" onClick={this.confirm}>
|
||||
确定
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
|
||||
{this.cardList()}
|
||||
</Modal>
|
||||
</>)
|
||||
}
|
||||
}
|
||||
const {Operation} = StatisticCard;
|
||||
|
||||
const openNotification = (hint: string) => {
|
||||
notification.open({
|
||||
message: hint,
|
||||
duration: 1,
|
||||
onClick: () => {
|
||||
console.log('Notification Clicked!');
|
||||
},
|
||||
});
|
||||
};
|
||||
class ReimbursementCreate extends React.Component<any, any> {
|
||||
formRef = React.createRef<FormInstance>();
|
||||
invoiceSelector1 = React.createRef<SingleInvoiceSelector>();
|
||||
invoiceSelector2 = React.createRef<SingleInvoiceSelector>();
|
||||
//invoiceSelector3 = React.createRef<InvoiceSelector>();
|
||||
invoiceSelector3 = React.createRef<MultiInvoiceSelector>();
|
||||
departments: { departmentId: number, departmentName: string }[] = [];
|
||||
|
||||
constructor(props: {}) {
|
||||
|
|
@ -207,6 +49,7 @@ class ReimbursementCreate extends React.Component<any, any> {
|
|||
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<any, any> {
|
|||
icon: <UserOutlined/>,
|
||||
})
|
||||
})
|
||||
console.log(store.getState().staff.staffDepartments)
|
||||
this.state = {
|
||||
loading: false,
|
||||
open: this.props.open,
|
||||
|
|
@ -232,21 +76,14 @@ class ReimbursementCreate extends React.Component<any, any> {
|
|||
},
|
||||
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<any, any> {
|
|||
//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<this.state.otherInvoices.length;i++){
|
||||
if(i!==0){
|
||||
otherInvoices += ","
|
||||
}
|
||||
otherInvoices += this.state.otherInvoices[i].invoiceId.toString()
|
||||
}
|
||||
}
|
||||
let params={
|
||||
submitDepartmentId:this.state.selectedDepartment.id,
|
||||
reimbursementNote:this.state.note?this.state.note:"",
|
||||
reimbursementDepartureInvoiceId: this.state.departureInvoice.invoiceId,
|
||||
reimbursementDestinationInvoiceId: this.state.destinationInvoice?.invoiceId,
|
||||
reimbursementOtherInvoiceIds: otherInvoices,
|
||||
reimbursementDepartureName: this.state.departureName,
|
||||
reimbursementDestinationName: this.state.destinationName,
|
||||
reimbursementDuration: this.state.duration,
|
||||
}
|
||||
axiosInstance.post("common/reimbursement", params).then(response => {
|
||||
|
||||
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<any, any> {
|
|||
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)
|
||||
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 {
|
||||
this.setState({back: false, duration: 0})
|
||||
this.formRef.current?.setFieldValue('duration', 0)
|
||||
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 (
|
||||
<Modal
|
||||
|
||||
width={800}
|
||||
open={this.state.open}
|
||||
title="出差报销单"
|
||||
onOk={this.submit}
|
||||
|
|
@ -300,7 +206,7 @@ class ReimbursementCreate extends React.Component<any, any> {
|
|||
</Button>]}
|
||||
>
|
||||
|
||||
<Form ref={this.formRef} onFieldsChange={this.formFieldsChange}
|
||||
<Form ref={this.formRef} onValuesChange={this.formValuesChange}
|
||||
initialValues={{
|
||||
departmentId: this.state.selectedDepartment.id,
|
||||
destinationName: '',
|
||||
|
|
@ -324,14 +230,20 @@ class ReimbursementCreate extends React.Component<any, any> {
|
|||
<Row gutter={18}>
|
||||
<Col span={12}>
|
||||
<Form.Item help="" label="出发票据" name="departureInvoice" rules={[{required: true}]}>
|
||||
<SingleInvoiceSelector invoices={[]} pickerOpen={false}
|
||||
<SingleInvoiceSelector pickerOpen={false} after={0}
|
||||
before={this.state.destinationInvoice !== null && this.state.destinationInvoice !== undefined ? Number(Date.parse(this.state.destinationInvoice.invoiceDate)) : 0}
|
||||
occupiedInvoices={this.getOccupiedInvoices(1)}
|
||||
pickerTitle={"出发票据"} ref={this.invoiceSelector1}/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label="返程票据" name="destinationInvoice" rules={[{required: false}]}>
|
||||
<SingleInvoiceSelector invoices={[]} pickerOpen={false}
|
||||
pickerTitle={"返程票据"} ref={this.invoiceSelector2}/>
|
||||
<SingleInvoiceSelector pickerOpen={false}
|
||||
//disabled={this.state.departureInvoice === null || this.state.departureInvoice === undefined}
|
||||
after={this.state.departureInvoice !== null && this.state.departureInvoice !== undefined ? Number(Date.parse(this.state.departureInvoice.invoiceDate)) : 0}
|
||||
before={0} occupiedInvoices={this.getOccupiedInvoices(2)}
|
||||
pickerTitle={"返程票据"} ref={this.invoiceSelector2}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
@ -356,11 +268,51 @@ class ReimbursementCreate extends React.Component<any, any> {
|
|||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Form.Item label="附加票据" name="otherInvoices" rules={[{required: false}]}>
|
||||
<MultiInvoiceSelector pickerOpen={false}
|
||||
after={0}
|
||||
//after={this.state.departureInvoice !== null && this.state.departureInvoice !== undefined ? Number(Date.parse(this.state.departureInvoice.invoiceDate)) : 0}
|
||||
before={0} occupiedInvoices={this.getOccupiedInvoices(3)}
|
||||
pickerTitle={"附加票据"} ref={this.invoiceSelector3}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="备注信息" name="note" rules={[{required: false}]}>
|
||||
<Input.TextArea/>
|
||||
</Form.Item>
|
||||
|
||||
<StatisticCard.Group>
|
||||
<StatisticCard
|
||||
statistic={{
|
||||
title: '出发票据金额',
|
||||
value: this.state.departureInvoice !== null && this.state.departureInvoice !== undefined ? (this.state.departureInvoice.invoiceAmount/100.0).toFixed(2): 0,
|
||||
}}
|
||||
/>
|
||||
<Operation>+</Operation>
|
||||
<StatisticCard
|
||||
statistic={{
|
||||
title: '返程票据金额',
|
||||
value: this.state.destinationInvoice !== null && this.state.destinationInvoice !== undefined ? (this.state.destinationInvoice.invoiceAmount/100.0).toFixed(2) : 0,
|
||||
}}
|
||||
/>
|
||||
<Operation>+</Operation>
|
||||
<StatisticCard
|
||||
statistic={{
|
||||
title: '附加票据金额',
|
||||
value: this.state.otherInvoices!==null&&this.state.otherInvoices!==undefined&&this.state.otherInvoices.length > 0 ?
|
||||
(this.state.otherInvoices.map((item:Invoice) => item.invoiceAmount).reduce((a:number, b:number) => a + b)/100.0).toFixed(2) : 0,
|
||||
}}
|
||||
/>
|
||||
<Operation>=</Operation>
|
||||
<StatisticCard
|
||||
statistic={{
|
||||
title: '票据总金额',
|
||||
value: (((this.state.departureInvoice !== null && this.state.departureInvoice !== undefined ? this.state.departureInvoice.invoiceAmount: 0)
|
||||
+(this.state.destinationInvoice !== null && this.state.destinationInvoice !== undefined ? this.state.destinationInvoice.invoiceAmount : 0)
|
||||
+(this.state.otherInvoices!==null&&this.state.otherInvoices!==undefined&&this.state.otherInvoices.length > 0 ?
|
||||
this.state.otherInvoices.map((item:Invoice) => item.invoiceAmount).reduce((a:number, b:number) => a + b) : 0))/100.0).toFixed(2) ,
|
||||
suffix: '元',
|
||||
}}
|
||||
/>
|
||||
</StatisticCard.Group>
|
||||
</Form>
|
||||
</Modal>)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<any, any> {
|
||||
|
||||
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 <Popover content={"已选作报销凭证"}><Tag color="blue">已选择</Tag></Popover>
|
||||
else if (this.state.selected === 0)
|
||||
return <Popover content={"可用于报销"}><Tag color="green">待选择</Tag></Popover>
|
||||
else if (this.state.selected === -1)
|
||||
return <Popover content={"早于出发日期"}><Tag color="red">不可选</Tag></Popover>
|
||||
else if (this.state.selected === -2)
|
||||
return <Popover content={"晚于返程日期"}><Tag color="red">不可选</Tag></Popover>
|
||||
else if (this.state.selected === -3)
|
||||
return <Popover content={"已作其他用途"}><Tag color="red">不可选</Tag></Popover>
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Card hidden={this.state.hidden}
|
||||
hoverable={true}
|
||||
style={{
|
||||
marginBottom: 30, background: (this.state.selected === 1 ? "lightskyblue" : "#f0f0f0"),
|
||||
opacity: (this.state.selected >= 0 ? 1 : 0.7)
|
||||
}}
|
||||
onClick={(e) => {
|
||||
this.select(e)
|
||||
}}
|
||||
cover={<img alt="thumbnail"
|
||||
src={baseUrl + this.state.invoice.invoiceThumbnailUri}
|
||||
width="300" height="120"/>}
|
||||
// actions={[<Radio checked={this.state.selected} onClick={(e) => {
|
||||
// this.select(e)
|
||||
// }} defaultChecked={this.state.selected}/>]}
|
||||
>
|
||||
<div style={{marginTop: -20, height: 80}}>
|
||||
|
||||
<li style={{
|
||||
fontWeight: "bold",
|
||||
fontSize: 18
|
||||
}}>¥{(this.state.invoice.invoiceAmount / 100.0).toFixed(2)}
|
||||
{this.getTag()}
|
||||
</li>
|
||||
<li>{invoiceTypeNameMap.get(this.state.invoice.invoiceKind)}</li>
|
||||
<li>{this.state.invoice.invoiceName}</li>
|
||||
<li>{this.state.invoice.invoiceNote}</li>
|
||||
<li>{this.state.invoice.invoiceDate}</li>
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
class MultiInvoiceSelector extends React.Component<any, any> {
|
||||
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(
|
||||
<Row gutter={18} key={i}>
|
||||
<Col span={8}>
|
||||
<InvoiceCheckboxCard invoice={this.state.invoices[i]}
|
||||
selected={this.checkSelected(this.state.invoices[i])}
|
||||
hidden={false} index={i}
|
||||
click={this.click}/>
|
||||
</Col>
|
||||
</Row>)
|
||||
} else if (i + 2 >= this.state.invoices.length) {
|
||||
cards.push(
|
||||
<Row gutter={18} key={i}>
|
||||
<Col span={8}>
|
||||
<InvoiceCheckboxCard invoice={this.state.invoices[i]}
|
||||
selected={this.checkSelected(this.state.invoices[i])}
|
||||
hidden={false} index={i}
|
||||
click={this.click}/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InvoiceCheckboxCard invoice={this.state.invoices[i + 1]}
|
||||
selected={this.checkSelected(this.state.invoices[i + 1])}
|
||||
hidden={false} index={i + 1} click={this.click}/>
|
||||
</Col>
|
||||
</Row>)
|
||||
} else {
|
||||
cards.push(
|
||||
<Row gutter={18} key={i}>
|
||||
<Col span={8}>
|
||||
<InvoiceCheckboxCard invoice={this.state.invoices[i]}
|
||||
selected={this.checkSelected(this.state.invoices[i])}
|
||||
hidden={false} index={i}
|
||||
click={this.click}/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InvoiceCheckboxCard invoice={this.state.invoices[i + 1]}
|
||||
selected={this.checkSelected(this.state.invoices[i + 1])}
|
||||
hidden={false} index={i + 1} click={this.click}/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InvoiceCheckboxCard invoice={this.state.invoices[i + 2]}
|
||||
selected={this.checkSelected(this.state.invoices[i + 2])}
|
||||
hidden={false} index={i + 2} click={this.click}/>
|
||||
</Col>
|
||||
</Row>)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<>{cards}</>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
|
||||
<Button name={"select"} onClick={() => this.pickerOpen(true)}>
|
||||
|
||||
{this.state.selectedInvoice === null || this.state.selectedInvoice === undefined ||
|
||||
this.state.selectedInvoice.length === 0 ?
|
||||
"选择" : "修改"}
|
||||
</Button>
|
||||
|
||||
<Modal
|
||||
width={1000}
|
||||
open={this.state.pickerOpen}
|
||||
title={this.state.pickerTitle + "选择"}
|
||||
onOk={this.confirm}
|
||||
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()}
|
||||
<Pagination pageSize={this.state.pageSize} current={this.state.currentPage}
|
||||
onChange={this.changePage} total={this.state.total}/>
|
||||
</Modal>
|
||||
</>)
|
||||
}
|
||||
}
|
||||
|
||||
export default MultiInvoiceSelector;
|
||||
|
|
@ -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 (
|
||||
<Card
|
||||
// hoverable
|
||||
// style={{
|
||||
// width: 250,
|
||||
// height: 300,
|
||||
// margin: 30
|
||||
// }}
|
||||
style={{background: "#f0f0f0"}}
|
||||
cover={<img alt="thumbnail"
|
||||
src={baseUrl + invoice.invoiceThumbnailUri}
|
||||
width="220" height="180"/>}
|
||||
>
|
||||
<div style={{marginTop: -20}}>
|
||||
<li style={{fontWeight: "bold", fontSize: 20}}>¥{(invoice.invoiceAmount / 100.0).toFixed(2)}</li>
|
||||
<li>{invoiceTypeNameMap.get(invoice.invoiceKind)}</li>
|
||||
{(invoice.invoiceDeparture !== null && invoice.invoiceDestination !== null &&
|
||||
<li>{invoice.invoiceDeparture}{" → "}
|
||||
{invoice.invoiceDestination}</li>)}
|
||||
<li>{invoice.invoiceDate}</li>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
class InvoiceRadioCard extends React.Component<any, any> {
|
||||
|
||||
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 <Popover content={"已选作报销凭证"}><Tag color="blue">已选择</Tag></Popover>
|
||||
else if (this.state.selected === 0)
|
||||
return <Popover content={"可用于报销"}><Tag color="green">待选择</Tag></Popover>
|
||||
else if (this.state.selected === -1)
|
||||
return <Popover content={"早于出发日期"}><Tag color="red">不可选</Tag></Popover>
|
||||
else if (this.state.selected === -2)
|
||||
return <Popover content={"晚于返程日期"}><Tag color="red">不可选</Tag></Popover>
|
||||
else if (this.state.selected === -3)
|
||||
return <Popover content={"已作其他用途"}><Tag color="red">不可选</Tag></Popover>
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Card hidden={this.state.hidden}
|
||||
hoverable={true}
|
||||
style={{
|
||||
marginBottom: 30, background: (this.state.selected === 1 ? "lightskyblue" : "#f0f0f0"),
|
||||
opacity: (this.state.selected >= 0 ? 1 : 0.7)
|
||||
}}
|
||||
onClick={(e) => {
|
||||
this.select(e)
|
||||
}}
|
||||
cover={<img alt="thumbnail"
|
||||
src={baseUrl + this.state.invoice.invoiceThumbnailUri}
|
||||
width="300" height="120"/>}
|
||||
// actions={[<Radio checked={this.state.selected} onClick={(e) => {
|
||||
// this.select(e)
|
||||
// }} defaultChecked={this.state.selected}/>]}
|
||||
>
|
||||
<div style={{marginTop: -20, height: 80}}>
|
||||
|
||||
<li style={{
|
||||
fontWeight: "bold",
|
||||
fontSize: 18
|
||||
}}>¥{(this.state.invoice.invoiceAmount / 100.0).toFixed(2)}
|
||||
{this.getTag()}
|
||||
</li>
|
||||
<li>{invoiceTypeNameMap.get(this.state.invoice.invoiceKind)}</li>
|
||||
{(this.state.invoice.invoiceDeparture !== null && this.state.invoice.invoiceDestination !== null &&
|
||||
<li>{this.state.invoice.invoiceDeparture}{" → "}
|
||||
{this.state.invoice.invoiceDestination}</li>)}
|
||||
<li>{this.state.invoice.invoiceDate}</li>
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
class SingleInvoiceSelector extends React.Component<any, any> {
|
||||
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 (<InvoiceCard invoice={this.state.selectedInvoice}/>)
|
||||
}
|
||||
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(
|
||||
<Row gutter={18} key={i}>
|
||||
<Col span={8}>
|
||||
<InvoiceRadioCard invoice={this.state.invoices[i]}
|
||||
selected={this.checkSelected(this.state.invoices[i])}
|
||||
hidden={false} index={i}
|
||||
click={this.click}/>
|
||||
</Col>
|
||||
</Row>)
|
||||
} else if (i + 2 >= this.state.invoices.length) {
|
||||
cards.push(
|
||||
<Row gutter={18} key={i}>
|
||||
<Col span={8}>
|
||||
<InvoiceRadioCard invoice={this.state.invoices[i]}
|
||||
selected={this.checkSelected(this.state.invoices[i])}
|
||||
hidden={false} index={i}
|
||||
click={this.click}/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InvoiceRadioCard invoice={this.state.invoices[i + 1]}
|
||||
selected={this.checkSelected(this.state.invoices[i + 1])}
|
||||
hidden={false} index={i + 1} click={this.click}/>
|
||||
</Col>
|
||||
</Row>)
|
||||
} else {
|
||||
cards.push(
|
||||
<Row gutter={18} key={i}>
|
||||
<Col span={8}>
|
||||
<InvoiceRadioCard invoice={this.state.invoices[i]}
|
||||
selected={this.checkSelected(this.state.invoices[i])}
|
||||
hidden={false} index={i}
|
||||
click={this.click}/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InvoiceRadioCard invoice={this.state.invoices[i + 1]}
|
||||
selected={this.checkSelected(this.state.invoices[i + 1])}
|
||||
hidden={false} index={i + 1} click={this.click}/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<InvoiceRadioCard invoice={this.state.invoices[i + 2]}
|
||||
selected={this.checkSelected(this.state.invoices[i + 2])}
|
||||
hidden={false} index={i + 2} click={this.click}/>
|
||||
</Col>
|
||||
</Row>)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<>{cards}</>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
|
||||
<Button name={"select"} onClick={() => this.pickerOpen(true)}>
|
||||
|
||||
{this.state.selectedInvoice.invoiceId === null || this.state.selectedInvoice.invoiceId === undefined ?
|
||||
"选择" : "修改"}
|
||||
</Button>
|
||||
|
||||
<Popover
|
||||
content={this.invoiceCard}>
|
||||
<ExclamationCircleOutlined style={{marginLeft: 5}}/>
|
||||
</Popover>
|
||||
<Modal
|
||||
width={1000}
|
||||
open={this.state.pickerOpen}
|
||||
title={this.state.pickerTitle + "选择"}
|
||||
onOk={this.confirm}
|
||||
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()}
|
||||
<Pagination pageSize={this.state.pageSize} current={this.state.currentPage}
|
||||
onChange={this.changePage} total={this.state.total}/>
|
||||
</Modal>
|
||||
</>)
|
||||
}
|
||||
}
|
||||
|
||||
export default SingleInvoiceSelector
|
||||
Loading…
Reference in New Issue