364 lines
13 KiB
TypeScript
364 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import React from "react"
|
|
import { useState, useEffect } from "react"
|
|
import { useRouter } from "next/navigation"
|
|
import Link from "next/link"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
|
import { ArrowLeft, Edit } from "lucide-react"
|
|
import { toast } from "sonner"
|
|
import { use } from "react"
|
|
import Image from "next/image"
|
|
import { Badge } from "@/components/ui/badge"
|
|
|
|
interface ProjectProfile {
|
|
id: number
|
|
name: string
|
|
memo: string
|
|
companyId: number
|
|
createTime: string
|
|
account: string
|
|
phone: string | null
|
|
deviceCount: number
|
|
friendCount: number
|
|
userCount: number
|
|
}
|
|
|
|
interface Device {
|
|
id: number
|
|
memo: string
|
|
phone: string
|
|
model: string
|
|
brand: string
|
|
alive: number
|
|
deviceId: number
|
|
wechatId: string
|
|
friendCount: number
|
|
wAlive: number
|
|
imei: string
|
|
}
|
|
|
|
interface SubUser {
|
|
id: number
|
|
account: string
|
|
username: string
|
|
phone: string
|
|
avatar: string
|
|
status: number
|
|
createTime: string
|
|
typeId: number
|
|
}
|
|
|
|
interface ProjectDetailPageProps {
|
|
params: {
|
|
id: string
|
|
}
|
|
}
|
|
|
|
export default function ProjectDetailPage({ params }: ProjectDetailPageProps) {
|
|
const { id } = use(params)
|
|
const router = useRouter()
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [isDevicesLoading, setIsDevicesLoading] = useState(false)
|
|
const [isSubUsersLoading, setIsSubUsersLoading] = useState(false)
|
|
const [profile, setProfile] = useState<ProjectProfile | null>(null)
|
|
const [devices, setDevices] = useState<Device[]>([])
|
|
const [subUsers, setSubUsers] = useState<SubUser[]>([])
|
|
const [activeTab, setActiveTab] = useState("overview")
|
|
|
|
useEffect(() => {
|
|
const fetchProjectProfile = async () => {
|
|
setIsLoading(true)
|
|
try {
|
|
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/company/profile/${id}`)
|
|
const data = await response.json()
|
|
|
|
if (data.code === 200) {
|
|
setProfile(data.data)
|
|
} else {
|
|
toast.error(data.msg || "获取项目信息失败")
|
|
}
|
|
} catch (error) {
|
|
toast.error("网络错误，请稍后重试")
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchProjectProfile()
|
|
}, [id])
|
|
|
|
useEffect(() => {
|
|
const fetchDevices = async () => {
|
|
if (activeTab === "devices") {
|
|
setIsDevicesLoading(true)
|
|
try {
|
|
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/company/devices?companyId=${id}`)
|
|
const data = await response.json()
|
|
|
|
if (data.code === 200) {
|
|
setDevices(data.data)
|
|
} else {
|
|
toast.error(data.msg || "获取设备列表失败")
|
|
}
|
|
} catch (error) {
|
|
toast.error("网络错误，请稍后重试")
|
|
} finally {
|
|
setIsDevicesLoading(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
fetchDevices()
|
|
}, [activeTab, id])
|
|
|
|
useEffect(() => {
|
|
const fetchSubUsers = async () => {
|
|
if (activeTab === "accounts") {
|
|
setIsSubUsersLoading(true)
|
|
try {
|
|
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/company/subusers?companyId=${id}`)
|
|
const data = await response.json()
|
|
|
|
if (data.code === 200) {
|
|
setSubUsers(data.data)
|
|
} else {
|
|
toast.error(data.msg || "获取子账号列表失败")
|
|
}
|
|
} catch (error) {
|
|
toast.error("网络错误，请稍后重试")
|
|
} finally {
|
|
setIsSubUsersLoading(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
fetchSubUsers()
|
|
}, [activeTab, id])
|
|
|
|
if (isLoading) {
|
|
return <div className="flex items-center justify-center min-h-screen">加载中...</div>
|
|
}
|
|
|
|
if (!profile) {
|
|
return <div className="flex items-center justify-center min-h-screen">未找到项目信息</div>
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="outline" size="icon" asChild>
|
|
<Link href="/dashboard/projects">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
<h1 className="text-2xl font-bold">{profile.name}</h1>
|
|
</div>
|
|
<Button asChild>
|
|
<Link href={`/dashboard/projects/${id}/edit`}>
|
|
<Edit className="mr-2 h-4 w-4" /> 编辑项目
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
|
|
<TabsList>
|
|
<TabsTrigger value="overview">项目概览</TabsTrigger>
|
|
<TabsTrigger value="devices">关联设备</TabsTrigger>
|
|
<TabsTrigger value="accounts">子账号</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="overview" className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>基本信息</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
<div>
|
|
<dt className="text-sm font-medium text-muted-foreground">项目名称</dt>
|
|
<dd className="text-sm">{profile.name}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-muted-foreground">手机号</dt>
|
|
<dd className="text-sm">{profile.phone || "未设置"}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-muted-foreground">账号</dt>
|
|
<dd className="text-sm">{profile.account}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-sm font-medium text-muted-foreground">创建时间</dt>
|
|
<dd className="text-sm">{profile.createTime}</dd>
|
|
</div>
|
|
<div className="sm:col-span-2">
|
|
<dt className="text-sm font-medium text-muted-foreground">项目介绍</dt>
|
|
<dd className="text-sm">{profile.memo}</dd>
|
|
</div>
|
|
</dl>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">关联设备数</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{profile.deviceCount}</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">子账号数</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{profile.userCount}</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium">微信好友总数</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{profile.friendCount}</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="devices">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>关联设备列表</CardTitle>
|
|
<CardDescription>项目关联的所有设备及其微信好友数量</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isDevicesLoading ? (
|
|
<div className="flex items-center justify-center py-8">加载中...</div>
|
|
) : devices.length === 0 ? (
|
|
<div className="flex items-center justify-center py-8 text-muted-foreground">暂无数据</div>
|
|
) : (
|
|
<>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>设备名称</TableHead>
|
|
<TableHead>设备型号</TableHead>
|
|
<TableHead>品牌</TableHead>
|
|
<TableHead>IMEI</TableHead>
|
|
<TableHead>设备状态</TableHead>
|
|
<TableHead>微信状态</TableHead>
|
|
<TableHead className="text-right">微信好友数量</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{devices.map((device) => (
|
|
<TableRow key={device.id}>
|
|
<TableCell className="font-medium">{device.memo}</TableCell>
|
|
<TableCell>{device.model}</TableCell>
|
|
<TableCell>{device.brand}</TableCell>
|
|
<TableCell>{device.imei}</TableCell>
|
|
<TableCell>
|
|
<Badge variant={device.alive === 1 ? "success" : "destructive"}>
|
|
{device.alive === 1 ? "在线" : "离线"}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge
|
|
variant={
|
|
device.wAlive === 1
|
|
? "success"
|
|
: device.wAlive === 0
|
|
? "destructive"
|
|
: "secondary"
|
|
}
|
|
>
|
|
{device.wAlive === 1 ? "已登录" : device.wAlive === 0 ? "已登出" : "未登录微信"}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-right">{device.friendCount || 0}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
<div className="mt-4 text-sm text-muted-foreground">
|
|
共 {devices.length} 条数据
|
|
</div>
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="accounts">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>子账号列表</CardTitle>
|
|
<CardDescription>项目下的所有子账号</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isSubUsersLoading ? (
|
|
<div className="flex items-center justify-center py-8">加载中...</div>
|
|
) : subUsers.length === 0 ? (
|
|
<div className="flex items-center justify-center py-8 text-muted-foreground">暂无数据</div>
|
|
) : (
|
|
<>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>头像</TableHead>
|
|
<TableHead>账号ID</TableHead>
|
|
<TableHead>登录账号</TableHead>
|
|
<TableHead>昵称</TableHead>
|
|
<TableHead>手机号</TableHead>
|
|
<TableHead>状态</TableHead>
|
|
<TableHead>账号类型</TableHead>
|
|
<TableHead className="text-right">创建时间</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{subUsers.map((user) => (
|
|
<TableRow key={user.id}>
|
|
<TableCell>
|
|
<Image
|
|
src={user.avatar}
|
|
alt={user.username}
|
|
width={32}
|
|
height={32}
|
|
className="rounded-full"
|
|
/>
|
|
</TableCell>
|
|
<TableCell>{user.id}</TableCell>
|
|
<TableCell>{user.account}</TableCell>
|
|
<TableCell>{user.username}</TableCell>
|
|
<TableCell>{user.phone}</TableCell>
|
|
<TableCell>
|
|
<Badge variant={user.status === 1 ? "success" : "destructive"}>
|
|
{user.status === 1 ? "启用" : "禁用"}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>{user.typeId === 1 ? "操盘手" : "门店顾问"}</TableCell>
|
|
<TableCell className="text-right">{user.createTime}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
<div className="mt-4 text-sm text-muted-foreground">
|
|
共 {subUsers.length} 条数据
|
|
</div>
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|
|
|