From 895c0325326cc6aa54f18d7d97c1fb30f783bc15 Mon Sep 17 00:00:00 2001
From: callmeyan <yaclty2@gmail.com>
Date: Sun, 28 Jul 2024 18:50:47 +0800
Subject: [PATCH] feat:sort is now available

---
 src/components/bill/search-form.tsx | 13 +++++++---
 src/pages/bill/query.tsx            | 38 ++++++++++++++---------------
 src/types/bill.d.ts                 |  3 +++
 3 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/components/bill/search-form.tsx b/src/components/bill/search-form.tsx
index 60b0b09..498950f 100644
--- a/src/components/bill/search-form.tsx
+++ b/src/components/bill/search-form.tsx
@@ -21,6 +21,7 @@ type SearchFormFields = {
     payment_channel?: string;
     bill_status?: string;
     apply_status?: string;
+    sort_by?: string;
 }
 const SearchForm: React.FC<SearchFormProps> = (props) => {
     const formSubmit = (value: SearchFormFields) => {
@@ -54,6 +55,12 @@ const SearchForm: React.FC<SearchFormProps> = (props) => {
         if (value.payment_channel) {
             params.payment_channel = value.payment_channel;
         }
+        // 排序
+        if(value.sort_by){
+            const [field, order] = value.sort_by.split(' ')
+            params.sort_field = field
+            params.sort_order = order?.toUpperCase() || 'DESC'
+        }
         props.onSearch?.(params);
     }
     const {t, i18n} = useTranslation();
@@ -102,14 +109,14 @@ const SearchForm: React.FC<SearchFormProps> = (props) => {
                         </Form.Select>
                     </Col>
                     <Col xxl={6} xl={6} md={8}>
-                        <Form.Select showClear field="payment_channel" label={t('bill.title_pay_sort')}
+                        <Form.Select showClear field="sort_by" label={t('bill.title_pay_sort')}
                                      placeholder={t('base.please_select')} style={{width: '100%'}}>
                             <Form.Select.Option value="id desc">ID {t('bill.sort_desc')}</Form.Select.Option>
                             <Form.Select.Option value="id asc">ID {t('bill.sort_asc')}</Form.Select.Option>
                             <Form.Select.Option value="student_number desc">{t('base.student_number')} {t('bill.sort_desc')}</Form.Select.Option>
                             <Form.Select.Option value="student_number asc">{t('base.student_number')} {t('bill.sort_asc')}</Form.Select.Option>
-                            <Form.Select.Option value="bill_number desc">{t('base.bill_number')} {t('bill.sort_desc')}</Form.Select.Option>
-                            <Form.Select.Option value="bill_number asc">{t('base.bill_number')} {t('bill.sort_asc')}</Form.Select.Option>
+                            <Form.Select.Option value="application_number desc">{t('base.bill_number')} {t('bill.sort_desc')}</Form.Select.Option>
+                            <Form.Select.Option value="application_number asc">{t('base.bill_number')} {t('bill.sort_asc')}</Form.Select.Option>
                             <Form.Select.Option value="paid_at desc">{t('bill.title_paid_at')} {t('bill.sort_desc')}</Form.Select.Option>
                             <Form.Select.Option value="paid_at asc">{t('bill.title_paid_at')} {t('bill.sort_asc')}</Form.Select.Option>
 
diff --git a/src/pages/bill/query.tsx b/src/pages/bill/query.tsx
index aca0554..3b5401e 100644
--- a/src/pages/bill/query.tsx
+++ b/src/pages/bill/query.tsx
@@ -25,18 +25,16 @@ const DownloadButton = ({bill, text}: { bill: BillModel; text: string }) => {
 // }
 
 const BillQuery = () => {
-	const {user} = useAuth();
 	const [state, setState] = useSetState<{
 		updateBill?: BillModel
 		updateLoading?: boolean
 		confirmBill?: BillModel
 	}>({})
 	const [showBill, setShowBill] = useState<BillModel>()
-	const [queryParams, setBillQueryParams] = useState<BillQueryParams>({});
-	const {data, loading, refresh} = useRequest(() => billList({
-		...queryParams,
-		department: user?.department == 'RO' ? 'RO' : 'FO',
-	}), {
+	const [queryParams, setBillQueryParams] = useState<BillQueryParams>({
+		sort_field: 'id', sort_order: 'DESC'
+	});
+	const {data, loading, refresh} = useRequest(() => billList(queryParams), {
 		refreshDeps: [queryParams],
 		onError: (e) => {
 			Notification.error({title: 'Error', content: e.message})
@@ -156,21 +154,23 @@ const BillQuery = () => {
 		>
 			{state.confirmBill && <>
                 <div><BillDetailItems bill={state.confirmBill}/></div>
-                <div className="confirm-container" style={{padding:'15px 0'}}>
+                <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 ? <Tag color='light-blue'>CONFIRMED</Tag>:<Button>{t('base.confirm')}</Button>}
+						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 ? <Tag color='light-blue'>CONFIRMED</Tag> :
+										<Button>{t('base.confirm')}</Button>}
 
-							</div>
-						</div>))
+								</div>
+							</div>))
 					}
                 </div>
             </>}
diff --git a/src/types/bill.d.ts b/src/types/bill.d.ts
index b119cc5..e709818 100644
--- a/src/types/bill.d.ts
+++ b/src/types/bill.d.ts
@@ -15,6 +15,7 @@ declare type BillDetail = {
     confirm_status?: number;
     amount: decimal;
 }
+declare type SortOrderType = 'ASC'|'DESC' | string;
 /**
  * 账单查询参数
  */
@@ -30,6 +31,8 @@ declare type BillQueryParam = {
     start_date:string;
     end_date:string;
     department:string;
+    sort_field:string;
+    sort_order:SortOrderType;
 }
 /**
  * 账单模型