90 lines
2.3 KiB
JavaScript
90 lines
2.3 KiB
JavaScript
import { Alert } from 'antd'
|
|
import './SelectionAlert.css'
|
|
|
|
/**
|
|
* 全选提示条组件
|
|
* @param {Object} props
|
|
* @param {number} props.currentPageCount - 当前页选中数量
|
|
* @param {number} props.totalCount - 总数据量
|
|
* @param {boolean} props.isAllPagesSelected - 是否已选择所有页
|
|
* @param {Function} props.onSelectAllPages - 选择所有页的回调
|
|
* @param {Function} props.onClearSelection - 清除选择的回调
|
|
*/
|
|
function SelectionAlert({
|
|
currentPageCount,
|
|
totalCount,
|
|
isAllPagesSelected,
|
|
onSelectAllPages,
|
|
onClearSelection,
|
|
}) {
|
|
// 如果没有选中任何项，不显示
|
|
if (currentPageCount === 0) {
|
|
return null
|
|
}
|
|
|
|
// 如果已选择所有页
|
|
if (isAllPagesSelected) {
|
|
return (
|
|
<div className="selection-alert-container">
|
|
<Alert
|
|
message={
|
|
<div className="selection-alert-content">
|
|
<span>
|
|
已选择全部 <strong>{totalCount}</strong> 条数据
|
|
</span>
|
|
<a onClick={onClearSelection}>清除选择</a>
|
|
</div>
|
|
}
|
|
type="info"
|
|
showIcon
|
|
closable={false}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// 如果只选择了当前页，且总数大于当前页
|
|
if (currentPageCount > 0 && totalCount > currentPageCount) {
|
|
return (
|
|
<div className="selection-alert-container">
|
|
<Alert
|
|
message={
|
|
<div className="selection-alert-content">
|
|
<span>
|
|
已选择当前页 <strong>{currentPageCount}</strong> 条数据
|
|
</span>
|
|
<a onClick={onSelectAllPages}>
|
|
选择全部 {totalCount} 条数据
|
|
</a>
|
|
</div>
|
|
}
|
|
type="warning"
|
|
showIcon
|
|
closable={false}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// 只选择了部分数据，且总数等于当前页（单页情况）
|
|
return (
|
|
<div className="selection-alert-container">
|
|
<Alert
|
|
message={
|
|
<div className="selection-alert-content">
|
|
<span>
|
|
已选择 <strong>{currentPageCount}</strong> 条数据
|
|
</span>
|
|
<a onClick={onClearSelection}>清除选择</a>
|
|
</div>
|
|
}
|
|
type="info"
|
|
showIcon
|
|
closable={false}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SelectionAlert
|