解决了一些问题
parent
d313886764
commit
1750ac8dc8
|
@ -8,7 +8,7 @@ export interface Token {
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Staff {
|
export interface Staff {
|
||||||
managingDepartment: Department;
|
managingDepartment: Department|null;
|
||||||
staffDepartments: Department[];
|
staffDepartments: Department[];
|
||||||
staffName: string;
|
staffName: string;
|
||||||
}
|
}
|
||||||
|
|
|
@ -28,8 +28,7 @@ const staffSlice = createSlice({
|
||||||
name: 'staff',
|
name: 'staff',
|
||||||
initialState: {
|
initialState: {
|
||||||
staffName: "",
|
staffName: "",
|
||||||
managingDepartment: { departmentId: 0,
|
managingDepartment: null as Department|null,
|
||||||
departmentName: ''},
|
|
||||||
staffDepartments: [{ departmentId: 0,
|
staffDepartments: [{ departmentId: 0,
|
||||||
departmentName: ''}]
|
departmentName: ''}]
|
||||||
},
|
},
|
||||||
|
|
|
@ -104,13 +104,14 @@ function HeaderBar(props: any) {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function MyMenu(props: any) {
|
function MainMenu(props: any) {
|
||||||
console.log(props)
|
console.log(props)
|
||||||
if (props.defaultSelectedKeys[0] === '')
|
if (props.defaultSelectedKeys[0] === '')
|
||||||
return null
|
return null
|
||||||
else
|
else
|
||||||
return (
|
return (
|
||||||
<Menu
|
<Menu
|
||||||
|
style={{height: '100%'}}
|
||||||
mode="inline"
|
mode="inline"
|
||||||
defaultSelectedKeys={props.defaultSelectedKeys}
|
defaultSelectedKeys={props.defaultSelectedKeys}
|
||||||
items={props.items}
|
items={props.items}
|
||||||
|
@ -194,7 +195,7 @@ function HomeView() {
|
||||||
<Layout style={{height: '100%'}}>
|
<Layout style={{height: '100%'}}>
|
||||||
<Sider
|
<Sider
|
||||||
width={208}
|
width={208}
|
||||||
style={{background: colorBgContainer}}
|
style={{background: colorBgContainer, boxShadow: '9px 0px 28px 0px rgba(0, 0, 0, 0.05)'}}
|
||||||
breakpoint="lg"
|
breakpoint="lg"
|
||||||
collapsedWidth="0"
|
collapsedWidth="0"
|
||||||
onBreakpoint={(broken) => {
|
onBreakpoint={(broken) => {
|
||||||
|
@ -204,12 +205,14 @@ function HomeView() {
|
||||||
console.log(collapsed, type);
|
console.log(collapsed, type);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{
|
<div
|
||||||
height: '32px',
|
style={{
|
||||||
margin: '17px 0 17px 0',
|
height: '66px',
|
||||||
|
padding: '17px 0 17px 0',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
alignItems: 'center'
|
alignItems: 'center',
|
||||||
|
borderInlineEnd: '1px solid rgba(5, 5, 5, 0.06)'
|
||||||
}}>
|
}}>
|
||||||
<Icon component={Logo}/>
|
<Icon component={Logo}/>
|
||||||
<span style={{
|
<span style={{
|
||||||
|
@ -219,14 +222,14 @@ function HomeView() {
|
||||||
marginLeft: '4px'
|
marginLeft: '4px'
|
||||||
}}>智能财务报销系统</span>
|
}}>智能财务报销系统</span>
|
||||||
</div>
|
</div>
|
||||||
<MyMenu items={menuItems} defaultSelectedKeys={defaultSelectedKeys}/>
|
<MainMenu style={{height: '100%'}} items={menuItems} defaultSelectedKeys={defaultSelectedKeys}/>
|
||||||
</Sider>
|
</Sider>
|
||||||
<Layout>
|
<Layout>
|
||||||
<HeaderBar/>
|
<HeaderBar/>
|
||||||
<Content style={{margin: '0'}}>
|
<Content style={{margin: '0', overflowY: "auto"}}>
|
||||||
<Outlet/>
|
<Outlet/>
|
||||||
</Content>
|
</Content>
|
||||||
<Footer style={{textAlign: 'center'}}></Footer>
|
{/*<Footer style={{textAlign: 'center'}}></Footer>*/}
|
||||||
</Layout>
|
</Layout>
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
)
|
||||||
|
|
|
@ -13,11 +13,11 @@ import {
|
||||||
TimePicker,
|
TimePicker,
|
||||||
Select,
|
Select,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
Pagination
|
Pagination, theme
|
||||||
} from "antd";
|
} from "antd";
|
||||||
import type {MenuProps, PaginationProps} from 'antd';
|
import type {MenuProps, PaginationProps} from 'antd';
|
||||||
import {DownOutlined, UploadOutlined} from '@ant-design/icons';
|
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 {InvoiceCommit, InvoiceSearchOption} from "../../../models/Staff"
|
||||||
import {Space, Typography} from 'antd';
|
import {Space, Typography} from 'antd';
|
||||||
import {SizeType} from "antd/es/config-provider/SizeContext";
|
import {SizeType} from "antd/es/config-provider/SizeContext";
|
||||||
|
@ -25,11 +25,12 @@ import axios from "axios";
|
||||||
import axiosInstance, {baseUrl} from "../../../utils/axiosInstance";
|
import axiosInstance, {baseUrl} from "../../../utils/axiosInstance";
|
||||||
import {Simulate} from "react-dom/test-utils";
|
import {Simulate} from "react-dom/test-utils";
|
||||||
import change = Simulate.change;
|
import change = Simulate.change;
|
||||||
import {useNavigate} from "react-router-dom";
|
import {useNavigate, useSearchParams} from "react-router-dom";
|
||||||
import {useAppDispatch} from "../../../models/hooks";
|
import {useAppDispatch} from "../../../models/hooks";
|
||||||
import InvoiceUploadView from "./InvoiceUploadView";
|
import InvoiceUploadView from "./InvoiceUploadView";
|
||||||
import {Invoice, invoiceTypeNameMap} from "../../../models/Invoice";
|
import {Invoice, invoiceTypeNameMap} from "../../../models/Invoice";
|
||||||
|
|
||||||
|
|
||||||
const {Meta} = Card;
|
const {Meta} = Card;
|
||||||
const {Search} = Input;
|
const {Search} = Input;
|
||||||
const {Option} = Select
|
const {Option} = Select
|
||||||
|
@ -52,46 +53,21 @@ const rangeConfig = {
|
||||||
rules: [{type: 'array' as const, required: false, message: 'Please select time!'}],
|
rules: [{type: 'array' as const, required: false, message: 'Please select time!'}],
|
||||||
};
|
};
|
||||||
|
|
||||||
class InvoiceSearch extends React.Component<any, any> {
|
function InvoiceSearch(props: { handleSearchData: any; }) {
|
||||||
constructor(props: { handleSearchData: any; }) {
|
const {
|
||||||
super(props);
|
token: {colorBgContainer, colorPrimary},
|
||||||
this.state = {
|
} = theme.useToken();
|
||||||
activatedOption: "发票代码",
|
|
||||||
searchContent: '请在此输入',
|
|
||||||
complexEnabled: false,
|
|
||||||
invoiceSearchOption: new InvoiceSearchOption(),
|
|
||||||
isUploadModalOpen: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onSearch = (value: string) => {
|
const [activatedOption, setActivatedOption] = useState('发票代码')
|
||||||
if (!this.state.complexEnabled)
|
const [complexEnabled, setComplexEnabled] = useState(false)
|
||||||
this.state.invoiceSearchOption.clear()
|
const [invoiceSearchOption, setInvoiceSearchOption] = useState(new InvoiceSearchOption())
|
||||||
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 items: MenuProps['items'] = [
|
const items: MenuProps['items'] = [
|
||||||
{
|
{
|
||||||
key: '1',
|
key: '1',
|
||||||
label: (<a className="simpleSearchOption" onClick={() => {
|
label: (<a className="simpleSearchOption" onClick={() => {
|
||||||
this.state.invoiceSearchOption.clear();
|
invoiceSearchOption.clear();
|
||||||
this.setState({activatedOption: "发票代码"}
|
setActivatedOption("发票代码")
|
||||||
)
|
|
||||||
}}>
|
}}>
|
||||||
发票代码
|
发票代码
|
||||||
</a>)
|
</a>)
|
||||||
|
@ -99,39 +75,57 @@ class InvoiceSearch extends React.Component<any, any> {
|
||||||
{
|
{
|
||||||
key: '2',
|
key: '2',
|
||||||
label: (<a className="simpleSearchOption" onClick={() => {
|
label: (<a className="simpleSearchOption" onClick={() => {
|
||||||
this.state.invoiceSearchOption.clear();
|
invoiceSearchOption.clear();
|
||||||
this.setState({activatedOption: "发票编号"}
|
setActivatedOption("发票编号")
|
||||||
)
|
|
||||||
}}>
|
}}>
|
||||||
发票编号
|
发票编号
|
||||||
</a>)
|
</a>)
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
const onValuesChange = (changedValues: any, allValues: any) => {
|
const onValuesChange = (changedValues: any, allValues: any) => {
|
||||||
this.state.invoiceSearchOption.clear()
|
invoiceSearchOption.clear()
|
||||||
|
|
||||||
console.log(allValues)
|
console.log(allValues)
|
||||||
if (allValues['upload-time-picker'] != null && allValues['upload-time-picker'] !== undefined) {
|
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')
|
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.invoiceUploadTimeEnd = allValues['upload-time-picker'][1].format('YYYY-MM-DDtHH:mm:ss')
|
||||||
}
|
}
|
||||||
if (allValues['invoice-time-picker'] !== null && allValues['invoice-time-picker'] !== undefined) {
|
if (allValues['invoice-time-picker'] !== null && allValues['invoice-time-picker'] !== undefined) {
|
||||||
this.state.invoiceSearchOption.invoiceDateStart = allValues['invoice-time-picker'][0].format('YYYY-MM-DD')
|
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.invoiceDateEnd = allValues['invoice-time-picker'][1].format('YYYY-MM-DD')
|
||||||
}
|
}
|
||||||
if (allValues['invoice-state'] !== "全部") {
|
if (allValues['invoice-state'] !== "全部") {
|
||||||
this.state.invoiceSearchOption.invoiceState = allValues['invoice-state']
|
invoiceSearchOption.invoiceState = allValues['invoice-state']
|
||||||
}
|
}
|
||||||
if (allValues['invoice-kind'] !== "全部") {
|
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() !== "") {
|
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 (
|
return (
|
||||||
<div className="headBar">
|
<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"
|
<Search className="simpleSearch"
|
||||||
addonBefore={<Dropdown
|
addonBefore={<Dropdown
|
||||||
menu={{
|
menu={{
|
||||||
|
@ -142,24 +136,23 @@ class InvoiceSearch extends React.Component<any, any> {
|
||||||
>
|
>
|
||||||
<Typography.Link>
|
<Typography.Link>
|
||||||
<Space>
|
<Space>
|
||||||
{this.state.activatedOption}
|
{activatedOption}
|
||||||
<DownOutlined/>
|
<DownOutlined/>
|
||||||
</Space>
|
</Space>
|
||||||
</Typography.Link>
|
</Typography.Link>
|
||||||
</Dropdown>}
|
</Dropdown>}
|
||||||
placeholder={this.state.searchContent}
|
placeholder={'请在此输入'}
|
||||||
allowClear
|
allowClear
|
||||||
onSearch={(value) => this.onSearch(value)}
|
onSearch={(value) => onSearch(value)}
|
||||||
style={{width: 304}}
|
style={{width: 304}}
|
||||||
enterButton
|
enterButton
|
||||||
/>
|
/>
|
||||||
<Checkbox onChange={(e) => {
|
<Checkbox onChange={(e) => {
|
||||||
this.setState({complexEnabled: e.target.checked})
|
setComplexEnabled(e.target.checked)
|
||||||
|
|
||||||
}}>高级搜索</Checkbox>
|
}}>高级搜索</Checkbox>
|
||||||
<InvoiceUploadView/>
|
<InvoiceUploadView/>
|
||||||
</div>
|
</div>
|
||||||
{this.state.complexEnabled&&
|
{complexEnabled &&
|
||||||
<div className="complexSearchBar" style={{display: "flex"}}>
|
<div className="complexSearchBar" style={{display: "flex"}}>
|
||||||
<Form name="complexOption" {...formItemLayout} onValuesChange={onValuesChange}>
|
<Form name="complexOption" {...formItemLayout} onValuesChange={onValuesChange}>
|
||||||
<Row>
|
<Row>
|
||||||
|
@ -207,8 +200,6 @@ class InvoiceSearch extends React.Component<any, any> {
|
||||||
</div>}
|
</div>}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
class InvoiceItem extends React.Component<any, any> {
|
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> {
|
function InvoiceListView(props: {}) {
|
||||||
constructor(props: {}) {
|
const [totalNum, setTotalNum] = useState(0)
|
||||||
super(props);
|
const [invoices, setInvoices] = useState([])
|
||||||
this.state = {
|
const [search, setSearch] = useSearchParams()
|
||||||
isNoOrCode: '1',
|
|
||||||
invoices: [],
|
|
||||||
invoiceNo: null,
|
|
||||||
invoiceCode: null,
|
|
||||||
invoiceSearchOption: new InvoiceSearchOption(),
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 20,
|
|
||||||
totalNum: 2,
|
|
||||||
PaginationKey: -2
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount(){
|
const [invoiceSearchOption, setInvoiceSearchOption] = useState(new InvoiceSearchOption())
|
||||||
this.searchInvoiceContent()
|
|
||||||
}
|
|
||||||
|
|
||||||
onChange = (pageCurrentNum: Number, pageCurrentSize: Number) => {
|
const navigate = useNavigate()
|
||||||
console.log(pageCurrentNum, pageCurrentSize)
|
|
||||||
this.setState({pageNum: pageCurrentNum, pageSize: pageCurrentSize})
|
|
||||||
console.log(this.state.pageNum, this.state.pageSize)
|
|
||||||
this.searchInvoiceContent()
|
|
||||||
}
|
|
||||||
|
|
||||||
handleInvoiceSearchInfo= (invoiceSearch: InvoiceSearchOption) => {
|
const handleInvoiceSearchInfo = (invoiceSearch: InvoiceSearchOption) => {
|
||||||
this.setState({invoiceSearchOption: invoiceSearch})
|
setInvoiceSearchOption(invoiceSearch)
|
||||||
console.log(this.state.invoiceSearchOption)
|
searchInvoiceContent()
|
||||||
this.searchInvoiceContent()
|
|
||||||
}
|
}
|
||||||
|
const searchInvoiceContent = () => {
|
||||||
searchInvoiceContent = () => {
|
let params: any = invoiceSearchOption
|
||||||
let params = this.state.invoiceSearchOption
|
|
||||||
Object.keys(params).forEach(key => {
|
Object.keys(params).forEach(key => {
|
||||||
if (params[key] != null && params[key] !== undefined && params[key] === "") {
|
if (params[key] != null && params[key] !== undefined && params[key] === "") {
|
||||||
params[key] = null
|
params[key] = null
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
params['pageNum'] = this.state.pageNum-1
|
if (search.get('currentPage'))
|
||||||
params['pageSize'] = this.state.pageSize
|
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({
|
axiosInstance({
|
||||||
url: 'common/invoice',
|
url: 'common/invoice',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: params
|
params: params
|
||||||
}).then(response => {
|
}).then(response => {
|
||||||
console.log(response.data)
|
console.log(response.data)
|
||||||
this.handleInvoicesTotalNum(response.data.total)
|
setTotalNum(response.data.total)
|
||||||
this.handleInvoicesContent(response.data.records)
|
setInvoices(response.data.records)
|
||||||
}).catch(function (error) {
|
}).catch(function (error) {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
const onChange = (pageCurrentNum: Number, pageCurrentSize: Number) => {
|
||||||
handleInvoicesTotalNum(value: Number) {
|
console.log(pageCurrentNum, pageCurrentSize)
|
||||||
this.setState({totalNum: value, PaginationKey: -value})
|
navigate('/invoice/mine?currentPage=' + pageCurrentNum + '&pageSize=' + pageCurrentSize)
|
||||||
}
|
}
|
||||||
|
|
||||||
handleInvoicesContent = (value: Array<Invoice>) => {
|
useEffect(() => {
|
||||||
console.log(value)
|
console.log(search.get('currentPage'))
|
||||||
this.setState({invoices: value})
|
console.log(search.get('pageSize'))
|
||||||
}
|
searchInvoiceContent()
|
||||||
|
}, [search]);
|
||||||
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
return (
|
||||||
<div style={{}}>
|
<div style={{}}>
|
||||||
<InvoiceSearch handleSearchData={this.handleInvoiceSearchInfo}/>
|
<InvoiceSearch handleSearchData={handleInvoiceSearchInfo}/>
|
||||||
<div style={{display: "flex", flexWrap: "wrap"}}>
|
<div style={{padding:26,display:"flex", flexDirection: "column", alignItems: "flex-end"}}>
|
||||||
{this.state.invoices.map((item: Invoice, index:number) =>
|
<div style={{display: "flex", flexWrap: "wrap", justifyContent:'center', width: '100%'}}>
|
||||||
|
{invoices.map((item: Invoice, index: number) =>
|
||||||
<InvoiceItem invoice={item} key={index}/>
|
<InvoiceItem invoice={item} key={index}/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<Pagination style={{
|
<Pagination showSizeChanger
|
||||||
position: "fixed",
|
showQuickJumper
|
||||||
bottom: 20,
|
showTotal={(total) => `共 ${total} 项`}
|
||||||
}} key={this.state.PaginationKey} showQuickJumper defaultCurrent={1} total={this.state.totalNum} onChange={this.onChange}/>
|
current={Number(search.get('currentPage')?search.get('currentPage'):1)}
|
||||||
|
pageSize={Number(search.get('pageSize')?search.get('pageSize'):10)}
|
||||||
|
total={totalNum} onChange={onChange}/>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
export default InvoiceListView
|
export default InvoiceListView
|
|
@ -99,22 +99,24 @@ function UpLoadModal(props: any) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function FormModal(props: any) {
|
function FormModal(props: any) {
|
||||||
const [open, setOpen] = useState(false)
|
//const [open, setOpen] = useState(false)
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
const [invoice, setInvoice] = useState({})
|
const [invoice, setInvoice] = useState({})
|
||||||
const [formItems, setFormItems] = useState(undefined)
|
const [formItems, setFormItems] = useState(undefined)
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setOpen(props.open)
|
//setOpen(props.open)
|
||||||
console.log(props.invoiceIdentifyResponse)
|
console.log(props.invoiceIdentifyResponse)
|
||||||
let i = {...props.invoiceIdentifyResponse}
|
let i = {...props.invoiceIdentifyResponse}
|
||||||
setInvoice(i)
|
setInvoice(i)
|
||||||
refreshFormItems(props.invoiceIdentifyResponse?.invoiceKind)
|
refreshFormItems(props.invoiceIdentifyResponse?.invoiceKind)
|
||||||
|
//TODO: 重置表单
|
||||||
form.setFieldsValue(i)
|
form.setFieldsValue(i)
|
||||||
|
|
||||||
}, [props]);
|
}, [props]);
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
setOpen(false);
|
props.onClose()
|
||||||
|
//setOpen(false);
|
||||||
};
|
};
|
||||||
const submit = () => {
|
const submit = () => {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
|
@ -134,7 +136,8 @@ function FormModal(props: any) {
|
||||||
}).then(response => {
|
}).then(response => {
|
||||||
console.log(response.data)
|
console.log(response.data)
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
setOpen(false)
|
props.onClose()
|
||||||
|
//setOpen(false)
|
||||||
}).catch(function (error) {
|
}).catch(function (error) {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
|
@ -202,7 +205,7 @@ function FormModal(props: any) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
open={open}
|
open={props.open}
|
||||||
title="提交发票"
|
title="提交发票"
|
||||||
onOk={submit}
|
onOk={submit}
|
||||||
onCancel={handleCancel}
|
onCancel={handleCancel}
|
||||||
|
@ -266,17 +269,20 @@ class InvoiceUploadView extends React.Component<any, any> {
|
||||||
this.setState({uploadModalOpen: false, formModalOpen: true, invoiceIdentifyResponse: response})
|
this.setState({uploadModalOpen: false, formModalOpen: true, invoiceIdentifyResponse: response})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleClose = () => {
|
||||||
|
this.setState({formModalOpen:false})
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Button onClick={this.showUploadView} className="uploadButton" type="primary" icon={<UploadOutlined/>}
|
<Button onClick={this.showUploadView} className="uploadButton" type="primary" icon={<UploadOutlined/>}>
|
||||||
size="large">
|
|
||||||
上传
|
上传
|
||||||
</Button>
|
</Button>
|
||||||
<UpLoadModal open={this.state.uploadModalOpen} nextStep={this.handleNextStep}/>
|
<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}/>
|
invoiceIdentifyResponse={this.state.invoiceIdentifyResponse}/>
|
||||||
</>);
|
</>);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue