添加ID排序及搜索
This commit is contained in:
parent
2545bbb3bc
commit
7688f24fe1
@ -50,7 +50,7 @@ export const BillList: React.FC<BillListProps> = (props) => {
|
||||
const columns = useMemo<ColumnProps<BillModel>[]>(() => {
|
||||
const cols: ColumnProps<BillModel>[] = [
|
||||
{
|
||||
title: '#',
|
||||
title: '#ID',
|
||||
dataIndex: 'id',
|
||||
width: 120,
|
||||
},
|
||||
|
||||
@ -15,6 +15,7 @@ type SearchFormProps = {
|
||||
type SearchFormFields = {
|
||||
dateRange?: Date[];
|
||||
student_number?: string;
|
||||
id?: string;
|
||||
application_number?: string;
|
||||
bill_number?: string;
|
||||
payment_channel?: string;
|
||||
@ -29,6 +30,9 @@ const SearchForm: React.FC<SearchFormProps> = (props) => {
|
||||
params.start_date = dayjs(value.dateRange[0]).format('YYYY-MM-DD');
|
||||
params.end_date = dayjs(value.dateRange[1]).format('YYYY-MM-DD');
|
||||
}
|
||||
if (value.id) {
|
||||
params.id = value.id;
|
||||
}
|
||||
if (value.student_number) {
|
||||
params.student_number = value.student_number;
|
||||
}
|
||||
@ -73,6 +77,9 @@ const SearchForm: React.FC<SearchFormProps> = (props) => {
|
||||
<div className="bill-search-form">
|
||||
<Form<SearchFormFields> onSubmit={formSubmit}>
|
||||
<Row type={'flex'} gutter={20}>
|
||||
<Col xxl={4} xl={6} md={8}>
|
||||
<Form.Input showClear field='id' label="ID" trigger='blur' placeholder={t('base.please_enter')}/>
|
||||
</Col>
|
||||
<Col xxl={4} xl={6} md={8}>
|
||||
<Form.DatePicker showClear type={'dateRange'} field="dateRange" label={t('bill.bill_date')}
|
||||
style={{width: '100%'}}>
|
||||
|
||||
@ -2,8 +2,12 @@
|
||||
"base": {
|
||||
"bill_number": "Bill Number",
|
||||
"btn_search_submit": "Search",
|
||||
"cancel": "Cancel",
|
||||
"close": "Close",
|
||||
"confirm": "Confirm",
|
||||
"confirm_paid": "Confirm paid",
|
||||
"operate_fail": "Operation failed",
|
||||
"operate_success": "Operation success",
|
||||
"please_enter": "Please Enter",
|
||||
"please_select": "Please Select",
|
||||
"qr-code": "QRCode",
|
||||
@ -25,6 +29,8 @@
|
||||
"confirmed": "Confirmed",
|
||||
"download-qr-code": "Download QR Code",
|
||||
"download_receipt": "Download receipt",
|
||||
"paid": "Paid",
|
||||
"paid_confirm": "Please confirm the order status is set to paid",
|
||||
"pay_status": "Bill Status",
|
||||
"pay_status_canceled": "CANCELLED",
|
||||
"pay_status_paid": "PAID",
|
||||
|
||||
@ -2,8 +2,12 @@
|
||||
"base": {
|
||||
"bill_number": "账单编号",
|
||||
"btn_search_submit": "搜索",
|
||||
"cancel": "取消",
|
||||
"close": "关闭",
|
||||
"confirm": "确定",
|
||||
"confirm_paid": "确认已支付",
|
||||
"operate_fail": "操作失败",
|
||||
"operate_success": "操作成功",
|
||||
"please_enter": "请输入",
|
||||
"please_select": "请选择",
|
||||
"qr-code": "二维码",
|
||||
@ -25,6 +29,8 @@
|
||||
"confirmed": "已对账",
|
||||
"download-qr-code": "下载二维码",
|
||||
"download_receipt": "下载收据",
|
||||
"paid": "已支付",
|
||||
"paid_confirm": "是否将此订单状态设为已支付",
|
||||
"pay_status": "账单状态",
|
||||
"pay_status_canceled": "已作废",
|
||||
"pay_status_paid": "已支付",
|
||||
|
||||
@ -2,8 +2,12 @@
|
||||
"base": {
|
||||
"bill_number": "帳單編號",
|
||||
"btn_search_submit": "搜尋",
|
||||
"cancel": "取消",
|
||||
"close": "關閉",
|
||||
"confirm": "確定",
|
||||
"confirm_paid": "確認已支付",
|
||||
"operate_fail": "操作失敗",
|
||||
"operate_success": "操作成功",
|
||||
"please_enter": "請輸入",
|
||||
"please_select": "請選擇",
|
||||
"qr-code": "QRCode",
|
||||
@ -25,6 +29,8 @@
|
||||
"confirmed": "已對帳",
|
||||
"download-qr-code": "下載二維碼",
|
||||
"download_receipt": "下載收據",
|
||||
"paid": "已支付",
|
||||
"paid_confirm": "是否將此訂單狀態設為已支付",
|
||||
"pay_status": "帳單狀態",
|
||||
"pay_status_canceled": "已作廢",
|
||||
"pay_status_paid": "已付款",
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
import {Button, Modal, Notification, Popconfirm, Space, Toast} from "@douyinfe/semi-ui";
|
||||
import {useState} from "react";
|
||||
import {useRequest} from "ahooks";
|
||||
import {useRequest, useSetState} from "ahooks";
|
||||
import {useTranslation} from "react-i18next";
|
||||
|
||||
import {BillList} from "@/components/bill/list.tsx";
|
||||
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 {billList, BillQueryParams, modifyBillStatus} from "@/service/api/bill.ts";
|
||||
import {BillStatus, BizError} from "@/service/types.ts";
|
||||
import {useDownloadReceiptPDF} from "@/service/generate-pdf.ts";
|
||||
import useAuth from "@/hooks/useAuth.ts";
|
||||
import {BillDetailItems} from "@/components/bill";
|
||||
|
||||
|
||||
const DownloadButton = ({bill,text}: { bill: BillModel;text:string }) => {
|
||||
@ -18,8 +19,17 @@ const DownloadButton = ({bill,text}: { bill: BillModel;text:string }) => {
|
||||
onClick={() => downloadPDF(bill)} size={'small'} theme={'solid'}
|
||||
type={'primary'} loading={downloading}>{text}</Button>)
|
||||
}
|
||||
|
||||
// const ConfirmPaidBill =({bill,onRefresh}: { bill: BillModel;onRefresh:()=>void }) => {
|
||||
// return
|
||||
// }
|
||||
|
||||
const BillQuery = () => {
|
||||
const {user} = useAuth();
|
||||
const [state,setState] = useSetState<{
|
||||
updateBill?: BillModel
|
||||
updateLoading?:boolean
|
||||
}>({})
|
||||
const [showBill, setShowBill] = useState<BillModel>()
|
||||
const [queryParams, setBillQueryParams] = useState<BillQueryParams>({});
|
||||
const {data, loading, refresh} = useRequest(() => billList({
|
||||
@ -34,7 +44,7 @@ const BillQuery = () => {
|
||||
const {t} = useTranslation()
|
||||
|
||||
const onConfirmCancel = (bill: BillModel) => {
|
||||
cancelBill(bill.id).then(() => {
|
||||
modifyBillStatus(bill.id,'CANCELLED').then(() => {
|
||||
Notification.success({title: 'Notice', content: t('bill.cancel_success')})
|
||||
refresh()
|
||||
}).catch((e:BizError) => {
|
||||
@ -44,14 +54,39 @@ const BillQuery = () => {
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const onConfirmPaid = () => {
|
||||
if(!state.updateBill) return;
|
||||
setState({
|
||||
updateLoading: true
|
||||
})
|
||||
modifyBillStatus(state.updateBill.id,'PAID').then(() => {
|
||||
setState({
|
||||
updateBill: undefined,updateLoading: false
|
||||
})
|
||||
Notification.success({title: 'Notice', content: t('base.operate_success')})
|
||||
refresh()
|
||||
}).catch((e:BizError) => {
|
||||
setState({
|
||||
updateLoading: false
|
||||
})
|
||||
Toast.error({
|
||||
content: `${t('base.operate_fail')}:${e.message}`,
|
||||
duration: 3
|
||||
})
|
||||
})
|
||||
}
|
||||
const operation = (bill: BillModel) => {
|
||||
|
||||
return (<Space>
|
||||
{bill.status != BillStatus.PAID && <Button onClick={()=>setState({updateBill:bill})} size={'small'} theme={'solid'} type={'danger'}>{t('bill.paid')}</Button>
|
||||
}
|
||||
{bill.status == BillStatus.PENDING && <>
|
||||
<Popconfirm
|
||||
title={'Notice'}
|
||||
content={`${t('bill.cancel_confirm')}?`}
|
||||
onConfirm={() => onConfirmCancel(bill)}
|
||||
position={'topRight'}
|
||||
>
|
||||
<Button size={'small'} theme={'solid'} type={'primary'}>{t('bill.cancel')}</Button>
|
||||
</Popconfirm>
|
||||
@ -87,6 +122,21 @@ const BillQuery = () => {
|
||||
>
|
||||
{showBill && <BillDetail bill={showBill} onCancel={() => setShowBill(undefined)}/>}
|
||||
</Modal>
|
||||
<Modal
|
||||
title="Notice"
|
||||
visible={!!state.updateBill}
|
||||
closeOnEsc={true}
|
||||
onCancel={()=>{
|
||||
setState({updateBill:undefined,updateLoading:false})
|
||||
}}
|
||||
confirmLoading={state.updateLoading}
|
||||
onOk={onConfirmPaid}
|
||||
okText={t('base.confirm_paid')}
|
||||
maskClosable={false}
|
||||
>
|
||||
{state.updateBill && <div><BillDetailItems bill={state.updateBill} /></div>}
|
||||
<p style={{marginTop:10}}>{t('bill.paid_confirm')}</p>
|
||||
</Modal>
|
||||
</div>)
|
||||
}
|
||||
export default BillQuery
|
||||
@ -47,8 +47,8 @@ export function getFlywirePayUrl(id: number, return_cta: string, return_cta_name
|
||||
}
|
||||
|
||||
// 作废订单
|
||||
export function cancelBill(id: number) {
|
||||
return put(`/bills/${id}/cancel`)
|
||||
export function modifyBillStatus(id: number,status: BillStatus) {
|
||||
return put(`/bills/${id}/cancel`,{status})
|
||||
}
|
||||
|
||||
export function confirmBills(bill_ids: number[]) {
|
||||
|
||||
2
src/types/bill.d.ts
vendored
2
src/types/bill.d.ts
vendored
@ -1,5 +1,6 @@
|
||||
|
||||
declare type BaseDate = number | Date | string | null;
|
||||
declare type BillStatus = 'PAID' | 'CANCELLED' | 'PENDING'
|
||||
|
||||
// 现场支付账单数据
|
||||
declare type ManualCreateBillParam = {
|
||||
@ -21,6 +22,7 @@ declare type BillQueryParam = {
|
||||
page_number:int;
|
||||
status:string;
|
||||
apply_status:string;
|
||||
id:string|number;
|
||||
student_number:string;
|
||||
application_number:string;
|
||||
payment_channel:string;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user