85 lines
3.3 KiB
TypeScript
85 lines
3.3 KiB
TypeScript
import {BillList} from "@/components/bill/list.tsx";
|
|
import {Button, Modal, Notification, Popconfirm, Space} from "@douyinfe/semi-ui";
|
|
import {useState} from "react";
|
|
import {useRequest} from "ahooks";
|
|
import {useTranslation} from "react-i18next";
|
|
import * as Sentry from "@sentry/react";
|
|
|
|
import SearchForm from "@/components/bill/search-form.tsx";
|
|
import BillDetail from "@/components/bill/detail.tsx";
|
|
import {billList, BillQueryParams, cancelBill} from "@/service/api/bill.ts";
|
|
import {BillStatus} from "@/service/types.ts";
|
|
import {useDownloadReceiptPDF} from "@/service/generate-pdf.ts";
|
|
|
|
const BillQuery = () => {
|
|
const [showBill, setShowBill] = useState<BillModel>()
|
|
const [queryParams, setBillQueryParams] = useState<BillQueryParams>({});
|
|
const {data, loading, refresh} = useRequest(() => billList(queryParams), {
|
|
refreshDeps: [queryParams],
|
|
onError: (e) => {
|
|
Sentry.captureMessage('Error: Query bill error', {
|
|
level: 'error',
|
|
extra: {
|
|
message: e.message,
|
|
...queryParams
|
|
}
|
|
});
|
|
}
|
|
})
|
|
const {loading: downloading, downloadPDF} = useDownloadReceiptPDF()
|
|
const {t} = useTranslation()
|
|
|
|
const onConfirmCancel = (bill: BillModel) => {
|
|
cancelBill(bill.id).then(() => {
|
|
Notification.success({title: 'Notice', content: t('bill.cancel_success')})
|
|
refresh()
|
|
})
|
|
}
|
|
const operation = (bill: BillModel) => {
|
|
return (<Space>
|
|
{bill.status == BillStatus.PENDING && <>
|
|
<Popconfirm
|
|
title={'Notice'}
|
|
content={`${t('bill.cancel_confirm')}?`}
|
|
onConfirm={() => onConfirmCancel(bill)}
|
|
>
|
|
<Button size={'small'} theme={'solid'} type={'primary'}>{t('bill.cancel')}</Button>
|
|
</Popconfirm>
|
|
<Button onClick={() => setShowBill(bill)} size={'small'} theme={'solid'}
|
|
type={'primary'}>{t('base.qr-code')}</Button>
|
|
{AppMode == 'development' && <a href={`/pay?bill=${bill.id}`} target={'_blank'}>Payment</a>}
|
|
</>}
|
|
{
|
|
bill.status == BillStatus.PAID
|
|
&& <Button
|
|
onClick={() => downloadPDF(bill)} size={'small'} theme={'solid'}
|
|
type={'primary'} loading={downloading}>{t('bill.download_receipt')}</Button>
|
|
}
|
|
</Space>)
|
|
}
|
|
return (<div>
|
|
<SearchForm showApply loading={loading} onSearch={setBillQueryParams}/>
|
|
<BillList
|
|
type={'query'} loading={loading}
|
|
operationRender={operation} source={data}
|
|
onPageChange={(page_number) => {
|
|
setBillQueryParams({
|
|
...queryParams,
|
|
page_number
|
|
})
|
|
}}
|
|
/>
|
|
<Modal
|
|
title="Bill Detail"
|
|
visible={!!showBill}
|
|
width={620}
|
|
onCancel={() => setShowBill(undefined)} //>=1.16.0
|
|
closeOnEsc={true}
|
|
footer={null}
|
|
closeIcon={<span></span>}
|
|
>
|
|
{showBill && <BillDetail bill={showBill} onCancel={() => setShowBill(undefined)}/>}
|
|
</Modal>
|
|
</div>)
|
|
}
|
|
export default BillQuery |