modify confirm

src/i18n/translations/en.json

@@ -1,5 +1,6 @@
 {
   "base": {
+    "add": "Add",
     "bill_number": "Bill Number",
     "btn_search_submit": "Search",
     "cancel": "Cancel",
@@ -12,6 +13,7 @@
     "please_select": "Please Select",
     "qr-code": "QRCode",
     "query_bill": "Failed to query bill:",
+    "remove": "Remove",
     "student_number": "Student Number"
   },
   "bill": {

src/i18n/translations/sc.json

@@ -1,5 +1,6 @@
 {
   "base": {
+    "add": "增加",
     "bill_number": "账单编号",
     "btn_search_submit": "搜索",
     "cancel": "取消",
@@ -12,6 +13,7 @@
     "please_select": "请选择",
     "qr-code": "二维码",
     "query_bill": "查询账单失败:",
+    "remove": "删除",
     "student_number": "学号"
   },
   "bill": {

src/i18n/translations/tc.json

@@ -1,5 +1,6 @@
 {
   "base": {
+    "add": "增加",
     "bill_number": "帳單編號",
     "btn_search_submit": "搜尋",
     "cancel": "取消",
@@ -12,6 +13,7 @@
     "please_select": "請選擇",
     "qr-code": "QRCode",
     "query_bill": "查詢帳單失敗:",
+    "remove": "刪除",
     "student_number": "學號"
   },
   "bill": {

src/pages/bill/components/bill_type_confirm.tsx

@@ -1,4 +1,4 @@
-import {Button, Select, Popconfirm, Space, Tag} from "@douyinfe/semi-ui";
+import {Button, Select, Popconfirm, Space, Tag, Divider, Input} from "@douyinfe/semi-ui";
 import React, {useState} from "react";
 import {useSetState} from "ahooks";
 import MoneyFormat from "@/components/money-format.tsx";
@@ -11,47 +11,63 @@ type BillTypeConfirmProps = {
 }
 
 export const BillTypeConfirm: React.FC<BillTypeConfirmProps> = (props) => {
-	const [it,setItem] = useState(props.data)
+	const [it, setItem] = useState(props.data)
 	const {t} = useTranslation()
-	const [state,setState] = useSetState({
-		loading:false,
-		bill_type: props.data.bill_type
+	const [state, setState] = useSetState<{
+		billTypeList: BillTypeConfirm[];
+		loading?: boolean,
+		confirmed?: boolean,
+	}>({
+		loading: false,
+		billTypeList: [
+			{bill_type:props.data.bill_type,amount:props.data.amount}
+		]
 	})
 	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})
-        })
+		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: 20}}>
-		<div style={{lineHeight:1.1}}>
-			<div>{it.bill_type}</div>
-			<div style={{fontSize:12}}>
+	const onChange = (value:string,index:number,type:'type'|'amount')=>{
+
+	}
+	const onRemove = (index:number) =>{
+		if(state.billTypeList.length <= 1) return;
+	}
+	return (<>
+		<div className="confirm-item" style={{margin: '20px 0'}}>
+			<div style={{lineHeight: 1.1}} className={'align-center'}>
+				<div>{it.bill_type}</div>
+				<span style={{marginLeft: 100}}>Total Amount:</span>
 				<MoneyFormat money={it.amount}/>
 			</div>
+			{state.billTypeList.map((item, index) => {
+				return (<div key={index} className="confirm-item-btn align-center space-between" style={{marginTop: 10}}>
+					<Select
+						value={item.bill_type || it.bill_type}
+						style={{width: 200}}
+						onChange={v=>onChange(String(v),index,'type')}
+						placeholder={t('manual.bill_type')}>
+						{
+							BillTypes.map((it, idx) => (
+								<Select.Option key={idx} value={it.label}>{it.label}</Select.Option>))
+						}
+					</Select>
+
+					<Space spacing={10}>
+						<Input value={item.amount} type={'number'} onChange={v=>onChange(v,index,'amount')} style={{width: 120}}/>
+						<Button disabled={state.billTypeList.length <= 1} onClick={()=>onRemove(index)} theme={'solid'} type={'secondary'}>{t('base.remove')}</Button>
+					</Space>
+				</div>)
+			})}
+			<div style={{marginTop:10}}>
+				<Button theme={'solid'}>{t('base.add')}</Button>
+			</div>
 		</div>
-		<div className="confirm-item-btn">
-			<Space spacing={15}>
-				{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 size={'large'} color='light-blue'>{state.bill_type}</Tag> : <>
-						<Popconfirm
-							title={'Notice'} onConfirm={() => onConfirmBill()}
-							position={'topRight'}
-							content={`${t('bill.confirm_bill_type')}?`}
-						><Button style={{width:80}} loading={state.loading} theme={'solid'}>{t('base.confirm')}</Button></Popconfirm>
-					</>
-				}
-			</Space>
-		</div>
-	</div>
+		<Divider margin='12px'/>
+	</>)
 }

src/pages/bill/query.tsx

@@ -193,11 +193,9 @@ const BillQuery = () => {
 						!state.confirmBill.application_number_confirm &&
                         <NumberConfirm bill={state.confirmBill} type={'application_number'}/>
 					}
+					<Divider>Bill Type Confirm</Divider>
 					{
-						state.confirmBill.details.map((it, idx) => (<div key={idx}>
-							<Divider margin='12px'/>
-							<BillTypeConfirm data={it}/>
-						</div>))
+						state.confirmBill.details.map((it, idx) => (<BillTypeConfirm data={it} key={idx}/>))
 					}
                 </div>
             </>}

src/types/bill.d.ts

@@ -109,4 +109,9 @@ type BillUpdateParams = {
     remark?: string;
     merchant_ref?: string;
     payment_amount?: number | string;
+}
+
+type BillTypeConfirm = {
+    bill_type: string;
+    amount: number;
 }