cgreact-core/types/cgreact-type-table.ts

未发表！CGReact前端Web研发框架核心包

/** TableState数据结构*/
import {LayoutState} from "./cgreact-type-layout";
import {ModalState} from "./cgreact-type-modal";

type TableKey = string; //table表头的键名，允许用户在自定义类中复写
type CGReactTableCoreState<KEY extends string = TableKey> = { //table的样式风格配置信息
    tableEven?: boolean,// 是否开启隔行样式
    tableSkin?: "grid" | "line" | "row" | "nob", //表格的边框风格，行边框风格|列边框风格|无边框风格
    tableSize?: "normal" | "small" | "large", //表格的样式大小
    headerFixed?: boolean, //是否固定表头，默认"top"，锁定表头不滚动
    tableCheck?: boolean,//是否展示复选框按钮，默认false，不展示
    tableSortRange?: "all" | "page", //table排序的数据集范围，默认排序当前页面的数据
    tableFilterRange?: "all" | "page",// table过滤的数据集范围，默认当前页面的数据
};
type CGReactTableToolButton = {
    hint?: string, //按钮的提示，鼠标悬停时展示
    icon?: string, // 允许自定义按钮图标
    onClick?: () => void //按钮事件点击回调
};
type CGReactTableToolbarState = {//表工具栏配置
    addButton?: boolean | CGReactTableToolButton, //增加按钮,不配置默认false不显示
    editButton?: boolean | CGReactTableToolButton, //编辑按钮,不配置默认false不显示
    deleteButton?: boolean | CGReactTableToolButton,//删除按钮,不配置默认false不显示
    sortButton?: boolean | CGReactTableToolButton, //排序按钮，不配置默认true显示
    filterButton?: boolean | CGReactTableToolButton, // 过滤按钮，不配置默认true显示
    printButton?: boolean | CGReactTableToolButton, //打印按钮，不配置默认true显示
    exportButton?: boolean | CGReactTableToolButton, //导出按钮，不配置默认true显示
    infoButton?: boolean | CGReactTableToolButton,//信息按钮,不配置默认false不显示
    favorButton?: boolean | CGReactTableToolButton,//收藏按钮,不配置默认false不显示
}
type CGReactTableHeaderState<KEY extends string = TableKey> = { //table的表头数据定义
    [key in KEY]?: string | CGReactTableColumnState<KEY>  //直接配置文字，或者表列配置项
}
type CGReactTableColumnState<KEY extends string = TableKey> = { // table表的表头列配置
    label: string,// 表头文字，默认为字段1，字段2，字段3
    filter?: "show" | "hide" | string,// 列过滤，可以配置"show"或者"20<>40"这样的字符串
    sort?: "asc" | "desc" | true | undefined,//是否作为组合排序的排序字段
    width?: number,//配置表列的宽度，默认90px
    expand?: true | false | undefined,//是否处于展开的状态，默认true展开
    rowexp?: true | false | undefined, //是否作为行的展开列，渲染tablebody时，此列会渲染航展开图标
    fixed?: "left" | "right" | false,//冻结表列，支持左冻结和右冻结，注意在tableHeader中配置的键位顺序，可能由于左右冻结有所调整
    child?: CGReactTableHeaderState<KEY>, //表列的子列，会渲染为多层表头的情况
}
type CGReactTableRowState<KEY extends string = TableKey> = { //table的表行数据定义
    rowId: string, // 表一行数据的键名，一般配置为行数据的id
    checked?: boolean, //是否处于勾选状态，默认false
    child?: Array<CGReactTableRowState<KEY>>,// 子记录
    expand?: boolean,//当前的展开状态，true展开，false折叠，undefined则不可展开
    values: {
        [key in KEY]: string | number    // 一行的数据，键名与TableHeader中的key对应
    }
}
type CGReactTablePageState = {
    tablePageIndex?: number, // 页的索引，当前第几页，从1开始编号，默认是1
    tablePageVolume?: number, // 每页容量，每页多少条记录，默认值是5
}
type CGReactTableState<KEY extends string = TableKey> = { //Table的配置
    /** 表样式配置信息*/
    tableConfig?: CGReactTableCoreState, //表的样式配置信息
    /** 表工具栏配置信息*/
    tableToolbar?: CGReactTableToolbarState | true,//表的工具栏配置，不配置默认false，不显示工具栏
    /** 表头数据信息*/
    tableHead?: CGReactTableHeaderState<KEY>, // 表头配置信息
    /** 表体数据信息,可以直接配置ajax的函数（返回总的记录数）*/
    tableBody?: CGReactTableRowState<KEY>[] | ((page: TablePage, setRecordCount: (count: number) => void) => Promise<CGReactTableRowState<KEY>[]> | CGReactTableRowState<KEY>[]), // 表行内容,可以直接配置数据，也可配函数启动ajax
    /** 表分页数据信息*/
    tablePage?: CGReactTablePageState | boolean, //表分页配置信息，如果不需要分页配置false,另外需要注意this.state的数据结构与此不尽相同，会扩充一些自动计算的部分，CGReactTablePage定义
}//Table的用户State配置
export type HeaderState<KEY extends string = TableKey> = CGReactTableHeaderState<KEY> ;//表头
export type ColumnState<KEY extends string = TableKey> = CGReactTableColumnState<KEY> ;//表头
export type RowState<KEY extends string = TableKey> = CGReactTableRowState<KEY> ;//表头
export interface TableState<KEY extends string = TableKey> extends CGReactTableState<KEY> {}

/** TableProps在CGReactCompProp的基础上以table配置作为data的数据类型*/
type CGReactTableProp<KEY extends string = TableKey> = {
    data?: CGReactTableState<KEY> //使用Table数据类型
    modal?: ModalState | boolean,  //组件绑定的对话框数据结构
};// Table参数类型
export interface TableProps extends CGReactTableProp<TableKey>, LayoutState {}

