pagination
This commit is contained in:
wangwenchen
parent
83cf73b5bc
commit
590ddac53e
|
|
@ -0,0 +1,19 @@
|
|||
/// <reference types="react" />
|
||||
import { EntityDict } from 'oak-domain/lib/types/Entity';
|
||||
import { EntityDict as BaseEntityDict } from 'oak-domain/lib/base-app-domain';
|
||||
import { ReactComponentProps } from '../../types/Page';
|
||||
declare const _default: <ED2 extends EntityDict & BaseEntityDict, T2 extends keyof ED2>(props: ReactComponentProps<ED2, T2, false, {
|
||||
entity: T2;
|
||||
style?: import("react").CSSProperties | undefined;
|
||||
className?: string | undefined;
|
||||
showQuickJumper?: boolean | {
|
||||
goButton?: React.ReactNode;
|
||||
} | undefined;
|
||||
size?: "small" | "default" | undefined;
|
||||
responsive?: boolean | undefined;
|
||||
role?: string | undefined;
|
||||
totalBoundaryShowSizeChanger?: number | undefined;
|
||||
rootClassName?: string | undefined;
|
||||
showTotal?: ((total: number, range: [number, number]) => React.ReactNode) | undefined;
|
||||
}>) => React.ReactElement;
|
||||
export default _default;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
export default OakComponent({
|
||||
entity() {
|
||||
return this.props.entity;
|
||||
},
|
||||
properties: {
|
||||
entity: '',
|
||||
},
|
||||
isList: true,
|
||||
lifetimes: {
|
||||
ready() {
|
||||
const { oakPagination } = this.state;
|
||||
const { total } = oakPagination || {};
|
||||
if (total) {
|
||||
this.setState({ total1: total });
|
||||
}
|
||||
}
|
||||
},
|
||||
listeners: {
|
||||
oakPagination(prev, next) {
|
||||
const { oakPagination } = this.state;
|
||||
const { total } = oakPagination || {};
|
||||
if (!prev.oakPagination && prev.oakPagination !== next.oakPagination) {
|
||||
if (total) {
|
||||
this.setState({ total1: total });
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async setTotal() {
|
||||
const { oakPagination, total1 } = this.state;
|
||||
const { pageSize, total, currentPage, more } = oakPagination || {};
|
||||
if (total && pageSize) {
|
||||
if (Math.ceil(total1 / pageSize) === currentPage) {
|
||||
this.setState({ total1: total1 + pageSize });
|
||||
// return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
.oak-pageHeader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
.default {
|
||||
margin:8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
:global {
|
||||
.ant-pagination-next {
|
||||
cursor: pointer !important
|
||||
}
|
||||
}
|
||||
}
|
||||
.paginationNoMore {
|
||||
:global {
|
||||
.ant-pagination-next {
|
||||
cursor: not-allowed !important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import React from 'react';
|
||||
import { WebComponentProps } from '../../types/Page';
|
||||
import { EntityDict } from 'oak-domain/lib/types/Entity';
|
||||
import { EntityDict as BaseEntityDict } from 'oak-domain/lib/base-app-domain';
|
||||
import type { PaginationProps as RcPaginationProps } from 'rc-pagination';
|
||||
export interface PaginationProps extends RcPaginationProps {
|
||||
showQuickJumper?: boolean | {
|
||||
goButton?: React.ReactNode;
|
||||
};
|
||||
size?: 'default' | 'small';
|
||||
responsive?: boolean;
|
||||
role?: string;
|
||||
totalBoundaryShowSizeChanger?: number;
|
||||
rootClassName?: string;
|
||||
onChange?: (page: number, pageSize: number) => void;
|
||||
onShowSizeChange?: (current: number, size: number) => void;
|
||||
itemRender?: (page: number, type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next', element: React.ReactNode) => React.ReactNode;
|
||||
showTotal?: (total: number, range: [number, number]) => React.ReactNode;
|
||||
total1: number;
|
||||
}
|
||||
type ED = EntityDict & BaseEntityDict;
|
||||
export default function Render(props: WebComponentProps<ED, keyof ED, true, PaginationProps, {
|
||||
onChange?: (page: number, pageSize: number) => void;
|
||||
onShowSizeChange?: (current: number, size: number) => void;
|
||||
itemRender?: (page: number, type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next', element: React.ReactNode) => React.ReactNode;
|
||||
setTotal: () => void;
|
||||
}>): "" | React.JSX.Element | undefined;
|
||||
export {};
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import React from 'react';
|
||||
import { Pagination } from 'antd';
|
||||
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
|
||||
import Style from './index.module.less';
|
||||
export default function Render(props) {
|
||||
const { style, className, oakPagination, oakFullpath, total1, showQuickJumper, size, responsive, role, totalBoundaryShowSizeChanger, rootClassName, showTotal, } = props.data;
|
||||
const { t, setPageSize, setCurrentPage, setTotal } = props.methods;
|
||||
const { pageSize, total, currentPage, more } = oakPagination || {};
|
||||
const itemRender = (_, type, originalElement) => {
|
||||
if (type === 'prev') {
|
||||
return <a><LeftOutlined /></a>;
|
||||
}
|
||||
if (type === 'next') {
|
||||
return <a style={{ cursor: more ? 'pointer' : 'not-allowed', color: more ? '#006cb7' : 'rgba(0, 0, 0, 0.25)' }} onClick={() => {
|
||||
if (more && currentPage) {
|
||||
setTotal();
|
||||
setCurrentPage(currentPage + 1);
|
||||
}
|
||||
}}><RightOutlined /></a>;
|
||||
}
|
||||
return originalElement;
|
||||
};
|
||||
return (oakFullpath && oakPagination && (<div style={style} className={className ? className : Style.default}>
|
||||
<Pagination className={more ? Style.pagination : Style.paginationNoMore} itemRender={itemRender} pageSize={pageSize} total={total1 || total} current={currentPage} showQuickJumper={showQuickJumper} size={size} responsive={responsive} role={role} totalBoundaryShowSizeChanger={totalBoundaryShowSizeChanger} rootClassName={rootClassName} showTotal={showTotal} onShowSizeChange={(current, pageSize) => {
|
||||
setPageSize(pageSize);
|
||||
}} onChange={(page, pageSize) => {
|
||||
setCurrentPage(page);
|
||||
}}/>
|
||||
</div>));
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
.default {
|
||||
margin:8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
:global {
|
||||
.ant-pagination-next {
|
||||
cursor: pointer !important
|
||||
}
|
||||
}
|
||||
}
|
||||
.paginationNoMore {
|
||||
:global {
|
||||
.ant-pagination-next {
|
||||
cursor: not-allowed !important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
import { EntityDict } from 'oak-domain/lib/types/Entity';
|
||||
import { EntityDict as BaseEntityDict } from 'oak-domain/lib/base-app-domain';
|
||||
import { ReactComponentProps } from '../../types/Page';
|
||||
|
||||
export default OakComponent({
|
||||
entity() {
|
||||
return this.props.entity!;
|
||||
},
|
||||
properties: {
|
||||
entity: '',
|
||||
},
|
||||
isList: true,
|
||||
lifetimes: {
|
||||
ready() {
|
||||
const { oakPagination } = this.state;
|
||||
const { total } = oakPagination || {};
|
||||
if (total) {
|
||||
this.setState({ total1: total })
|
||||
}
|
||||
}
|
||||
},
|
||||
listeners: {
|
||||
oakPagination(prev, next) {
|
||||
const { oakPagination } = this.state;
|
||||
const { total } = oakPagination || {};
|
||||
if (!prev.oakPagination && prev.oakPagination !== next.oakPagination) {
|
||||
if (total) {
|
||||
this.setState({ total1: total })
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async setTotal() {
|
||||
const { oakPagination, total1 } = this.state;
|
||||
const { pageSize, total, currentPage, more } = oakPagination || {};
|
||||
if (total && pageSize) {
|
||||
if (Math.ceil(total1 / pageSize) === currentPage) {
|
||||
this.setState({ total1: total1 + pageSize })
|
||||
// return
|
||||
}
|
||||
}
|
||||
},
|
||||
// async setPage(value: number) {
|
||||
// const { oakPagination, total1 } = this.state;
|
||||
// const { pageSize, total, currentPage, more } = oakPagination || {};
|
||||
// if (value && pageSize) {
|
||||
// if ((value * pageSize) > total1) {
|
||||
// this.setState({ total1: value * pageSize })
|
||||
// }
|
||||
// // else {
|
||||
|
||||
// // }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}) as <ED2 extends EntityDict & BaseEntityDict, T2 extends keyof ED2>(
|
||||
props: ReactComponentProps<
|
||||
ED2,
|
||||
T2,
|
||||
false,
|
||||
{
|
||||
entity: T2;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
showQuickJumper?: boolean | {
|
||||
goButton?: React.ReactNode;
|
||||
};
|
||||
size?: 'default' | 'small';
|
||||
responsive?: boolean;
|
||||
role?: string;
|
||||
totalBoundaryShowSizeChanger?: number;
|
||||
rootClassName?: string;
|
||||
showTotal?: (total: number, range: [number, number]) => React.ReactNode;
|
||||
}
|
||||
>
|
||||
) => React.ReactElement;
|
||||
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Row, Col, Button, Pagination, InputNumber } from 'antd';
|
||||
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
|
||||
import classNames from 'classnames';
|
||||
import { WebComponentProps } from '../../types/Page';
|
||||
import { EntityDict } from 'oak-domain/lib/types/Entity';
|
||||
import { EntityDict as BaseEntityDict } from 'oak-domain/lib/base-app-domain';
|
||||
import Style from './index.module.less';
|
||||
import type { PaginationLocale, PaginationProps as RcPaginationProps } from 'rc-pagination';
|
||||
|
||||
export interface PaginationProps extends RcPaginationProps {
|
||||
showQuickJumper?: boolean | {
|
||||
goButton?: React.ReactNode;
|
||||
};
|
||||
size?: 'default' | 'small';
|
||||
responsive?: boolean;
|
||||
role?: string;
|
||||
totalBoundaryShowSizeChanger?: number;
|
||||
rootClassName?: string;
|
||||
onChange?: (page: number, pageSize: number) => void;
|
||||
onShowSizeChange?: (current: number, size: number) => void;
|
||||
itemRender?: (
|
||||
page: number,
|
||||
type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',
|
||||
element: React.ReactNode,
|
||||
) => React.ReactNode;
|
||||
showTotal?: (total: number, range: [number, number]) => React.ReactNode;
|
||||
total1: number
|
||||
}
|
||||
|
||||
type ED = EntityDict & BaseEntityDict;
|
||||
|
||||
export default function Render(
|
||||
props: WebComponentProps<
|
||||
ED,
|
||||
keyof ED,
|
||||
true,
|
||||
PaginationProps,
|
||||
{
|
||||
onChange?: (page: number, pageSize: number) => void;
|
||||
onShowSizeChange?: (current: number, size: number) => void;
|
||||
itemRender?: (
|
||||
page: number,
|
||||
type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',
|
||||
element: React.ReactNode,
|
||||
) => React.ReactNode;
|
||||
// showTotal?: (total: number, range: [number, number]) => React.ReactNode;
|
||||
setTotal: () => void;
|
||||
setPage: (value: number) => void;
|
||||
}
|
||||
>
|
||||
) {
|
||||
const {
|
||||
style,
|
||||
className,
|
||||
oakPagination,
|
||||
oakFullpath,
|
||||
total1,
|
||||
showQuickJumper,
|
||||
size,
|
||||
responsive,
|
||||
role,
|
||||
totalBoundaryShowSizeChanger,
|
||||
rootClassName,
|
||||
showTotal,
|
||||
} = props.data;
|
||||
const { t, setPageSize, setCurrentPage, setTotal, setPage, setMessage } = props.methods;
|
||||
const { pageSize, total, currentPage, more } = oakPagination || {};
|
||||
// const [inputPage, setInputPage] = useState(1);
|
||||
const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
|
||||
if (type === 'prev') {
|
||||
return <a><LeftOutlined /></a>;
|
||||
}
|
||||
if (type === 'next') {
|
||||
return <a
|
||||
style={{ cursor: more ? 'pointer' : 'not-allowed', color: more ? '#006cb7' : 'rgba(0, 0, 0, 0.25)' }}
|
||||
onClick={() => {
|
||||
if (more && currentPage) {
|
||||
setTotal()
|
||||
setCurrentPage(currentPage + 1);
|
||||
}
|
||||
}}><RightOutlined /></a>;
|
||||
}
|
||||
return originalElement;
|
||||
};
|
||||
|
||||
return (
|
||||
oakFullpath && oakPagination && (
|
||||
<div
|
||||
style={style}
|
||||
className={className ? className : Style.default}
|
||||
>
|
||||
<Pagination
|
||||
className={more ? Style.pagination : Style.paginationNoMore}
|
||||
itemRender={itemRender}
|
||||
pageSize={pageSize}
|
||||
total={total1 || total}
|
||||
current={currentPage}
|
||||
showQuickJumper={showQuickJumper}
|
||||
size={size}
|
||||
responsive={responsive}
|
||||
role={role}
|
||||
totalBoundaryShowSizeChanger={totalBoundaryShowSizeChanger}
|
||||
rootClassName={rootClassName}
|
||||
showTotal={showTotal}
|
||||
onShowSizeChange={(current: number, pageSize: number) => {
|
||||
setPageSize(pageSize);
|
||||
}}
|
||||
onChange={(page: number, pageSize: number) => {
|
||||
setCurrentPage(page);
|
||||
}}
|
||||
/>
|
||||
{/* <div>
|
||||
<InputNumber
|
||||
onChange={(value: number) => {
|
||||
setInputPage(value)
|
||||
}} />
|
||||
<Button onClick={() => {
|
||||
if (more) {
|
||||
setPage(inputPage)
|
||||
setCurrentPage(inputPage);
|
||||
} else {
|
||||
if ((inputPage * pageSize!) > total1) {
|
||||
setMessage({
|
||||
type: 'warning',
|
||||
content: "没有更多数据了!"
|
||||
})
|
||||
return
|
||||
}
|
||||
setPage(inputPage)
|
||||
setCurrentPage(inputPage);
|
||||
}
|
||||
|
||||
}}>跳转</Button>
|
||||
</div> */}
|
||||
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue