68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import { Button } from "antd";
|
|
import style from "./footer.module.scss";
|
|
import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons";
|
|
|
|
interface PopupFooterProps {
|
|
total: number;
|
|
currentPage: number;
|
|
totalPages: number;
|
|
loading: boolean;
|
|
selectedCount: number;
|
|
onPageChange: (page: number) => void;
|
|
onCancel: () => void;
|
|
onConfirm: () => void;
|
|
}
|
|
|
|
const PopupFooter: React.FC<PopupFooterProps> = ({
|
|
total,
|
|
currentPage,
|
|
totalPages,
|
|
loading,
|
|
selectedCount,
|
|
onPageChange,
|
|
onCancel,
|
|
onConfirm,
|
|
}) => {
|
|
return (
|
|
<>
|
|
{/* 分页栏 */}
|
|
<div className={style.paginationRow}>
|
|
<div className={style.totalCount}>总计 {total} 条记录</div>
|
|
<div className={style.paginationControls}>
|
|
<Button
|
|
onClick={() => onPageChange(Math.max(1, currentPage - 1))}
|
|
disabled={currentPage === 1 || loading}
|
|
className={style.pageBtn}
|
|
>
|
|
<ArrowLeftOutlined />
|
|
</Button>
|
|
<span className={style.pageInfo}>
|
|
{currentPage} / {totalPages}
|
|
</span>
|
|
<Button
|
|
onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
|
|
disabled={currentPage === totalPages || loading}
|
|
className={style.pageBtn}
|
|
>
|
|
<ArrowRightOutlined />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className={style.popupFooter}>
|
|
<div className={style.selectedCount}>已选择 {selectedCount} 条记录</div>
|
|
<div className={style.footerBtnGroup}>
|
|
<Button color="primary" variant="filled" onClick={onCancel}>
|
|
取消
|
|
</Button>
|
|
<Button type="primary" onClick={onConfirm}>
|
|
确定
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PopupFooter;
|