@dt-frames/ui 2.0.24 → 4.0.1

package/dist/es/components/table/src/types/table.ts

@@ -0,0 +1,668 @@
+import type { DictType, Recordable } from '@dt-frames/core'
+import type { CheckboxValueType, RowEventHandler, TagProps } from 'element-plus'
+import type { Component, CSSProperties, Ref, VNode } from 'vue'
+import type { ButtonTypes } from '../../../form'
+import type { PaginationType } from './pagination'
+import type {
+	ExcelExtraDataType,
+	SourceDownloadType,
+	TableChangeParams
+} from '../../../../types/source.type'
+
+type KeyType = string | number
+
+type Data = {
+	[key: KeyType]: any
+	children?: Array<any>
+}
+
+type RowCommonParams = {
+	rowData: any
+	rowIndex: number
+}
+
+type CellFormat = {
+	/**
+	 * 字典转换
+	 */
+	dict?: DictType
+	/**
+	 * 结构转换
+	 */
+	struc?: string
+	/**
+	 * 数字转换
+	 */
+	number?: string
+	/**
+	 * 时间转换
+	 */
+	date?: string
+	/**
+	 * 百分比转换
+	 */
+	percent?: string
+	/**
+	 * 标签转换
+	 */
+	tag?: (value: Recordable) => TagProps
+	/**
+	 * 链接转换
+	 */
+	link?: (val: Recordable) => void
+	text?: any
+}
+
+type ColumnType = {
+	/**
+	 * 表格单元格内容对齐方式
+	 * @default left
+	 */
+	align?: 'left' | 'center' | 'right' | null | ''
+	/**
+	 * 列的类名
+	 */
+	class?: string
+	/**
+	 * 列标识
+	 */
+	flag?: 'INDEX' | 'DEFAULT' | 'CHECKBOX' | 'RADIO' | 'ACTION'
+	/**
+	 * 唯一标志
+	 */
+	key?: KeyType
+	/**
+	 * data 的唯一标志符
+	 */
+	dataKey?: KeyType
+	/**
+	 * 固定列位置
+	 * @default false
+	 */
+	fixed?: boolean | 'left' | 'right' | null
+	/**
+	 * CSS 属性 flex grow, 仅当不是固定表时才生效
+	 * @default 0
+	 */
+	flexGrow?: number
+	/**
+	 * CSS 属性 flex shrink, 仅当不是固定表时才生效
+	 * @default 1
+	 */
+	flexShrink?: number
+	/**
+	 * 自定义 header 头部类名
+	 */
+	headerClass?: string
+	/**
+	 * 此列是否不可见
+	 */
+	hidden?: boolean
+	/**
+	 * 自定义列单元格的类名，将会与 gird 单元格合并
+	 */
+	style?: CSSProperties
+	/**
+	 * 设置列是否可排序
+	 */
+	sortable?: boolean
+	/**
+	 * Header 头部单元格中的默认文本
+	 */
+	title?: string
+	/**
+	 * 是否支持拖拽改变列宽
+	 * @default true
+	 */
+	resizable?: boolean
+	/**
+	 * 列的最大宽度
+	 */
+	maxWidth?: number
+	/**
+	 * 列的最小宽度
+	 */
+	minWidth?: number
+	/**
+	 * 列宽度
+	 * @default 100
+	 */
+	width?: number
+	/**
+	 * 过滤器转换
+	 * 例如：字典 | 时间 | structure | 数字 | 百分比 | 链接 | 标签
+	 */
+	format?: CellFormat
+	/**
+	 * 自定义单元格渲染器
+	 */
+	cellRenderer?:
+		| Component
+		| ((props: {
+				cellData: any
+				column: ColumnType
+				columns: ColumnType[]
+				columnIndex: number
+				rowData: any
+				rowIndex: number
+		  }) => VNode)
+	/**
+	 * 自定义头部渲染器
+	 */
+	headerCellRenderer?:
+		| Component
+		| ((props: {
+				column: ColumnType
+				columns: ColumnType[]
+				columnIndex: number
+				headerIndex: number
+		  }) => VNode)
+}
+
+type DataGetterParams = {
+	columns: ColumnType[]
+	column: ColumnType
+	columnIndex: number
+} & RowCommonParams
+
+type DataGetter = (params: DataGetterParams) => any
+
+type SortOrder = 'asc' | 'desc'
+
+type SortBy = { key: KeyType; order: SortOrder }
+type SortState = Record<KeyType, SortOrder>
+
+type TableRowAction = {
+	label?: string
+	/**
+	 * 操作栏宽度
+	 */
+	width?: number | string
+	/**
+	 * 图标是否展开
+	 */
+	expand?: boolean
+	/**
+	 * 展开操作栏的数量
+	 */
+	expandNum?: number
+	/**
+	 * 操作栏固定位置
+	 */
+	fixed?: 'left' | 'right' | 'auto'
+	/**
+	 * 按钮设置
+	 */
+	btns?: ButtonTypes[]
+}
+
+type DownloadType = 'current' | 'select' | 'all'
+type TableSetting = {
+	/**
+	 * 是否显示搜索
+	 */
+	search?: boolean
+	/**
+	 * 表格下载
+	 */
+	download?: DownloadType[]
+	/**
+	 * 是否显示列控制
+	 */
+	setting?: boolean
+	/**
+	 * 全屏按钮
+	 */
+	fullscreen?: boolean
+}
+
+type Source = {
+	/**
+	 * 权限前缀
+	 */
+	authPrefix?: string
+	/**
+	 * 分页改变
+	 */
+	onTableChange?: (params: TableChangeParams) => Promise<any>
+	/**
+	 * 打开新增弹框
+	 */
+	onAdd?: () => void
+	/**
+	 * 打开编辑弹框
+	 */
+	onEdit?: (row: Recordable) => void
+	/**
+	 * 单个条目删除
+	 */
+	onDelete?: (row: Recordable) => Promise<any>
+	/**
+	 * 批量删除
+	 */
+	onDeletes?: (ids: RowKey[], type?: 'single' | 'multi') => void
+	/**
+	 * 保存
+	 * @param opt
+	 * 		headerData 额外的表头数据
+	 * 		footerData 尾部数据
+	 */
+	onDownload?: (excelData: SourceDownloadType, opt?: ExcelExtraDataType) => void
+	/**
+	 * 根据id查找数据
+	 */
+	onQueryById?: (id: RowKey) => Promise<any>
+
+	/**
+	 * 是否展示form查询条件
+	 */
+	setShowSearch?: (show: boolean) => void
+	/**
+	 * 注册实例
+	 */
+	registerInstance?: (instance: TableInsType & { rowKey?: RowKey }, type: 'table') => void
+}
+
+type TableType = Source & {
+	/**
+	 * 权限前缀
+	 */
+	authPrefix?: string
+	/**
+	 * 默认是否展示搜索条件
+	 */
+	defaultShowSearch?: boolean
+	/**
+	 * 单击一行任意位置都可以选中行
+	 * @default false
+	 */
+	clickToSelectRow?: boolean
+	/**
+	 * 分页数据改变是否清空选中的数据
+	 * @default false
+	 */
+	clearSelectOnPageChange?: boolean
+	/**
+	 * 是否支持拖拽改变列宽
+	 * @default true
+	 */
+	resizable?: boolean
+	/**
+	 * 最小拖拽宽度
+	 * @default 40
+	 */
+	minResizeWidth?: number
+	/**
+	 * 最大拖拽宽度
+	 * @default 700
+	 */
+	maxResizeWidth?: number
+	/**
+	 * 是否显示序号列
+	 * @default false
+	 */
+	showIndexColumn?: boolean
+	/**
+	 * 是否显示checkbox列
+	 */
+	showCheckboxColumn?: boolean
+	/**
+	 * 是否展开按钮组 只针对列表右侧的按钮组
+	 */
+	expandActions?: boolean
+	/**
+	 * 表格是否需要边框
+	 * @default true
+	 */
+	bordered?: boolean
+	/**
+	 * 是否为斑马纹 table
+	 */
+	stripe?: boolean
+	/**
+	 * 是否显示分页数据
+	 * @default true
+	 */
+	showPagination?: boolean
+	/**
+	 * 分页参数
+	 */
+	pagination?: Ref<PaginationType>
+	/**
+	 * 加载状态
+	 */
+	loading?: { [key: string]: boolean } | Ref<boolean>
+	/**
+	 * 工具栏按钮
+	 */
+	toolbar?: ButtonTypes[]
+	/**
+	 * 操作栏
+	 */
+	operations?: TableRowAction | ButtonTypes[]
+	/**
+	 * 表格设置
+	 */
+	tableSetting?: TableSetting | boolean
+	/**
+	 * 为了更好的渲染效果预先多加载的行数
+	 * @default 2
+	 */
+	cache?: number
+	/**
+	 * 渲染动态的单元格的预估高度
+	 */
+	estimatedRowHeight?: number
+	/**
+	 * header 部分的自定义 class 名
+	 */
+	headerClass?: string | ((param: { columns: ColumnType[]; headerIndex: number }) => string)
+	/**
+	 * header 部分的自定义 props 名
+	 */
+	headerProps?:
+		| Record<string, any>
+		| ((param: { columns: ColumnType[]; headerIndex: number }) => Record<string, any>)
+	/**
+	 * header cell 部分的自定义 props 名
+	 */
+	headerCellProps?:
+		| Record<string, any>
+		| ((param: {
+				columns: ColumnType[]
+				column: ColumnType
+				columnIndex: number
+				headerIndex: number
+				style: CSSProperties
+		  }) => Record<string, any>)
+	/**
+	 * Header 的高度由height设置。 如果传入数组，它会使 header row 等于数组长度
+	 * @default 50
+	 */
+	headerHeight?: number | number[]
+	/**
+	 * Footer 部分的高度，当传入值时，这部分将被计算入 table 的高度里
+	 * @default 0
+	 */
+	footerHeight?: number
+	/**
+	 * row wrapper 部分的自定义 class 名
+	 */
+	rowClass?:
+		| string
+		| ((param: { columns: ColumnType[]; rowData: any; rowIndex: number }) => string)
+	/**
+	 * 每行的 key 值，如果不提供，将使用索引 index 代替
+	 * @default 'id'
+	 */
+	rowKey?: KeyType
+	/**
+	 * row component 部分的自定义 class 名
+	 */
+	rowProps?:
+		| Record<string, any>
+		| ((param: {
+				columns: ColumnType[]
+				rowData: any
+				rowIndex: number
+		  }) => Record<string, any>)
+	/**
+	 * 每行的高度, 用于计算表的总高度
+	 * @default 50
+	 */
+	rowHeight?: number
+	/**
+	 * 当每行添加了一系列事件处理器时触发
+	 */
+	rowEventHandlers?: {
+		onClick?: RowEventHandler
+		onContextmenu?: RowEventHandler
+		onDblclick?: RowEventHandler
+		onMouseenter?: RowEventHandler
+		onMouseleave?: RowEventHandler
+	}
+	/**
+	 * 每个单元格 cell 的自定义 props (除了 header cell 以外)
+	 */
+	cellProps?:
+		| Record<string, any>
+		| ((param: {
+				column: ColumnType
+				columns: ColumnType[]
+				columnIndex: number
+				cellData: any
+				rowData: any
+				rowIndex: number
+		  }) => void)
+	/**
+	 * 列 column 的配置数组
+	 * @default []
+	 */
+	columns?: ColumnType[]
+	/**
+	 * 要在表中渲染的数据数组
+	 * @default []
+	 */
+	data?: any[] | Ref<any[]>
+	/**
+	 * 一个自定义方法从数据源获取数据
+	 */
+	dataGetter?: DataGetter
+	/**
+	 * 渲染行在表格主内容上方和 header 下方区域的数据
+	 */
+	fixedData?: Data
+	/**
+	 * 列的 key 来标记哪个行可以被展开
+	 */
+	expandColumnKey?: string
+	/**
+	 * 存放行展开状态的 key 的数组，可以和 v-model 搭配使用
+	 */
+	expandedRowKeys?: KeyType[]
+	/**
+	 * 默认展开的行的 key 的数组, 这个数据不是响应式的
+	 */
+	defaultExpandedRowKeys?: KeyType[]
+	/**
+	 * 表格的类名称，将应用于表格的全部的三个部分 (左、右、主)
+	 */
+	class?: string | Array<string> | Record<string, any>
+	/**
+	 * 单元格宽度是自适应还是固定
+	 * @default false
+	 */
+	fixed?: boolean
+	/**
+	 * 表格的宽度
+	 */
+	width?: number
+	/**
+	 * 表格的高度
+	 */
+	height?: number
+	/**
+	 * 表格的最大高度
+	 */
+	maxHeight?: number
+	/**
+	 * 树形表的水平缩进
+	 * @default 12
+	 */
+	indentSize?: number
+	/**
+	 * 配置表格的水平滚动条大小，防止水平和垂直滚动条重叠。
+	 * @default 6
+	 */
+	hScrollbarSize?: number
+	/**
+	 * 配置表格的垂直滚动条大小，防止水平和垂直滚动条重叠。
+	 * @default 6
+	 */
+	vScrollbarSize?: number
+	/**
+	 * 如果开启，滚动条将一直显示，反之只会在鼠标经过时显示
+	 * @default false
+	 */
+	scrollbarAlwaysOn?: boolean
+	/**
+	 * 排序方式
+	 */
+	sortBy?: SortBy
+	/**
+	 * 多个排序
+	 */
+	sortState?: SortState
+	/**
+	 * 列排序时调用
+	 */
+	onColumnSort?: (data: { column: ColumnType; key: KeyType; order: SortOrder }) => void
+	/**
+	 * 行展开状态改变时触发
+	 */
+	onExpandedRowsChange?: (data: KeyType[]) => void
+	/**
+	 * 到达表格末尾时触发。 回调包含剩余距离，它通常是滚动条高度。
+	 */
+	onEndReached?: (remainDistance: number) => void
+	/**
+	 * 表格被用户滚动后触发
+	 */
+	onScroll?: (data: {
+		xAxisScrollDir: 'forward' | 'backward'
+		scrollLeft: number
+		yAxisScrollDir: 'forward' | 'backward'
+		scrollTop: number
+	}) => void
+	/**
+	 * 当行被渲染后触发
+	 */
+	onRowsRendered?: (data: {
+		rowCacheStart: number
+		rowCacheEnd: number
+		rowVisibleStart: number
+		rowVisibleEnd: number
+	}) => void
+	/**
+	 * 点击箭头图标展开/折叠树节点时触发
+	 */
+	onRowExpand?: (
+		data: {
+			expanded: boolean
+			rowKey: KeyType
+		} & RowCommonParams
+	) => void
+}
+
+/**
+ * 表单暴露的方法，供外面使用
+ */
+type RowKey = number | string
+
+type SetColumnsParams = {
+	/**
+	 * 是否或略列索引
+	 */
+	ignoreIndex?: boolean
+	/**
+	 * 是否忽略操作列
+	 */
+	ignoreAction?: boolean
+	/**
+	 * 是否忽略排序列
+	 */
+	sort?: boolean
+}
+
+type TableInsType = {
+	/**
+	 * 动态设置表单配置
+	 */
+	setProps: (props: Partial<TableType>) => void
+	/**
+	 * 设置加载状态
+	 */
+	setLoading: (loading: boolean) => void
+	/**
+	 * 清空选中的行
+	 */
+	clearSelectedRowKeys: () => void
+	/**
+	 * 获取选中的行
+	 */
+	getSelectRows: () => Recordable[]
+	/**
+	 * 获取选中的行的keys集合
+	 */
+	getSelectedRowKeys: () => RowKey[]
+	/**
+	 * 根据keys设置选中的行
+	 */
+	setSelectedRowKeys: (keys: RowKey[]) => void
+	/**
+	 * 获取列信息
+	 */
+	getColumns: (opt?: SetColumnsParams) => ColumnType[]
+	/**
+	 * 设置列信息
+	 * @param columns 列信息
+	 * @desc 如果是string的数组 则表示根据dataKey设置列显示
+	 */
+	setColumns: (columns: ColumnType[] | string[]) => void
+	/**
+	 * 动态设置列信息
+	 */
+	setColumnsByDataIndex: (dataIndex: string | undefined, schema: ColumnType) => void
+	/**
+	 * 获取有效列头信息
+	 */
+	getCacheColumns: () => ColumnType[]
+	/**
+	 * 根据key获取行信息
+	 */
+	findRowByKey: (rowKey: RowKey) => Data | undefined
+	/**
+	 * 更新行信息
+	 */
+	updateRow: (rowKey: string | number, record: Recordable) => Data | undefined
+	/**
+	 * 获取分页信息
+	 */
+	getPagination: () => PaginationType | false
+	/**
+	 * 设置分页数据
+	 */
+	setPagination: (pagination: PaginationType) => void
+
+	[key: string]: any
+}
+
+type ColumnOptionsType = {
+	label: string
+	value: string
+	fixed?: boolean | 'left' | 'right'
+}
+
+type SelectionCellProps = {
+	value: boolean
+	intermediate?: boolean
+	onChange: (value: CheckboxValueType) => void
+}
+
+export type {
+	Data,
+	TableType,
+	TableInsType,
+	RowKey,
+	ColumnType,
+	SortState,
+	SortOrder,
+	SortBy,
+	TableSetting,
+	DownloadType,
+	SetColumnsParams,
+	ColumnOptionsType,
+	TableRowAction,
+	SelectionCellProps,
+	CellFormat
+}

