project/chuhai-payment-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:bill type confirm completed

Browse Source
This commit is contained in:
LittleBoy 2024-07-29 01:26:03 +08:00
parent 21ec84f68d
commit 9c7bf8c1cb
6 changed files with 90 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/bill/search-form.tsx
View File

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

57
src/pages/bill/components/bill_type_confirm.tsx Normal file
View File

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

52
src/pages/bill/query.tsx
View File

@ -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})}
size={'small'} theme={'solid'}
type={'primary'}>{t('bill.confirm_bill_type')}</Button>
{bill.confirm_status == 'UNCONFIRMED' && <Button
onClick={() => setState({confirmBill: bill})}
size={'small'} theme={'solid'}
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={()=>{
setState({updateBill:undefined})
onConfirm={() => {
setState({updateBill: undefined})
refresh()
}}
/>
@ -121,28 +121,20 @@ 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) => (
<div key={idx} className="confirm-item align-center space-between">
<Space spacing={10}>
<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>))
state.confirmBill.details.map((it, idx) => (<div key={idx}>
<Divider margin='12px'/>
<BillTypeConfirm data={it}/>
</div>))
}
</div>
</>}

6
src/service/api/bill.ts
View File

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

3
src/types/bill.d.ts vendored
View File

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

3
vite.config.ts
View File

@ -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/, '')
}