初步完成发票管理

src/models/Staff.ts

@@ -12,6 +12,7 @@ export interface Staff {
     staffDepartments: Department[];
     staffName: string;
     staffBase: string;
+    staffId: string|null|undefined;
 }
 
 export interface Department {

src/models/store.ts

@@ -27,6 +27,7 @@ const tokenSlice = createSlice({
 const staffSlice = createSlice({
     name: 'staff',
     initialState: {
+        staffId: "",
         staffName: "",
         managingDepartment: null as Department|null,
         staffDepartments: [{ departmentId: 0,

src/pages/Invoice/InvoiceDetailModal.tsx

@@ -6,10 +6,11 @@ import {
     invoiceItemsMap, invoiceTypeExtraItemsMap,
     invoiceTypeItemsMap,
     invoiceTypeNameMap, invoiceTypeShowItemsMap
-} from "../../../models/Invoice";
+} from "../../models/Invoice";
-import axiosInstance from "../../../utils/axiosInstance";
+import axiosInstance from "../../utils/axiosInstance";
 import TextArea from "antd/es/input/TextArea";
 import dayjs, {Dayjs} from "dayjs";
+import qs from "qs";
 
 const {Text, Paragraph} = Typography;
 
@@ -77,12 +78,31 @@ function InvoiceDetailModal(props: any) {
         refreshFormItems(value)
     }
 
+    const withDraw = () => {
+        setLoading(true)
+        axiosInstance({
+            url: 'common/invoice/' + props.invoiceDetail.invoiceId,
+            method: 'delete',
+        }).then(response => {
+            console.log(response.data)
+            setLoading(false)
+            props.onClose()
+            props.needRefresh()
+        }).catch(function (error) {
+            console.log(error)
+            setLoading(false)
+        })
+    }
+
     return (
         <Modal
             open={props.open}
             title="发票详情"
             onCancel={handleCancel}
-            footer={null}
+            footer={props.showFooter ? <Button key="next" type="primary" danger loading={loading} onClick={withDraw}
+            >
+                打回
+            </Button> : null}
         >
             {
                 <Form layout="horizontal" labelCol={{span: 4}}

src/pages/Invoice/management/InvoiceManagement.tsx

@@ -1,6 +1,374 @@
-function InvoiceManagement() {
+import {
+    Card,
+    Dropdown,
+    List,
+    Row,
+    Input,
+    Button,
+    Radio,
+    Col,
+    Divider,
+    DatePicker,
+    Form,
+    TimePicker,
+    Select,
+    Checkbox,
+    Pagination, theme, Tag, Badge
+} from "antd";
+import type {MenuProps, PaginationProps} from 'antd';
+import {DownOutlined, UploadOutlined} from '@ant-design/icons';
+import React, {
+    ReactElement,
+    JSXElementConstructor,
+    ReactFragment,
+    ReactPortal,
+    useState,
+    useEffect,
+    ReactNode
+} from "react";
+import {InvoiceDetail, InvoiceSearchOption} from "../../../models/Invoice"
+import {Space, Typography} from 'antd';
+import {SizeType} from "antd/es/config-provider/SizeContext";
+import axios from "axios";
+import axiosInstance, {baseUrl} from "../../../utils/axiosInstance";
+import {Simulate} from "react-dom/test-utils";
+import change = Simulate.change;
+import {useNavigate, useSearchParams} from "react-router-dom";
+import {useAppDispatch} from "../../../models/hooks";
+import {
+    Invoice,
+    invoiceItemsMap,
+    invoiceTypeExtraItemsMap,
+    invoiceTypeItemsMap,
+    invoiceTypeNameMap
+} from "../../../models/Invoice";
+import {RadioButtonProps} from "antd/es/radio/radioButton";
+import qs from "qs";
+import InvoiceDetailModal from "../InvoiceDetailModal";
+import dayjs from "dayjs";
+
+
+const {Text, Paragraph} = Typography;
+const {Meta} = Card;
+const {Search} = Input;
+const {Option} = Select
+let invoices: Array<Invoice>
+const {RangePicker} = DatePicker;
+
+const config = {
+    rules: [{type: 'object' as const, required: false, message: 'Please select time!'}],
+};
+const rangeConfig = {
+    rules: [{type: 'array' as const, required: false, message: 'Please select time!'}],
+};
+
+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.invoiceStates = [allValues['invoice-state']]
+        }
+        if (allValues['invoice-kind'] !== "全部") {
+            invoiceSearchOption.invoiceKinds = [allValues['invoice-kind']]
+        }
+        if (allValues['invoice-uploader'] !== null && allValues['invoice-uploader'] !== undefined && allValues['invoice-uploader'].trim() !== "") {
+            invoiceSearchOption.invoiceUploaderId = allValues['invoice-uploader'].trim()
+        }
+        props.handleSearchData(invoiceSearchOption)
+    }
+
+    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;
+        }
+
+        props.handleSearchData(invoiceSearchOption)
+
+    }
+
+    const getInvoiceKindsRadioButtons: any = () => {
+        let options: any[] = []
+        invoiceTypeNameMap.forEach(function (value, key, map) {
+            options.push(<Radio.Button style={{marginBottom: 10}} value={key}>{value}</Radio.Button>)
+        })
+        return options
+    }
+
     return (
-        <div>发票管理</div>
+        <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: 404}}
+                        enterButton
+                />
+                <Checkbox onChange={(e) => {
+                    setComplexEnabled(e.target.checked)
+                }}>高级搜索</Checkbox>
+            </div>
+            {complexEnabled &&
+                <div className="complexSearchBar" style={{
+                    margin: '20px',
+                    padding: '20px 20px 0px 20px',
+                    display: "flex",
+                    backgroundColor: colorBgContainer,
+                    borderRadius: '20px'
+                }}>
+                    <Form name="complexOption" onValuesChange={onValuesChange} style={{width: '100%'}}>
+
+                        <Form.Item
+                            name={`invoice-kind`}
+                            label={`发票类型`}
+                        >
+                            <Radio.Group defaultValue="全部">
+                                <Radio.Button value="全部">全部</Radio.Button>
+                                {getInvoiceKindsRadioButtons()}
+                            </Radio.Group>
+                        </Form.Item>
+
+                        <div style={{marginTop: -10, display: "flex", flexDirection: "row", flexWrap: "wrap"}}>
+                            <Form.Item name="upload-time-picker" label="上传时间" {...rangeConfig}
+                                       style={{marginRight: 100}}>
+                                <RangePicker/>
+                            </Form.Item>
+
+                            <Form.Item name="invoice-time-picker" label="开票日期" {...rangeConfig}>
+                                <RangePicker/>
+                            </Form.Item>
+                        </div>
+                        <Form.Item
+                            name={`invoice-state`}
+                            label={`发票状态`}
+                        >
+                            <Radio.Group defaultValue="全部">
+                                <Radio.Button value="全部">全部</Radio.Button>
+                                <Radio.Button value="0">未使用</Radio.Button>
+                                <Radio.Button value="1">报销中</Radio.Button>
+                                <Radio.Button value="2">已报销</Radio.Button>
+                            </Radio.Group>
+                        </Form.Item>
+
+                    </Form>
+                </div>}
+        </div>
     )
 }
+
+function InvoiceItem(props: { invoice: Invoice, onClick(invoice: Invoice): void }) {
+    const {
+        token: {colorBgContainer, colorPrimary, colorSuccess, colorWarning},
+    } = theme.useToken();
+
+    const onClick = () => {
+        props.onClick(props.invoice)
+    }
+    return (
+        <div style={{
+            margin: 30
+        }}>
+            <Badge.Ribbon color={['#00000000', colorPrimary, colorSuccess][props.invoice.invoiceState]} text={['', '报销中', '已报销'][props.invoice.invoiceState]}>
+                <Card
+                    onClick={onClick}
+                    hoverable
+                    style={{
+                        width: 250,
+                        height: 300,
+                    }}
+                    cover={
+                        <img alt="thumbnail"
+                             src={baseUrl + props.invoice.invoiceThumbnailUri}
+                             width="220" height="180"/>
+
+                    }
+                >
+                    <div style={{marginTop: -20}}>
+                        <div style={{height: 32,display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: 'center'}}>
+                            <Text style={{
+                                fontWeight: "bold",
+                                fontSize: 20
+                            }}>¥{(props.invoice.invoiceAmount / 100.0).toFixed(2)}</Text>
+                            <Text style={{
+                                fontWeight: "bold",
+                                fontSize: 16
+                            }}>{props.invoice.invoiceUploader.staffName }</Text>
+                        </div>
+                        <div style={{height: 22,display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: 'center'}}>
+                            <Text>{invoiceTypeNameMap.get(props.invoice.invoiceKind)}</Text>
+                            <Text>{props.invoice.invoiceUploader.staffId }</Text>
+                        </div>
+                        <li>{props.invoice.invoiceNo}</li>
+                        <li>{props.invoice.invoiceDate}</li>
+                    </div>
+                </Card>
+            </Badge.Ribbon>
+        </div>
+
+
+    )
+
+}
+
+
+function InvoiceManagement(props: {}) {
+    const [totalNum, setTotalNum] = useState(0)
+    const [invoices, setInvoices] = useState([] as any[])
+    const [search, setSearch] = useSearchParams()
+    const [invoiceSearchOption, setInvoiceSearchOption] = useState(new InvoiceSearchOption())
+    const [detailModalOpen, setDetailModalOpen] = useState(false)
+    const [invoiceDetail, setInvoiceDetail] = useState(null as InvoiceDetail | null)
+    const navigate = useNavigate()
+
+    const handleInvoiceSearchInfo = (invoiceSearch: InvoiceSearchOption) => {
+        //setInvoiceSearchOption(invoiceSearch)
+        searchInvoiceContent(invoiceSearch)
+    }
+    const searchInvoiceContent = (invoiceSearch: InvoiceSearchOption) => {
+        setInvoices([])
+        let params: any = invoiceSearch
+        Object.keys(params).forEach(key => {
+            if (params[key] != null && params[key] !== undefined && params[key] === "") {
+                params[key] = null
+            }
+        })
+        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?' + qs.stringify(params, {skipNulls: true, arrayFormat: 'indices'}),
+            method: 'get',
+        }).then(response => {
+            console.log(response.data)
+            setTotalNum(response.data.total)
+            setInvoices([...response.data.records])
+        }).catch(function (error) {
+            console.log(error)
+        })
+    }
+    const onChange = (pageCurrentNum: Number, pageCurrentSize: Number) => {
+        console.log(pageCurrentNum, pageCurrentSize)
+        navigate('/invoice/management?currentPage=' + pageCurrentNum + '&pageSize=' + pageCurrentSize)
+    }
+
+    const onItemClick = (invoice: Invoice) => {
+        console.log(invoice)
+        axiosInstance({
+            url: 'common/invoice/' + invoice.invoiceId,
+            method: 'get',
+        }).then(response => {
+            console.log(response.data)
+            let detail: InvoiceDetail = response.data
+            detail.invoiceAmount /= 100.
+            setInvoiceDetail(detail)
+            setDetailModalOpen(true)
+        }).catch(function (error) {
+            console.log(error)
+        })
+
+    }
+
+    useEffect(() => {
+        console.log(search.get('currentPage'))
+        console.log(search.get('pageSize'))
+        searchInvoiceContent(invoiceSearchOption)
+    }, [search]);
+
+    console.log(invoices)
+    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 onClick={onItemClick} invoice={item} key={index}/>
+                    )}
+                </div>
+                <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>
+            <InvoiceDetailModal needRefresh={()=>{ searchInvoiceContent(invoiceSearchOption)}} invoiceDetail={invoiceDetail} open={detailModalOpen} onClose={() => {
+                setDetailModalOpen(false)
+            }} showFooter={true}/>
+        </div>
+
+    )
+}
+
 export default InvoiceManagement

