不想报销
parent
a322dbadda
commit
d1ece70355
|
@ -59,10 +59,9 @@ class InvoiceRadioCard extends React.Component<any, any> {
|
||||||
constructor(props: {
|
constructor(props: {
|
||||||
invoice: any;
|
invoice: any;
|
||||||
hidden: boolean;
|
hidden: boolean;
|
||||||
selected: boolean;
|
selected: number;
|
||||||
index: number;
|
index: number;
|
||||||
click: any;
|
click: any;
|
||||||
afterDay: number | null;
|
|
||||||
}) {
|
}) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
|
@ -71,43 +70,49 @@ class InvoiceRadioCard extends React.Component<any, any> {
|
||||||
selected: props.selected,
|
selected: props.selected,
|
||||||
index: props.index,
|
index: props.index,
|
||||||
click: props.click,
|
click: props.click,
|
||||||
afterDay: props.afterDay,
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static getDerivedStateFromProps(props: {
|
static getDerivedStateFromProps(props: {
|
||||||
invoice: any;
|
invoice: any;
|
||||||
hidden: boolean;
|
hidden: boolean;
|
||||||
selected: boolean;
|
selected: number;
|
||||||
index: number;
|
index: number;
|
||||||
afterDay: number | null;
|
|
||||||
}) {
|
}) {
|
||||||
console.log(props);
|
|
||||||
return {
|
return {
|
||||||
invoice: props.invoice,
|
invoice: props.invoice,
|
||||||
hidden: props.hidden,
|
hidden: props.hidden,
|
||||||
selected: props.selected,
|
selected: props.selected,
|
||||||
index: props.index,
|
index: props.index,
|
||||||
afterDay: props.afterDay,
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
select(e: any) {
|
select(e: any) {
|
||||||
console.log(this.state.afterDay, Number(new Date(this.state.invoice.invoiceDate)))
|
if (this.state.selected !== 0)
|
||||||
if (this.state.afterDay !== null && this.state.afterDay > Number(new Date(this.state.invoice.invoiceDate)))
|
|
||||||
return
|
return
|
||||||
if (this.state.selected)
|
this.setState({selected: 1})
|
||||||
return
|
|
||||||
this.setState({selected: true})
|
|
||||||
this.props.click(this.props.invoice, true)
|
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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Card hidden={this.state.hidden}
|
<Card hidden={this.state.hidden}
|
||||||
hoverable={true}
|
hoverable={true}
|
||||||
style={{marginBottom: 30, background: this.state.selected ? "lightskyblue" : "#f0f0f0"}}
|
style={{marginBottom: 30, background: (this.state.selected === 1 ? "lightskyblue" : "#f0f0f0"),
|
||||||
|
opacity: (this.state.selected >=0 ? 1 : 0.7)}}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
this.select(e)
|
this.select(e)
|
||||||
}}
|
}}
|
||||||
|
@ -124,11 +129,7 @@ class InvoiceRadioCard extends React.Component<any, any> {
|
||||||
fontWeight: "bold",
|
fontWeight: "bold",
|
||||||
fontSize: 18
|
fontSize: 18
|
||||||
}}>¥{(this.state.invoice.invoiceAmount / 100.0).toFixed(2)}
|
}}>¥{(this.state.invoice.invoiceAmount / 100.0).toFixed(2)}
|
||||||
{(this.state.afterDay !== null && this.state.afterDay > Number(new Date(this.state.invoice.invoiceDate)) &&
|
{this.getTag()}
|
||||||
<Popover content={"该票据日期早于出发日期"}>
|
|
||||||
<Tag color="#f50">不可选</Tag>
|
|
||||||
</Popover>
|
|
||||||
)}
|
|
||||||
</li>
|
</li>
|
||||||
<li>{invoiceTypeNameMap.get(this.state.invoice.invoiceKind)}</li>
|
<li>{invoiceTypeNameMap.get(this.state.invoice.invoiceKind)}</li>
|
||||||
{(this.state.invoice.invoiceDeparture !== null && this.state.invoice.invoiceDestination !== null &&
|
{(this.state.invoice.invoiceDeparture !== null && this.state.invoice.invoiceDestination !== null &&
|
||||||
|
@ -153,7 +154,8 @@ class SingleInvoiceSelector extends React.Component<any, any> {
|
||||||
pickerTitle: string;
|
pickerTitle: string;
|
||||||
value: any;
|
value: any;
|
||||||
onChange: any;
|
onChange: any;
|
||||||
afterDay: number | null;
|
after: number;
|
||||||
|
before: number;
|
||||||
occupiedInvoices: Invoice[];
|
occupiedInvoices: Invoice[];
|
||||||
}) {
|
}) {
|
||||||
super(props);
|
super(props);
|
||||||
|
@ -162,7 +164,6 @@ class SingleInvoiceSelector extends React.Component<any, any> {
|
||||||
this.state = {
|
this.state = {
|
||||||
disabled: props.disabled,
|
disabled: props.disabled,
|
||||||
occupiedInvoices: props.occupiedInvoices,
|
occupiedInvoices: props.occupiedInvoices,
|
||||||
afterDay: props.afterDay,
|
|
||||||
selectedInvoice: {},
|
selectedInvoice: {},
|
||||||
singleLimit: true,
|
singleLimit: true,
|
||||||
invoices: [],
|
invoices: [],
|
||||||
|
@ -171,6 +172,8 @@ class SingleInvoiceSelector extends React.Component<any, any> {
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
pageSize: 4,
|
pageSize: 4,
|
||||||
total: 0,
|
total: 0,
|
||||||
|
after: props.after,
|
||||||
|
before: props.before,
|
||||||
searchOptions: {
|
searchOptions: {
|
||||||
invoiceNote: "",
|
invoiceNote: "",
|
||||||
invoiceDateStart: 0,
|
invoiceDateStart: 0,
|
||||||
|
@ -181,16 +184,6 @@ class SingleInvoiceSelector extends React.Component<any, any> {
|
||||||
this.requestInvoices(1, this.state.searchOptions)
|
this.requestInvoices(1, this.state.searchOptions)
|
||||||
}
|
}
|
||||||
|
|
||||||
static getDerivedStateFromProps(props: {
|
|
||||||
afterDay: number | null;
|
|
||||||
disabled: boolean;
|
|
||||||
}) {
|
|
||||||
console.log(props.afterDay);
|
|
||||||
return {
|
|
||||||
disabled: props.disabled,
|
|
||||||
afterDay: props.afterDay,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
requestInvoices(page: number, searchOptions: any) {
|
requestInvoices(page: number, searchOptions: any) {
|
||||||
let params: any = {
|
let params: any = {
|
||||||
|
@ -198,6 +191,8 @@ class SingleInvoiceSelector extends React.Component<any, any> {
|
||||||
pageSize: this.state.pageSize,
|
pageSize: this.state.pageSize,
|
||||||
invoiceUploaderId: store.getState().token.staffId,
|
invoiceUploaderId: store.getState().token.staffId,
|
||||||
invoiceStatus: 0,
|
invoiceStatus: 0,
|
||||||
|
sortBy: "invoiceDate",
|
||||||
|
asc: true,
|
||||||
}
|
}
|
||||||
if (searchOptions.invoiceNote !== "") {
|
if (searchOptions.invoiceNote !== "") {
|
||||||
params.invoiceNote = searchOptions.invoiceNote
|
params.invoiceNote = searchOptions.invoiceNote
|
||||||
|
@ -235,9 +230,9 @@ class SingleInvoiceSelector extends React.Component<any, any> {
|
||||||
return (<InvoiceCard invoice={this.state.selectedInvoice}/>)
|
return (<InvoiceCard invoice={this.state.selectedInvoice}/>)
|
||||||
}
|
}
|
||||||
pickerOpen = (value: boolean) => {
|
pickerOpen = (value: boolean) => {
|
||||||
if(this.state.disabled){
|
if (this.state.disabled) {
|
||||||
alert("请先选择出发票据")
|
alert("请先选择出发票据")
|
||||||
}else{
|
} else {
|
||||||
this.setState({pickerOpen: value})
|
this.setState({pickerOpen: value})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -256,9 +251,33 @@ class SingleInvoiceSelector extends React.Component<any, any> {
|
||||||
this.onChange(invoice)
|
this.onChange(invoice)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static getDerivedStateFromProps(nextProps: any, prevState: any) {
|
||||||
|
return {
|
||||||
|
after: nextProps.after,
|
||||||
|
before: nextProps.before,
|
||||||
|
occupiedInvoices: nextProps.occupiedInvoices,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
changePage: PaginationProps['onChange'] = (page) => {
|
changePage: PaginationProps['onChange'] = (page) => {
|
||||||
|
console.log(this.state.ocuppiedInvoices)
|
||||||
this.requestInvoices(page, this.state.searchOptions)
|
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 = () => {
|
cardList = () => {
|
||||||
let cards = []
|
let cards = []
|
||||||
const maxSize = Math.min(4, this.state.invoices.length)
|
const maxSize = Math.min(4, this.state.invoices.length)
|
||||||
|
@ -268,8 +287,7 @@ class SingleInvoiceSelector extends React.Component<any, any> {
|
||||||
<Row gutter={18} key={i}>
|
<Row gutter={18} key={i}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<InvoiceRadioCard invoice={this.state.invoices[i]}
|
<InvoiceRadioCard invoice={this.state.invoices[i]}
|
||||||
selected={this.state.selectedInvoice.invoiceId === this.state.invoices[i].invoiceId}
|
selected={this.checkSelected(this.state.invoices[i])}
|
||||||
afterDay={this.state.afterDay}
|
|
||||||
hidden={false} index={i}
|
hidden={false} index={i}
|
||||||
click={this.click}/>
|
click={this.click}/>
|
||||||
</Col>
|
</Col>
|
||||||
|
@ -279,14 +297,13 @@ class SingleInvoiceSelector extends React.Component<any, any> {
|
||||||
<Row gutter={18} key={i}>
|
<Row gutter={18} key={i}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<InvoiceRadioCard invoice={this.state.invoices[i]}
|
<InvoiceRadioCard invoice={this.state.invoices[i]}
|
||||||
selected={this.state.selectedInvoice.invoiceId === this.state.invoices[i].invoiceId}
|
selected={this.checkSelected(this.state.invoices[i])}
|
||||||
afterDay={this.state.afterDay} hidden={false} index={i}
|
hidden={false} index={i}
|
||||||
click={this.click}/>
|
click={this.click}/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<InvoiceRadioCard invoice={this.state.invoices[i + 1]}
|
<InvoiceRadioCard invoice={this.state.invoices[i + 1]}
|
||||||
afterDay={this.state.afterDay}
|
selected={this.checkSelected(this.state.invoices[i + 1])}
|
||||||
selected={this.state.selectedInvoice.invoiceId === this.state.invoices[i + 1].invoiceId}
|
|
||||||
hidden={false} index={i + 1} click={this.click}/>
|
hidden={false} index={i + 1} click={this.click}/>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>)
|
</Row>)
|
||||||
|
@ -431,7 +448,28 @@ class ReimbursementCreate extends React.Component<any, any> {
|
||||||
|
|
||||||
this.setState(state)
|
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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
|
@ -470,19 +508,19 @@ class ReimbursementCreate extends React.Component<any, any> {
|
||||||
<Row gutter={18}>
|
<Row gutter={18}>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item help="" label="出发票据" name="departureInvoice" rules={[{required: true}]}>
|
<Form.Item help="" label="出发票据" name="departureInvoice" rules={[{required: true}]}>
|
||||||
<SingleInvoiceSelector pickerOpen={false}
|
<SingleInvoiceSelector pickerOpen={false} after={0}
|
||||||
afterDay={null} disabled={false}
|
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}/>
|
pickerTitle={"出发票据"} ref={this.invoiceSelector1}/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item label="返程票据" name="destinationInvoice" rules={[{required: false}]}>
|
<Form.Item label="返程票据" name="destinationInvoice" rules={[{required: false}]}>
|
||||||
<SingleInvoiceSelector pickerOpen={false}
|
<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}
|
||||||
(this.state.destinationInvoice == undefined ||this.state.destinationInvoice == null)}
|
before={0} occupiedInvoices={this.getOccupiedInvoices(2)}
|
||||||
pickerTitle={"返程票据"} ref={this.invoiceSelector2}
|
pickerTitle={"返程票据"} ref={this.invoiceSelector2}
|
||||||
afterDay={this.state.departureInvoice == null || this.state.departureInvoice.invoiceDate == null ?
|
/>
|
||||||
null : Number(Date.parse(this.state.departureInvoice.invoiceDate))}/>
|
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
Loading…
Reference in New Issue