不想报销

2023-01-01 23:29:50 +08:00 · 2023-01-01 23:29:50 +08:00 · d1ece70355
parent a322dbadda
commit d1ece70355
1 changed files with 83 additions and 45 deletions
--- a/src/pages/reimbursement/mine/ReimbursementCreate.tsx
+++ b/src/pages/reimbursement/mine/ReimbursementCreate.tsx
@ -59,10 +59,9 @@ class InvoiceRadioCard extends React.Component<any, any> {
    constructor(props: {
        invoice: any;
        hidden: boolean;
-        selected: boolean;
+        selected: number;
        index: number;
        click: any;
-        afterDay: number | null;
    }) {
        super(props);
        this.state = {
@ -71,43 +70,49 @@ class InvoiceRadioCard extends React.Component<any, any> {
            selected: props.selected,
            index: props.index,
            click: props.click,
-            afterDay: props.afterDay,
        }
    }

    static getDerivedStateFromProps(props: {
        invoice: any;
        hidden: boolean;
-        selected: boolean;
+        selected: number;
        index: number;
-        afterDay: number | null;
    }) {
-        console.log(props);
        return {
            invoice: props.invoice,
            hidden: props.hidden,
            selected: props.selected,
            index: props.index,
-            afterDay: props.afterDay,
        }
    }

    select(e: any) {
-        console.log(this.state.afterDay, Number(new Date(this.state.invoice.invoiceDate)))
-        if (this.state.afterDay !== null && this.state.afterDay > Number(new Date(this.state.invoice.invoiceDate)))
+        if (this.state.selected !== 0)
            return
-        if (this.state.selected)
-            return
-        this.setState({selected: true})
+        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 ? "lightskyblue" : "#f0f0f0"}}
+                  style={{marginBottom: 30, background: (this.state.selected === 1 ? "lightskyblue" : "#f0f0f0"),
+                      opacity: (this.state.selected >=0 ? 1 : 0.7)}}
                  onClick={(e) => {
                      this.select(e)
                  }}
@ -124,11 +129,7 @@ class InvoiceRadioCard extends React.Component<any, any> {
                        fontWeight: "bold",
                        fontSize: 18
                    }}>¥{(this.state.invoice.invoiceAmount / 100.0).toFixed(2)}
-                        {(this.state.afterDay !== null && this.state.afterDay > Number(new Date(this.state.invoice.invoiceDate)) &&
-                            <Popover content={"该票据日期早于出发日期"}>
-                                <Tag color="#f50">不可选</Tag>
-                            </Popover>
-                        )}
+                        {this.getTag()}
                    </li>
                    <li>{invoiceTypeNameMap.get(this.state.invoice.invoiceKind)}</li>
                    {(this.state.invoice.invoiceDeparture !== null && this.state.invoice.invoiceDestination !== null &&
@ -153,7 +154,8 @@ class SingleInvoiceSelector extends React.Component<any, any> {
        pickerTitle: string;
        value: any;
        onChange: any;
-        afterDay: number | null;
+        after: number;
+        before: number;
        occupiedInvoices: Invoice[];
    }) {
        super(props);
@ -162,7 +164,6 @@ class SingleInvoiceSelector extends React.Component<any, any> {
        this.state = {
            disabled: props.disabled,
            occupiedInvoices: props.occupiedInvoices,
-            afterDay: props.afterDay,
            selectedInvoice: {},
            singleLimit: true,
            invoices: [],
@ -171,6 +172,8 @@ class SingleInvoiceSelector extends React.Component<any, any> {
            currentPage: 1,
            pageSize: 4,
            total: 0,
+            after: props.after,
+            before: props.before,
            searchOptions: {
                invoiceNote: "",
                invoiceDateStart: 0,
@ -181,16 +184,6 @@ class SingleInvoiceSelector extends React.Component<any, any> {
        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) {
        let params: any = {
@ -198,6 +191,8 @@ class SingleInvoiceSelector extends React.Component<any, any> {
            pageSize: this.state.pageSize,
            invoiceUploaderId: store.getState().token.staffId,
            invoiceStatus: 0,
+            sortBy: "invoiceDate",
+            asc: true,
        }
        if (searchOptions.invoiceNote !== "") {
            params.invoiceNote = searchOptions.invoiceNote
@ -235,9 +230,9 @@ class SingleInvoiceSelector extends React.Component<any, any> {
        return (<InvoiceCard invoice={this.state.selectedInvoice}/>)
    }
    pickerOpen = (value: boolean) => {
-        if(this.state.disabled){
+        if (this.state.disabled) {
            alert("请先选择出发票据")
-        }else{
+        } else {
            this.setState({pickerOpen: value})
        }

@ -256,9 +251,33 @@ class SingleInvoiceSelector extends React.Component<any, any> {
            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)
@ -268,8 +287,7 @@ class SingleInvoiceSelector extends React.Component<any, any> {
                    <Row gutter={18} key={i}>
                        <Col span={12}>
                            <InvoiceRadioCard invoice={this.state.invoices[i]}
-                                              selected={this.state.selectedInvoice.invoiceId === this.state.invoices[i].invoiceId}
-                                              afterDay={this.state.afterDay}
+                                              selected={this.checkSelected(this.state.invoices[i])}
                                              hidden={false} index={i}
                                              click={this.click}/>
                        </Col>
@ -279,14 +297,13 @@ class SingleInvoiceSelector extends React.Component<any, any> {
                    <Row gutter={18} key={i}>
                        <Col span={12}>
                            <InvoiceRadioCard invoice={this.state.invoices[i]}
-                                              selected={this.state.selectedInvoice.invoiceId === this.state.invoices[i].invoiceId}
-                                              afterDay={this.state.afterDay} hidden={false} index={i}
+                                              selected={this.checkSelected(this.state.invoices[i])}
+                                              hidden={false} index={i}
                                              click={this.click}/>
                        </Col>
                        <Col span={12}>
                            <InvoiceRadioCard invoice={this.state.invoices[i + 1]}
-                                              afterDay={this.state.afterDay}
-                                              selected={this.state.selectedInvoice.invoiceId === this.state.invoices[i + 1].invoiceId}
+                                              selected={this.checkSelected(this.state.invoices[i + 1])}
                                              hidden={false} index={i + 1} click={this.click}/>
                        </Col>
                    </Row>)
@ -431,7 +448,28 @@ class ReimbursementCreate extends React.Component<any, any> {

        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
@ -470,19 +508,19 @@ class ReimbursementCreate extends React.Component<any, any> {
                    <Row gutter={18}>
                        <Col span={12}>
                            <Form.Item help="" label="出发票据" name="departureInvoice" rules={[{required: true}]}>
-                                <SingleInvoiceSelector pickerOpen={false}
-                                                       afterDay={null} disabled={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 pickerOpen={false}
-                                                       disabled={(this.state.departureInvoice == null||this.state.departureInvoice == undefined)&&
-                                                       (this.state.destinationInvoice == undefined ||this.state.destinationInvoice == null)}
+                                                       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}
-                                                       afterDay={this.state.departureInvoice == null || this.state.departureInvoice.invoiceDate == null ?
-                                                           null : Number(Date.parse(this.state.departureInvoice.invoiceDate))}/>
+                                />
                            </Form.Item>
                        </Col>
                    </Row>