解决了一些问题
parent
d313886764
commit
1750ac8dc8
|
|
@ -8,7 +8,7 @@ export interface Token {
|
|||
}
|
||||
|
||||
export interface Staff {
|
||||
managingDepartment: Department;
|
||||
managingDepartment: Department|null;
|
||||
staffDepartments: Department[];
|
||||
staffName: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,8 +28,7 @@ const staffSlice = createSlice({
|
|||
name: 'staff',
|
||||
initialState: {
|
||||
staffName: "",
|
||||
managingDepartment: { departmentId: 0,
|
||||
departmentName: ''},
|
||||
managingDepartment: null as Department|null,
|
||||
staffDepartments: [{ departmentId: 0,
|
||||
departmentName: ''}]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Menu
|
||||
style={{height: '100%'}}
|
||||
mode="inline"
|
||||
defaultSelectedKeys={props.defaultSelectedKeys}
|
||||
items={props.items}
|
||||
|
|
@ -160,7 +161,7 @@ function HomeView() {
|
|||
method: 'get'
|
||||
}).then(response => {
|
||||
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() {
|
|||
<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,13 +205,15 @@ function HomeView() {
|
|||
console.log(collapsed, type);
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
height: '32px',
|
||||
margin: '17px 0 17px 0',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
height: '66px',
|
||||
padding: '17px 0 17px 0',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderInlineEnd: '1px solid rgba(5, 5, 5, 0.06)'
|
||||
}}>
|
||||
<Icon component={Logo}/>
|
||||
<span style={{
|
||||
color: colorPrimary,
|
||||
|
|
@ -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'}}>
|
||||
<Outlet />
|
||||
<Content style={{margin: '0', overflowY: "auto"}}>
|
||||
<Outlet/>
|
||||
</Content>
|
||||
<Footer style={{textAlign: 'center'}}></Footer>
|
||||
{/*<Footer style={{textAlign: 'center'}}></Footer>*/}
|
||||
</Layout>
|
||||
</Layout>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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<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();
|
||||
|
||||
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={() => {
|
||||
invoiceSearchOption.clear();
|
||||
setActivatedOption("发票代码")
|
||||
}}>
|
||||
发票代码
|
||||
</a>)
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (<a className="simpleSearchOption" onClick={() => {
|
||||
invoiceSearchOption.clear();
|
||||
setActivatedOption("发票编号")
|
||||
|
||||
}}>
|
||||
发票编号
|
||||
</a>)
|
||||
}
|
||||
];
|
||||
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: (<a className="simpleSearchOption" onClick={() => {
|
||||
this.state.invoiceSearchOption.clear();
|
||||
this.setState({activatedOption: "发票代码"}
|
||||
)
|
||||
}}>
|
||||
发票代码
|
||||
</a>)
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (<a className="simpleSearchOption" onClick={() => {
|
||||
this.state.invoiceSearchOption.clear();
|
||||
this.setState({activatedOption: "发票编号"}
|
||||
)
|
||||
}}>
|
||||
发票编号
|
||||
</a>)
|
||||
}
|
||||
];
|
||||
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 (
|
||||
<div className="headBar">
|
||||
<div className="simpleSearchBar" style={{display: "flex", justifyContent: "space-evenly"}}>
|
||||
<Search className="simpleSearch"
|
||||
addonBefore={<Dropdown
|
||||
menu={{
|
||||
items,
|
||||
selectable: true,
|
||||
defaultSelectedKeys: ['1'],
|
||||
}}
|
||||
>
|
||||
<Typography.Link>
|
||||
<Space>
|
||||
{this.state.activatedOption}
|
||||
<DownOutlined/>
|
||||
</Space>
|
||||
</Typography.Link>
|
||||
</Dropdown>}
|
||||
placeholder={this.state.searchContent}
|
||||
allowClear
|
||||
onSearch={(value) => this.onSearch(value)}
|
||||
style={{width: 304}}
|
||||
enterButton
|
||||
/>
|
||||
<Checkbox onChange={(e) => {
|
||||
this.setState({complexEnabled: e.target.checked})
|
||||
|
||||
}}>高级搜索</Checkbox>
|
||||
<InvoiceUploadView/>
|
||||
</div>
|
||||
{this.state.complexEnabled&&
|
||||
<div className="complexSearchBar" style={{display: "flex"}}>
|
||||
<Form name="complexOption" {...formItemLayout} onValuesChange={onValuesChange}>
|
||||
<Row>
|
||||
<Form.Item name="upload-time-picker" label="发票上传时间" {...rangeConfig}>
|
||||
<RangePicker/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="invoice-time-picker" label="发票开票日期" {...rangeConfig}>
|
||||
<RangePicker/>
|
||||
</Form.Item>
|
||||
</Row>
|
||||
<Row style={{display: "flex", flexWrap: "wrap"}}>
|
||||
<Form.Item
|
||||
name={`invoice-state`}
|
||||
label={`发票状态`}
|
||||
style={{minWidth: 150}}
|
||||
><Select defaultValue="全部">
|
||||
<Option value="全部">全部</Option>
|
||||
<Option value="0">未使用</Option>
|
||||
<Option value="1">报销中</Option>
|
||||
<Option value="2">已报销</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={`invoice-kind`}
|
||||
label={`发票类型`}
|
||||
style={{minWidth: 300}}
|
||||
><Select defaultValue="全部">
|
||||
<Option value="全部">全部</Option>
|
||||
<Option value="增值税普通发票">增值税普通发票</Option>
|
||||
<Option value="增值税专用发票">增值税专用发票</Option>
|
||||
<Option value="增值税电子普通发票">增值税电子普通发票</Option>
|
||||
<Option value="增值税电子专用发票">增值税电子专用发票</Option>
|
||||
<Option value="定额发票">定额发票</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={`invoice-uploader`}
|
||||
label={`上传者`}
|
||||
>
|
||||
<Input placeholder="任意上传者"/>
|
||||
</Form.Item>
|
||||
</Row>
|
||||
</Form>
|
||||
</div>}
|
||||
return (
|
||||
<div className="headBar">
|
||||
<div className="simpleSearchBar" style={{height: '72px', padding: '30px',display: "flex",alignItems: 'center', justifyContent: "space-between",backgroundColor: colorBgContainer}}>
|
||||
<Search className="simpleSearch"
|
||||
addonBefore={<Dropdown
|
||||
menu={{
|
||||
items,
|
||||
selectable: true,
|
||||
defaultSelectedKeys: ['1'],
|
||||
}}
|
||||
>
|
||||
<Typography.Link>
|
||||
<Space>
|
||||
{activatedOption}
|
||||
<DownOutlined/>
|
||||
</Space>
|
||||
</Typography.Link>
|
||||
</Dropdown>}
|
||||
placeholder={'请在此输入'}
|
||||
allowClear
|
||||
onSearch={(value) => onSearch(value)}
|
||||
style={{width: 304}}
|
||||
enterButton
|
||||
/>
|
||||
<Checkbox onChange={(e) => {
|
||||
setComplexEnabled(e.target.checked)
|
||||
}}>高级搜索</Checkbox>
|
||||
<InvoiceUploadView/>
|
||||
</div>
|
||||
)
|
||||
{complexEnabled &&
|
||||
<div className="complexSearchBar" style={{display: "flex"}}>
|
||||
<Form name="complexOption" {...formItemLayout} onValuesChange={onValuesChange}>
|
||||
<Row>
|
||||
<Form.Item name="upload-time-picker" label="发票上传时间" {...rangeConfig}>
|
||||
<RangePicker/>
|
||||
</Form.Item>
|
||||
|
||||
}
|
||||
<Form.Item name="invoice-time-picker" label="发票开票日期" {...rangeConfig}>
|
||||
<RangePicker/>
|
||||
</Form.Item>
|
||||
</Row>
|
||||
<Row style={{display: "flex", flexWrap: "wrap"}}>
|
||||
<Form.Item
|
||||
name={`invoice-state`}
|
||||
label={`发票状态`}
|
||||
style={{minWidth: 150}}
|
||||
><Select defaultValue="全部">
|
||||
<Option value="全部">全部</Option>
|
||||
<Option value="0">未使用</Option>
|
||||
<Option value="1">报销中</Option>
|
||||
<Option value="2">已报销</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={`invoice-kind`}
|
||||
label={`发票类型`}
|
||||
style={{minWidth: 300}}
|
||||
><Select defaultValue="全部">
|
||||
<Option value="全部">全部</Option>
|
||||
<Option value="增值税普通发票">增值税普通发票</Option>
|
||||
<Option value="增值税专用发票">增值税专用发票</Option>
|
||||
<Option value="增值税电子普通发票">增值税电子普通发票</Option>
|
||||
<Option value="增值税电子专用发票">增值税电子专用发票</Option>
|
||||
<Option value="定额发票">定额发票</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={`invoice-uploader`}
|
||||
label={`上传者`}
|
||||
>
|
||||
<Input placeholder="任意上传者"/>
|
||||
</Form.Item>
|
||||
</Row>
|
||||
</Form>
|
||||
</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
class InvoiceItem extends React.Component<any, any> {
|
||||
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<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) =>
|
||||
return (
|
||||
<div style={{}}>
|
||||
<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
|
||||
|
|
@ -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}/>
|
||||
</>);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue