fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(selection): 为所有选择弹窗添加当前页全选功能

Browse Source 
- 在弹窗底部添加全选当前页的复选框
- 修改样式以适配新的全选功能
- 移除不再需要的总计数量显示
This commit is contained in:
超级老白兔
2025-09-10 11:23:50 +08:00
parent c6304d75cf
commit 4b84d5f013
8 changed files with 202 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
Cunkebao/src/components/AccountSelection/selectionPopup.tsx
View File

@@ -68,6 +68,32 @@ export default function SelectionPopup({
setTempSelectedOptions(next);
};
// 全选当前页
const handleSelectAllCurrentPage = (checked: boolean) => {
if (readonly) return;
if (checked) {
// 全选：添加当前页面所有未选中的账号
const currentPageAccounts = accounts.filter(
account => !tempSelectedOptions.some(a => a.id === account.id),
);
setTempSelectedOptions(prev => [...prev, ...currentPageAccounts]);
} else {
// 取消全选：移除当前页面的所有账号
const currentPageAccountIds = accounts.map(a => a.id);
setTempSelectedOptions(prev =>
prev.filter(a => !currentPageAccountIds.includes(a.id)),
);
}
};
// 检查当前页是否全选
const isCurrentPageAllSelected =
accounts.length > 0 &&
accounts.every(account =>
tempSelectedOptions.some(a => a.id === account.id),
);
const handleConfirm = () => {
if (onConfirm) {
onConfirm(tempSelectedOptions);
@@ -132,7 +158,6 @@ export default function SelectionPopup({
}
footer={
<PopupFooter
total={totalAccounts}
currentPage={currentPage}
totalPages={totalPages}
loading={loading}
@@ -140,6 +165,8 @@ export default function SelectionPopup({
onPageChange={setCurrentPage}
onCancel={() => onVisibleChange(false)}
onConfirm={handleConfirm}
isAllSelected={isCurrentPageAllSelected}
onSelectAll={handleSelectAllCurrentPage}
/>
}
>

27
Cunkebao/src/components/ContentSelection/selectionPopup.tsx
View File

@@ -137,6 +137,30 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
setTempSelectedOptions(newSelected);
};
// 全选当前页
const handleSelectAllCurrentPage = (checked: boolean) => {
if (checked) {
// 全选：添加当前页面所有未选中的内容库
const currentPageLibraries = libraries.filter(
library => !tempSelectedOptions.some(l => l.id === library.id),
);
setTempSelectedOptions(prev => [...prev, ...currentPageLibraries]);
} else {
// 取消全选：移除当前页面的所有内容库
const currentPageLibraryIds = libraries.map(l => l.id);
setTempSelectedOptions(prev =>
prev.filter(l => !currentPageLibraryIds.includes(l.id)),
);
}
};
// 检查当前页是否全选
const isCurrentPageAllSelected =
libraries.length > 0 &&
libraries.every(library =>
tempSelectedOptions.some(l => l.id === library.id),
);
// 确认选择
const handleConfirm = () => {
// 用户点击确认时，才更新实际的selectedOptions
@@ -204,7 +228,6 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
}
footer={
<PopupFooter
total={totalLibraries}
currentPage={currentPage}
totalPages={totalPages}
loading={loading}
@@ -212,6 +235,8 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
onPageChange={handlePageChange}
onCancel={onClose}
onConfirm={handleConfirm}
isAllSelected={isCurrentPageAllSelected}
onSelectAll={handleSelectAllCurrentPage}
/>
}
>

27
Cunkebao/src/components/DeviceSelection/selectionPopup.tsx
View File

@@ -120,6 +120,30 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
}
};
// 全选当前页
const handleSelectAllCurrentPage = (checked: boolean) => {
if (checked) {
// 全选：添加当前页面所有未选中的设备
const currentPageDevices = filteredDevices.filter(
device => !tempSelectedOptions.some(d => d.id === device.id),
);
setTempSelectedOptions(prev => [...prev, ...currentPageDevices]);
} else {
// 取消全选：移除当前页面的所有设备
const currentPageDeviceIds = filteredDevices.map(d => d.id);
setTempSelectedOptions(prev =>
prev.filter(d => !currentPageDeviceIds.includes(d.id)),
);
}
};
// 检查当前页是否全选
const isCurrentPageAllSelected =
filteredDevices.length > 0 &&
filteredDevices.every(device =>
tempSelectedOptions.some(d => d.id === device.id),
);
return (
<Popup
visible={visible}
@@ -151,7 +175,6 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
}
footer={
<PopupFooter
total={total}
currentPage={currentPage}
totalPages={totalPages}
loading={loading}
@@ -163,6 +186,8 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
onSelect(tempSelectedOptions);
onClose();
}}
isAllSelected={isCurrentPageAllSelected}
onSelectAll={handleSelectAllCurrentPage}
/>
}
>

27
Cunkebao/src/components/FriendSelection/selectionPopup.tsx
View File

@@ -85,6 +85,30 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
setTempSelectedOptions(newSelectedFriends);
};
// 全选当前页
const handleSelectAllCurrentPage = (checked: boolean) => {
if (readonly) return;
if (checked) {
// 全选：添加当前页面所有未选中的好友
const currentPageFriends = friends.filter(
friend => !tempSelectedOptions.some(f => f.id === friend.id),
);
setTempSelectedOptions(prev => [...prev, ...currentPageFriends]);
} else {
// 取消全选：移除当前页面的所有好友
const currentPageFriendIds = friends.map(f => f.id);
setTempSelectedOptions(prev =>
prev.filter(f => !currentPageFriendIds.includes(f.id)),
);
}
};
// 检查当前页是否全选
const isCurrentPageAllSelected =
friends.length > 0 &&
friends.every(friend => tempSelectedOptions.some(f => f.id === friend.id));
// 确认选择
const handleConfirm = () => {
if (onConfirm) {
@@ -147,7 +171,6 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
}
footer={
<PopupFooter
total={totalFriends}
currentPage={currentPage}
totalPages={totalPages}
loading={loading}
@@ -155,6 +178,8 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
onPageChange={setCurrentPage}
onCancel={() => onVisibleChange(false)}
onConfirm={handleConfirm}
isAllSelected={isCurrentPageAllSelected}
onSelectAll={handleSelectAllCurrentPage}
/>
}
>

27
Cunkebao/src/components/GroupSelection/selectionPopup.tsx
View File

@@ -88,6 +88,30 @@ export default function SelectionPopup({
setTempSelectedOptions(newSelectedGroups);
};
// 全选当前页
const handleSelectAllCurrentPage = (checked: boolean) => {
if (readonly) return;
if (checked) {
// 全选：添加当前页面所有未选中的群组
const currentPageGroups = groups.filter(
group => !tempSelectedOptions.some(g => g.id === group.id),
);
setTempSelectedOptions(prev => [...prev, ...currentPageGroups]);
} else {
// 取消全选：移除当前页面的所有群组
const currentPageGroupIds = groups.map(g => g.id);
setTempSelectedOptions(prev =>
prev.filter(g => !currentPageGroupIds.includes(g.id)),
);
}
};
// 检查当前页是否全选
const isCurrentPageAllSelected =
groups.length > 0 &&
groups.every(group => tempSelectedOptions.some(g => g.id === group.id));
// 确认选择
const handleConfirm = () => {
// 用户点击确认时，才更新实际的selectedOptions
@@ -159,7 +183,6 @@ export default function SelectionPopup({
}
footer={
<PopupFooter
total={totalGroups}
currentPage={currentPage}
totalPages={totalPages}
loading={loading}
@@ -167,6 +190,8 @@ export default function SelectionPopup({
onPageChange={setCurrentPage}
onCancel={() => onVisibleChange(false)}
onConfirm={handleConfirm}
isAllSelected={isCurrentPageAllSelected}
onSelectAll={handleSelectAllCurrentPage}
/>
}
>

38
Cunkebao/src/components/PoolSelection/selectionPopup.tsx
View File

@@ -96,6 +96,41 @@ export default function SelectionPopup({
}
};
// 全选当前页
const handleSelectAllCurrentPage = (checked: boolean) => {
if (readonly) return;
if (checked) {
// 全选：添加当前页面所有未选中的流量池包
const currentPagePackages = poolPackages.filter(
packageItem =>
!tempSelectedOptions.some(p => p.id === String(packageItem.id)),
);
const newSelectionItems = currentPagePackages.map(item => ({
id: String(item.id),
name: item.name,
description: item.description,
createTime: item.createTime,
num: item.num,
originalData: item,
}));
setTempSelectedOptions(prev => [...prev, ...newSelectionItems]);
} else {
// 取消全选：移除当前页面的所有流量池包
const currentPagePackageIds = poolPackages.map(p => String(p.id));
setTempSelectedOptions(prev =>
prev.filter(p => !currentPagePackageIds.includes(p.id)),
);
}
};
// 检查当前页是否全选
const isCurrentPageAllSelected =
poolPackages.length > 0 &&
poolPackages.every(packageItem =>
tempSelectedOptions.some(p => p.id === String(packageItem.id)),
);
// 确认选择
const handleConfirm = () => {
if (onConfirm) {
@@ -158,7 +193,6 @@ export default function SelectionPopup({
}
footer={
<PopupFooter
total={totalItems}
currentPage={currentPage}
totalPages={totalPages}
loading={loading}
@@ -166,6 +200,8 @@ export default function SelectionPopup({
onPageChange={setCurrentPage}
onCancel={() => onVisibleChange(false)}
onConfirm={handleConfirm}
isAllSelected={isCurrentPageAllSelected}
onSelectAll={handleSelectAllCurrentPage}
/>
}
>

19
Cunkebao/src/components/PopuLayout/footer.module.scss
View File

@@ -9,7 +9,24 @@
.selectedCount {
font-size: 14px;
color: #888;
color: #666;
display: flex;
align-items: center;
gap: 12px;
}
.selectAllCheckbox {
margin-right: 0;
.ant-checkbox-wrapper {
font-size: 14px;
}
&.ant-checkbox-wrapper-disabled {
.ant-checkbox-disabled + span {
color: #d9d9d9;
}
}
}
.footerBtnGroup {

19
Cunkebao/src/components/PopuLayout/footer.tsx
View File

@@ -1,10 +1,9 @@
import React from "react";
import { Button } from "antd";
import { Button, Checkbox } 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;
@@ -12,10 +11,12 @@ interface PopupFooterProps {
onPageChange: (page: number) => void;
onCancel: () => void;
onConfirm: () => void;
// 全选功能相关
isAllSelected?: boolean;
onSelectAll?: (checked: boolean) => void;
}
const PopupFooter: React.FC<PopupFooterProps> = ({
total,
currentPage,
totalPages,
loading,
@@ -23,12 +24,22 @@ const PopupFooter: React.FC<PopupFooterProps> = ({
onPageChange,
onCancel,
onConfirm,
isAllSelected = false,
onSelectAll,
}) => {
return (
<>
{/* 分页栏 */}
<div className={style.paginationRow}>
<div className={style.totalCount}>总计 {total} 条记录</div>
<div className={style.totalCount}>
<Checkbox
checked={isAllSelected}
onChange={e => onSelectAll(e.target.checked)}
className={style.selectAllCheckbox}
>
全选当前页
</Checkbox>
</div>
<div className={style.paginationControls}>
<Button
onClick={() => onPageChange(Math.max(1, currentPage - 1))}