src/pages/Invoice/mine/InvoiceListView.tsx

@@ -13,7 +13,7 @@ import {
     TimePicker,
     Select,
     Checkbox,
-    Pagination, theme
+    Pagination, theme, Tag, Badge
 } from "antd";
 import type {MenuProps, PaginationProps} from 'antd';
 import {DownOutlined, UploadOutlined} from '@ant-design/icons';
@@ -45,8 +45,9 @@ import {
 } from "../../../models/Invoice";
 import {RadioButtonProps} from "antd/es/radio/radioButton";
 import qs from "qs";
-import InvoiceDetailModal from "./InvoiceDetailModal";
+import InvoiceDetailModal from "../InvoiceDetailModal";
 import dayjs from "dayjs";
+import {store} from "../../../models/store";
 
 
 const {Meta} = Card;
@@ -174,10 +175,16 @@ function InvoiceSearch(props: { handleSearchData: any; }) {
                 <Checkbox onChange={(e) => {
                     setComplexEnabled(e.target.checked)
                 }}>高级搜索</Checkbox>
-                <InvoiceUploadView/>
+                <InvoiceUploadView needRefresh={()=>{props.handleSearchData(invoiceSearchOption)}} />
             </div>
             {complexEnabled &&
-                <div className="complexSearchBar" style={{margin: '20px',padding: '20px 20px 0px 20px',display: "flex",backgroundColor: colorBgContainer, borderRadius: '20px'}}>
+                <div className="complexSearchBar" style={{
+                    margin: '20px',
+                    padding: '20px 20px 0px 20px',
+                    display: "flex",
+                    backgroundColor: colorBgContainer,
+                    borderRadius: '20px'
+                }}>
                     <Form name="complexOption" onValuesChange={onValuesChange} style={{width: '100%'}}>
 
                         <Form.Item
@@ -191,7 +198,8 @@ function InvoiceSearch(props: { handleSearchData: any; }) {
                         </Form.Item>
 
                         <div style={{marginTop: -10, display: "flex", flexDirection: "row", flexWrap: "wrap"}}>
-                            <Form.Item name="upload-time-picker" label="上传时间" {...rangeConfig} style={{marginRight:100}}>
+                            <Form.Item name="upload-time-picker" label="上传时间" {...rangeConfig}
+                                       style={{marginRight: 100}}>
                                 <RangePicker/>
                             </Form.Item>
 
@@ -217,46 +225,49 @@ function InvoiceSearch(props: { handleSearchData: any; }) {
     )
 }
 
-class InvoiceItem extends React.Component<any, any> {
+function InvoiceItem(props: { invoice: Invoice, onClick(invoice: Invoice): void }) {
-    constructor(props: { invoice: Invoice }) {
+    const {
-        super(props);
+        token: {colorBgContainer, colorPrimary, colorSuccess, colorWarning},
-        this.state = {
+    } = theme.useToken();
-            invoiceThumbnailUri: baseUrl + props.invoice.invoiceThumbnailUri,
-            invoiceKind: props.invoice.invoiceKind,
-            invoiceAmount: props.invoice.invoiceAmount,
-            invoiceDate: props.invoice.invoiceDate,
-            invoiceNo: props.invoice.invoiceNo,
-        }
-        console.log(this.state.invoiceThumbnailUri)
-    }
 
-
+    const onClick = () => {
-    onClick = () => {
+        props.onClick(props.invoice)
-        this.props.onClick(this.props.invoice)
     }
-    render() {
     return (
+        <div style={{
+            margin: 30
+        }}>
+            <Badge.Ribbon color={['#00000000', colorPrimary, colorSuccess][props.invoice.invoiceState]} text={['', '报销中', '已报销'][props.invoice.invoiceState]}>
                 <Card
-                onClick={this.onClick}
+                    onClick={onClick}
                     hoverable
                     style={{
                         width: 250,
                         height: 300,
-                    margin: 30
                     }}
-                cover={<img alt="thumbnail"
+                    cover={
-                            src={this.state.invoiceThumbnailUri}
+                        <img alt="thumbnail"
-                            width="220" height="180"/>}
+                             src={baseUrl + props.invoice.invoiceThumbnailUri}
+                             width="220" height="180"/>
+
+                    }
                 >
                     <div style={{marginTop: -20}}>
-                    <li style={{fontWeight: "bold", fontSize: 20}}>¥{(this.state.invoiceAmount / 100.0).toFixed(2)}</li>
+                        <li style={{
-                    <li>{invoiceTypeNameMap.get(this.state.invoiceKind)}</li>
+                            fontWeight: "bold",
-                    <li>{this.state.invoiceNo}</li>
+                            fontSize: 20
-                    <li>{this.state.invoiceDate}</li>
+                        }}>¥{(props.invoice.invoiceAmount / 100.0).toFixed(2)}</li>
+                        <li>{invoiceTypeNameMap.get(props.invoice.invoiceKind)}</li>
+                        <li>{props.invoice.invoiceNo}</li>
+                        <li>{props.invoice.invoiceDate}</li>
                     </div>
                 </Card>
+            </Badge.Ribbon>
+        </div>
+
+
     )
-    }
+
 }
 
 
@@ -289,6 +300,9 @@ function InvoiceListView(props: {}) {
             params.pageSize = Number(search.get('pageSize'))
         else
             params.pageSize = 10
+
+        params.invoiceUploaderId = store.getState().token.staffId
+
         axiosInstance({
             url: 'common/invoice?' + qs.stringify(params, {skipNulls: true, arrayFormat: 'indices'}),
             method: 'get',
@@ -345,7 +359,9 @@ function InvoiceListView(props: {}) {
                             pageSize={Number(search.get('pageSize') ? search.get('pageSize') : 10)}
                             total={totalNum} onChange={onChange}/>
             </div>
-            <InvoiceDetailModal invoiceDetail={invoiceDetail} open={detailModalOpen} onClose={()=>{setDetailModalOpen(false)}}/>
+            <InvoiceDetailModal invoiceDetail={invoiceDetail} open={detailModalOpen} onClose={() => {
+                setDetailModalOpen(false)
+            }}/>
         </div>
 
     )

src/pages/Invoice/mine/InvoiceUploadView.tsx

@@ -132,6 +132,7 @@ function FormModal(props: any) {
             console.log(response.data)
             setLoading(false)
             props.onClose()
+            props.needRefresh()
             //setOpen(false)
         }).catch(function (error) {
             console.log(error)
@@ -240,7 +241,7 @@ function FormModal(props: any) {
 
 class InvoiceUploadView extends React.Component<any, any> {
 
-    constructor(props: {}) {
+    constructor(props: any) {
         super(props);
         this.state = {
             uploadModalOpen: false,
@@ -281,7 +282,7 @@ class InvoiceUploadView extends React.Component<any, any> {
                     上传
                 </Button>
                 <UpLoadModal open={this.state.uploadModalOpen} nextStep={this.handleNextStep} onClose={this.handleUploadModalClose}/>
-                <FormModal open={this.state.formModalOpen} onClose={this.handleClose}
+                <FormModal needRefresh={()=>{ this.props.needRefresh()}}  open={this.state.formModalOpen} onClose={this.handleClose}
                            invoiceIdentifyResponse={this.state.invoiceIdentifyResponse}/>
             </>);