feat:bill type confirm completed

src/components/bill/search-form.tsx

@@ -60,6 +60,9 @@ const SearchForm: React.FC<SearchFormProps> = (props) => {
             const [field, order] = value.sort_by.split(' ')
             params.sort_field = field
             params.sort_order = order?.toUpperCase() || 'DESC'
+        }else{
+            params.sort_field = 'id'
+            params.sort_order = 'DESC'
         }
         props.onSearch?.(params);
     }

src/pages/bill/components/bill_type_confirm.tsx

@@ -0,0 +1,57 @@
+import {Button, Select, Popconfirm, Space, Tag} from "@douyinfe/semi-ui";
+import React, {useState} from "react";
+import {useSetState} from "ahooks";
+import MoneyFormat from "@/components/money-format.tsx";
+import {confirmBillType} from "@/service/api/bill.ts";
+import {useTranslation} from "react-i18next";
+import {BillTypes} from "@/service/bill-types.ts";
+
+type BillTypeConfirmProps = {
+	data: BillDetail
+}
+
+export const BillTypeConfirm: React.FC<BillTypeConfirmProps> = (props) => {
+	const [it,setItem] = useState(props.data)
+	const {t} = useTranslation()
+	const [state,setState] = useSetState({
+		loading:false,
+		bill_type: props.data.bill_type
+	})
+	const onConfirmBill = () => {
+		setState({loading:true})
+		confirmBillType({id:it.id,type:state.bill_type}).then(() => {
+            setState({loading:false})
+            setItem({...it,confirm_status:'CONFIRMED'})
+        }).catch(() => {
+            setState({loading:false})
+        })
+	}
+	return <div  className="confirm-item align-center space-between"
+		style={{marginBottom: 10}}>
+		<div>
+			<div>{it.bill_type}</div>
+			<div>
+				<MoneyFormat money={it.amount}/>
+			</div>
+		</div>
+		<div className="confirm-item-btn">
+			<Space spacing={20}>
+				{it.confirm_status != 'CONFIRMED' && <Select onChange={v=>setState({bill_type:String(v)})} defaultValue={it.bill_type} style={{width:180}} placeholder={t('manual.bill_type')}>
+					{
+						BillTypes.map((it, idx) => (
+							<Select.Option key={idx} value={it.label}>{it.label}</Select.Option>))
+					}
+                </Select>}
+				{
+					it.confirm_status == 'CONFIRMED' ? <Tag color='light-blue'>{state.bill_type}</Tag> : <>
+						<Popconfirm
+							title={'Notice'} onConfirm={() => onConfirmBill()}
+							position={'topRight'}
+							content={`${t('bill.confirm_bill_type')}?`}
+						><Button loading={state.loading} theme={'solid'}>{t('base.confirm')}</Button></Popconfirm>
+					</>
+				}
+			</Space>
+		</div>
+	</div>
+}

src/pages/bill/query.tsx

@@ -1,4 +1,4 @@
-import {Button, Modal, Notification, Popconfirm, Space, Tag, Toast} from "@douyinfe/semi-ui";
+import {Button, Divider, Modal, Notification, Popconfirm, Toast} from "@douyinfe/semi-ui";
 import {useState} from "react";
 import {useRequest, useSetState} from "ahooks";
 import {useTranslation} from "react-i18next";
@@ -10,8 +10,8 @@ import {billList, BillQueryParams, modifyBillStatus} from "@/service/api/bill.ts
 import {BillStatus, BizError} from "@/service/types.ts";
 import {useDownloadReceiptPDF} from "@/service/generate-pdf.ts";
 import {BillDetailItems} from "@/components/bill";
-import MoneyFormat from "@/components/money-format.tsx";
 import {BillPaidModal} from "@/pages/bill/components/bill_paid_modal.tsx";
