chuhai-payment-frontend/src/pages/bill/reconciliation.tsx

69 lines
2.9 KiB
TypeScript

import {BillList} from "@/components/bill/list.tsx";
import SearchForm from "@/components/bill/search-form.tsx";
import {Button, Space, TabPane, Tabs, Notification, Popconfirm} from "@douyinfe/semi-ui";
import {billList, BillQueryParams, confirmBills} from "@/service/api/bill.ts";
import {useRequest, useSetState} from "ahooks";
import {useTranslation} from "react-i18next";
import {useState} from "react";
const BillReconciliation = () => {
const {t} = useTranslation()
const [queryParams, setBillQueryParams] = useSetState<BillQueryParams>({});
const {data, loading,refresh} = useRequest(() => billList(queryParams), {
refreshDeps: [queryParams]
})
const [selectKeys,setSelectedKeys] = useState<(string|number)[]>([])
const confirmBill = (records: number[]) => {
if(records.length == 0) {
Notification.error({title:'Notice',content:t('bill.confirm_select_empty')})
return
}
confirmBills(records).then(()=>{
Notification.success({title:'Notice',content:t('bill.confirm_success')})
refresh()
})
}
const operation = (_record: BillModel) => {
return (<Space>
<Popconfirm
title={'Notice'}
content={t('bill.confirm_confirm_title')}
onConfirm={()=>confirmBill([_record.id])}
>
<Button size={'small'} theme={'solid'}
type={'primary'}>{t('bill.confirm')}</Button>
</Popconfirm>
</Space>)
}
return (<div>
<SearchForm searchHeader={(
<Tabs className={'no-border'} onChange={(apply_status) => setBillQueryParams({apply_status})}>
<TabPane tab={<span>{t('bill.reconciliation_status_pending')}</span>} itemKey="UNCHECKED"/>
<TabPane tab={<span>{t('bill.reconciliation_status_submitted')}</span>} itemKey="CHECKED"/>
</Tabs>
)} loading={loading} onSearch={setBillQueryParams}/>
<BillList
source={data} type={'reconciliation'}
operationRender={queryParams.apply_status == 'confirmed' ? undefined : operation}
onRowSelection={queryParams.apply_status == 'confirmed' ? undefined : (keys: (number|string)[]) => {
setSelectedKeys(keys);
}}
loading={loading}
onPageChange={(page_number) => setBillQueryParams({page_number})}
tableFooter={queryParams.apply_status != 'confirmed' && selectKeys?.length > 0 && (
<Popconfirm
title={'Notice'}
content={`${t('bill.cancel_confirm_bills')}?`}
onConfirm={()=>confirmBill(selectKeys as number[])}
>
<Button style={{marginRight:10}}>
{t('bill.confirm_batch')}
</Button>
</Popconfirm>
)}
/>
</div>)
}
export default BillReconciliation