138 lines
4.5 KiB
TypeScript
138 lines
4.5 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import { Smartphone, Wifi, WifiOff } from "lucide-react"
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import { ScrollArea } from "@/components/ui/scroll-area"
|
|
|
|
interface Device {
|
|
id: string
|
|
name: string
|
|
imei: string
|
|
status: "online" | "offline"
|
|
wechatAccount?: string
|
|
}
|
|
|
|
interface DeviceConfigDialogProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
selectedDevices: string[]
|
|
onSelect: (devices: string[]) => void
|
|
}
|
|
|
|
export function DeviceConfigDialog({ open, onOpenChange, selectedDevices, onSelect }: DeviceConfigDialogProps) {
|
|
const [devices, setDevices] = useState<Device[]>([])
|
|
const [selected, setSelected] = useState<string[]>(selectedDevices)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
loadDevices()
|
|
}
|
|
}, [open])
|
|
|
|
const loadDevices = async () => {
|
|
setLoading(true)
|
|
try {
|
|
// 模拟加载设备列表
|
|
await new Promise((resolve) => setTimeout(resolve, 500))
|
|
setDevices([
|
|
{
|
|
id: "1",
|
|
name: "设备1",
|
|
imei: "sd123123",
|
|
status: "online",
|
|
wechatAccount: "wxid_abc123",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "设备2",
|
|
imei: "sd123124",
|
|
status: "online",
|
|
wechatAccount: "wxid_xyz789",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "设备3",
|
|
imei: "sd123125",
|
|
status: "offline",
|
|
wechatAccount: "wxid_def456",
|
|
},
|
|
])
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleToggle = (deviceId: string) => {
|
|
setSelected((prev) => (prev.includes(deviceId) ? prev.filter((id) => id !== deviceId) : [...prev, deviceId]))
|
|
}
|
|
|
|
const handleConfirm = () => {
|
|
onSelect(selected)
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>选择执行设备</DialogTitle>
|
|
<DialogDescription>选择用于执行电话获客任务的设备</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
{loading ? (
|
|
<div className="py-8 text-center text-gray-500">加载设备列表中...</div>
|
|
) : (
|
|
<>
|
|
<ScrollArea className="h-[300px] pr-4">
|
|
<div className="space-y-2">
|
|
{devices.map((device) => (
|
|
<div
|
|
key={device.id}
|
|
className={`p-3 border rounded-lg ${device.status === "offline" ? "opacity-50" : ""}`}
|
|
>
|
|
<div className="flex items-start space-x-3">
|
|
<Checkbox
|
|
checked={selected.includes(device.id)}
|
|
onCheckedChange={() => handleToggle(device.id)}
|
|
disabled={device.status === "offline"}
|
|
/>
|
|
<div className="flex-1">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Smartphone className="h-4 w-4" />
|
|
<span className="font-medium">{device.name}</span>
|
|
</div>
|
|
{device.status === "online" ? (
|
|
<Wifi className="h-4 w-4 text-green-500" />
|
|
) : (
|
|
<WifiOff className="h-4 w-4 text-gray-400" />
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-1">IMEI: {device.imei}</p>
|
|
{device.wechatAccount && <p className="text-xs text-gray-500">微信: {device.wechatAccount}</p>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
<div className="flex justify-between items-center pt-4">
|
|
<p className="text-sm text-gray-500">已选择 {selected.length} 个设备</p>
|
|
<div className="space-x-2">
|
|
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
|
取消
|
|
</Button>
|
|
<Button onClick={handleConfirm}>确认</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|