package/dist/es/components/table/styles/index.scss

@@ -0,0 +1,66 @@
+.dt-table {
+	--el-border-color-lighter: #ebeef5;
+}
+.dt-table .el-table-v2 {
+	--el-table-header-bg-color: #f4f4f5;
+	--el-text-color-regular: #323639;
+	--el-table-header-text-color: #333;
+}
+
+.dt-expand-has-collapse {
+	.dt-table-action-btn {
+		width: inherit;
+		margin: 0 !important;
+		cursor: pointer;
+		color: var(--el-color-primary);
+	}
+}
+
+.dt-table-action-btn {
+	border-right: 1px solid rgba(0, 0, 0, 0.06);
+	&:last-of-type {
+		border-right: none;
+	}
+}
+
+.dt-table {
+	.el-button.is-text:not(.is-disabled):hover {
+		background-color: #e5e5e5;
+	}
+	.border-table {
+		.el-table-v2__header {
+			border-top: 1px solid var(--el-border-color-lighter);
+			border-bottom: 1px solid var(--el-border-color-lighter);
+		}
+		.el-table-v2__row-cell,
+		.el-table-v2__header-cell {
+			border-left: 1px solid var(--el-border-color-lighter);
+
+			&:last-of-type {
+				border-right: 1px solid var(--el-border-color-lighter);
+			}
+		}
+
+		.el-table-v2__row {
+			padding-inline-end: 0;
+			border-right: 1px solid var(--el-border-color-lighter);
+		}
+		.el-table-v2__header-row {
+			padding-inline-end: 0;
+		}
+	}
+
+	.striped-table {
+		.el-table-v2__body .el-table-v2__row:nth-of-type(2n) {
+			background-color: var(--el-fill-color-lighter);
+
+			&:hover {
+				background-color: var(--el-table-row-hover-bg-color);
+			}
+		}
+	}
+
+	.dt-border-pagination {
+		border: 1px solid var(--el-border-color-lighter);
+	}
+}