130 lines
5.5 KiB
TypeScript
130 lines
5.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Radio, Avatar, List, Select, Flex, Button, Card, Result, DatePicker, Modal } from 'antd';
|
|
import { CaretDownFilled, SearchOutlined } from '@ant-design/icons';
|
|
import { RowWithActions, WebComponentProps } from 'oak-frontend-base';
|
|
import { EntityDict } from '../../../oak-app-domain';
|
|
import Styles from './web.module.less';
|
|
import dayJs from 'dayjs';
|
|
|
|
export default function Render(props: WebComponentProps<EntityDict, 'accountOper', true, {
|
|
accountOpers?: Array<{
|
|
value: string;
|
|
time: string;
|
|
type: string;
|
|
symbol: string;
|
|
avail: string;
|
|
bgColor: string;
|
|
}>;
|
|
hasMore: boolean;
|
|
month?: Date;
|
|
monthStr: string;
|
|
type: 'in' | 'out' | 'both';
|
|
chooseMonth: boolean;
|
|
chooseType: boolean;
|
|
}, {
|
|
setMonth: (month?: Date) => void;
|
|
setType: (type: 'in' | 'out' | 'both') => void;
|
|
setChooseMonth: (cm: boolean) => void;
|
|
setChooseType: (ct: boolean) => void;
|
|
}>) {
|
|
const { accountOpers, hasMore, month, type, chooseMonth, chooseType, monthStr, oakLoading, oakLoadingMore } = props.data;
|
|
const { t, loadMore, setType, setMonth, setChooseMonth, setChooseType, navigateBack } = props.methods;
|
|
|
|
return (
|
|
<>
|
|
<Card
|
|
title={t('history')}
|
|
extra={
|
|
<Flex
|
|
gap="middle"
|
|
className={Styles.control}
|
|
>
|
|
<DatePicker
|
|
picker="month"
|
|
onChange={(value) => {
|
|
setMonth(value.toDate());
|
|
}}
|
|
maxDate={dayJs()}
|
|
/>
|
|
<Select
|
|
style={{ width: 120 }}
|
|
onChange={(value) => {
|
|
setType(value as 'in');
|
|
}}
|
|
value={type}
|
|
options={[
|
|
{ value: 'both', label: t('type.both') },
|
|
{ value: 'in', label: t('type.in') },
|
|
{ value: 'out', label: t('type.out') },
|
|
]}
|
|
/>
|
|
</Flex>
|
|
}
|
|
>
|
|
{
|
|
accountOpers?.length ?
|
|
<List
|
|
className={Styles.list}
|
|
loading={oakLoading || oakLoadingMore}
|
|
dataSource={accountOpers}
|
|
renderItem={(item, idx) => (
|
|
<List.Item
|
|
key={idx}
|
|
>
|
|
<List.Item.Meta
|
|
avatar={<Avatar style={{ backgroundColor: item.bgColor }}>{item.symbol}</Avatar>}
|
|
title={<span className={Styles.type}>{item.type}</span>}
|
|
description={
|
|
<Flex
|
|
justify="between"
|
|
className={Styles.main}
|
|
gap="large"
|
|
>
|
|
<span>{item.time}</span>
|
|
<span>{t('account:attr.avail')}:{item.avail}</span>
|
|
</Flex>
|
|
}
|
|
/>
|
|
<div
|
|
className={Styles.value}
|
|
style={{
|
|
color: item.bgColor,
|
|
}}
|
|
>
|
|
{item.value}
|
|
</div>
|
|
</List.Item>
|
|
)}
|
|
loadMore={
|
|
!oakLoading && !oakLoadingMore && hasMore ? (
|
|
<div
|
|
style={{
|
|
textAlign: 'center',
|
|
marginTop: 12,
|
|
height: 32,
|
|
lineHeight: '32px',
|
|
}}
|
|
>
|
|
<Button onClick={loadMore}>
|
|
{t('common::loadMore')}
|
|
</Button>
|
|
</div>
|
|
) : null
|
|
}
|
|
/> : (
|
|
<Result
|
|
status="404"
|
|
title={t('common::noData')}
|
|
extra={
|
|
<Button
|
|
onClick={() => navigateBack()}
|
|
>
|
|
{t('common::back')}
|
|
</Button>}
|
|
/>
|
|
)
|
|
}
|
|
</Card>
|
|
</>
|
|
);
|
|
} |