From 1750ac8dc80f050c10866347917d1adc605fde8a Mon Sep 17 00:00:00 2001 From: wuyize Date: Mon, 2 Jan 2023 14:23:41 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E4=BA=86=E4=B8=80=E4=BA=9B?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/models/Staff.ts | 2 +- src/models/store.ts | 3 +- src/pages/HomeView.tsx | 35 +- src/pages/Invoice/mine/InvoiceListView.tsx | 392 +++++++++---------- src/pages/Invoice/mine/InvoiceUploadView.tsx | 22 +- 5 files changed, 220 insertions(+), 234 deletions(-) diff --git a/src/models/Staff.ts b/src/models/Staff.ts index 0f2ec0f..a85a9a4 100644 --- a/src/models/Staff.ts +++ b/src/models/Staff.ts @@ -8,7 +8,7 @@ export interface Token { } export interface Staff { - managingDepartment: Department; + managingDepartment: Department|null; staffDepartments: Department[]; staffName: string; } diff --git a/src/models/store.ts b/src/models/store.ts index ce15132..f4b1b2d 100644 --- a/src/models/store.ts +++ b/src/models/store.ts @@ -28,8 +28,7 @@ const staffSlice = createSlice({ name: 'staff', initialState: { staffName: "", - managingDepartment: { departmentId: 0, - departmentName: ''}, + managingDepartment: null as Department|null, staffDepartments: [{ departmentId: 0, departmentName: ''}] }, diff --git a/src/pages/HomeView.tsx b/src/pages/HomeView.tsx index e1735ce..4f9a606 100644 --- a/src/pages/HomeView.tsx +++ b/src/pages/HomeView.tsx @@ -18,8 +18,8 @@ function HeaderBar(props: any) { token: {colorBgContainer, colorPrimary}, } = theme.useToken(); - const token:Token = useAppSelector(getToken); - const staff:Staff = useAppSelector(getStaff); + const token: Token = useAppSelector(getToken); + const staff: Staff = useAppSelector(getStaff); const dispatch = useAppDispatch() const navigate = useNavigate() @@ -104,13 +104,14 @@ function HeaderBar(props: any) { ) } -function MyMenu(props: any) { +function MainMenu(props: any) { console.log(props) if (props.defaultSelectedKeys[0] === '') return null else return ( { console.log(response.data) - const staff:Staff = response.data + const staff: Staff = response.data dispatch(setStaff(staff)) if (location.pathname === '/') @@ -194,7 +195,7 @@ function HomeView() { { @@ -204,13 +205,15 @@ function HomeView() { console.log(collapsed, type); }} > -
+
智能财务报销系统
- + - - + + -
+ {/*
*/} ) diff --git a/src/pages/Invoice/mine/InvoiceListView.tsx b/src/pages/Invoice/mine/InvoiceListView.tsx index 248aa0c..81ecd8f 100644 --- a/src/pages/Invoice/mine/InvoiceListView.tsx +++ b/src/pages/Invoice/mine/InvoiceListView.tsx @@ -13,11 +13,11 @@ import { TimePicker, Select, Checkbox, - Pagination + Pagination, theme } from "antd"; import type {MenuProps, PaginationProps} from 'antd'; import {DownOutlined, UploadOutlined} from '@ant-design/icons'; -import React, {ReactElement, JSXElementConstructor, ReactFragment, ReactPortal, useState} from "react"; +import React, {ReactElement, JSXElementConstructor, ReactFragment, ReactPortal, useState, useEffect} from "react"; import {InvoiceCommit, InvoiceSearchOption} from "../../../models/Staff" import {Space, Typography} from 'antd'; import {SizeType} from "antd/es/config-provider/SizeContext"; @@ -25,11 +25,12 @@ import axios from "axios"; import axiosInstance, {baseUrl} from "../../../utils/axiosInstance"; import {Simulate} from "react-dom/test-utils"; import change = Simulate.change; -import {useNavigate} from "react-router-dom"; +import {useNavigate, useSearchParams} from "react-router-dom"; import {useAppDispatch} from "../../../models/hooks"; import InvoiceUploadView from "./InvoiceUploadView"; import {Invoice, invoiceTypeNameMap} from "../../../models/Invoice"; + const {Meta} = Card; const {Search} = Input; const {Option} = Select @@ -52,170 +53,160 @@ const rangeConfig = { rules: [{type: 'array' as const, required: false, message: 'Please select time!'}], }; -class InvoiceSearch extends React.Component { - constructor(props: { handleSearchData: any; }) { - super(props); - this.state = { - activatedOption: "发票代码", - searchContent: '请在此输入', - complexEnabled: false, - invoiceSearchOption: new InvoiceSearchOption(), - isUploadModalOpen: false +function InvoiceSearch(props: { handleSearchData: any; }) { + const { + token: {colorBgContainer, colorPrimary}, + } = theme.useToken(); + + const [activatedOption, setActivatedOption] = useState('发票代码') + const [complexEnabled, setComplexEnabled] = useState(false) + const [invoiceSearchOption, setInvoiceSearchOption] = useState(new InvoiceSearchOption()) + + const items: MenuProps['items'] = [ + { + key: '1', + label: ( { + invoiceSearchOption.clear(); + setActivatedOption("发票代码") + }}> + 发票代码 + ) + }, + { + key: '2', + label: ( { + invoiceSearchOption.clear(); + setActivatedOption("发票编号") + + }}> + 发票编号 + ) + } + ]; + const onValuesChange = (changedValues: any, allValues: any) => { + invoiceSearchOption.clear() + + console.log(allValues) + if (allValues['upload-time-picker'] != null && allValues['upload-time-picker'] !== undefined) { + invoiceSearchOption.invoiceUploadTimeStart = allValues['upload-time-picker'][0].format('YYYY-MM-DDtHH:mm:ss') + invoiceSearchOption.invoiceUploadTimeEnd = allValues['upload-time-picker'][1].format('YYYY-MM-DDtHH:mm:ss') + } + if (allValues['invoice-time-picker'] !== null && allValues['invoice-time-picker'] !== undefined) { + invoiceSearchOption.invoiceDateStart = allValues['invoice-time-picker'][0].format('YYYY-MM-DD') + invoiceSearchOption.invoiceDateEnd = allValues['invoice-time-picker'][1].format('YYYY-MM-DD') + } + if (allValues['invoice-state'] !== "全部") { + invoiceSearchOption.invoiceState = allValues['invoice-state'] + } + if (allValues['invoice-kind'] !== "全部") { + invoiceSearchOption.invoiceKind = allValues['invoice-kind'] + } + if (allValues['invoice-uploader'] !== null && allValues['invoice-uploader'] !== undefined && allValues['invoice-uploader'].trim() !== "") { + invoiceSearchOption.invoiceUploader = allValues['invoice-uploader'].trim() } } - onSearch = (value: string) => { - if (!this.state.complexEnabled) - this.state.invoiceSearchOption.clear() - console.log(this.state.invoiceSearchOption) - if (this.state.activatedOption === "发票代码") { - this.state.invoiceSearchOption.invoiceCode = value; - this.state.invoiceSearchOption.invoiceNo = null; + const onSearch = (value: string) => { + if (!complexEnabled) + invoiceSearchOption.clear() + console.log(invoiceSearchOption) + if (activatedOption === "发票代码") { + invoiceSearchOption.invoiceCode = value; + invoiceSearchOption.invoiceNo = null; } else { - this.state.invoiceSearchOption.invoiceNo = value; - this.state.invoiceSearchOption.invoiceCode = null; + invoiceSearchOption.invoiceNo = value; + invoiceSearchOption.invoiceCode = null; } - const {handleSearchData} = this.props - handleSearchData(this.state.invoiceSearchOption) + const {handleSearchData} = props + handleSearchData(invoiceSearchOption) } - showUploadModal = () => { - this.setState({ isUploadModalOpen: true}) - } - render() { - const items: MenuProps['items'] = [ - { - key: '1', - label: ( { - this.state.invoiceSearchOption.clear(); - this.setState({activatedOption: "发票代码"} - ) - }}> - 发票代码 - ) - }, - { - key: '2', - label: ( { - this.state.invoiceSearchOption.clear(); - this.setState({activatedOption: "发票编号"} - ) - }}> - 发票编号 - ) - } - ]; - const onValuesChange = (changedValues: any, allValues: any) => { - this.state.invoiceSearchOption.clear() - - console.log(allValues) - if (allValues['upload-time-picker'] != null && allValues['upload-time-picker'] !== undefined) { - this.state.invoiceSearchOption.invoiceUploadTimeStart = allValues['upload-time-picker'][0].format('YYYY-MM-DDtHH:mm:ss') - this.state.invoiceSearchOption.invoiceUploadTimeEnd = allValues['upload-time-picker'][1].format('YYYY-MM-DDtHH:mm:ss') - } - if (allValues['invoice-time-picker'] !== null && allValues['invoice-time-picker'] !== undefined) { - this.state.invoiceSearchOption.invoiceDateStart = allValues['invoice-time-picker'][0].format('YYYY-MM-DD') - this.state.invoiceSearchOption.invoiceDateEnd = allValues['invoice-time-picker'][1].format('YYYY-MM-DD') - } - if (allValues['invoice-state'] !== "全部") { - this.state.invoiceSearchOption.invoiceState = allValues['invoice-state'] - } - if (allValues['invoice-kind'] !== "全部") { - this.state.invoiceSearchOption.invoiceKind = allValues['invoice-kind'] - } - if (allValues['invoice-uploader'] !== null && allValues['invoice-uploader'] !== undefined && allValues['invoice-uploader'].trim() !== "") { - this.state.invoiceSearchOption.invoiceUploader = allValues['invoice-uploader'].trim() - } - } - return ( -
-
- - - - {this.state.activatedOption} - - - - } - placeholder={this.state.searchContent} - allowClear - onSearch={(value) => this.onSearch(value)} - style={{width: 304}} - enterButton - /> - { - this.setState({complexEnabled: e.target.checked}) - - }}>高级搜索 - -
- {this.state.complexEnabled&& -
-
- - - - - - - - - - - - - - - - - - -
-
} + return ( +
+
+ + + + {activatedOption} + + + + } + placeholder={'请在此输入'} + allowClear + onSearch={(value) => onSearch(value)} + style={{width: 304}} + enterButton + /> + { + setComplexEnabled(e.target.checked) + }}>高级搜索 +
- ) + {complexEnabled && +
+
+ + + + - } + + + + + + + + + + + + + +
+
} +
+ ) } class InvoiceItem extends React.Component { constructor(props: { invoice: Invoice }) { super(props); this.state = { - invoiceThumbnailUri: baseUrl+props.invoice.invoiceThumbnailUri, + invoiceThumbnailUri: baseUrl + props.invoice.invoiceThumbnailUri, invoiceKind: props.invoice.invoiceKind, invoiceAmount: props.invoice.invoiceAmount, invoiceDate: props.invoice.invoiceDate, @@ -249,89 +240,76 @@ class InvoiceItem extends React.Component { } -class InvoiceListView extends React.Component { - constructor(props: {}) { - super(props); - this.state = { - isNoOrCode: '1', - invoices: [], - invoiceNo: null, - invoiceCode: null, - invoiceSearchOption: new InvoiceSearchOption(), - pageNum: 1, - pageSize: 20, - totalNum: 2, - PaginationKey: -2 - } - } +function InvoiceListView(props: {}) { + const [totalNum, setTotalNum] = useState(0) + const [invoices, setInvoices] = useState([]) + const [search, setSearch] = useSearchParams() - componentDidMount(){ - this.searchInvoiceContent() - } + const [invoiceSearchOption, setInvoiceSearchOption] = useState(new InvoiceSearchOption()) - onChange = (pageCurrentNum: Number, pageCurrentSize: Number) => { - console.log(pageCurrentNum, pageCurrentSize) - this.setState({pageNum: pageCurrentNum, pageSize: pageCurrentSize}) - console.log(this.state.pageNum, this.state.pageSize) - this.searchInvoiceContent() - } + const navigate = useNavigate() - handleInvoiceSearchInfo= (invoiceSearch: InvoiceSearchOption) => { - this.setState({invoiceSearchOption: invoiceSearch}) - console.log(this.state.invoiceSearchOption) - this.searchInvoiceContent() + const handleInvoiceSearchInfo = (invoiceSearch: InvoiceSearchOption) => { + setInvoiceSearchOption(invoiceSearch) + searchInvoiceContent() } - - searchInvoiceContent = () => { - let params = this.state.invoiceSearchOption + const searchInvoiceContent = () => { + let params: any = invoiceSearchOption Object.keys(params).forEach(key => { if (params[key] != null && params[key] !== undefined && params[key] === "") { params[key] = null } }) - params['pageNum'] = this.state.pageNum-1 - params['pageSize'] = this.state.pageSize + if (search.get('currentPage')) + params.pageNum = Number(search.get('currentPage')) - 1 + else + params.pageNum = 0 + if (search.get('pageSize')) + params.pageSize = Number(search.get('pageSize')) + else + params.pageSize = 10 axiosInstance({ url: 'common/invoice', method: 'get', params: params }).then(response => { console.log(response.data) - this.handleInvoicesTotalNum(response.data.total) - this.handleInvoicesContent(response.data.records) + setTotalNum(response.data.total) + setInvoices(response.data.records) }).catch(function (error) { console.log(error) }) } - - handleInvoicesTotalNum(value: Number) { - this.setState({totalNum: value, PaginationKey: -value}) + const onChange = (pageCurrentNum: Number, pageCurrentSize: Number) => { + console.log(pageCurrentNum, pageCurrentSize) + navigate('/invoice/mine?currentPage=' + pageCurrentNum + '&pageSize=' + pageCurrentSize) } - handleInvoicesContent = (value: Array) => { - console.log(value) - this.setState({invoices: value}) - } + useEffect(() => { + console.log(search.get('currentPage')) + console.log(search.get('pageSize')) + searchInvoiceContent() + }, [search]); - - render() { - return ( -
- -
- {this.state.invoices.map((item: Invoice, index:number) => + return ( +
+ +
+
+ {invoices.map((item: Invoice, index: number) => )} -
- + `共 ${total} 项`} + current={Number(search.get('currentPage')?search.get('currentPage'):1)} + pageSize={Number(search.get('pageSize')?search.get('pageSize'):10)} + total={totalNum} onChange={onChange}/>
- ) - } -} +
+ ) +} export default InvoiceListView \ No newline at end of file diff --git a/src/pages/Invoice/mine/InvoiceUploadView.tsx b/src/pages/Invoice/mine/InvoiceUploadView.tsx index 0e9159b..e6a1542 100644 --- a/src/pages/Invoice/mine/InvoiceUploadView.tsx +++ b/src/pages/Invoice/mine/InvoiceUploadView.tsx @@ -99,22 +99,24 @@ function UpLoadModal(props: any) { } function FormModal(props: any) { - const [open, setOpen] = useState(false) + //const [open, setOpen] = useState(false) const [loading, setLoading] = useState(false) const [invoice, setInvoice] = useState({}) const [formItems, setFormItems] = useState(undefined) const [form] = Form.useForm(); useEffect(() => { - setOpen(props.open) + //setOpen(props.open) console.log(props.invoiceIdentifyResponse) let i = {...props.invoiceIdentifyResponse} setInvoice(i) refreshFormItems(props.invoiceIdentifyResponse?.invoiceKind) + //TODO: 重置表单 form.setFieldsValue(i) }, [props]); const handleCancel = () => { - setOpen(false); + props.onClose() + //setOpen(false); }; const submit = () => { setLoading(true) @@ -134,7 +136,8 @@ function FormModal(props: any) { }).then(response => { console.log(response.data) setLoading(false) - setOpen(false) + props.onClose() + //setOpen(false) }).catch(function (error) { console.log(error) setLoading(false) @@ -202,7 +205,7 @@ function FormModal(props: any) { return ( { this.setState({uploadModalOpen: false, formModalOpen: true, invoiceIdentifyResponse: response}) } + handleClose = () => { + this.setState({formModalOpen:false}) + } + render() { // @ts-ignore return ( <> - - );