feat: 本次提交更新内容如下
场景获客列表搞定
This commit is contained in:
242
Cunkebao/app/components/common/AddDeviceDialog.tsx
Normal file
242
Cunkebao/app/components/common/AddDeviceDialog.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { QrCode, Upload } from "lucide-react"
|
||||
import { DeviceType, DeviceCategory } from "@/types/device"
|
||||
import { toast } from "@/components/ui/use-toast"
|
||||
|
||||
interface AddDeviceDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
onDeviceAdded?: (device: any) => void
|
||||
}
|
||||
|
||||
export function AddDeviceDialog({ open, onOpenChange, onDeviceAdded }: AddDeviceDialogProps) {
|
||||
const [activeTab, setActiveTab] = useState("qr")
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
imei: "",
|
||||
type: DeviceType.ANDROID,
|
||||
category: DeviceCategory.ACQUISITION,
|
||||
model: "",
|
||||
remark: "",
|
||||
tags: [] as string[],
|
||||
location: "",
|
||||
operator: "",
|
||||
})
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formData.name || !formData.imei) {
|
||||
toast({
|
||||
title: "请填写必填信息",
|
||||
description: "设备名称和IMEI是必填项",
|
||||
variant: "destructive",
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
// 模拟API调用
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||
|
||||
const newDevice = {
|
||||
id: `device-${Date.now()}`,
|
||||
...formData,
|
||||
status: "offline",
|
||||
battery: 100,
|
||||
friendCount: 0,
|
||||
todayAdded: 0,
|
||||
lastActive: new Date().toLocaleString(),
|
||||
addFriendStatus: "normal",
|
||||
totalTasks: 0,
|
||||
completedTasks: 0,
|
||||
activePlans: [],
|
||||
planNames: [],
|
||||
}
|
||||
|
||||
onDeviceAdded?.(newDevice)
|
||||
toast({
|
||||
title: "设备添加成功",
|
||||
description: `设备 ${formData.name} 已成功添加`,
|
||||
})
|
||||
|
||||
// 重置表单
|
||||
setFormData({
|
||||
name: "",
|
||||
imei: "",
|
||||
type: DeviceType.ANDROID,
|
||||
category: DeviceCategory.ACQUISITION,
|
||||
model: "",
|
||||
remark: "",
|
||||
tags: [],
|
||||
location: "",
|
||||
operator: "",
|
||||
})
|
||||
|
||||
onOpenChange(false)
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "添加失败",
|
||||
description: "设备添加失败，请重试",
|
||||
variant: "destructive",
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>添加设备</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="qr">扫码添加</TabsTrigger>
|
||||
<TabsTrigger value="manual">手动添加</TabsTrigger>
|
||||
<TabsTrigger value="batch">批量导入</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="qr" className="space-y-4">
|
||||
<div className="flex flex-col items-center justify-center py-8 space-y-4">
|
||||
<div className="w-48 h-48 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||
<QrCode className="w-16 h-16 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 text-center">请使用设备扫描二维码进行添加</p>
|
||||
<Input placeholder="或输入设备ID" className="max-w-[200px]" />
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="manual" className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">设备名称 *</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
placeholder="输入设备名称"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="imei">IMEI *</Label>
|
||||
<Input
|
||||
id="imei"
|
||||
value={formData.imei}
|
||||
onChange={(e) => setFormData({ ...formData, imei: e.target.value })}
|
||||
placeholder="输入IMEI"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>设备类型</Label>
|
||||
<Select
|
||||
value={formData.type}
|
||||
onValueChange={(value) => setFormData({ ...formData, type: value as DeviceType })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={DeviceType.ANDROID}>Android</SelectItem>
|
||||
<SelectItem value={DeviceType.IOS}>iOS</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>设备分类</Label>
|
||||
<Select
|
||||
value={formData.category}
|
||||
onValueChange={(value) => setFormData({ ...formData, category: value as DeviceCategory })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={DeviceCategory.ACQUISITION}>获客设备</SelectItem>
|
||||
<SelectItem value={DeviceCategory.MAINTENANCE}>维护设备</SelectItem>
|
||||
<SelectItem value={DeviceCategory.TESTING}>测试设备</SelectItem>
|
||||
<SelectItem value={DeviceCategory.BACKUP}>备用设备</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="model">设备型号</Label>
|
||||
<Input
|
||||
id="model"
|
||||
value={formData.model}
|
||||
onChange={(e) => setFormData({ ...formData, model: e.target.value })}
|
||||
placeholder="输入设备型号"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="location">设备位置</Label>
|
||||
<Input
|
||||
id="location"
|
||||
value={formData.location}
|
||||
onChange={(e) => setFormData({ ...formData, location: e.target.value })}
|
||||
placeholder="输入设备位置"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="remark">备注</Label>
|
||||
<Textarea
|
||||
id="remark"
|
||||
value={formData.remark}
|
||||
onChange={(e) => setFormData({ ...formData, remark: e.target.value })}
|
||||
placeholder="输入备注信息"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="batch" className="space-y-4">
|
||||
<div className="flex flex-col items-center justify-center py-8 space-y-4">
|
||||
<div className="w-48 h-32 bg-gray-100 rounded-lg flex items-center justify-center border-2 border-dashed border-gray-300">
|
||||
<Upload className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 text-center">
|
||||
拖拽Excel文件到此处或点击上传
|
||||
<br />
|
||||
<a href="#" className="text-blue-500 hover:underline">
|
||||
下载模板文件
|
||||
</a>
|
||||
</p>
|
||||
<Button variant="outline">
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
选择文件
|
||||
</Button>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} disabled={loading || activeTab !== "manual"}>
|
||||
{loading ? "添加中..." : "确认添加"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user