+import {BillTypeConfirm} from "@/pages/bill/components/bill_type_confirm.tsx";
 
 
 const DownloadButton = ({bill, text}: { bill: BillModel; text: string }) => {
@@ -27,12 +27,14 @@ const DownloadButton = ({bill, text}: { bill: BillModel; text: string }) => {
 const BillQuery = () => {
 	const [state, setState] = useSetState<{
 		updateBill?: BillModel
-		updateLoading?: boolean
 		confirmBill?: BillModel
-	}>({})
+		updateLoading?: boolean
+		confirmBillId: number
+	}>({confirmBillId: 0})
 	const [showBill, setShowBill] = useState<BillModel>()
 	const [queryParams, setBillQueryParams] = useState<BillQueryParams>({
-		sort_field: 'id', sort_order: 'DESC'
+		sort_field: 'id',
+		sort_order: 'DESC'
 	});
 	const {data, loading, refresh} = useRequest(() => billList(queryParams), {
 		refreshDeps: [queryParams],
@@ -42,7 +44,7 @@ const BillQuery = () => {
 	})
 	const {t} = useTranslation()
 
-	const onConfirmCancel = (bill: BillModel) => {
+	const onCancelBill = (bill: BillModel) => {
 		modifyBillStatus(bill.id, 'CANCELLED').then(() => {
 			Notification.success({title: 'Notice', content: t('bill.cancel_success')})
 			refresh()
@@ -55,7 +57,6 @@ const BillQuery = () => {
 	}
 
 	const operation = (bill: BillModel) => {
-
 		return (<div className={'table-operation-render'}>
 			{bill.status != BillStatus.PAID &&
                 <Button onClick={() => setState({updateBill: bill})} size={'small'} theme={'solid'}
@@ -63,10 +64,8 @@ const BillQuery = () => {
 			}
 			{bill.status == BillStatus.PENDING && <>
                 <Popconfirm
-                    title={'Notice'}
+                    title={'Notice'} onConfirm={() => onCancelBill(bill)} position={'topRight'}
                     content={`${t('bill.cancel_confirm')}?`}
-                    onConfirm={() => onConfirmCancel(bill)}
-                    position={'topRight'}
                 >
                     <Button size={'small'} theme={'solid'} type={'primary'}>{t('bill.cancel')}</Button>
                 </Popconfirm>
@@ -77,9 +76,10 @@ const BillQuery = () => {
 			{
 				bill.status == BillStatus.PAID && <>
                     <DownloadButton bill={bill} text={t('bill.download_receipt')}/>
-                    <Button onClick={() => setState({confirmBill: bill})}
+					{bill.confirm_status == 'UNCONFIRMED' && <Button
+                        onClick={() => setState({confirmBill: bill})}
                         size={'small'} theme={'solid'}
-                            type={'primary'}>{t('bill.confirm_bill_type')}</Button>
+                        type={'primary'}>{t('bill.confirm_bill_type')}</Button>}
                 </>
 			}
 		</div>)
@@ -109,10 +109,10 @@ const BillQuery = () => {
 		</Modal>
 		<BillPaidModal
 			open={!!state.updateBill}
-			onCancel={()=>setState({updateBill:undefined})}
+			onCancel={() => setState({updateBill: undefined})}
 			bill={state.updateBill!}
-			onConfirm={()=>{
+			onConfirm={() => {
-				setState({updateBill:undefined})
+				setState({updateBill: undefined})
 				refresh()
 			}}
 		/>
@@ -121,27 +121,19 @@ const BillQuery = () => {
 			visible={!!state.confirmBill}
 			closeOnEsc={true}
 			onCancel={() => {
+				refresh()
 				setState({confirmBill: undefined})
 			}}
+			width={500}
 			footer={null}
 		>
 			{state.confirmBill && <>
                 <div><BillDetailItems bill={state.confirmBill}/></div>
                 <div className="confirm-container" style={{padding: '15px 0'}}>
 					{
-						state.confirmBill.details.map((it, idx) => (
+						state.confirmBill.details.map((it, idx) => (<div key={idx}>
-							<div key={idx} className="confirm-item align-center space-between">
+							<Divider margin='12px'/>
-								<Space spacing={10}>
+							<BillTypeConfirm data={it}/>
-									<span>{it.id}.</span>
-									<span>{it.bill_type}</span>
-									<div>
-										<MoneyFormat money={it.amount}/>
-									</div>
-								</Space>
-								<div className="confirm-item-btn">
-									{it.confirm_status == 'CONFIRMED' ? <Tag color='light-blue'>CONFIRMED</Tag> :
-										<Button>{t('base.confirm')}</Button>}
-								</div>
 						</div>))
 					}
                 </div>

src/service/api/bill.ts

@@ -52,6 +52,10 @@ export function modifyBillStatus(id: number,status: BillStatus) {
     return put(`/bills/${id}/cancel`,{status})
 }
 
+export function confirmBillType({id,type}: {id:number,type: string}) {
+    return post<BillModel>(`/bill/detail/${id}/confirm`, {type})
+}
+
 export function confirmBills(bill_ids: number[]) {
     return post(`/bills/apply`, {bill_ids})
 }
@@ -69,7 +73,7 @@ type BillUpdateFormParams = {
     bill:BillModel;
     param:BillUpdateParams
 }
-export async function finishAsiapay({bill,param}: BillUpdateFormParams){
+export async function finishAsiapay({param}: BillUpdateFormParams){
     const paramUrl = `?prc=0&src=0&Ord=12345678&Ref=${param.merchant_ref}&PayRef=123456&successcode=0&Amt=10.00&Cur=344&Holder=Test Card&AuthId=123456&AlertCode=&remark=
 &eci=07&payerAuth=U&sourceIp=192.1.1.1&ipCountry=HK&payMethod=VISA
 x&cardIssuingCountry=HK&channelType=SPC&`

src/types/bill.d.ts

@@ -11,8 +11,7 @@ declare type ManualCreateBillParam = {
     student_number:string;
 }
 declare type BillDetail = {
-    id: string | number;
+    id: number;
-    bill_id: string | number;
     bill_type: string;
     confirm_status: ConfirmStatus;
     amount: decimal;

vite.config.ts

@@ -28,7 +28,8 @@ export default defineConfig(({mode}) => {
             port:10086,
             proxy: {
                 '/api': {
-                    target: 'https://test-payment-be.hkchc.team', //
+                    // target: 'https://test-payment-be.hkchc.team', //
+                    target: 'http://127.0.0.1:50000', //
                     changeOrigin: true,
                     //rewrite: (path) => path.replace(/^\/api/, '')
                 }