116 lines
3.5 KiB
JavaScript
116 lines
3.5 KiB
JavaScript
import { Table } from 'antd'
|
|
import './ListTable.css'
|
|
|
|
/**
|
|
* 列表表格组件
|
|
* @param {Object} props
|
|
* @param {Array} props.columns - 表格列配置
|
|
* @param {Array} props.dataSource - 数据源
|
|
* @param {string} props.rowKey - 行唯一标识字段
|
|
* @param {Array} props.selectedRowKeys - 选中的行
|
|
* @param {Function} props.onSelectionChange - 选择变化回调
|
|
* @param {boolean} props.isAllPagesSelected - 是否跨页全选所有数据
|
|
* @param {number} props.totalCount - 总数据量（用于跨页全选）
|
|
* @param {Function} props.onSelectAllPages - 选择所有页回调
|
|
* @param {Function} props.onClearSelection - 清除选择回调
|
|
* @param {Object} props.pagination - 分页配置
|
|
* @param {Object} props.scroll - 表格滚动配置
|
|
* @param {Function} props.onRowClick - 行点击回调
|
|
* @param {Object} props.selectedRow - 当前选中的行
|
|
* @param {boolean} props.loading - 加载状态
|
|
* @param {string} props.className - 自定义类名
|
|
*/
|
|
function ListTable({
|
|
columns,
|
|
dataSource,
|
|
rowKey = 'id',
|
|
selectedRowKeys = [],
|
|
onSelectionChange,
|
|
isAllPagesSelected = false,
|
|
totalCount,
|
|
onSelectAllPages,
|
|
onClearSelection,
|
|
pagination = {
|
|
pageSize: 10,
|
|
showSizeChanger: true,
|
|
showQuickJumper: true,
|
|
},
|
|
scroll = { x: 1200},
|
|
onRowClick,
|
|
selectedRow,
|
|
loading = false,
|
|
className = '',
|
|
}) {
|
|
// 行选择配置
|
|
const rowSelection = {
|
|
selectedRowKeys,
|
|
onChange: (newSelectedRowKeys) => {
|
|
onSelectionChange?.(newSelectedRowKeys)
|
|
},
|
|
// 当跨页全选时，禁用单个复选框
|
|
getCheckboxProps: () => ({
|
|
disabled: isAllPagesSelected,
|
|
}),
|
|
}
|
|
|
|
// 合并分页配置，添加选择信息显示
|
|
const mergedPagination = pagination === false ? false : {
|
|
...pagination,
|
|
showTotal: (total) => (
|
|
<div className="table-selection-info">
|
|
{isAllPagesSelected ? (
|
|
<>
|
|
<span className="selection-count">
|
|
已选择 <span className="count-highlight">{totalCount || total}</span> 项
|
|
</span>
|
|
{onClearSelection && (
|
|
<a onClick={onClearSelection} className="selection-action">
|
|
清除选择
|
|
</a>
|
|
)}
|
|
</>
|
|
) : selectedRowKeys.length > 0 ? (
|
|
<>
|
|
<span className="selection-count">
|
|
已选择 <span className="count-highlight">{selectedRowKeys.length}</span> 项
|
|
</span>
|
|
{onSelectAllPages && selectedRowKeys.length < (totalCount || total) && (
|
|
<a onClick={onSelectAllPages} className="selection-action">
|
|
选择全部 {totalCount || total} 项
|
|
</a>
|
|
)}
|
|
{onClearSelection && (
|
|
<a onClick={onClearSelection} className="selection-action">
|
|
清除
|
|
</a>
|
|
)}
|
|
</>
|
|
) : (
|
|
<span className="selection-count">已选择 0 项</span>
|
|
)}
|
|
</div>
|
|
),
|
|
}
|
|
|
|
return (
|
|
<div className={`list-table-container ${className}`}>
|
|
<Table
|
|
size="middle"
|
|
rowSelection={rowSelection}
|
|
columns={columns}
|
|
dataSource={dataSource}
|
|
rowKey={rowKey}
|
|
pagination={mergedPagination}
|
|
scroll={scroll}
|
|
loading={loading}
|
|
onRow={(record) => ({
|
|
onClick: () => onRowClick?.(record),
|
|
className: selectedRow?.[rowKey] === record[rowKey] ? 'row-selected' : '',
|
|
})}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ListTable
|