cgreact-layui

/** TableState数据结构*/ 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配置 interface TableState<KEY extends string = TableKey> extends CGReactTableState<KEY> { } /** TableProps在CGReactCompProp的基础上以table配置作为data的数据类型*/ type CGReactTableProp<KEY extends string = TableKey> = { data?: CGReactTableState<KEY> //使用Table数据类型 modal?: CGReactModalState | boolean, //组件绑定的对话框数据结构 };// Table参数类型 type CGReactTableLayout = { layoutName?: string, //布局的名称属性，渲染为item-name layoutDebug?: "debug-off" | "only-layout" | "with-content", //用于调试时显示布局的框子默认false不显示 layoutWidth?: number | CGReactLength | CGReactGrid | MediaResponse,//布局宽度，水平方向支持删格系统，只有宽度才需要响应式布局 layoutHeight?: number | CGReactLength | CGReactGrid,//布局长度，垂直方向支持删格系统 align?: CGReactAlign, //布局相对于父布局的对其方式，其优先级高于父布局的gravity配置 };//表格参数配置 interface TableProps extends CGReactTableProp<TableKey>, CGReactTableLayout { } /** 回调接口数据类型，可能在state数据类型中交叉使用*/ interface TableConfig extends CGReactTableCoreState { // 在CGReactTableConfig的基础上补充一个headerInfo,他是表头数的后序遍历树信息结果，包含深度广度信息 headerInfo: TableHeaderInfo }// Table表格的基础配置 interface TableToolbar { addButton: CGReactTableToolButton, //增加按钮 editButton: CGReactTableToolButton, //编辑按钮 deleteButton: CGReactTableToolButton,//删除按钮 sortButton: CGReactTableToolButton, // 排序按钮 filterButton: CGReactTableToolButton, // 过滤按钮 printButton: CGReactTableToolButton, //打印按钮 exportButton: CGReactTableToolButton, //导出按钮 infoButton: CGReactTableToolButton,//信息按钮 favorButton: CGReactTableToolButton,//收藏按钮 }// Table表格工具栏配置 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表头配置返回结果 interface TableHeaderConfig { headerInfo: TableHeaderInfo, //表信息 mainHeaderConfig: TableHeader<TableKey>, //主表头信息 leftHeaderConfig: TableHeader<TableKey>, //左表头信息 rightHeaderConfig: TableHeader<TableKey>,//右表头信息 mainLeafHeaderConfig: TableHeaderLeaf<TableKey>, //主表头叶子节点 leftLeafHeaderConfig: TableHeaderLeaf<TableKey>, //左表头叶子节点 rightLeafHeaderConfig: TableHeaderLeaf<TableKey>, //右表头叶子节点 }// // Table表格表头统计信息 interface TableHeaderInfo { treeDeep: number, //表头树的深度 treeSpanMain: number, //表头树的广度（覆盖多少列） treeSpanLeft: number, //表头树的广度（覆盖多少列） treeSpanRight: number, //表头树的广度（覆盖多少列） treeWidthLeft: number,// 非叶子节点的最大宽度（所有叶子节点宽度之和） treeWidthRight: number, treeWidthMain: number, fixLeft: boolean, // 表头树左侧列冻结 fixRight: boolean //表头树右侧列冻结 }// //table表头二维数组 interface TableHeader<KEY extends string = TableKey> extends Array<TableColumn<KEY>[]> { }// //table表头叶子节点一维数组 interface TableHeaderLeaf<KEY extends string = TableKey> extends Array<TableColumn<KEY>> { } //表头排序菜单 interface TableSortMenu { showMenu: boolean, //是否展示排序菜单 changed: boolean, //排序配置是否发生了变化 sortRange: "all" | "page", sortConfig: Array<SortMenuLine> }// 排序行 interface SortMenuLine { key: TableKey, //排序键 name: string, //展示的字段名 sort: "asc" | "desc" | true | undefined //排序方式 } // 表格排序菜单 interface TableFilterMenu { showMenu: boolean,//是否显示筛选菜单 changed: boolean, //是否发生变化 filterRange: "all" | "page", filterConfig: Array<FilterMenuLine> }//表头筛选菜单 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 } interface TableBody<KEY extends string = TableKey> extends Array<TableRow<KEY>> { }// table表体数据 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表分页渲染数据结构 type TableSortConfig<KEY extends string = TableKey> = { [key in KEY]: "asc" | "desc" }//排序字段列表 type TableFilterConfig<KEY extends string = TableKey> = { [key in KEY]: string }//筛选字段 interface TablePage<KEY extends string = TableKey> extends CGReactTablePageState { tablePageCount: number,//一共分多少页 pageRecordIndex: number,//当前页面第一条记录在tableBody数组中的索引号 tableRecordCount: number, // 总计多少条需要展示的记录 tableSort: TableSortConfig<KEY>, //表排序配置 tableFilter: TableFilterConfig<KEY> // 表过滤配置 }