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

feat:sort is now available

Browse Source
This commit is contained in:
LittleBoy 2024-07-28 18:50:47 +08:00
parent b4062b1a08
commit 895c032532
3 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,6 +21,7 @@ type SearchFormFields = {
payment_channel?: string; payment_channel?: string;
bill_status?: string; bill_status?: string;
apply_status?: string; apply_status?: string;
sort_by?: string;
} }
const SearchForm: React.FC<SearchFormProps> = (props) => { const SearchForm: React.FC<SearchFormProps> = (props) => {
const formSubmit = (value: SearchFormFields) => { const formSubmit = (value: SearchFormFields) => {
@ -54,6 +55,12 @@ const SearchForm: React.FC<SearchFormProps> = (props) => {
if (value.payment_channel) { if (value.payment_channel) {
params.payment_channel = 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); props.onSearch?.(params);
} }
const {t, i18n} = useTranslation(); const {t, i18n} = useTranslation();
@ -102,14 +109,14 @@ const SearchForm: React.FC<SearchFormProps> = (props) => {
</Form.Select> </Form.Select>
</Col> </Col>
<Col xxl={6} xl={6} md={8}> <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%'}}> 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 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="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 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="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="application_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 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 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> <Form.Select.Option value="paid_at asc">{t('bill.title_paid_at')} {t('bill.sort_asc')}</Form.Select.Option>

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

@ -25,18 +25,16 @@ const DownloadButton = ({bill, text}: { bill: BillModel; text: string }) => {
// } // }
const BillQuery = () => { const BillQuery = () => {
const {user} = useAuth();
const [state, setState] = useSetState<{ const [state, setState] = useSetState<{
updateBill?: BillModel updateBill?: BillModel
updateLoading?: boolean updateLoading?: boolean
confirmBill?: BillModel confirmBill?: BillModel
}>({}) }>({})
const [showBill, setShowBill] = useState<BillModel>() const [showBill, setShowBill] = useState<BillModel>()
const [queryParams, setBillQueryParams] = useState<BillQueryParams>({}); const [queryParams, setBillQueryParams] = useState<BillQueryParams>({
const {data, loading, refresh} = useRequest(() => billList({ sort_field: 'id', sort_order: 'DESC'
...queryParams, });
department: user?.department == 'RO' ? 'RO' : 'FO', const {data, loading, refresh} = useRequest(() => billList(queryParams), {
}), {
refreshDeps: [queryParams], refreshDeps: [queryParams],
onError: (e) => { onError: (e) => {
Notification.error({title: 'Error', content: e.message}) Notification.error({title: 'Error', content: e.message})
@ -156,21 +154,23 @@ const BillQuery = () => {
> >
{state.confirmBill && <> {state.confirmBill && <>
<div><BillDetailItems bill={state.confirmBill}/></div> <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"> state.confirmBill.details.map((it, idx) => (
<Space spacing={10}> <div key={idx} className="confirm-item align-center space-between">
<span>{it.id}.</span> <Space spacing={10}>
<span>{it.bill_type}</span> <span>{it.id}.</span>
<div> <span>{it.bill_type}</span>
<MoneyFormat money={it.amount}/> <div>
</div> <MoneyFormat money={it.amount}/>
</Space> </div>
<div className="confirm-item-btn"> </Space>
{!!it.confirm_status ? <Tag color='light-blue'>CONFIRMED</Tag>:<Button>{t('base.confirm')}</Button>} <div className="confirm-item-btn">
{!!it.confirm_status ? <Tag color='light-blue'>CONFIRMED</Tag> :
<Button>{t('base.confirm')}</Button>}
</div> </div>
</div>)) </div>))
} }
</div> </div>
</>} </>}

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

@ -15,6 +15,7 @@ declare type BillDetail = {
confirm_status?: number; confirm_status?: number;
amount: decimal; amount: decimal;
} }
declare type SortOrderType = 'ASC'|'DESC' | string;
/** /**
* 账单查询参数 * 账单查询参数
*/ */
@ -30,6 +31,8 @@ declare type BillQueryParam = {
start_date:string; start_date:string;
end_date:string; end_date:string;
department:string; department:string;
sort_field:string;
sort_order:SortOrderType;
} }
/** /**
* 账单模型 * 账单模型