UNPKG

amis

Version:

一种MIS页面生成工具

334 lines (333 loc) 10.7 kB
import React from 'react'; import { RendererProps, ActionObject, IScopedContext, ICRUDStore } from 'amis-core'; import { SpinnerExtraProps } from 'amis-ui'; import { BaseSchema, SchemaApi, SchemaExpression, SchemaName, SchemaObject, SchemaTokenizeableString } from '../Schema'; import { CardsSchema } from './Cards'; import { ListSchema } from './List'; import { TableSchema2 } from './Table2'; import { SchemaCollection } from '../Schema'; import type { Table2RendererEvent } from './Table2'; import type { CardsRendererEvent } from './Cards'; export type CRUDRendererEvent = Table2RendererEvent | CardsRendererEvent; export interface CRUD2CommonSchema extends BaseSchema, SpinnerExtraProps { /** * 指定为 CRUD2 渲染器。 */ type: 'crud2'; /** * 指定内容区的展示模式。 */ mode?: 'table' | 'grid' | 'cards' | /* grid 的别名*/ 'list' | 'table2'; /** * 初始化数据 API */ api?: SchemaApi; /** * 也可以直接从环境变量中读取,但是不太推荐。 */ source?: SchemaTokenizeableString; /** * 静默拉取 */ silentPolling?: boolean; /** * 设置自动刷新时间 */ interval?: number; stopAutoRefreshWhen?: SchemaExpression; /** * 数据展示模式 无限加载 or 分页 */ loadType?: 'more' | 'pagination'; /** * 无限加载时,根据此项设置其每页加载数量,可以不限制 */ perPage?: number; /** * 是否为前端单次加载模式,可以用来实现前端分页。 */ loadDataOnce?: boolean; /** * 是否可以选择数据,外部事件动作 */ selectable?: boolean; /** * 是否可以多选数据,仅当selectable为 true 时生效 */ multiple?: boolean; /** * 是否展示已选数据区域,仅当selectable为 true 时生效 */ showSelection?: boolean; /** * 快速编辑后用来批量保存的 API */ quickSaveApi?: SchemaApi; /** * 快速编辑配置成及时保存时使用的 API */ quickSaveItemApi?: SchemaApi; /** * 保存排序的 api */ saveOrderApi?: SchemaApi; /** * 是否将过滤条件的参数同步到地址栏,默认为true * @default true */ syncLocation?: boolean; /** * 设置分页页码字段名。 * @default page */ pageField?: string; /** * 设置分页一页显示的多少条数据的字段名。 * @default perPage */ perPageField?: string; name?: SchemaName; /** * 是否隐藏快速编辑的按钮。 */ hideQuickSaveBtn?: boolean; /** * 是否自动跳顶部,当切分页的时候。 */ autoJumpToTopOnPagerChange?: boolean; /** * 顶部区域 */ headerToolbar?: SchemaCollection; /** * 顶部区域CSS类名 */ headerToolbarClassName?: string; /** * 底部区域 */ footerToolbar?: SchemaCollection; /** * 底部区域CSS类名 */ footerToolbarClassName?: string; /** * 是否将接口返回的内容自动同步到地址栏,前提是开启了同步地址栏。 */ syncResponse2Query?: boolean; /** * 翻页时是否保留用户已选的数据 */ keepItemSelectionOnPageChange?: boolean; /** * 内容区域占满屏幕剩余空间 */ autoFillHeight?: boolean; /** 行标识符,默认为id */ primaryField?: string; /** * 是否开启Query信息转换,开启后将会对url中的Query进行转换,默认开启,默认仅转化布尔值 */ parsePrimitiveQuery?: { enable: boolean; types?: ('boolean' | 'number')[]; } | boolean; /** * 下拉刷新配置 */ pullRefresh?: { /** * 是否禁用下拉刷新 */ disabled?: boolean; /** * 是否显示loading图标 * @default true */ showIcon?: boolean; /** * 是否显示文本 * @default true */ showText?: boolean; /** * 指定图标样式 * @default 'loading-outline' */ iconType?: string; /** * 图标和文字颜色 * @default '#777777' */ color?: string; /** * 各状态文字说明 */ contentText?: { /** 下拉刷新的默认文字 */ normalText?: string; /** 下拉过程中的文字 */ pullingText?: string; /** 释放立即刷新的文字 */ loosingText?: string; /** 加载中的文字 */ loadingText?: string; /** 加载成功的文字 */ successText?: string; /** 全部加载完成的文字 */ completedText?: string; }; /** * 新数据追加的位置 * @default 'bottom' */ dataAppendTo?: 'top' | 'bottom'; /** * 加载状态的最短显示时间(毫秒) * @default 0 */ minLoadingTime?: number; /** * 手势方向 * @default 'up' */ gestureDirection?: 'up' | 'down'; }; } export type CRUD2CardsSchema = CRUD2CommonSchema & { mode: 'cards'; } & Omit<CardsSchema, 'type'>; export type CRUD2ListSchema = CRUD2CommonSchema & { mode: 'list'; } & Omit<ListSchema, 'type'>; export type CRUD2TableSchema = CRUD2CommonSchema & { mode?: 'table2'; } & Omit<TableSchema2, 'type'>; export type CRUD2Schema = CRUD2CardsSchema | CRUD2ListSchema | CRUD2TableSchema; export interface CRUD2Props extends RendererProps, Omit<CRUD2CommonSchema, 'type' | 'className'>, SpinnerExtraProps { store: ICRUDStore; pickerMode?: boolean; } export default class CRUD2 extends React.Component<CRUD2Props, any> { static propsList: Array<keyof CRUD2Props>; static defaultProps: { toolbarInline: boolean; syncLocation: boolean; hideQuickSaveBtn: boolean; autoJumpToTopOnPagerChange: boolean; silentPolling: boolean; autoFillHeight: boolean; showSelection: boolean; primaryField: string; parsePrimitiveQuery: boolean; pullRefresh: { disabled: boolean; showIcon: boolean; showText: boolean; iconType: string; color: string; dataAppendTo: string; gestureDirection: string; minLoadingTime: number; contentText: { normalText: string; pullingText: string; loosingText: string; loadingText: string; successText: string; completedText: string; }; }; }; control: any; lastQuery: any; lastData: any; timer: ReturnType<typeof setTimeout>; mounted: boolean; stopingAutoRefresh: boolean; constructor(props: CRUD2Props); componentDidMount(): void; componentDidUpdate(prevProps: CRUD2Props): void; componentWillUnmount(): void; getPaginationPerPage(): number; getParseQueryOptions(props: CRUD2Props): { parsePrimitive: boolean; primitiveTypes: ("number" | "boolean")[]; }; controlRef(control: any): void; initQuery(values: object): void; /** * 加载更多动作处理器 */ handleLoadMore(): void; /** * 发起一次新的查询,查询条件不同,需要从第一页数据加载 */ handleSearch(data: { query?: Record<string, any>; resetQuery?: boolean; replaceQuery?: boolean; loadMore?: boolean; /** 是否重置当页码到首页 */ resetPage?: boolean; }): void; handleStopAutoRefresh(): void; handleStartAutoRefresh(): void; reloadTarget(target: string, data: any): void; closeTarget(target: string): void; updateQuery(newQuery?: any): void; /** * 更新列表数据 */ getData( /** 静默更新,不显示加载状态 */ silent?: boolean, /** 清空已选择数据 */ clearSelection?: boolean, /** 强制重新加载 */ forceReload?: boolean, /** 加载更多数据,默认模式取props中的配置,只有事件动作需要直接触发 */ loadMore?: boolean): Promise<any>; handleChangePage(page: number, perPage?: number): void; handleSave(rows: Array<object> | object, diff: Array<object> | object, indexes: Array<string>, unModifiedItems?: Array<any>, rowsOrigin?: Array<object> | object, options?: { resetOnFailed?: boolean; reload?: string; }): void; handleSaveOrder(moved: Array<object>, rows: Array<object>): void; handleSelect(items: Array<any>, unSelectedItems: Array<any>): void; /** * 更新Query筛选触发 */ handleQuerySearch(values: object, forceReload?: boolean): Promise<any>; reload(subpath?: string, query?: any): Promise<any>; receive(values: object): Promise<any>; doAction(action: ActionObject, data: object, throwErrors?: boolean): any; handleAction(e: React.UIEvent<any> | undefined, action: ActionObject, ctx: object, throwErrors?: boolean, delegate?: IScopedContext): any; dispatchEvent(e: React.MouseEvent<any> | string, data: any, renderer?: React.Component<RendererProps>, // for didmount scoped?: IScopedContext): Promise<import("amis-core").RendererEvent<any, any>>; unSelectItem(item: any, index: number): void; clearSelection(): void; toggleAllColumns(value: boolean): void; toggleToggle(index: number): void; handlePullRefresh(): Promise<void>; renderChild(region: string, schema: any, props?: object): JSX.Element; renderToolbar(region: string, toolbar?: SchemaCollection): JSX.Element[] | null; renderFilter(filterSchema: SchemaObject[] | SchemaObject): JSX.Element[] | null; renderSelection(): React.ReactNode; transformTable2cards(): { columnsCount: number; type: string; card: any; } | null; transMobileHeaderToolbar(toolbar: any, fixedHeader: () => void): void; render(): React.JSX.Element; } export declare class CRUD2Renderer extends CRUD2 { static contextType: React.Context<IScopedContext>; constructor(props: CRUD2Props, context: IScopedContext); componentWillUnmount(): void; reload(subpath?: string, query?: any, ctx?: any): Promise<any>; receive(values: any, subPath?: string): Promise<any>; reloadTarget(target: string, data: any): void; closeTarget(target: string): void; }