From b16d6a237de17427845dfe5d691d17bf08656071 Mon Sep 17 00:00:00 2001 From: callmeyan Date: Sat, 10 Aug 2024 16:02:22 +0800 Subject: [PATCH] :rocket: feat: update bill confirm --- src/components/bill/list.tsx | 4 +- src/i18n/translations/en.json | 10 +- src/i18n/translations/sc.json | 10 +- src/i18n/translations/tc.json | 10 +- .../bill/components/bill_type_confirm.tsx | 204 +++++++----------- src/pages/bill/components/number_confirm.tsx | 2 +- 6 files changed, 97 insertions(+), 143 deletions(-) diff --git a/src/components/bill/list.tsx b/src/components/bill/list.tsx index 89ffc63..9c7cd70 100644 --- a/src/components/bill/list.tsx +++ b/src/components/bill/list.tsx @@ -252,7 +252,7 @@ export const BillList: React.FC = (props) => { ) : 'N/A'), }, { - title: t('bill.title_bill_status'), + title: t('bill.pay_status'), dataIndex: 'status', width: 150, render: value => billStatusText(value), @@ -304,7 +304,7 @@ export const BillList: React.FC = (props) => { title={ {t('bill.title_bill_list')} setState({showColumnsConfig: !state.showColumnsConfig})} > } diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index 0daf5b1..471c8c2 100644 --- a/src/i18n/translations/en.json +++ b/src/i18n/translations/en.json @@ -11,6 +11,7 @@ "operate_success": "Operation success", "please_enter": "Please Enter", "please_select": "Please Select", + "please_select_bill_type": "Please Select Bill Type", "qr-code": "QRCode", "query_bill": "Failed to query bill:", "remove": "Remove", @@ -31,6 +32,7 @@ "confirm_bill_number": "Confirm Bill Number", "confirm_bill_type": "Confirm Bill", "confirm_bill_type_batch": "Batch confirm Bill Type", + "confirm_bill_warning_amount": "The bill amount and actual payment amount are inconsistent", "confirm_confirm_title": "Confirm check and sync the Bill?", "confirm_select_empty": "Require confirm bill data", "confirm_student_number": "Confirm Student Number", @@ -38,12 +40,12 @@ "confirmed": "Confirmed", "download-qr-code": "Download QR Code", "download_receipt": "Download receipt", - "export_excel": "Export Excel", - "import_bill": "Add Bill", - "import_excel": "Import Bill", + "export_excel": "Export Transaction Excel", + "import_bill": "Add Transaction Record", + "import_excel": "Import Transaction Excel", "paid": "Paid", "paid_confirm": "Please confirm the order status is set to paid", - "pay_status": "Bill Status", + "pay_status": "Bill Payment Status", "pay_status_canceled": "CANCELED", "pay_status_expired": "EXPIRED", "pay_status_paid": "PAID", diff --git a/src/i18n/translations/sc.json b/src/i18n/translations/sc.json index a08939f..ef2eb86 100644 --- a/src/i18n/translations/sc.json +++ b/src/i18n/translations/sc.json @@ -11,6 +11,7 @@ "operate_success": "操作成功", "please_enter": "请输入", "please_select": "请选择", + "please_select_bill_type": "请选择账单类型", "qr-code": "二维码", "query_bill": "查询账单失败:", "remove": "删除", @@ -31,6 +32,7 @@ "confirm_bill_number": "确认账单编号", "confirm_bill_type": "确认账单", "confirm_bill_type_batch": "批量确认账单", + "confirm_bill_warning_amount": "账单金额和实付金额不一致", "confirm_confirm_title": "请确定对账并同步此账单?", "confirm_select_empty": "对账账单为空", "confirm_student_number": "确认学号", @@ -38,12 +40,12 @@ "confirmed": "已对账", "download-qr-code": "下载二维码", "download_receipt": "下载收据", - "export_excel": "导出账单", - "import_bill": "添加账单", - "import_excel": "导入账单", + "export_excel": "导出交易记录", + "import_bill": "添加交易记录", + "import_excel": "导入交易记录", "paid": "已支付", "paid_confirm": "是否将此订单状态设为已支付", - "pay_status": "账单状态", + "pay_status": "账单支付状态", "pay_status_canceled": "已作废", "pay_status_expired": "已过期", "pay_status_paid": "已支付", diff --git a/src/i18n/translations/tc.json b/src/i18n/translations/tc.json index 70c2528..6647aa9 100644 --- a/src/i18n/translations/tc.json +++ b/src/i18n/translations/tc.json @@ -11,6 +11,7 @@ "operate_success": "操作成功", "please_enter": "請輸入", "please_select": "請選擇", + "please_select_bill_type": "請選擇帳單類型", "qr-code": "QRCode", "query_bill": "查詢帳單失敗:", "remove": "刪除", @@ -31,6 +32,7 @@ "confirm_bill_number": "確認帳單編號", "confirm_bill_type": "確認賬單", "confirm_bill_type_batch": "批次確認帳單", + "confirm_bill_warning_amount": "账单金额和实付金额不一致", "confirm_confirm_title": "請確定對帳并同步此帳單?", "confirm_select_empty": "對帳帳單為空", "confirm_student_number": "確認學號", @@ -38,12 +40,12 @@ "confirmed": "已對帳", "download-qr-code": "下載二維碼", "download_receipt": "下載收據", - "export_excel": "導出賬單", - "import_bill": "新增帳單", - "import_excel": "導入賬單", + "export_excel": "導出交易记录", + "import_bill": "新增交易记录", + "import_excel": "導入交易记录", "paid": "已支付", "paid_confirm": "是否將此訂單狀態設為已支付", - "pay_status": "帳單狀態", + "pay_status": "帳單支付狀態", "pay_status_canceled": "已作廢", "pay_status_expired": "已過期", "pay_status_paid": "已付款", diff --git a/src/pages/bill/components/bill_type_confirm.tsx b/src/pages/bill/components/bill_type_confirm.tsx index 9a4ab62..7d81fd9 100644 --- a/src/pages/bill/components/bill_type_confirm.tsx +++ b/src/pages/bill/components/bill_type_confirm.tsx @@ -1,5 +1,5 @@ import {Button, Select, Space, Divider, InputNumber, Modal,} from "@douyinfe/semi-ui"; -import React, {useMemo} from "react"; +import React from "react"; import {useSetState} from "ahooks"; import MoneyFormat from "@/components/money-format.tsx"; import {useTranslation} from "react-i18next"; @@ -7,7 +7,7 @@ import {useBillTypes} from "@/hooks/useBillTypes.ts"; import {NumberConfirm} from "@/pages/bill/components/number_confirm.tsx"; import {BillDetailItems} from "@/components/bill"; import {BillDetailItem} from "@/components/bill/bill-detail-items.tsx"; -import {IconStudentId} from "@/components/icons"; +import {IconMoney, IconStudentId} from "@/components/icons"; import {confirmBillType} from "@/service/api/bill.ts"; type BillTypeConfirmProps = { @@ -16,141 +16,73 @@ type BillTypeConfirmProps = { onChange?: (confirms: ConfirmedBillDetail[]) => void; } -const BillTypeConfirmItem = (props: { data: BillDetail; onChange: (confirms: ConfirmedBillDetail[]) => void; }) => { - const it = props.data; - const BillTypes = useBillTypes() - const {t} = useTranslation() - - const [state, setState] = useSetState<{ - billTypeList: ConfirmedBillDetail[]; - loading?: boolean, - confirmed?: boolean, - }>({ - loading: false, - billTypeList: [ - {bill_type: props.data.bill_type, bill_detail_id: it.id, amount: Number(props.data.amount)} - ] - }) - const onChange = (value: string, index: number, type: 'type' | 'amount') => { - if (state.billTypeList.length <= index || !value) return; - const billTypeList = [...state.billTypeList] - if (type == 'type') { - billTypeList[index].bill_type = value - } else { - billTypeList[index].amount = Number(value) - } - - // 计算 confirmedTypes 中所有 amount 的总金额 - const totalAmount = billTypeList.reduce((total, item) => { - return total + Number(item.amount) - }, 0) - // 判断是否已经超出账单实际金额 - if (totalAmount > Number(it.amount)) { - Modal.warning({ - title: 'Warning', - content: t('bill.confirm_amount_exceed_content'), - hasCancel: false - }) - return; - } - setState({billTypeList}) - props.onChange(billTypeList) - } - const onRemove = (index: number) => { - if (state.billTypeList.length <= 1) return; - const billTypeList = [...state.billTypeList] - billTypeList.splice(index, 1) - setState({billTypeList}) - } - const onAdd = () => { - const billTypeList = [ - ...state.billTypeList, - {bill_type: props.data.bill_type, amount: 0, bill_detail_id: it.id} - ] - setState({ - billTypeList - }) - props.onChange(billTypeList) - } - - return (<> -
-
-
{it.bill_type}
- Total Amount: - -
- {state.billTypeList.map((item, index) => { - return ( -
- - - - onChange(String(v), index, 'amount')} style={{width: 120}}/> - - -
) - })} -
- -
-
- - ) -} - export const BillTypeConfirm: React.FC = (props) => { - const [state, setState] = useSetState<{ - confirm_application_number: string; - confirmed: { - [key: number]: ConfirmedBillDetail[] - } - }>({ - confirm_application_number: '', confirmed: {} + const {t} = useTranslation() + const confirmed: ConfirmedBillDetail[] = props.bill.details.map(it=>({ + bill_type: it.bill_type, + bill_detail_id: it.id, + amount: it.amount + })) + const [state, setState] = useSetState({ + confirm_application_number: '', confirmed }) - const details = useMemo(() => { - const {details, detail_confirms} = props.bill; - if (!details) return []; - details.forEach(it => { - if (!detail_confirms) it.confirmed = []; - else it.confirmed = detail_confirms.filter(s => s.bill_detail_id == it.id) - }) - return details; - }, [props.bill]) + const BillTypes = useBillTypes() + + const onChange = (value: string, index: number, type: 'type' | 'amount') => { + if (state.confirmed.length <= index || !value) return; + const confirmed = [...state.confirmed] + if (type == 'type') { + confirmed[index].bill_type = value + } else { + confirmed[index].amount = Number(value) + } - const onChange = (id: number, confirmedTypes: ConfirmedBillDetail[]) => { - const confirmed = { - ...state.confirmed - }; - confirmed[id] = confirmedTypes setState({confirmed}) - // trigger - const allConfirmed: ConfirmedBillDetail[] = []; - Object.keys(confirmed).forEach(key => { - allConfirmed.push(...confirmed[Number(key)]) - }) - props.onChange?.(allConfirmed) + props.onChange?.(confirmed) } + const addOrRemove = (index:number)=>{ + // 不允许删除最后一个 + if (index > -1 && state.confirmed.length <= 1) return; + const confirmed = [...state.confirmed,...(index==-1?[{bill_type: '', amount: 0, bill_detail_id: 0}]:[])] + if(index > -1) confirmed.splice(index, 1) + setState({confirmed}) + props.onChange?.(confirmed) + } + + + return (<> Bill Type Confirm { - details.map((it, idx) => ( onChange(it.id, confirmed)} data={it} key={idx}/>)) + state.confirmed.map((item, index) => ( +
+ + + + onChange(String(v), index, 'amount')} style={{width: 140}}/> + + +
+ )) } +
+ +
+ ) } @@ -166,6 +98,19 @@ export const BillTypeConfirmModal: React.FC = (props) => { }) const onBillConfirm = () => { + // 判断confirm的总金额是否和实付金额相等 + const total = state.detail_confirms.reduce((total, item) => { + return total + item.amount + }, 0) + if(total != props.bill.actual_payment_amount){ + Modal.warning({ + title: 'Warning', + content: t('bill.confirm_bill_warning_amount') + }) + return; + } + + setState({loading: true}) confirmBillType([{ id: props.bill.id, @@ -194,6 +139,9 @@ export const BillTypeConfirmModal: React.FC = (props) => { icon={} title={t('base.bill_number')} value={props.bill.application_number || '-'}/> }/> + } title={t('bill.title_actual_payment_amount')} + value={}/>
Bill Number Confirm @@ -206,7 +154,7 @@ export const BillTypeConfirmModal: React.FC = (props) => { bill={props.bill} type={'application_number'}/>
setState({detail_confirms})}/> -
+
diff --git a/src/pages/bill/components/number_confirm.tsx b/src/pages/bill/components/number_confirm.tsx index b0ba5b9..9b6e782 100644 --- a/src/pages/bill/components/number_confirm.tsx +++ b/src/pages/bill/components/number_confirm.tsx @@ -36,7 +36,7 @@ export const NumberConfirm: React.FC = ({bill, type, onChang
{/*{*/}