37 lines
2.0 KiB
JavaScript
37 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import { Avatar, List, Select, Flex, DatePicker, Empty, Pagination } from 'antd';
|
|
import Styles from './web.module.less';
|
|
import dayJs from 'dayjs';
|
|
export default function Render(props) {
|
|
const { sysAccountOpers, month, type, monthStr, oakLoading, oakLoadingMore, typesOptions, oakPagination } = props.data;
|
|
const { t, setType, setMonth, setPageSize, setCurrentPage } = props.methods;
|
|
const { pageSize, total, currentPage } = oakPagination || {};
|
|
return (<div className={Styles.container}>
|
|
<Flex gap="middle" justify="flex-end" className={Styles.control}>
|
|
<DatePicker picker="month" onChange={(value) => {
|
|
setMonth(value?.toDate());
|
|
}} maxDate={dayJs()}/>
|
|
<Select style={{ width: 120 }} onChange={(value) => {
|
|
setType(value);
|
|
}} value={type} options={typesOptions}/>
|
|
</Flex>
|
|
|
|
{sysAccountOpers?.length ?
|
|
<div className={Styles.content}>
|
|
<List loading={oakLoading || oakLoadingMore} dataSource={sysAccountOpers} 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={<div>{item.time}</div>}/>
|
|
<div className={Styles.value} style={{
|
|
color: item.bgColor,
|
|
}}>
|
|
{item.value}
|
|
</div>
|
|
</List.Item>)}/>
|
|
<div className={Styles.pagi}>
|
|
<Pagination current={currentPage} total={total} pageSize={pageSize} onShowSizeChange={(size) => setPageSize(size)} onChange={(page) => setCurrentPage(page)}/>
|
|
</div>
|
|
|
|
</div>
|
|
: (<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>)}
|
|
</div>);
|
|
}
|