diff --git a/Cunkebao/app/workspace/traffic-distribution/new/components/target-settings-step.tsx b/Cunkebao/app/workspace/traffic-distribution/new/components/target-settings-step.tsx index d621f71c..f161dc4b 100644 --- a/Cunkebao/app/workspace/traffic-distribution/new/components/target-settings-step.tsx +++ b/Cunkebao/app/workspace/traffic-distribution/new/components/target-settings-step.tsx @@ -9,6 +9,8 @@ import { Avatar } from "@/components/ui/avatar" import { Search } from "lucide-react" import { Input } from "@/components/ui/input" import { api } from "@/lib/api" +import { DeviceSelectionDialog } from "@/app/components/device-selection-dialog" +import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog" interface Device { id: string @@ -30,66 +32,140 @@ interface TargetSettingsStepProps { initialData?: any } -export default function TargetSettingsStep({ onNext, onBack, initialData = {} }: TargetSettingsStepProps) { +export default function TargetSettingsStep({ onNext, onBack, initialData = {}, setDevices }: TargetSettingsStepProps & { setDevices: (ids: string[]) => void }) { const [deviceList, setDeviceList] = useState([]) - const [selectedDeviceIds, setSelectedDeviceIds] = useState(initialData.devices || []) + const [selectedDeviceIds, setSelectedDeviceIds] = useState([]) const [search, setSearch] = useState("") const [loading, setLoading] = useState(false) + const [deviceDialogOpen, setDeviceDialogOpen] = useState(false) + const [statusFilter, setStatusFilter] = useState("all") + + // 每次弹窗打开时,同步主表单的 devices(转为字符串数组) + useEffect(() => { + if (deviceDialogOpen) { + const ids = Array.isArray(initialData.devices) ? initialData.devices.map(String) : []; + setSelectedDeviceIds(ids); + } + }, [deviceDialogOpen, initialData.devices]) useEffect(() => { setLoading(true) - api.get('/v1/devices?page=1&limit=100').then(res => { + api.get('/v1/devices?page=1&limit=100').then((res: any) => { setDeviceList(res.data?.list || []) }).finally(() => setLoading(false)) }, []) - const filteredDevices = deviceList.filter(device => - (device.memo || device.nickname || "").toLowerCase().includes(search.toLowerCase()) - ) - - const toggleDevice = (id: string) => { - setSelectedDeviceIds(prev => - prev.includes(id) ? prev.filter(did => did !== id) : [...prev, id] - ) - } + const filteredDevices = deviceList.filter(device => { + const matchesSearch = + search === "" || + (device.memo || device.nickname || "").toLowerCase().includes(search.toLowerCase()) || + (device.imei || "").toLowerCase().includes(search.toLowerCase()) || + (device.wechatId || "").toLowerCase().includes(search.toLowerCase()) + const matchesStatus = statusFilter === "all" || (statusFilter === "online" ? device.alive === 1 : device.alive !== 1) + return matchesSearch && matchesStatus + }) const handleSubmit = () => { - onNext({ - devices: selectedDeviceIds, - }) + onNext({ devices: Array.isArray(initialData.devices) ? initialData.devices : [] }) + } + + // 弹窗内确认选择 + const handleDialogConfirm = () => { + if (typeof setDevices === 'function') { + setDevices(selectedDeviceIds) + } + setDeviceDialogOpen(false) } return (

目标设置

- setSearch(e.target.value)} /> +
+ + 0 ? `已选择${initialData.devices.length}个设备` : ''} + readOnly + className="pl-10 cursor-pointer" + onClick={() => setDeviceDialogOpen(true)} + /> +
- {loading ?
加载中...
: - filteredDevices.map(device => ( -
-
- -
-
{device.memo }
-
IMEI:{device.imei}
-
微信号:{device.wechatId || "--"}({device.nickname || "--"})
-
{device.alive === 1 ? "在线" : "离线"}
-
-
- toggleDevice(device.id)} - /> -
- )) - } + {Array.isArray(initialData.devices) && initialData.devices.length === 0 ? ( +
未选择设备
+ ) : ( +
已选设备:{Array.isArray(initialData.devices) ? initialData.devices.length : 0} 个
+ )}
+ {/* 设备选择弹窗 */} + + + 选择设备 +
+
+ setSearch(e.target.value)} + className="flex-1" + /> + +
+
+ {loading ? ( +
加载中...
+ ) : filteredDevices.length === 0 ? ( +
暂无设备
+ ) : ( + filteredDevices.map(device => ( + + )) + )} +
+
+ +
+
+
+
) }