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..16eb4c0 100644 --- a/src/pages/reimbursement/mine/ReimbursementCreate.tsx +++ b/src/pages/reimbursement/mine/ReimbursementCreate.tsx @@ -1,39 +1,68 @@ 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, + Card, + Col, + Form, + Input, + InputNumber, + Modal, + Pagination, + PaginationProps, + Popover, + Radio, + Row, + Select, Tag +} 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"; function InvoiceCard(props: { invoice: Invoice }) { const invoice = props.invoice; + console.log(invoice); return ( - } + // hoverable + // style={{ + // width: 250, + // height: 300, + // margin: 30 + // }} + style={{background: "#f0f0f0"}} + cover={thumbnail} > +
+
  • ¥{(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: boolean; index: number; click: any; + afterDay: number | null; }) { super(props); this.state = { @@ -41,7 +70,8 @@ class InvoiceRadioCard extends React.Component { hidden: props.hidden, selected: props.selected, index: props.index, - click: props.click + click: props.click, + afterDay: props.afterDay, } } @@ -50,32 +80,63 @@ class InvoiceRadioCard extends React.Component { hidden: boolean; selected: boolean; index: number; - click: any; + afterDay: number | null; }) { + console.log(props); return { invoice: props.invoice, hidden: props.hidden, selected: props.selected, index: props.index, - click: props.click + 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))) + return if (this.state.selected) return this.setState({selected: true}) - this.props.click(this.props.index, true) + this.props.click(this.props.invoice, true) } render() { return ( ) } @@ -84,27 +145,89 @@ class InvoiceRadioCard extends React.Component { 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; + afterDay: number | null; + occupiedInvoices: Invoice[]; }) { super(props); this.value = props.value this.onChange = props.onChange this.state = { - selectedIndex: -1, + disabled: props.disabled, + occupiedInvoices: props.occupiedInvoices, + afterDay: props.afterDay, selectedInvoice: {}, singleLimit: true, - invoices: [{invoiceId:1},{invoiceId:2},{invoiceId:3}], + invoices: [], pickerOpen: props.pickerOpen, - pickerTitle: props.pickerTitle + pickerTitle: props.pickerTitle, + currentPage: 1, + pageSize: 4, + total: 0, + searchOptions: { + invoiceNote: "", + invoiceDateStart: 0, + invoiceDateEnd: 0, + invoiceKind: -1, + } } + 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 = { + pageNum: page - 1, + pageSize: this.state.pageSize, + invoiceUploaderId: store.getState().token.staffId, + invoiceStatus: 0, + } + 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}) @@ -112,44 +235,58 @@ class SingleInvoiceSelector extends React.Component { return () } pickerOpen = (value: boolean) => { - this.setState({pickerOpen: value}) + if(this.state.disabled){ + alert("请先选择出发票据") + }else{ + this.setState({pickerOpen: value}) + } + } confirm = () => { this.setState({pickerOpen: false}) } cancelSelect = () => { - this.onChange({}) - this.setState({selectedIndex: -1, selectedInvoice: {}}) + this.onChange(undefined) + this.setState({selectedInvoice: {}}) } - click = (index: number, status: boolean) => { + click = (invoice: any, status: boolean) => { if (status) { - this.setState({selectedIndex: index, selectedInvoice: this.state.invoices[index]}) - this.onChange({invoice: this.state.invoices[index]}) + this.setState({selectedInvoice: invoice}) + this.onChange(invoice) } } - + changePage: PaginationProps['onChange'] = (page) => { + this.requestInvoices(page, this.state.searchOptions) + }; cardList = () => { let cards = [] - for (let i = 0; i < this.state.invoices.length; i += 2) { + const maxSize = Math.min(4, this.state.invoices.length) + for (let i = 0; i < maxSize; i += 2) { if (i + 1 >= this.state.invoices.length) { cards.push( - + - ) } else { cards.push( - + - ) @@ -163,9 +300,13 @@ class SingleInvoiceSelector extends React.Component { render() { return ( <> + + @@ -187,6 +328,8 @@ class SingleInvoiceSelector extends React.Component { > {this.cardList()} + ) } @@ -232,21 +375,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) => { @@ -272,18 +408,28 @@ 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) } render() { @@ -300,7 +446,7 @@ class ReimbursementCreate extends React.Component { ]} > -
    { - - +