309 lines
13 KiB
TypeScript
309 lines
13 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect } from "react"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import { Checkbox } from "@/components/ui/checkbox"
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
import { Avatar } from "@/components/ui/avatar"
|
||
import { Search, Users, Smartphone } 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
|
||
name: string
|
||
status: "online" | "offline"
|
||
avatar?: string
|
||
}
|
||
|
||
interface CustomerService {
|
||
id: string
|
||
name: string
|
||
status: "online" | "offline"
|
||
avatar?: string
|
||
}
|
||
|
||
interface TargetSettingsStepProps {
|
||
onNext: (data: any) => void
|
||
onBack: () => void
|
||
initialData?: any
|
||
}
|
||
|
||
export default function TargetSettingsStep({ onNext, onBack, initialData = {}, setDevices }: TargetSettingsStepProps & { setDevices: (ids: string[]) => void }) {
|
||
const [deviceList, setDeviceList] = useState<any[]>([])
|
||
const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>([])
|
||
const [search, setSearch] = useState("")
|
||
const [loading, setLoading] = useState(false)
|
||
const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
|
||
const [statusFilter, setStatusFilter] = useState("all")
|
||
|
||
// 账号选择相关状态
|
||
const [accountDialogOpen, setAccountDialogOpen] = useState(false)
|
||
const [accountList, setAccountList] = useState<any[]>([])
|
||
const [selectedAccountIds, setSelectedAccountIds] = useState<string[]>([])
|
||
const [accountPage, setAccountPage] = useState(1)
|
||
const [accountTotal, setAccountTotal] = useState(0)
|
||
const [accountLoading, setAccountLoading] = useState(false)
|
||
|
||
// 每次 initialData.devices 变化时，同步 selectedDeviceIds
|
||
useEffect(() => {
|
||
const ids = Array.isArray(initialData.devices) ? initialData.devices.map(String) : [];
|
||
setSelectedDeviceIds(ids);
|
||
}, [initialData.devices])
|
||
|
||
useEffect(() => {
|
||
setLoading(true)
|
||
api.get('/v1/devices?page=1&limit=100').then((res: any) => {
|
||
setDeviceList(res.data?.list || [])
|
||
}).finally(() => setLoading(false))
|
||
}, [])
|
||
|
||
// 同步初始账号
|
||
useEffect(() => {
|
||
const ids = Array.isArray(initialData.accounts) ? initialData.accounts.map(String) : [];
|
||
setSelectedAccountIds(ids);
|
||
}, [initialData.accounts])
|
||
|
||
// 拉取账号列表
|
||
useEffect(() => {
|
||
setAccountLoading(true)
|
||
api.get(`/v1/workbench/account-list?page=${accountPage}&size=10`).then((res: any) => {
|
||
setAccountList(res.data?.list || [])
|
||
setAccountTotal(res.data?.total || 0)
|
||
}).finally(() => setAccountLoading(false))
|
||
}, [accountPage])
|
||
|
||
// 账号弹窗每次打开时同步反选
|
||
useEffect(() => {
|
||
if (accountDialogOpen) {
|
||
const ids = Array.isArray(initialData.accounts) ? initialData.accounts.map(String) : [];
|
||
setSelectedAccountIds(ids);
|
||
}
|
||
}, [accountDialogOpen, initialData.accounts])
|
||
|
||
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, accounts: selectedAccountIds })
|
||
}
|
||
|
||
// 弹窗内确认选择
|
||
const handleDialogConfirm = () => {
|
||
if (typeof setDevices === 'function') {
|
||
setDevices(selectedDeviceIds)
|
||
}
|
||
setDeviceDialogOpen(false)
|
||
}
|
||
|
||
// 账号弹窗确认
|
||
const handleAccountDialogConfirm = () => {
|
||
setAccountDialogOpen(false)
|
||
}
|
||
|
||
return (
|
||
<div className="bg-white rounded-lg p-6 shadow-sm">
|
||
<h2 className="text-xl font-bold mb-6">目标设置</h2>
|
||
{/* 设备选择 */}
|
||
<div className="mb-4">
|
||
<div className="relative w-full">
|
||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
|
||
<Input
|
||
placeholder="选择设备"
|
||
value={selectedDeviceIds.length > 0 ? `已选择${selectedDeviceIds.length}个设备` : ''}
|
||
readOnly
|
||
className="pl-10 cursor-pointer"
|
||
onClick={() => setDeviceDialogOpen(true)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
{/* 账号选择 */}
|
||
<div className="mb-4">
|
||
<div className="relative w-full">
|
||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
|
||
<Input
|
||
placeholder="选择账号"
|
||
value={selectedAccountIds.length > 0 ? `已选择${selectedAccountIds.length}个账号` : ''}
|
||
readOnly
|
||
className="pl-10 cursor-pointer"
|
||
onClick={() => setAccountDialogOpen(true)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
{/* 已选账号/设备展示优化 */}
|
||
<div className="flex flex-col gap-2 mb-6">
|
||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||
<Users className="w-4 h-4 text-blue-500" />
|
||
<span>已选账号：</span>
|
||
{selectedAccountIds.length === 0 ? (
|
||
<span className="text-gray-400">未选择</span>
|
||
) : (
|
||
<span className="bg-blue-50 text-blue-600 rounded px-2 py-0.5 font-semibold">{selectedAccountIds.length} 个</span>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||
<Smartphone className="w-4 h-4 text-green-500" />
|
||
<span>已选设备：</span>
|
||
{selectedDeviceIds.length === 0 ? (
|
||
<span className="text-gray-400">未选择</span>
|
||
) : (
|
||
<span className="bg-green-50 text-green-600 rounded px-2 py-0.5 font-semibold">{selectedDeviceIds.length} 个</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="mt-10 flex justify-between">
|
||
<Button variant="outline" onClick={onBack}>← 上一步</Button>
|
||
<Button onClick={handleSubmit} disabled={selectedDeviceIds.length === 0} className="px-8 font-bold shadow-md">下一步 →</Button>
|
||
</div>
|
||
{/* 设备选择弹窗 */}
|
||
<Dialog open={deviceDialogOpen} onOpenChange={setDeviceDialogOpen}>
|
||
<DialogContent className="max-w-xl w-full p-0 rounded-2xl shadow-2xl max-h-[80vh]">
|
||
<DialogTitle className="text-lg font-bold text-center py-3 border-b">选择设备</DialogTitle>
|
||
<div className="p-6 pt-4">
|
||
{/* 搜索和筛选 */}
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<Input
|
||
placeholder="搜索设备IMEI/备注/微信号"
|
||
value={search}
|
||
onChange={e => setSearch(e.target.value)}
|
||
className="flex-1 rounded-lg border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100"
|
||
/>
|
||
<select
|
||
className="border rounded-lg px-3 py-2 text-sm bg-gray-50 focus:border-blue-500"
|
||
value={statusFilter}
|
||
onChange={e => setStatusFilter(e.target.value)}
|
||
>
|
||
<option value="all">全部状态</option>
|
||
<option value="online">在线</option>
|
||
<option value="offline">离线</option>
|
||
</select>
|
||
</div>
|
||
{/* 设备列表 */}
|
||
<div className="max-h-[500px] overflow-y-auto space-y-2">
|
||
{loading ? (
|
||
<div className="text-center text-gray-400 py-8">加载中...</div>
|
||
) : filteredDevices.length === 0 ? (
|
||
<div className="text-center text-gray-400 py-8">暂无设备</div>
|
||
) : (
|
||
filteredDevices.map(device => (
|
||
<label
|
||
key={device.id}
|
||
className={`
|
||
flex items-center gap-3 p-4 rounded-xl border
|
||
${selectedDeviceIds.includes(String(device.id)) ? "border-blue-500 bg-blue-50" : "border-gray-200 bg-white"}
|
||
hover:border-blue-400 transition-colors cursor-pointer
|
||
`}
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
className="accent-blue-500 scale-110"
|
||
checked={selectedDeviceIds.includes(String(device.id))}
|
||
onChange={() => {
|
||
setSelectedDeviceIds(prev =>
|
||
prev.includes(String(device.id))
|
||
? prev.filter(id => id !== String(device.id))
|
||
: [...prev, String(device.id)]
|
||
)
|
||
}}
|
||
/>
|
||
<div className="flex-1">
|
||
<div className="font-semibold text-base">{device.memo || device.nickname || device.name}</div>
|
||
<div className="text-xs text-gray-500">IMEI: {device.imei}</div>
|
||
<div className="text-xs text-gray-400">微信号: {device.wechatId || '--'}（{device.nickname || '--'}）</div>
|
||
</div>
|
||
<span className="flex items-center gap-1 text-xs font-medium">
|
||
<span className={`w-2 h-2 rounded-full ${device.alive === 1 ? 'bg-green-500' : 'bg-gray-300'}`}></span>
|
||
<span className={device.alive === 1 ? 'text-green-600' : 'text-gray-400'}>
|
||
{device.alive === 1 ? '在线' : '离线'}
|
||
</span>
|
||
</span>
|
||
</label>
|
||
))
|
||
)}
|
||
</div>
|
||
{/* 确认按钮 */}
|
||
<div className="flex justify-center mt-8">
|
||
<Button
|
||
className="w-4/5 py-3 rounded-full text-base font-bold shadow-md"
|
||
onClick={handleDialogConfirm}
|
||
>
|
||
确认
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
{/* 账号选择弹窗 */}
|
||
<Dialog open={accountDialogOpen} onOpenChange={setAccountDialogOpen}>
|
||
<DialogContent className="max-w-xl w-full p-0 rounded-2xl shadow-2xl max-h-[80vh]">
|
||
<DialogTitle className="text-lg font-bold text-center py-3 border-b">选择账号</DialogTitle>
|
||
<div className="p-6 pt-4">
|
||
{/* 账号列表 */}
|
||
<div className="max-h-[400px] overflow-y-auto space-y-2">
|
||
{accountLoading ? (
|
||
<div className="text-center text-gray-400 py-8">加载中...</div>
|
||
) : accountList.length === 0 ? (
|
||
<div className="text-center text-gray-400 py-8">暂无账号</div>
|
||
) : (
|
||
accountList.map(account => (
|
||
<label
|
||
key={account.id}
|
||
className={`
|
||
flex items-center gap-3 p-4 rounded-xl border
|
||
${selectedAccountIds.includes(String(account.id)) ? "border-blue-500 bg-blue-50" : "border-gray-200 bg-white"}
|
||
hover:border-blue-400 transition-colors cursor-pointer
|
||
`}
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
className="accent-blue-500 scale-110"
|
||
checked={selectedAccountIds.includes(String(account.id))}
|
||
onChange={() => {
|
||
setSelectedAccountIds(prev =>
|
||
prev.includes(String(account.id))
|
||
? prev.filter(id => id !== String(account.id))
|
||
: [...prev, String(account.id)]
|
||
)
|
||
}}
|
||
/>
|
||
<div className="flex-1">
|
||
<div className="font-semibold text-base">{account.realName || account.nickname || account.userName}</div>
|
||
<div className="text-xs text-gray-500">账号: {account.userName}</div>
|
||
<div className="text-xs text-gray-400">昵称: {account.nickname || '--'} 备注: {account.memo || '--'}</div>
|
||
</div>
|
||
</label>
|
||
))
|
||
)}
|
||
</div>
|
||
{/* 分页 */}
|
||
<div className="flex justify-center items-center gap-4 mt-4">
|
||
<Button size="sm" variant="outline" disabled={accountPage === 1} onClick={() => setAccountPage(p => Math.max(1, p - 1))}>上一页</Button>
|
||
<span className="text-sm">第 {accountPage} 页 / 共 {Math.ceil(accountTotal / 10) || 1} 页</span>
|
||
<Button size="sm" variant="outline" disabled={accountPage >= Math.ceil(accountTotal / 10)} onClick={() => setAccountPage(p => p + 1)}>下一页</Button>
|
||
</div>
|
||
{/* 确认按钮 */}
|
||
<div className="flex justify-center mt-8">
|
||
<Button
|
||
className="w-4/5 py-3 rounded-full text-base font-bold shadow-md"
|
||
onClick={handleAccountDialogConfirm}
|
||
>
|
||
确认
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
)
|
||
}
|