添加ID排序及搜索

src/components/bill/list.tsx

@@ -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,
             },

src/components/bill/search-form.tsx

@@ -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%'}}>

src/i18n/translations/en.json

@@ -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",

src/i18n/translations/sc.json

@@ -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": "已支付",

src/i18n/translations/tc.json

@@ -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": "已付款",

src/pages/bill/query.tsx

@@ -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

src/service/api/bill.ts

@@ -47,8 +47,8 @@ export function getFlywirePayUrl(id: number, return_cta: string, return_cta_name
 }
 
 // 作废订单
-export function cancelBill(id: number) {
+export function modifyBillStatus(id: number,status: BillStatus) {
-    return put(`/bills/${id}/cancel`)
+    return put(`/bills/${id}/cancel`,{status})
 }
 
 export function confirmBills(bill_ids: number[]) {

src/types/bill.d.ts

@@ -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;