/** 回调接口数据类型，可能在state数据类型中交叉使用*/
export interface TableConfig extends CGReactTableCoreState
{
    // 在CGReactTableConfig的基础上补充一个headerInfo,他是表头数的后序遍历树信息结果，包含深度广度信息
    headerInfo: TableHeaderInfo
}// Table表格的基础配置
export interface TableToolbar
{
    addButton: CGReactTableToolButton, //增加按钮
    editButton: CGReactTableToolButton, //编辑按钮
    deleteButton: CGReactTableToolButton,//删除按钮
    sortButton: CGReactTableToolButton, // 排序按钮
    filterButton: CGReactTableToolButton, // 过滤按钮
    printButton: CGReactTableToolButton, //打印按钮
    exportButton: CGReactTableToolButton, //导出按钮
    infoButton: CGReactTableToolButton,//信息按钮
    favorButton: CGReactTableToolButton,//收藏按钮
}// Table表格工具栏配置
export interface TableColumn<KEY extends string = TableKey>
{
    key: KEY, //类键名
    skey: string, //生成的样式名
    leaf: boolean, //是否叶子节点
    rowexp: boolean,//行展开列
    minWidth: number,//最小宽度
    rowspan: number, //行跨距，用于多级渲染
    colspan: number, //列跨距，用于多级渲染
    parent: TableColumn,//父列配置
    expand?: true | false | undefined,//是否处于展开的状态，默认true展开
    filter: string | undefined,// 列过滤，可以配置"20>40"这样的字符串
    label: string,// 表头文字，默认为字段1，字段2，字段3
    sort?: "asc" | "desc" | true | undefined,//是否作为组合排序的排序字段
    width?: number,//配置表列的宽度，默认90px
}// Table表头配置返回结果
export interface TableHeaderConfig
{
    headerInfo: TableHeaderInfo, //表信息
    mainHeaderConfig: TableHeader<TableKey>, //主表头信息
    leftHeaderConfig: TableHeader<TableKey>, //左表头信息
    rightHeaderConfig: TableHeader<TableKey>,//右表头信息
    mainLeafHeaderConfig: TableHeaderLeaf<TableKey>, //主表头叶子节点
    leftLeafHeaderConfig: TableHeaderLeaf<TableKey>, //左表头叶子节点
    rightLeafHeaderConfig: TableHeaderLeaf<TableKey>, //右表头叶子节点
}// Table表格表头统计信息
export interface TableHeaderInfo
{
    treeDeep: number, //表头树的深度
    treeSpanMain: number, //表头树的广度（覆盖多少列）
    treeSpanLeft: number, //表头树的广度（覆盖多少列）
    treeSpanRight: number, //表头树的广度（覆盖多少列）
    treeWidthLeft: number,// 非叶子节点的最大宽度（所有叶子节点宽度之和）
    treeWidthRight: number,
    treeWidthMain: number,
    fixLeft: boolean, // 表头树左侧列冻结
    fixRight: boolean //表头树右侧列冻结
}//table表头二维数组
export interface TableHeader<KEY extends string = TableKey> extends Array<TableColumn<KEY>[]> {}//table表头叶子节点一维数组
export interface TableHeaderLeaf<KEY extends string = TableKey> extends Array<TableColumn<KEY>> {}//表头排序菜单
export interface TableSortMenu
{
    showMenu: boolean, //是否展示排序菜单
    changed: boolean, //排序配置是否发生了变化
    sortRange: "all" | "page",
    sortConfig: Array<SortMenuLine>
}// 排序行
export interface SortMenuLine
{
    key: TableKey, //排序键
    name: string, //展示的字段名
    sort: "asc" | "desc" | true | undefined  //排序方式
}// 表格排序菜单
export interface TableFilterMenu
{
    showMenu: boolean,//是否显示筛选菜单
    changed: boolean, //是否发生变化
    filterRange: "all" | "page",
    filterConfig: Array<FilterMenuLine>
}//表头筛选菜单
export interface FilterMenuLine
{
    key: TableKey, //筛选列键
    name: string,//筛选列名称
    show: boolean,//是否展示
    checked: boolean, //是否勾选
    expand: true | false | undefined,//是否展开
    level: number,//表头树层级
    leaf: boolean,//是否是叶子节点
    noline: boolean[],//左侧补间竖线
    operate: "show" | ">" | ">=" | "<" | "<=" | "=" | "<>",
    value: string,//过滤的值
    valueS: string, //介于的小值
    config: CGReactTableColumnState
}//表体数据
export interface TableBody<KEY extends string = TableKey> extends Array<TableRow<KEY>> {}//
// table表体行
export interface TableRow<KEY extends string = TableKey> extends CGReactTableRowState<KEY>
{
    checked: boolean, //是否处于勾选状态，默认false
    expand: boolean | undefined,//当前的展开状态，true展开，false折叠，undefined则不可展开
    level: number,//当前行所处的行展开级别，默认是0
    noline: boolean[], //当前节点左侧是否需要补间竖线构成的数组
    child?: undefined //删除child的配置
}// table表分页渲染数据结构
export interface TablePage<KEY extends string = TableKey> extends CGReactTablePageState
{
    tablePageCount: number,//一共分多少页
    pageRecordIndex: number,//当前页面第一条记录在tableBody数组中的索引号
    tableRecordCount: number, // 总计多少条需要展示的记录
    tableSort: {
        [key in KEY]: "asc" | "desc"
    }, //表排序配置
    tableFilter:  {
        [key in KEY]: string
    } // 表过滤配置
}