288 lines
9.6 KiB
TypeScript
288 lines
9.6 KiB
TypeScript
|
import React, { useState, useEffect, useCallback } from "react";
|
|||
|
|
import { Checkbox, Popup } from "antd-mobile";
|
|||
|
|
import { getDeviceList } from "./api";
|
|||
|
|
import style from "./index.module.scss";
|
|||
|
|
import Layout from "@/components/Layout/Layout";
|
|||
|
|
import PopupHeader from "@/components/PopuLayout/header";
|
|||
|
|
import PopupFooter from "@/components/PopuLayout/footer";
|
|||
|
|
import { DeviceSelectionItem } from "./data";
|
|||
|
|
|
|||
|
|
interface SelectionPopupProps {
|
|||
|
|
visible: boolean;
|
|||
|
|
onClose: () => void;
|
|||
|
|
selectedOptions: DeviceSelectionItem[];
|
|||
|
|
onSelect: (devices: DeviceSelectionItem[]) => void;
|
|||
|
|
singleSelect?: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const PAGE_SIZE = 20;
|
|||
|
|
|
|||
|
|
const SelectionPopup: React.FC<SelectionPopupProps> = ({
|
|||
|
|
visible,
|
|||
|
|
onClose,
|
|||
|
|
selectedOptions,
|
|||
|
|
onSelect,
|
|||
|
|
singleSelect = false,
|
|||
|
|
}) => {
|
|||
|
|
// 设备数据
|
|||
|
|
const [devices, setDevices] = useState<DeviceSelectionItem[]>([]);
|
|||
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|||
|
|
const [statusFilter, setStatusFilter] = useState("all");
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|||
|
|
const [total, setTotal] = useState(0);
|
|||
|
|
const [tempSelectedOptions, setTempSelectedOptions] = useState<
|
|||
|
|
DeviceSelectionItem[]
|
|||
|
|
>([]);
|
|||
|
|
|
|||
|
|
// 获取设备列表，支持keyword和分页
|
|||
|
|
const fetchDevices = useCallback(
|
|||
|
|
async (keyword: string = "", page: number = 1) => {
|
|||
|
|
setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const res = await getDeviceList({
|
|||
|
|
page,
|
|||
|
|
limit: PAGE_SIZE,
|
|||
|
|
keyword: keyword.trim() || undefined,
|
|||
|
|
});
|
|||
|
|
if (res && Array.isArray(res.list)) {
|
|||
|
|
setDevices(
|
|||
|
|
res.list.map((d: any) => ({
|
|||
|
|
id: d.id?.toString() || "",
|
|||
|
|
memo: d.memo || d.imei || "",
|
|||
|
|
imei: d.imei || "",
|
|||
|
|
wechatId: d.wechatId || "",
|
|||
|
|
status: d.alive === 1 ? "online" : "offline",
|
|||
|
|
wxid: d.wechatId || "",
|
|||
|
|
nickname: d.nickname || "",
|
|||
|
|
usedInPlans: d.usedInPlans || 0,
|
|||
|
|
avatar: d.avatar || "",
|
|||
|
|
totalFriend: d.totalFriend || 0,
|
|||
|
|
})),
|
|||
|
|
);
|
|||
|
|
setTotal(res.total || 0);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("获取设备列表失败:", error);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
[],
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 打开弹窗时获取第一页
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (visible) {
|
|||
|
|
setSearchQuery("");
|
|||
|
|
setCurrentPage(1);
|
|||
|
|
// 复制一份selectedOptions到临时变量
|
|||
|
|
setTempSelectedOptions([...selectedOptions]);
|
|||
|
|
fetchDevices("", 1);
|
|||
|
|
}
|
|||
|
|
}, [visible, fetchDevices, selectedOptions]);
|
|||
|
|
|
|||
|
|
// 搜索防抖
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!visible) return;
|
|||
|
|
const timer = setTimeout(() => {
|
|||
|
|
setCurrentPage(1);
|
|||
|
|
fetchDevices(searchQuery, 1);
|
|||
|
|
}, 500);
|
|||
|
|
return () => clearTimeout(timer);
|
|||
|
|
}, [searchQuery, visible, fetchDevices]);
|
|||
|
|
|
|||
|
|
// 翻页时重新请求
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!visible) return;
|
|||
|
|
fetchDevices(searchQuery, currentPage);
|
|||
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|||
|
|
}, [currentPage]);
|
|||
|
|
|
|||
|
|
// 过滤设备（只保留状态过滤）
|
|||
|
|
const filteredDevices = devices.filter(device => {
|
|||
|
|
const matchesStatus =
|
|||
|
|
statusFilter === "all" ||
|
|||
|
|
(statusFilter === "online" && device.status === "online") ||
|
|||
|
|
(statusFilter === "offline" && device.status === "offline");
|
|||
|
|
return matchesStatus;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
|
|||
|
|
|
|||
|
|
// 处理设备选择
|
|||
|
|
const handleDeviceToggle = (device: DeviceSelectionItem) => {
|
|||
|
|
if (singleSelect) {
|
|||
|
|
// 单选模式：如果已选中，则取消选择；否则替换为当前设备
|
|||
|
|
if (tempSelectedOptions.some(v => v.id === device.id)) {
|
|||
|
|
setTempSelectedOptions([]);
|
|||
|
|
} else {
|
|||
|
|
setTempSelectedOptions([device]);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 多选模式：原有的逻辑
|
|||
|
|
if (tempSelectedOptions.some(v => v.id === device.id)) {
|
|||
|
|
setTempSelectedOptions(
|
|||
|
|
tempSelectedOptions.filter(v => v.id !== device.id),
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
const newSelectedOptions = [...tempSelectedOptions, device];
|
|||
|
|
setTempSelectedOptions(newSelectedOptions);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 全选当前页
|
|||
|
|
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}
|
|||
|
|
onMaskClick={onClose}
|
|||
|
|
position="bottom"
|
|||
|
|
bodyStyle={{ height: "100vh" }}
|
|||
|
|
closeOnMaskClick={false}
|
|||
|
|
>
|
|||
|
|
<Layout
|
|||
|
|
header={
|
|||
|
|
<PopupHeader
|
|||
|
|
title="选择设备"
|
|||
|
|
searchQuery={searchQuery}
|
|||
|
|
setSearchQuery={setSearchQuery}
|
|||
|
|
searchPlaceholder="搜索设备IMEI/备注/微信号"
|
|||
|
|
loading={loading}
|
|||
|
|
onRefresh={() => fetchDevices(searchQuery, currentPage)}
|
|||
|
|
showTabs={true}
|
|||
|
|
tabsConfig={{
|
|||
|
|
activeKey: statusFilter,
|
|||
|
|
onChange: setStatusFilter,
|
|||
|
|
tabs: [
|
|||
|
|
{ title: "全部", key: "all" },
|
|||
|
|
{ title: "在线", key: "online" },
|
|||
|
|
{ title: "离线", key: "offline" },
|
|||
|
|
],
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
}
|
|||
|
|
footer={
|
|||
|
|
<PopupFooter
|
|||
|
|
currentPage={currentPage}
|
|||
|
|
totalPages={totalPages}
|
|||
|
|
loading={loading}
|
|||
|
|
selectedCount={tempSelectedOptions.length}
|
|||
|
|
singleSelect={singleSelect}
|
|||
|
|
onPageChange={setCurrentPage}
|
|||
|
|
onCancel={onClose}
|
|||
|
|
onConfirm={() => {
|
|||
|
|
// 用户点击确认时，才更新实际的selectedOptions
|
|||
|
|
onSelect(tempSelectedOptions);
|
|||
|
|
onClose();
|
|||
|
|
}}
|
|||
|
|
isAllSelected={isCurrentPageAllSelected}
|
|||
|
|
onSelectAll={singleSelect ? undefined : handleSelectAllCurrentPage}
|
|||
|
|
/>
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<div className={style.deviceList}>
|
|||
|
|
{loading ? (
|
|||
|
|
<div className={style.loadingBox}>
|
|||
|
|
<div className={style.loadingText}>加载中...</div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className={style.deviceListInner}>
|
|||
|
|
{filteredDevices.map(device => (
|
|||
|
|
<div key={device.id} className={style.deviceItem}>
|
|||
|
|
{/* 顶部行：选择框和IMEI */}
|
|||
|
|
<div className={style.headerRow}>
|
|||
|
|
<div className={style.checkboxContainer}>
|
|||
|
|
<Checkbox
|
|||
|
|
checked={tempSelectedOptions.some(
|
|||
|
|
v => v.id === device.id,
|
|||
|
|
)}
|
|||
|
|
onChange={() => handleDeviceToggle(device)}
|
|||
|
|
className={style.deviceCheckbox}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<span className={style.imeiText}>
|
|||
|
|
IMEI: {device.imei?.toUpperCase()}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 主要内容区域：头像和详细信息 */}
|
|||
|
|
<div className={style.mainContent}>
|
|||
|
|
{/* 头像 */}
|
|||
|
|
<div className={style.deviceAvatar}>
|
|||
|
|
{device.avatar ? (
|
|||
|
|
<img src={device.avatar} alt="头像" />
|
|||
|
|
) : (
|
|||
|
|
<span className={style.avatarText}>
|
|||
|
|
{(device.memo || device.wechatId || "设")[0]}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 设备信息 */}
|
|||
|
|
<div className={style.deviceContent}>
|
|||
|
|
<div className={style.deviceInfoRow}>
|
|||
|
|
<span className={style.deviceName}>{device.memo}</span>
|
|||
|
|
<div
|
|||
|
|
className={
|
|||
|
|
device.status === "online"
|
|||
|
|
? style.statusOnline
|
|||
|
|
: style.statusOffline
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{device.status === "online" ? "在线" : "离线"}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className={style.deviceInfoDetail}>
|
|||
|
|
<div className={style.infoItem}>
|
|||
|
|
<span className={style.infoLabel}>微信号:</span>
|
|||
|
|
<span className={style.infoValue}>
|
|||
|
|
{device.wechatId}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className={style.infoItem}>
|
|||
|
|
<span className={style.infoLabel}>好友数:</span>
|
|||
|
|
<span
|
|||
|
|
className={`${style.infoValue} ${style.friendCount}`}
|
|||
|
|
>
|
|||
|
|
{device.totalFriend ?? "-"}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</Layout>
|
|||
|
|
</Popup>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default SelectionPopup;
|