Oak-Team
/
oak-frontend-base
13
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases 37 Wiki Activity

pagination默认分页应该在list组件里面

This commit is contained in:
Wang Kejun 2024-07-06 11:47:49 +08:00
parent a53909bcc3
commit 9697c30b4a
21 changed files with 308 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
es/components/list/index.d.ts vendored
View File

@ -9,13 +9,13 @@ declare const _default: <ED2 extends ED, T2 extends keyof ED2>(props: ReactCompo
attributes: OakAbsAttrDef[];
data: RowWithActions<ED2, T2>[];
loading: boolean;
tablePagination?: TableProps<RowWithActions<ED2, T2>>['pagination'];
tablePagination?: React.ReactNode;
rowSelection?: TableProps<RowWithActions<ED2, T2>>['rowSelection'];
hideHeader?: boolean;
disableSerialNumber?: boolean;
size?: 'large' | 'middle' | 'small';
scroll?: TableProps<RowWithActions<ED2, T2>>['scroll'];
locale?: TableProps<RowWithActions<ED2, T2>>['locale'];
empty?: React.ReactNode;
opWidth?: number;
}>) => React.ReactElement;
export default _default;

10
es/components/list/index.js
View File

@ -1,7 +1,7 @@
import { analyzeAttrMobileForCard, translateAttributes } from '../../utils/usefulFn';
import { assert } from 'oak-domain/lib/utils/assert';
export default OakComponent({
isList: false,
isList: true,
properties: {
entity: '',
extraActions: [],
@ -16,10 +16,13 @@ export default OakComponent({
disableSerialNumber: false, //是否禁用序号 默认启用
size: 'large',
scroll: undefined,
locale: undefined,
empty: undefined,
opWidth: undefined,
oakPath: undefined,
},
entity() {
return this.props.entity;
},
formData({ props }) {
const { converter } = this.state;
const { data } = props;
@ -45,9 +48,7 @@ export default OakComponent({
// 因为部分i18json数据请求较慢，会导致converter，columnDef解析出错
const { attributes, entity, data } = this.props;
const schema = this.features.cache.getSchema();
// assert(!!data, 'data不能为空');
assert(!!entity, 'list属性entity不能为空');
// assert(attributes?.length, 'attributes不能为空');
const ttt = this.t.bind(this);
const converter = analyzeAttrMobileForCard(schema, entity, ttt, attributes);
const judgeAttributes = translateAttributes(schema, entity, attributes);
@ -60,7 +61,6 @@ export default OakComponent({
},
methods: {
onActionMp(e) {
const { onAction } = this.props;
const { action, cascadeAction } = e.detail;
const { row } = e.currentTarget.dataset;
this.triggerEvent('onAction', {

22
es/components/list/web.pc.d.ts vendored
View File

@ -1,9 +1,9 @@
import React from 'react';
import { TableProps } from 'antd';
import { StorageSchema } from 'oak-domain/lib/types/Storage';
import { OakAbsAttrDef, onActionFnDef, OakExtraActionProps, OakAbsAttrJudgeDef, ED } from '../../types/AbstractComponent';
import { WebComponentProps, RowWithActions } from '../../types/Page';
export default function Render(props: WebComponentProps<ED, keyof ED, false, {
import React from "react";
import { TableProps } from "antd";
import { StorageSchema } from "oak-domain/lib/types/Storage";
import { OakAbsAttrDef, onActionFnDef, OakExtraActionProps, OakAbsAttrJudgeDef, ED } from "../../types/AbstractComponent";
import { WebComponentProps, RowWithActions } from "../../types/Page";
export default function Render(props: WebComponentProps<ED, keyof ED, true, {
loading: boolean;
extraActions: OakExtraActionProps[] | ((row: RowWithActions<ED, keyof ED>) => OakExtraActionProps[]);
entity: string;
@ -11,16 +11,16 @@ export default function Render(props: WebComponentProps<ED, keyof ED, false, {
attributes: OakAbsAttrDef[];
data: RowWithActions<ED, keyof ED>[];
disabledOp: boolean;
tablePagination?: TableProps<RowWithActions<ED, keyof ED>>['pagination'];
tablePagination?: React.ReactNode;
onAction?: onActionFnDef;
rowSelection?: TableProps<RowWithActions<ED, keyof ED>>['rowSelection'];
rowSelection?: TableProps<RowWithActions<ED, keyof ED>>["rowSelection"];
i18n: any;
hideHeader?: boolean;
disableSerialNumber?: boolean;
judgeAttributes: OakAbsAttrJudgeDef[];
size?: 'large' | 'middle' | 'small';
scroll?: TableProps<RowWithActions<ED, keyof ED>>['scroll'];
locale?: TableProps<RowWithActions<ED, keyof ED>>['locale'];
size?: "large" | "middle" | "small";
scroll?: TableProps<RowWithActions<ED, keyof ED>>["scroll"];
empty?: React.ReactNode;
opWidth?: number;
oakPath?: string;
}, {

107
es/components/list/web.pc.js
View File

@ -1,16 +1,16 @@
import React, { useState, useEffect, useContext } from 'react';
import { Table } from 'antd';
import { assert } from 'oak-domain/lib/utils/assert';
import { get } from 'oak-domain/lib/utils/lodash';
import { getWidth, getValue, getLabel, getType, getAlign, getLinkUrl, getFixed } from '../../utils/usefulFn';
import ActionBtn from '../actionBtn';
import TableCell from './renderCell';
import { TableContext } from '../listPro';
import { useFeatures } from '../../platforms/web';
import React, { useState, useEffect, useContext } from "react";
import { Table } from "antd";
import { assert } from "oak-domain/lib/utils/assert";
import { get } from "oak-domain/lib/utils/lodash";
import { getWidth, getValue, getLabel, getType, getAlign, getLinkUrl, getFixed, } from "../../utils/usefulFn";
import ActionBtn from "../actionBtn";
import TableCell from "./renderCell";
import { TableContext } from "../listPro";
import Pagination from "../pagination";
export default function Render(props) {
const { methods, data: oakData } = props;
const { t, getColor } = methods;
const { loading, entity, schema, extraActions, data, disabledOp = false, tablePagination, onAction, rowSelection, attributes, i18n, hideHeader, disableSerialNumber, judgeAttributes, size = 'large', scroll, locale, opWidth, oakPath, } = oakData;
const { loading, entity, schema, extraActions, data, disabledOp = false, tablePagination, onAction, rowSelection, attributes, i18n, hideHeader, disableSerialNumber, judgeAttributes, size = "large", scroll, empty, opWidth, oakPagination, oakFullpath } = oakData;
const [tableColumns, setTableColumns] = useState([]);
const { tableAttributes, setSchema } = useContext(TableContext);
// 为了i18更新时能够重新渲染
@ -28,7 +28,7 @@ export default function Render(props) {
.map((ele) => ele.attribute);
}
const tableColumns = showAttributes?.map((ele) => {
if (ele.entity === 'notExist') {
if (ele.entity === "notExist") {
assert(ele.attribute.width, `非schema属性${ele.attr}需要自定义width`);
assert(ele.attribute.type, `非schema属性${ele.attr}需要自定义type`);
assert(ele.attribute.label, `非schema属性${ele.attr}需要自定义label`);
@ -44,21 +44,21 @@ export default function Render(props) {
align,
fixed,
render: (v, row) => {
if (typeof ele.attribute !== 'string' &&
if (typeof ele.attribute !== "string" &&
ele.attribute.render) {
return ele.attribute.render(row);
}
const value = getValue(row, ele.path, ele.entity, ele.attr, ele.attrType, t);
const stateValue = get(row, ele.path);
let href = '';
if ([null, undefined, ''].includes(stateValue)) {
let href = "";
if ([null, undefined, ""].includes(stateValue)) {
return <></>;
}
const color = getColor(ele.attr, stateValue);
if (type === 'enum' && !color) {
if (type === "enum" && !color) {
console.warn(color, `${ele.entity}实体${ele.attr}颜色定义缺失`);
}
if (type === 'link') {
if (type === "link") {
href = getLinkUrl(ele.attribute, {
oakId: row?.id,
});
@ -69,46 +69,38 @@ export default function Render(props) {
if (width) {
Object.assign(column, { width });
}
else {
// 没有宽度的设置ellipsis
Object.assign(column, {
ellipsis: {
showTitle: false,
},
});
}
return column;
});
if (!disableSerialNumber) {
if (!disableSerialNumber && oakPagination) {
// 存在分页配置 启用#序号
tableColumns.unshift({
fixed: 'left',
align: 'left',
title: '#',
key: '#',
fixed: "left",
align: "left",
title: "#",
key: "#",
width: 100,
render: (value, row) => {
return row['#'];
return row["#"];
},
});
}
if (!disabledOp && tableColumns) {
tableColumns.push({
fixed: 'right',
align: 'left',
title: '操作',
key: 'operation',
fixed: "right",
align: "left",
title: "操作",
key: "operation",
width: opWidth || 140,
render: (value, row) => {
const oakActions = row?.['#oakLegalActions'];
const oakActions = row?.["#oakLegalActions"];
let extraActions2;
if (typeof extraActions === 'function') {
if (typeof extraActions === "function") {
extraActions2 = extraActions(row);
}
else {
extraActions2 = extraActions;
}
return (<ActionBtn entity={entity} extraActions={extraActions2} actions={oakActions} cascadeActions={row?.['#oakLegalCascadeActions']} onAction={(action, cascadeAction) => onAction &&
return (<ActionBtn entity={entity} extraActions={extraActions2} actions={oakActions} cascadeActions={row?.["#oakLegalCascadeActions"]} onAction={(action, cascadeAction) => onAction &&
onAction(row, action, cascadeAction)}/>);
},
});
@ -116,29 +108,24 @@ export default function Render(props) {
setTableColumns(tableColumns);
}
}, [data, zhCNKeys, schema, tableAttributes]);
const features = useFeatures();
const pagination = oakPath && features.runningTree.getPagination(oakPath);
return (<Table rowKey="id" rowSelection={rowSelection?.type && {
return (<>
<Table rowKey="id" rowSelection={rowSelection?.type && {
type: rowSelection?.type,
selectedRowKeys,
onChange: (selectedRowKeys, row, info) => {
rowSelection?.onChange &&
rowSelection?.onChange(selectedRowKeys, row, info);
},
}} size={size} loading={loading}
// dataSource={data}
dataSource={!disableSerialNumber
}} size={size} loading={loading} dataSource={!disableSerialNumber && oakPagination
? data?.map((ele, index) => {
if (pagination) {
const total = pagination.total || 0;
const pageSize = pagination.pageSize || 20; //条数
const current = pagination.current || 1; //当前页
ele['#'] =
pageSize * (current - 1) + (index + 1);
}
const total = oakPagination.total || 0;
const pageSize = oakPagination.pageSize || 20; //条数
const current = oakPagination.currentPage || 1; //当前页
ele["#"] =
pageSize * (current - 1) + (index + 1);
return ele;
})
: data} columns={tableColumns} pagination={false} locale={locale} scroll={data?.length > 0
: data} columns={tableColumns} pagination={false} locale={{ emptyText: empty }} scroll={data?.length > 0
? Object.assign({}, showScroll && {
scrollToFirstRowOnChange: true,
x: 1200,
@ -148,7 +135,7 @@ export default function Render(props) {
onClick: () => {
const index = selectedRowKeys.findIndex((ele) => ele === record.id);
let keys = selectedRowKeys;
if (rowSelection?.type === 'checkbox') {
if (rowSelection?.type === "checkbox") {
if (index !== -1) {
keys.splice(index, 1);
}
@ -161,8 +148,20 @@ export default function Render(props) {
}
const row = data.filter((ele) => keys.includes(ele.id));
rowSelection?.onChange &&
rowSelection?.onChange(keys, row, { type: 'all' });
rowSelection?.onChange(keys, row, {
type: "all",
});
},
};
}} showHeader={!hideHeader}></Table>);
}} showHeader={!hideHeader}></Table>
{tablePagination ? (tablePagination) : (<div style={{
display: "flex",
flexDirection: "row-reverse",
alignItems: "center",
marginTop: 8,
marginBottom: 8,
}}>
<Pagination oakPath={oakFullpath} entity={entity} oakAutoUnmount={true} showQuickJumper={true}/>
</div>)}
</>);
}

2
es/components/listPro/index.d.ts vendored
View File

@ -21,7 +21,7 @@ type Props<ED2 extends ED, T extends keyof ED2> = {
disableSerialNumber?: boolean;
size?: 'large' | 'middle' | 'small';
scroll?: TableProps<RowWithActions<ED2, T>>['scroll'];
locale?: TableProps<RowWithActions<ED2, T>>['locale'];
empty?: React.ReactNode;
opWidth?: number;
oakPath?: string;
};

16
es/components/listPro/index.js
View File

@ -6,7 +6,6 @@ import ButtonGroup from '../list/buttonGroup';
import Style from './index.module.less';
import { useWidth } from '../../platforms/web/responsive/useWidth';
import { useFeatures } from '../../platforms/web';
import Pagination from '../pagination';
import { assert } from 'oak-domain/lib/utils/assert';
export const TableContext = createContext({
tableAttributes: undefined,
@ -17,11 +16,10 @@ export const TableContext = createContext({
onReset: undefined,
});
const ProList = (props) => {
const { buttonGroup, entity, extraActions, onAction, disabledOp, attributes, data, loading, tablePagination, rowSelection, onReload, disableSerialNumber, title, hideDefaultButtons = false, extraContent, size = 'large', scroll, locale, opWidth, oakPath, } = props;
const { buttonGroup, entity, extraActions, onAction, disabledOp, attributes, data, loading, tablePagination, rowSelection, onReload, disableSerialNumber, title, hideDefaultButtons = false, extraContent, size = 'large', scroll, empty, opWidth, oakPath, } = props;
assert(!tablePagination);
const [tableAttributes, setTableAttributes] = useState([]);
const features = useFeatures();
// const pagination = oakPath && features.runningTree.getPagination(oakPath);
const [schema, setSchema] = useState(undefined);
const width = useWidth();
const isMobile = width === 'xs';
@ -53,17 +51,7 @@ const ProList = (props) => {
onReload ? onReload() : features.runningTree.refresh(oakPath);
}}/>)}
{isMobile && <ButtonGroup items={buttonGroup}/>}
<List entity={entity} extraActions={extraActions} onAction={onAction} disabledOp={disabledOp} attributes={attributes} scroll={scroll} locale={locale} data={data} loading={loading} size={size}
// tablePagination={tablePagination}
rowSelection={rowSelection} disableSerialNumber={disableSerialNumber} opWidth={opWidth} oakPath={oakPath}/>
{tablePagination ? (<div>
{tablePagination}
</div>) : (<div>
{oakPath && (<div style={{ display: 'flex', flexDirection: 'row-reverse', alignItems: 'center' }}>
<Pagination oakPath={oakPath} entity={entity} oakAutoUnmount={true} showQuickJumper={true}/>
{/* <div>{`${features.locales.t('total number of rows')}：${pagination.total > 999 ? `${pagination.total} +` : pagination.total}`}</div> */}
</div>)}
</div>)}
<List entity={entity} extraActions={extraActions} onAction={onAction} disabledOp={disabledOp} attributes={attributes} scroll={scroll} empty={empty} data={data} loading={loading} size={size} tablePagination={tablePagination} rowSelection={rowSelection} disableSerialNumber={disableSerialNumber} opWidth={opWidth} oakPath={oakPath}/>
</div>
</TableContext.Provider>);
};

5
es/components/pagination/index.js
View File

@ -19,9 +19,8 @@ export default OakComponent({
oakPagination(prev, next) {
if (!prev.oakPagination &&
prev.oakPagination !== next.oakPagination) {
const { total, pageSize, currentPage } = next.oakPagination || {};
if (total && (total >= pageSize * currentPage)) {
console.log(total);
const { total, pageSize, currentPage, more } = next.oakPagination || {};
if (total) {
this.setState({ newTotal: total });
}
}

6
es/components/pagination/index.module.less
View File

@ -1,9 +1,3 @@
.default {
margin:8px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.pagination {
:global {

10
es/components/pagination/web.d.ts vendored
View File

@ -1,15 +1,15 @@
import React from 'react';
import { WebComponentProps } from '../../types/Page';
import { ED } from '../../types/AbstractComponent';
import React from "react";
import { WebComponentProps } from "../../types/Page";
import { ED } from "../../types/AbstractComponent";
export interface IPaginationProps {
style?: React.CSSProperties;
className?: string;
showQuickJumper?: boolean;
size?: 'default' | 'small';
size?: "default" | "small";
showSizeChanger?: boolean;
showTotal?: (total: number, range: [number, number]) => React.ReactNode;
newTotal: number;
}
export default function Render(props: WebComponentProps<ED, keyof ED, true, IPaginationProps, {
setTotal: () => void;
}>): React.JSX.Element | undefined;
}>): React.JSX.Element | null;

26
es/components/pagination/web.js
View File

@ -1,22 +1,21 @@
import React from 'react';
import { Pagination } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import Style from './index.module.less';
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, newTotal, showQuickJumper, showSizeChanger, size, showTotal, } = props.data;
const { t, setPageSize, setCurrentPage, setTotal } = props.methods;
const { pageSize, total, currentPage, more } = oakPagination || {};
const itemRender = (_, type, originalElement) => {
if (type === 'prev') {
if (type === "prev") {
return (<a>
<LeftOutlined />
</a>);
}
if (type === 'next') {
if (type === "next") {
return (<a style={{
cursor: more ? 'pointer' : 'not-allowed',
color: more ? '#006cb7' : 'rgba(0, 0, 0, 0.25)',
cursor: more ? "pointer" : "not-allowed",
color: more ? "#006cb7" : "rgba(0, 0, 0, 0.25)",
}} onClick={() => {
if (more && currentPage) {
setTotal();
@ -28,11 +27,12 @@ export default function Render(props) {
}
return originalElement;
};
return (oakPagination && (<div style={style} className={classNames(Style.default, className)}>
<Pagination className={more ? Style.pagination : Style.paginationNoMore} itemRender={itemRender} pageSize={pageSize} total={newTotal} current={currentPage} showQuickJumper={showQuickJumper} showSizeChanger={showSizeChanger} size={size} showTotal={showTotal} onShowSizeChange={(current, pageSize) => {
if (!oakPagination) {
return null;
}
return (<Pagination className={more ? Style.pagination : Style.paginationNoMore} itemRender={itemRender} pageSize={pageSize} total={newTotal} current={currentPage} showQuickJumper={showQuickJumper} showSizeChanger={showSizeChanger} size={size} showTotal={showTotal} onShowSizeChange={(current, pageSize) => {
setPageSize(pageSize);
}} onChange={(page, pageSize) => {
setCurrentPage(page);
}}/>
</div>));
}}/>);
}

1
es/utils/usefulFn.d.ts vendored
View File

@ -10,6 +10,7 @@ export declare function resolvePath<ED extends EntityDict & BaseEntityDict>(data
attrType: DataType | 'ref' | undefined;
attribute: Attribute | undefined;
};
export declare function isAttributeType(attribute: OakAbsAttrDef): OakAbsDerivedAttrDef;
export declare function getLinkUrl(attribute: OakAbsAttrDef, props: Record<string, string>): string;
export declare function getPath(attribute: OakAbsAttrDef): string;
export declare function getLabel<ED extends EntityDict & BaseEntityDict>(attribute: OakAbsAttrDef, entity: keyof ED, attr: string, t: (k: string, params?: object) => string): string;

2
es/utils/usefulFn.js
View File

@ -79,7 +79,7 @@ export function resolvePath(dataSchema, entity, path) {
};
}
// 强制类型
function isAttributeType(attribute) {
export function isAttributeType(attribute) {
return attribute;
}
export function getLinkUrl(attribute, props) {

1
lib/utils/usefulFn.d.ts vendored
View File

@ -10,6 +10,7 @@ export declare function resolvePath<ED extends EntityDict & BaseEntityDict>(data
attrType: DataType | 'ref' | undefined;
attribute: Attribute | undefined;
};
export declare function isAttributeType(attribute: OakAbsAttrDef): OakAbsDerivedAttrDef;
export declare function getLinkUrl(attribute: OakAbsAttrDef, props: Record<string, string>): string;
export declare function getPath(attribute: OakAbsAttrDef): string;
export declare function getLabel<ED extends EntityDict & BaseEntityDict>(attribute: OakAbsAttrDef, entity: keyof ED, attr: string, t: (k: string, params?: object) => string): string;

3
lib/utils/usefulFn.js
View File

@ -1,6 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.analyzeAttrMobileForCard = exports.translateAttributes = exports.analyzeDataUpsertTransformer = exports.makeDataTransformer = exports.getType = exports.getFixed = exports.getAlign = exports.getValue = exports.getWidth = exports.getLabel = exports.getPath = exports.getLinkUrl = exports.resolvePath = exports.getAttributes = void 0;
exports.analyzeAttrMobileForCard = exports.translateAttributes = exports.analyzeDataUpsertTransformer = exports.makeDataTransformer = exports.getType = exports.getFixed = exports.getAlign = exports.getValue = exports.getWidth = exports.getLabel = exports.getPath = exports.getLinkUrl = exports.isAttributeType = exports.resolvePath = exports.getAttributes = void 0;
const tslib_1 = require("tslib");
const assert_1 = require("oak-domain/lib/utils/assert");
const relation_1 = require("oak-domain/lib/store/relation");
@ -88,6 +88,7 @@ exports.resolvePath = resolvePath;
function isAttributeType(attribute) {
return attribute;
}
exports.isAttributeType = isAttributeType;
function getLinkUrl(attribute, props) {
if (typeof attribute === 'string') {
return '';

20
src/components/list/index.ts
View File

@ -5,7 +5,7 @@ import { TableProps } from 'antd';
import { RowWithActions, ReactComponentProps } from '../../types/Page';
export default OakComponent({
isList: false,
isList: true,
properties: {
entity: '' as keyof ED,
extraActions: [] as
@ -16,9 +16,7 @@ export default OakComponent({
attributes: [] as OakAbsAttrDef[],
data: [] as RowWithActions<ED, keyof ED>[],
loading: false,
tablePagination: undefined as
| TableProps<RowWithActions<ED, keyof ED>>['pagination']
| undefined,
tablePagination: undefined as React.ReactNode | undefined,
rowSelection: undefined as
| TableProps<RowWithActions<ED, keyof ED>>['rowSelection']
| undefined,
@ -28,12 +26,13 @@ export default OakComponent({
scroll: undefined as
| TableProps<RowWithActions<ED, keyof ED>>['scroll']
| undefined,
locale: undefined as
| TableProps<RowWithActions<ED, keyof ED>>['locale']
| undefined,
empty: undefined as React.ReactNode | undefined,
opWidth: undefined as number | undefined,
oakPath: undefined as string | undefined,
},
entity() {
return this.props.entity!;
},
formData({ props }) {
const { converter } = this.state;
const { data } = props;
@ -59,9 +58,7 @@ export default OakComponent({
// 因为部分i18json数据请求较慢，会导致converter，columnDef解析出错
const { attributes, entity, data } = this.props;
const schema = this.features.cache.getSchema();
// assert(!!data, 'data不能为空');
assert(!!entity, 'list属性entity不能为空');
// assert(attributes?.length, 'attributes不能为空');
const ttt = this.t.bind(this);
const converter = analyzeAttrMobileForCard(
schema,
@ -83,7 +80,6 @@ export default OakComponent({
},
methods: {
onActionMp(e: WechatMiniprogram.TouchEvent) {
const { onAction } = this.props;
const { action, cascadeAction } = e.detail;
const { row } = e.currentTarget.dataset;
this.triggerEvent('onAction', {
@ -115,13 +111,13 @@ export default OakComponent({
attributes: OakAbsAttrDef[];
data: RowWithActions<ED2, T2>[];
loading: boolean;
tablePagination?: TableProps<RowWithActions<ED2, T2>>['pagination'];
tablePagination?: React.ReactNode;
rowSelection?: TableProps<RowWithActions<ED2, T2>>['rowSelection'];
hideHeader?: boolean;
disableSerialNumber?: boolean; //是否禁用序号 默认启用
size?: 'large' | 'middle' | 'small';
scroll?: TableProps<RowWithActions<ED2, T2>>['scroll'];
locale?: TableProps<RowWithActions<ED2, T2>>['locale'];
empty?: React.ReactNode;
opWidth?: number;
}
>

282
src/components/list/web.pc.tsx
View File

@ -1,48 +1,66 @@
import React, { useState, useEffect, useContext } from 'react';
import { Table, TableProps } from 'antd';
import type { ColumnsType, ColumnType } from 'antd/es/table';
import { assert } from 'oak-domain/lib/utils/assert';
import { get } from 'oak-domain/lib/utils/lodash';
import React, { useState, useEffect, useContext } from "react";
import { Table, TableProps } from "antd";
import type { ColumnsType, ColumnType } from "antd/es/table";
import { assert } from "oak-domain/lib/utils/assert";
import { get } from "oak-domain/lib/utils/lodash";
import { StorageSchema } from 'oak-domain/lib/types/Storage';
import { OakAbsAttrDef, onActionFnDef, CascadeActionProps, OakAbsDerivedAttrDef, OakExtraActionProps, OakAbsAttrJudgeDef, ED } from '../../types/AbstractComponent';
import { getPath, getWidth, getValue, getLabel, resolvePath, getType, getAlign, getLinkUrl, getFixed } from '../../utils/usefulFn';
import { WebComponentProps, RowWithActions } from '../../types/Page';
import ActionBtn from '../actionBtn';
import TableCell from './renderCell';
import { TableContext } from '../listPro';
import Style from './web.module.less';
import { useFeatures } from '../../platforms/web';
import { StorageSchema } from "oak-domain/lib/types/Storage";
import {
OakAbsAttrDef,
onActionFnDef,
CascadeActionProps,
OakAbsDerivedAttrDef,
OakExtraActionProps,
OakAbsAttrJudgeDef,
ED,
} from "../../types/AbstractComponent";
import {
getPath,
getWidth,
getValue,
getLabel,
resolvePath,
getType,
getAlign,
getLinkUrl,
getFixed,
} from "../../utils/usefulFn";
import { WebComponentProps, RowWithActions } from "../../types/Page";
import ActionBtn from "../actionBtn";
import TableCell from "./renderCell";
import { TableContext } from "../listPro";
import Pagination from "../pagination";
import Styles from "./web.module.less";
export default function Render(
props: WebComponentProps<
ED,
keyof ED,
false,
true,
{
loading: boolean;
extraActions:
| OakExtraActionProps[]
| ((row: RowWithActions<ED, keyof ED>) => OakExtraActionProps[]);
| OakExtraActionProps[]
| ((
row: RowWithActions<ED, keyof ED>
) => OakExtraActionProps[]);
entity: string;
schema: StorageSchema<ED>;
attributes: OakAbsAttrDef[];
data: RowWithActions<ED, keyof ED>[];
disabledOp: boolean;
tablePagination?: TableProps<
RowWithActions<ED, keyof ED>
>['pagination'];
tablePagination?: React.ReactNode;
onAction?: onActionFnDef;
rowSelection?: TableProps<
RowWithActions<ED, keyof ED>
>['rowSelection'];
>["rowSelection"];
i18n: any;
hideHeader?: boolean;
disableSerialNumber?: boolean; //是否禁用序号 默认启用
judgeAttributes: OakAbsAttrJudgeDef[];
size?: 'large' | 'middle' | 'small';
scroll?: TableProps<RowWithActions<ED, keyof ED>>['scroll'];
locale?: TableProps<RowWithActions<ED, keyof ED>>['locale'];
size?: "large" | "middle" | "small";
scroll?: TableProps<RowWithActions<ED, keyof ED>>["scroll"];
empty?: React.ReactNode;
opWidth?: number;
oakPath?: string;
},
@ -68,14 +86,16 @@ export default function Render(
hideHeader,
disableSerialNumber,
judgeAttributes,
size = 'large',
size = "large",
scroll,
locale,
empty,
opWidth,
oakPath,
oakPagination,
oakFullpath
} = oakData;
const [tableColumns, setTableColumns] = useState([] as ColumnsType<any>);
const { tableAttributes, setSchema } = useContext(TableContext);
// 为了i18更新时能够重新渲染
const zhCNKeys =
i18n?.store?.data?.zh_CN && Object.keys(i18n.store.data.zh_CN).length;
@ -94,7 +114,7 @@ export default function Render(
}
const tableColumns: ColumnsType<any> = showAttributes?.map(
(ele) => {
if (ele.entity === 'notExist') {
if (ele.entity === "notExist") {
assert(
(ele.attribute as OakAbsDerivedAttrDef).width,
`非schema属性${ele.attr}需要自定义width`
@ -125,7 +145,7 @@ export default function Render(
fixed,
render: (v: string, row: any) => {
if (
typeof ele.attribute !== 'string' &&
typeof ele.attribute !== "string" &&
ele.attribute.render
) {
return ele.attribute.render(row);
@ -139,18 +159,18 @@ export default function Render(
t
);
const stateValue = get(row, ele.path);
let href = '';
if ([null, undefined, ''].includes(stateValue)) {
let href = "";
if ([null, undefined, ""].includes(stateValue)) {
return <></>;
}
const color = getColor(ele.attr, stateValue);
if (type === 'enum' && !color) {
if (type === "enum" && !color) {
console.warn(
color,
`${ele.entity}实体${ele.attr}颜色定义缺失`
);
}
if (type === 'link') {
if (type === "link") {
href = getLinkUrl(ele.attribute, {
oakId: row?.id,
});
@ -167,43 +187,36 @@ export default function Render(
};
if (width) {
Object.assign(column, { width });
} else {
// 没有宽度的设置ellipsis
Object.assign(column, {
ellipsis: {
showTitle: false,
},
});
}
return column;
}
);
if (!disableSerialNumber) {
if (!disableSerialNumber && oakPagination) {
// 存在分页配置 启用#序号
tableColumns.unshift({
fixed: 'left',
align: 'left',
title: '#',
key: '#',
fixed: "left",
align: "left",
title: "#",
key: "#",
width: 100,
render: (value, row) => {
return row['#'];
return row["#"];
},
});
}
if (!disabledOp && tableColumns) {
tableColumns.push({
fixed: 'right',
align: 'left',
title: '操作',
key: 'operation',
fixed: "right",
align: "left",
title: "操作",
key: "operation",
width: opWidth || 140,
render: (value: any, row: any) => {
const oakActions = row?.[
'#oakLegalActions'
"#oakLegalActions"
] as string[];
let extraActions2: OakExtraActionProps[];
if (typeof extraActions === 'function') {
if (typeof extraActions === "function") {
extraActions2 = extraActions(row);
} else {
extraActions2 = extraActions;
@ -214,7 +227,7 @@ export default function Render(
extraActions={extraActions2}
actions={oakActions}
cascadeActions={
row?.['#oakLegalCascadeActions']
row?.["#oakLegalCascadeActions"]
}
onAction={(
action: string,
@ -231,79 +244,102 @@ export default function Render(
setTableColumns(tableColumns);
}
}, [data, zhCNKeys, schema, tableAttributes]);
const features = useFeatures<{
runningTree: any;
// locales: Locales<any, any, any, any>;
}>();
const pagination = oakPath && features.runningTree.getPagination(oakPath);
return (
<Table
rowKey="id"
rowSelection={
rowSelection?.type && {
type: rowSelection?.type,
selectedRowKeys,
onChange: (selectedRowKeys, row, info) => {
rowSelection?.onChange &&
rowSelection?.onChange(selectedRowKeys, row, info);
},
}
}
size={size}
loading={loading}
// dataSource={data}
dataSource={
!disableSerialNumber
? data?.map((ele, index) => {
if (pagination) {
const total = pagination.total || 0;
const pageSize = pagination.pageSize || 20; //条数
const current = pagination.current || 1; //当前页
(ele as any)['#'] =
pageSize * (current - 1) + (index + 1);
}
return ele;
})
: data
}
columns={tableColumns}
pagination={false}
locale={locale}
scroll={
data?.length > 0
? Object.assign(
{},
showScroll && {
scrollToFirstRowOnChange: true,
x: 1200,
<>
<Table
rowKey="id"
rowSelection={
rowSelection?.type && {
type: rowSelection?.type,
selectedRowKeys,
onChange: (selectedRowKeys, row, info) => {
rowSelection?.onChange &&
rowSelection?.onChange(
selectedRowKeys,
row,
info
);
},
scroll
)
: undefined
}
onRow={(record) => {
return {
onClick: () => {
const index = selectedRowKeys.findIndex(
(ele) => ele === record.id
);
let keys = selectedRowKeys;
if (rowSelection?.type === 'checkbox') {
if (index !== -1) {
keys.splice(index, 1);
}
}
size={size}
loading={loading}
dataSource={
!disableSerialNumber && oakPagination
? data?.map((ele, index) => {
const total = oakPagination.total || 0;
const pageSize = oakPagination.pageSize || 20; //条数
const current = oakPagination.currentPage || 1; //当前页
(ele as any)["#"] =
pageSize * (current - 1) + (index + 1);
return ele;
})
: data
}
columns={tableColumns}
pagination={false}
locale={{ emptyText: empty }}
scroll={
data?.length > 0
? Object.assign(
{},
showScroll && {
scrollToFirstRowOnChange: true,
x: 1200,
},
scroll
)
: undefined
}
onRow={(record) => {
return {
onClick: () => {
const index = selectedRowKeys.findIndex(
(ele) => ele === record.id
);
let keys = selectedRowKeys;
if (rowSelection?.type === "checkbox") {
if (index !== -1) {
keys.splice(index, 1);
} else {
keys.push(record.id);
}
} else {
keys.push(record.id);
keys = [record.id];
}
} else {
keys = [record.id];
}
const row = data.filter((ele) => keys.includes(ele.id as React.Key));
rowSelection?.onChange &&
rowSelection?.onChange(keys, row, { type: 'all' });
},
};
}}
showHeader={!hideHeader}
></Table>
const row = data.filter((ele) =>
keys.includes(ele.id as React.Key)
);
rowSelection?.onChange &&
rowSelection?.onChange(keys, row, {
type: "all",
});
},
};
}}
showHeader={!hideHeader}
></Table>
{tablePagination ? (
tablePagination
) : (
<div
style={{
display: "flex",
flexDirection: "row-reverse",
alignItems: "center",
marginTop: 8,
marginBottom: 8,
}}
>
<Pagination
oakPath={oakFullpath}
entity={entity as string}
oakAutoUnmount={true}
showQuickJumper={true}
/>
</div>
)}
</>
);
}

36
src/components/listPro/index.tsx
View File

@ -17,9 +17,8 @@ import ButtonGroup from '../list/buttonGroup';
import Style from './index.module.less';
import { useWidth } from '../../platforms/web/responsive/useWidth';
import { useFeatures } from '../../platforms/web';
import { Locales } from '../../features/locales';
import Pagination from '../pagination';
import { assert } from 'oak-domain/lib/utils/assert';
type Props<ED2 extends ED, T extends keyof ED2> = {
title?: string | React.ReactNode;
extraContent?: React.ReactNode;
@ -40,7 +39,7 @@ type Props<ED2 extends ED, T extends keyof ED2> = {
disableSerialNumber?: boolean; //是否禁用序号 默认启用
size?: 'large' | 'middle' | 'small';
scroll?: TableProps<RowWithActions<ED2, T>>['scroll'];
locale?: TableProps<RowWithActions<ED2, T>>['locale'];
empty?: React.ReactNode;
opWidth?: number;
oakPath?: string;
};
@ -89,7 +88,7 @@ const ProList = <ED2 extends ED, T extends keyof ED2>(props: Props<ED2, T>) => {
extraContent,
size = 'large',
scroll,
locale,
empty,
opWidth,
oakPath,
} = props;
@ -99,9 +98,7 @@ const ProList = <ED2 extends ED, T extends keyof ED2>(props: Props<ED2, T>) => {
>([]);
const features = useFeatures<{
runningTree: any;
// locales: Locales<any, any, any, any>;
}>();
// const pagination = oakPath && features.runningTree.getPagination(oakPath);
const [schema, setSchema] = useState(undefined);
const width = useWidth();
const isMobile = width === 'xs';
@ -158,39 +155,16 @@ const ProList = <ED2 extends ED, T extends keyof ED2>(props: Props<ED2, T>) => {
disabledOp={disabledOp}
attributes={attributes}
scroll={scroll}
locale={locale}
empty={empty}
data={data}
loading={loading}
size={size}
// tablePagination={tablePagination}
tablePagination={tablePagination}
rowSelection={rowSelection}
disableSerialNumber={disableSerialNumber}
opWidth={opWidth}
oakPath={oakPath}
/>
{
tablePagination ? (
<div>
{tablePagination}
</div>
) : (
<div>
{
oakPath && (
<div style={{ display: 'flex', flexDirection: 'row-reverse', alignItems: 'center' }}>
<Pagination
oakPath={oakPath}
entity={entity as string}
oakAutoUnmount={true}
showQuickJumper={true}
/>
{/* <div>{`${features.locales.t('total number of rows')}：${pagination.total > 999 ? `${pagination.total} +` : pagination.total}`}</div> */}
</div>
)
}
</div>
)
}
</div>
</TableContext.Provider>
);

6
src/components/pagination/index.module.less
View File

@ -1,9 +1,3 @@
.default {
margin:8px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.pagination {
:global {

5
src/components/pagination/index.ts
View File

@ -25,9 +25,8 @@ export default OakComponent({
!prev.oakPagination &&
prev.oakPagination !== next.oakPagination
) {
const { total, pageSize, currentPage } = next.oakPagination || {};
if (total && (total >= pageSize * currentPage)) {
console.log(total);
const { total, pageSize, currentPage, more } = next.oakPagination || {};
if (total) {
this.setState({ newTotal: total });
}
}

69
src/components/pagination/web.tsx
View File

@ -1,22 +1,21 @@
import React, { useState } from 'react';
import { Pagination, PaginationProps } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import { WebComponentProps } from '../../types/Page';
import { ED } from '../../types/AbstractComponent';
import Style from './index.module.less';
import React, { useState } from "react";
import { Pagination, PaginationProps } from "antd";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import classNames from "classnames";
import { WebComponentProps } from "../../types/Page";
import { ED } from "../../types/AbstractComponent";
import Style from "./index.module.less";
export interface IPaginationProps {
style?: React.CSSProperties;
className?: string;
showQuickJumper?: boolean;
size?: 'default' | 'small';
size?: "default" | "small";
showSizeChanger?: boolean;
showTotal?: (total: number, range: [number, number]) => React.ReactNode;
newTotal: number;
}
export default function Render(
props: WebComponentProps<
ED,
@ -41,24 +40,24 @@ export default function Render(
} = props.data;
const { t, setPageSize, setCurrentPage, setTotal } = props.methods;
const { pageSize, total, currentPage, more } = oakPagination || {};
const itemRender: PaginationProps['itemRender'] = (
const itemRender: PaginationProps["itemRender"] = (
_,
type,
originalElement
) => {
if (type === 'prev') {
if (type === "prev") {
return (
<a>
<LeftOutlined />
</a>
);
}
if (type === 'next') {
if (type === "next") {
return (
<a
style={{
cursor: more ? 'pointer' : 'not-allowed',
color: more ? '#006cb7' : 'rgba(0, 0, 0, 0.25)',
cursor: more ? "pointer" : "not-allowed",
color: more ? "#006cb7" : "rgba(0, 0, 0, 0.25)",
}}
onClick={() => {
if (more && currentPage) {
@ -74,27 +73,27 @@ export default function Render(
return originalElement;
};
if (!oakPagination) {
return null;
}
return (
oakPagination && (
<div style={style} className={classNames(Style.default, className)}>
<Pagination
className={more ? Style.pagination : Style.paginationNoMore}
itemRender={itemRender}
pageSize={pageSize}
total={newTotal}
current={currentPage}
showQuickJumper={showQuickJumper}
showSizeChanger={showSizeChanger}
size={size}
showTotal={showTotal}
onShowSizeChange={(current: number, pageSize: number) => {
setPageSize(pageSize);
}}
onChange={(page: number, pageSize: number) => {
setCurrentPage(page);
}}
/>
</div>
)
<Pagination
className={more ? Style.pagination : Style.paginationNoMore}
itemRender={itemRender}
pageSize={pageSize}
total={newTotal}
current={currentPage}
showQuickJumper={showQuickJumper}
showSizeChanger={showSizeChanger}
size={size}
showTotal={showTotal}
onShowSizeChange={(current: number, pageSize: number) => {
setPageSize(pageSize);
}}
onChange={(page: number, pageSize: number) => {
setCurrentPage(page);
}}
/>
);
}

2
src/utils/usefulFn.ts
View File

@ -109,7 +109,7 @@ export function resolvePath<ED extends EntityDict & BaseEntityDict>(
}
// 强制类型
function isAttributeType(attribute: OakAbsAttrDef): OakAbsDerivedAttrDef {
export function isAttributeType(attribute: OakAbsAttrDef): OakAbsDerivedAttrDef {
return attribute as OakAbsDerivedAttrDef;
}