还在报销

src/pages/reimbursement/mine/MyReimbursement.tsx

@@ -70,17 +70,17 @@ const statusEnum = {
 
 class Subpage extends React.Component<any, any> {
     tableAction = React.createRef<ActionType>();
-
+    departments=new Map<number,string>()
     constructor(props: {}) {
         super(props);
         this.state = {
             searchWord: "",
             onCreated: false,
+
         }
         this.pullDepartment()
     }
 
-    department = new Map<number, string>()
     createRef = React.createRef<ReimbursementCreate>();
     columns: ProColumns<TableListItem>[] = [
         {
@@ -145,7 +145,7 @@ class Subpage extends React.Component<any, any> {
             width: 80,
             search: false,
             dataIndex: 'departmentId',
-            valueEnum: this.department,
+            valueEnum: this.departments,
             filters: true,
             onFilter: false,
             //render: (_) => <a>{_}</a>,
@@ -224,12 +224,13 @@ class Subpage extends React.Component<any, any> {
     }
 
     pullDepartment() {
-        this.department.clear()
         axiosInstance.get('common/department').then(response => {
+            this.departments.clear()
             response.data.forEach((value: any) => {
-                    this.department.set(value.departmentId, value.departmentName)
+                    this.departments.set(value.departmentId, value.departmentName)
                 }
             )
+            console.log(this.departments)
             this.tableAction.current?.reload()
         })
 

src/pages/reimbursement/mine/ReimbursementCreate.tsx

@@ -1,6 +1,6 @@
-import React, {ReactNode} from "react";
+import React, {Key, ReactNode} from "react";
 import {ReimbursementApplication} from "../../../models/Reimbursement";
-import {Button, Col, Form, Input, InputNumber, Modal, Popover, Row, Select} from "antd";
+import {Button, Card, Col, Form, Input, InputNumber, Modal, Popover, Radio, Row, Select} from "antd";
 import {FormInstance} from "antd/es/form";
 import {Invoice} from "../../../models/Reimbursement";
 import axiosInstance from "../../../utils/axiosInstance";
@@ -11,13 +11,81 @@ import {Dropdown, message, Space, Tooltip} from 'antd';
 import {store} from "../../../models/store";
 import {FieldData} from "rc-field-form/lib/interface";
 
+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: {
-        invoices: Invoice[];
         pickerOpen: boolean;
         pickerTitle: string;
         value: any;
@@ -27,9 +95,10 @@ class SingleInvoiceSelector extends React.Component<any, any> {
         this.value = props.value
         this.onChange = props.onChange
         this.state = {
+            selectedIndex: -1,
             selectedInvoice: {},
             singleLimit: true,
-            invoices: props.invoices,
+            invoices: [{invoiceId:1},{invoiceId:2},{invoiceId:3}],
             pickerOpen: props.pickerOpen,
             pickerTitle: props.pickerTitle
         }
@@ -40,21 +109,55 @@ class SingleInvoiceSelector extends React.Component<any, any> {
         if (this.state.selectedInvoice.invoiceId === null || this.state.selectedInvoice.invoiceId === undefined) {
             return (<>请选择一张{this.state.pickerTitle}</>)
         }
-        return (<>
+        return (<InvoiceCard invoice={this.state.selectedInvoice}/>)
-
-
-        </>)
     }
     pickerOpen = (value: boolean) => {
         this.setState({pickerOpen: value})
     }
     confirm = () => {
-        //TODO
-        this.onChange(this.state.selectedInvoice.invoiceId)
         this.setState({pickerOpen: false})
     }
     cancelSelect = () => {
-        this.setState({selectedInvoices: []})
+        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() {
@@ -74,11 +177,16 @@ class SingleInvoiceSelector extends React.Component<any, any> {
                     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>
             </>)
     }
@@ -141,14 +249,6 @@ class ReimbursementCreate extends React.Component<any, any> {
         })
     }
 
-    findInvoiceById = (id: number):null|Invoice => {
-        //return this.state.invoices[0]
-        this.state.invoices.map((item:Invoice)=>{
-            if(item.invoiceId === id)
-                return item
-        })
-        return null
-    }
     handleMenuClick: MenuProps['onClick'] = (e) => {
         this.setState({
             selectedDepartment: {
@@ -173,23 +273,17 @@ class ReimbursementCreate extends React.Component<any, any> {
         this.setState({duration: value})
     }
     formFieldsChange = (changedFields: any, allFields: any) => {
-        let block = false
+        let start = allFields['departureInvoiceId']
-        let startId = allFields['departureInvoiceId']
+        let end = allFields['destinationInvoiceId']
-        let endId = allFields['destinationInvoiceId']
+        if (start !== undefined && end !== undefined && start.invoiceDate !== undefined && end.invoiceDate !== undefined) {
-        if (typeof startId == "number" && typeof endId == "number") {
+            let x = Math.floor((Date.parse(end.invoiceDate) - Date.parse(start.invoiceDate)) / 24 / 60 / 60 / 1000) + 1
-            let s = this.findInvoiceById(startId)
+            this.setState({back: true, duration: x})
-            let t = this.findInvoiceById(endId)
+            this.formRef.current?.setFieldValue('duration', x)
-            if (s !== null && t !== null) {
+        }else{
-                let x=Math.floor((Date.parse(t.invoiceDate)-Date.parse(s.invoiceDate))/24/60/60/1000) + 1
+            this.setState({back: false, duration: 0})
-                this.setState({back:true,duration:x})
+            this.formRef.current?.setFieldValue('duration', 0)
-                this.formRef.current?.setFieldValue('duration',x)
-                block = true
-            }
-        }
-        if(!block){
-            this.setState({back:false,duration:0})
-            this.formRef.current?.setFieldValue('duration',0)
         }
+        console.log(allFields)
     }
 
     render() {
@@ -229,13 +323,13 @@ class ReimbursementCreate extends React.Component<any, any> {
 
                     <Row gutter={18}>
                         <Col span={12}>
-                            <Form.Item label="出发票据" name="departureInvoiceId" rules={[{required: true}]}>
+                            <Form.Item help="" label="出发票据" name="departureInvoice" rules={[{required: true}]}>
                                 <SingleInvoiceSelector invoices={[]} pickerOpen={false}
                                                        pickerTitle={"出发票据"} ref={this.invoiceSelector1}/>
                             </Form.Item>
                         </Col>
                         <Col span={12}>
-                            <Form.Item label="返程票据" name="destinationInvoiceId" rules={[{required: false}]}>
+                            <Form.Item label="返程票据" name="destinationInvoice" rules={[{required: false}]}>
                                 <SingleInvoiceSelector invoices={[]} pickerOpen={false}
                                                        pickerTitle={"返程票据"} ref={this.invoiceSelector2}/>
                             </Form.Item>