fnvtk/ckb-SuperAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

选择的处理下

Browse Source
This commit is contained in:
笔记本里的永平
2025-07-17 09:59:54 +08:00
parent 42ba2590f7
commit 43e873f83a
3 changed files with 341 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
nkebao/src/components/DeviceSelection.tsx
View File

@@ -41,18 +41,11 @@ export default function DeviceSelection({
const [statusFilter, setStatusFilter] = useState("all");
const [loading, setLoading] = useState(false);
// 当弹窗打开时获取设备列表
useEffect(() => {
if (dialogOpen) {
fetchDevices();
}
}, [dialogOpen]);
// 获取设备列表
const fetchDevices = async () => {
// 获取设备列表，支持keyword
const fetchDevices = async (keyword: string = "") => {
setLoading(true);
try {
const res = await fetchDeviceList(1, 100);
const res = await fetchDeviceList(1, 100, keyword.trim() || undefined);
if (res && res.data && Array.isArray(res.data.list)) {
setDevices(
res.data.list.map((d) => ({
@@ -71,19 +64,29 @@ export default function DeviceSelection({
}
};
// 过滤设备
const filteredDevices = devices.filter((device) => {
const matchesSearch =
device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
device.wechatId.toLowerCase().includes(searchQuery.toLowerCase());
// 打开弹窗时获取设备列表
const openDialog = () => {
setSearchQuery("");
setDialogOpen(true);
fetchDevices("");
};
// 搜索防抖
useEffect(() => {
if (!dialogOpen) return;
const timer = setTimeout(() => {
fetchDevices(searchQuery);
}, 500);
return () => clearTimeout(timer);
}, [searchQuery, dialogOpen]);
// 过滤设备（只保留状态过滤）
const filteredDevices = devices.filter((device) => {
const matchesStatus =
statusFilter === "all" ||
(statusFilter === "online" && device.status === "online") ||
(statusFilter === "offline" && device.status === "offline");
return matchesSearch && matchesStatus;
return matchesStatus;
});
// 处理设备选择
@@ -110,7 +113,7 @@ export default function DeviceSelection({
placeholder={placeholder}
className="pl-10 h-14 rounded-xl border-gray-200 text-base"
readOnly
onClick={() => setDialogOpen(true)}
onClick={openDialog}
value={getDisplayText()}
/>
</div>

94
nkebao/src/components/DeviceSelectionDialog.tsx
View File

@@ -42,62 +42,74 @@ export function DeviceSelectionDialog({
const [loading, setLoading] = useState(false);
const [devices, setDevices] = useState<Device[]>([]);
// 获取设备列表
const fetchDevices = useCallback(async () => {
setLoading(true);
try {
const response = await fetchDeviceList(1, 100, searchQuery);
if (response.code === 200 && response.data) {
// 转换服务端数据格式为组件需要的格式
const convertedDevices: Device[] = response.data.list.map(
(serverDevice: ServerDevice) => ({
id: serverDevice.id.toString(),
name: serverDevice.memo || `设备 ${serverDevice.id}`,
imei: serverDevice.imei,
wxid: serverDevice.wechatId || "",
status: serverDevice.alive === 1 ? "online" : "offline",
usedInPlans: 0, // 这个字段需要从其他API获取
nickname: serverDevice.nickname || "",
})
// 获取设备列表，支持keyword
const fetchDevices = useCallback(
async (keyword: string = "") => {
setLoading(true);
try {
const response = await fetchDeviceList(
1,
100,
keyword.trim() || undefined
);
setDevices(convertedDevices);
} else {
if (response.code === 200 && response.data) {
// 转换服务端数据格式为组件需要的格式
const convertedDevices: Device[] = response.data.list.map(
(serverDevice: ServerDevice) => ({
id: serverDevice.id.toString(),
name: serverDevice.memo || `设备 ${serverDevice.id}`,
imei: serverDevice.imei,
wxid: serverDevice.wechatId || "",
status: serverDevice.alive === 1 ? "online" : "offline",
usedInPlans: 0, // 这个字段需要从其他API获取
nickname: serverDevice.nickname || "",
})
);
setDevices(convertedDevices);
} else {
toast({
title: "获取设备列表失败",
description: response.msg,
variant: "destructive",
});
}
} catch (error) {
console.error("获取设备列表失败:", error);
toast({
title: "获取设备列表失败",
description: response.msg,
description: "请检查网络连接",
variant: "destructive",
});
} finally {
setLoading(false);
}
} catch (error) {
console.error("获取设备列表失败:", error);
toast({
title: "获取设备列表失败",
description: "请检查网络连接",
variant: "destructive",
});
} finally {
setLoading(false);
}
}, [searchQuery, toast]);
},
[toast]
);
// 打开弹窗时获取设备列表
useEffect(() => {
if (open) {
fetchDevices();
fetchDevices("");
}
}, [open, searchQuery, fetchDevices]);
}, [open, fetchDevices]);
// 搜索防抖
useEffect(() => {
if (!open) return;
const timer = setTimeout(() => {
fetchDevices(searchQuery);
}, 500);
return () => clearTimeout(timer);
}, [searchQuery, open, fetchDevices]);
// 过滤设备（只保留状态过滤）
const filteredDevices = devices.filter((device) => {
const matchesSearch =
device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
device.wxid.toLowerCase().includes(searchQuery.toLowerCase());
const matchesStatus =
statusFilter === "all" ||
(statusFilter === "online" && device.status === "online") ||
(statusFilter === "offline" && device.status === "offline");
return matchesSearch && matchesStatus;
return matchesStatus;
});
const handleDeviceSelect = (deviceId: string) => {
@@ -137,7 +149,7 @@ export function DeviceSelectionDialog({
<Button
variant="outline"
size="icon"
onClick={fetchDevices}
onClick={() => fetchDevices(searchQuery)}
disabled={loading}
>
{loading ? (