BigC
/
FinancialReimbursementSystem_frontend
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

解决了一些问题

main
wuyize 2023-01-02 14:23:41 +08:00
parent d313886764
commit 1750ac8dc8
5 changed files with 220 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/models/Staff.ts
View File

@ -8,7 +8,7 @@ export interface Token {
}
export interface Staff {
managingDepartment: Department;
managingDepartment: Department|null;
staffDepartments: Department[];
staffName: string;
}

3
src/models/store.ts
View File

@ -28,8 +28,7 @@ const staffSlice = createSlice({
name: 'staff',
initialState: {
staffName: "",
managingDepartment: { departmentId: 0,
departmentName: ''},
managingDepartment: null as Department|null,
staffDepartments: [{ departmentId: 0,
departmentName: ''}]
},

21
src/pages/HomeView.tsx
View File

@ -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 (
<Menu
style={{height: '100%'}}
mode="inline"
defaultSelectedKeys={props.defaultSelectedKeys}
items={props.items}
@ -194,7 +195,7 @@ function HomeView() {
<Layout style={{height: '100%'}}>
<Sider
width={208}
style={{background: colorBgContainer}}
style={{background: colorBgContainer, boxShadow: '9px 0px 28px 0px rgba(0, 0, 0, 0.05)'}}
breakpoint="lg"
collapsedWidth="0"
onBreakpoint={(broken) => {
@ -204,12 +205,14 @@ function HomeView() {
console.log(collapsed, type);
}}
>
<div style={{
height: '32px',
margin: '17px 0 17px 0',
<div
style={{
height: '66px',
padding: '17px 0 17px 0',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
alignItems: 'center',
borderInlineEnd: '1px solid rgba(5, 5, 5, 0.06)'
}}>
<Icon component={Logo}/>
<span style={{
@ -219,14 +222,14 @@ function HomeView() {
marginLeft: '4px'
}}>智能财务报销系统</span>
</div>
<MyMenu items={menuItems} defaultSelectedKeys={defaultSelectedKeys}/>
<MainMenu style={{height: '100%'}} items={menuItems} defaultSelectedKeys={defaultSelectedKeys}/>
</Sider>
<Layout>
<HeaderBar/>
<Content style={{margin: '0'}}>
<Content style={{margin: '0', overflowY: "auto"}}>
<Outlet/>
</Content>
<Footer style={{textAlign: 'center'}}></Footer>
{/*<Footer style={{textAlign: 'center'}}></Footer>*/}
</Layout>
</Layout>
)

200
src/pages/Invoice/mine/InvoiceListView.tsx
View File

@ -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,46 +53,21 @@ const rangeConfig = {
rules: [{type: 'array' as const, required: false, message: 'Please select time!'}],
};
class InvoiceSearch extends React.Component<any, any> {
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();
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;
} else {
this.state.invoiceSearchOption.invoiceNo = value;
this.state.invoiceSearchOption.invoiceCode = null;
}
const {handleSearchData} = this.props
handleSearchData(this.state.invoiceSearchOption)
}
showUploadModal = () => {
this.setState({ isUploadModalOpen: true})
}
render() {
const [activatedOption, setActivatedOption] = useState('发票代码')
const [complexEnabled, setComplexEnabled] = useState(false)
const [invoiceSearchOption, setInvoiceSearchOption] = useState(new InvoiceSearchOption())
const items: MenuProps['items'] = [
{
key: '1',
label: (<a className="simpleSearchOption" onClick={() => {
this.state.invoiceSearchOption.clear();
this.setState({activatedOption: "发票代码"}
)
invoiceSearchOption.clear();
setActivatedOption("发票代码")
}}>
发票代码
</a>)
@ -99,39 +75,57 @@ class InvoiceSearch extends React.Component<any, any> {
{
key: '2',
label: (<a className="simpleSearchOption" onClick={() => {
this.state.invoiceSearchOption.clear();
this.setState({activatedOption: "发票编号"}
)
invoiceSearchOption.clear();
setActivatedOption("发票编号")
}}>
发票编号
</a>)
}
];
const onValuesChange = (changedValues: any, allValues: any) => {
this.state.invoiceSearchOption.clear()
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')
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) {
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')
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'] !== "全部") {
this.state.invoiceSearchOption.invoiceState = allValues['invoice-state']
invoiceSearchOption.invoiceState = allValues['invoice-state']
}
if (allValues['invoice-kind'] !== "全部") {
this.state.invoiceSearchOption.invoiceKind = allValues['invoice-kind']
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()
invoiceSearchOption.invoiceUploader = allValues['invoice-uploader'].trim()
}
}
const onSearch = (value: string) => {
if (!complexEnabled)
invoiceSearchOption.clear()
console.log(invoiceSearchOption)
if (activatedOption === "发票代码") {
invoiceSearchOption.invoiceCode = value;
invoiceSearchOption.invoiceNo = null;
} else {
invoiceSearchOption.invoiceNo = value;
invoiceSearchOption.invoiceCode = null;
}
const {handleSearchData} = props
handleSearchData(invoiceSearchOption)
}
return (
<div className="headBar">
<div className="simpleSearchBar" style={{display: "flex", justifyContent: "space-evenly"}}>
<div className="simpleSearchBar" style={{height: '72px', padding: '30px',display: "flex",alignItems: 'center', justifyContent: "space-between",backgroundColor: colorBgContainer}}>
<Search className="simpleSearch"
addonBefore={<Dropdown
menu={{
@ -142,24 +136,23 @@ class InvoiceSearch extends React.Component<any, any> {
>
<Typography.Link>
<Space>
{this.state.activatedOption}
{activatedOption}
<DownOutlined/>
</Space>
</Typography.Link>
</Dropdown>}
placeholder={this.state.searchContent}
placeholder={'请在此输入'}
allowClear
onSearch={(value) => this.onSearch(value)}
onSearch={(value) => onSearch(value)}
style={{width: 304}}
enterButton
/>
<Checkbox onChange={(e) => {
this.setState({complexEnabled: e.target.checked})
setComplexEnabled(e.target.checked)
}}>高级搜索</Checkbox>
<InvoiceUploadView/>
</div>
{this.state.complexEnabled&&
{complexEnabled &&
<div className="complexSearchBar" style={{display: "flex"}}>
<Form name="complexOption" {...formItemLayout} onValuesChange={onValuesChange}>
<Row>
@ -207,8 +200,6 @@ class InvoiceSearch extends React.Component<any, any> {
</div>}
</div>
)
}
}
class InvoiceItem extends React.Component<any, any> {
@ -249,89 +240,76 @@ class InvoiceItem extends React.Component<any, any> {
}
class InvoiceListView extends React.Component<any, any> {
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<Invoice>) => {
console.log(value)
this.setState({invoices: value})
}
useEffect(() => {
console.log(search.get('currentPage'))
console.log(search.get('pageSize'))
searchInvoiceContent()
}, [search]);
render() {
return (
<div style={{}}>
<InvoiceSearch handleSearchData={this.handleInvoiceSearchInfo}/>
<div style={{display: "flex", flexWrap: "wrap"}}>
{this.state.invoices.map((item: Invoice, index:number) =>
<InvoiceSearch handleSearchData={handleInvoiceSearchInfo}/>
<div style={{padding:26,display:"flex", flexDirection: "column", alignItems: "flex-end"}}>
<div style={{display: "flex", flexWrap: "wrap", justifyContent:'center', width: '100%'}}>
{invoices.map((item: Invoice, index: number) =>
<InvoiceItem invoice={item} key={index}/>
)}
</div>
<Pagination style={{
position: "fixed",
bottom: 20,
}} key={this.state.PaginationKey} showQuickJumper defaultCurrent={1} total={this.state.totalNum} onChange={this.onChange}/>
<Pagination showSizeChanger
showQuickJumper
showTotal={(total) => `共 ${total} 项`}
current={Number(search.get('currentPage')?search.get('currentPage'):1)}
pageSize={Number(search.get('pageSize')?search.get('pageSize'):10)}
total={totalNum} onChange={onChange}/>
</div>
</div>
)
}
}
export default InvoiceListView

22
src/pages/Invoice/mine/InvoiceUploadView.tsx
View File

@ -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 (
<Modal
open={open}
open={props.open}
title="提交发票"
onOk={submit}
onCancel={handleCancel}
@ -266,17 +269,20 @@ class InvoiceUploadView extends React.Component<any, any> {
this.setState({uploadModalOpen: false, formModalOpen: true, invoiceIdentifyResponse: response})
}
handleClose = () => {
this.setState({formModalOpen:false})
}
render() {
// @ts-ignore
return (
<>
<Button onClick={this.showUploadView} className="uploadButton" type="primary" icon={<UploadOutlined/>}
size="large">
<Button onClick={this.showUploadView} className="uploadButton" type="primary" icon={<UploadOutlined/>}>
上传
</Button>
<UpLoadModal open={this.state.uploadModalOpen} nextStep={this.handleNextStep}/>
<FormModal open={this.state.formModalOpen}
<FormModal open={this.state.formModalOpen} onClose={this.handleClose}
invoiceIdentifyResponse={this.state.invoiceIdentifyResponse}/>
</>);