fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

超管后台 - 对接项目概览

Browse Source
This commit is contained in:
柳清爽
2025-04-23 13:58:31 +08:00
parent 2871140a50
commit 60a9bee200
2 changed files with 100 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
SuperAdmin/app/dashboard/projects/[id]/edit/page.tsx
View File

@@ -17,36 +17,34 @@ interface Device {
memo: string memo: string
} }
export default function EditProjectPage({ params }: { params: { id: string } }) { interface Project {
const { id } = use(params) id: number
name: string
memo: string
companyId: number
createTime: string
account: string
phone: string | null
deviceCount: number
friendCount: number
userCount: number
}
export default function EditProjectPage({ params }: { params: { id: string } }) {
const router = useRouter() const router = useRouter()
const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false)
const [isLoading, setIsLoading] = useState(true) const [isLoading, setIsLoading] = useState(true)
const [projectName, setProjectName] = useState("") const [project, setProject] = useState<Project | null>(null)
const [account, setAccount] = useState("") const { id } = use(params)
const [description, setDescription] = useState("")
const [devices, setDevices] = useState<Device[]>([])
const [phone, setPhone] = useState("")
const [nickname, setNickname] = useState("")
const [status, setStatus] = useState("1")
const [password, setPassword] = useState("")
const [confirmPassword, setConfirmPassword] = useState("")
useEffect(() => { useEffect(() => {
const fetchProjectDetail = async () => { const fetchProject = async () => {
try { try {
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/company/detail/${id}`) const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/company/detail/${id}`)
const data = await response.json() const data = await response.json()
if (data.code === 200) { if (data.code === 200) {
setProjectName(data.data.name || "") setProject(data.data)
setAccount(data.data.account || "")
setDescription(data.data.memo || "")
setDevices(data.data.devices || [])
setPhone(data.data.phone || "")
setNickname(data.data.username || "")
setStatus(data.data.status.toString())
} else { } else {
toast.error(data.msg || "获取项目信息失败") toast.error(data.msg || "获取项目信息失败")
} }
@@ -57,7 +55,7 @@ export default function EditProjectPage({ params }: { params: { id: string } })
} }
} }
fetchProjectDetail() fetchProject()
}, [id]) }, [id])
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
@@ -77,11 +75,11 @@ export default function EditProjectPage({ params }: { params: { id: string } })
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify({ body: JSON.stringify({
id: id, id: parseInt(id),
name: projectName, name: project?.name,
account, account: project?.account,
memo: description, memo: project?.memo,
phone, phone: project?.phone,
username: nickname, username: nickname,
status: parseInt(status), status: parseInt(status),
...(password && { password }) ...(password && { password })
@@ -134,8 +132,8 @@ export default function EditProjectPage({ params }: { params: { id: string } })
<Label htmlFor="projectName">项目名称</Label> <Label htmlFor="projectName">项目名称</Label>
<Input <Input
id="projectName" id="projectName"
value={projectName} value={project?.name || ""}
onChange={(e) => setProjectName(e.target.value)} onChange={(e) => setProject({ ...project, name: e.target.value })}
placeholder="请输入项目名称" placeholder="请输入项目名称"
required required
/> />
@@ -146,8 +144,8 @@ export default function EditProjectPage({ params }: { params: { id: string } })
<Label htmlFor="account">登录账号</Label> <Label htmlFor="account">登录账号</Label>
<Input <Input
id="account" id="account"
value={account} value={project?.account || ""}
onChange={(e) => setAccount(e.target.value)} onChange={(e) => setProject({ ...project, account: e.target.value })}
placeholder="请输入登录的账号" placeholder="请输入登录的账号"
required required
/> />
@@ -157,8 +155,8 @@ export default function EditProjectPage({ params }: { params: { id: string } })
<Label htmlFor="nickname">昵称</Label> <Label htmlFor="nickname">昵称</Label>
<Input <Input
id="nickname" id="nickname"
value={nickname} value={project?.username || ""}
onChange={(e) => setNickname(e.target.value)} onChange={(e) => setProject({ ...project, username: e.target.value })}
placeholder="用于账号登录后显示的用户名，可以填真实姓名" placeholder="用于账号登录后显示的用户名，可以填真实姓名"
required required
/> />
@@ -169,8 +167,8 @@ export default function EditProjectPage({ params }: { params: { id: string } })
<Input <Input
id="phone" id="phone"
type="number" type="number"
value={phone} value={project?.phone || ""}
onChange={(e) => setPhone(e.target.value)} onChange={(e) => setProject({ ...project, phone: e.target.value as string })}
placeholder="手机号可用于登录" placeholder="手机号可用于登录"
required required
/> />
@@ -180,8 +178,8 @@ export default function EditProjectPage({ params }: { params: { id: string } })
<Label htmlFor="status">状态</Label> <Label htmlFor="status">状态</Label>
<select <select
id="status" id="status"
value={status} value={project?.status.toString() || "1"}
onChange={(e) => setStatus(e.target.value)} onChange={(e) => setProject({ ...project, status: parseInt(e.target.value) })}
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
> >
<option value="1">启用</option> <option value="1">启用</option>
@@ -215,7 +213,7 @@ export default function EditProjectPage({ params }: { params: { id: string } })
<div className="space-y-2"> <div className="space-y-2">
<Label>关联设备</Label> <Label>关联设备</Label>
<div className="space-y-3"> <div className="space-y-3">
{devices.length > 0 && devices.map((device) => ( {project?.devices.length > 0 && project.devices.map((device) => (
<div key={device.id} className="flex items-center gap-2"> <div key={device.id} className="flex items-center gap-2">
<Input <Input
value={device.memo} value={device.memo}
@@ -233,8 +231,8 @@ export default function EditProjectPage({ params }: { params: { id: string } })
<Label htmlFor="description">项目介绍</Label> <Label htmlFor="description">项目介绍</Label>
<Textarea <Textarea
id="description" id="description"
value={description} value={project?.memo || ""}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setProject({ ...project, memo: e.target.value })}
placeholder="请输入项目介绍（选填）" placeholder="请输入项目介绍（选填）"
rows={4} rows={4}
/> />

102
SuperAdmin/app/dashboard/projects/[id]/page.tsx
View File

@@ -1,39 +1,63 @@
"use client" "use client"
import { useState, use } from "react" import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link" import Link from "next/link"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { ArrowLeft, Edit } from "lucide-react" import { ArrowLeft, Edit } from "lucide-react"
import { toast } from "sonner"
import { use } from "react"
// Sample project data interface ProjectProfile {
const projectData = { id: number
id: "1", name: string
name: "电商平台项目", memo: string
phone: "13800138000", companyId: number
account: "ecommerce_admin", createTime: string
description: "这是一个电商平台推广项目，主要针对年轻用户群体，通过微信社交渠道进行产品推广和销售转化。", account: string
createdAt: "2023-05-15", phone: string | null
devices: [ deviceCount: number
{ id: "d1", name: "iPhone 13 Pro", wechatFriends: 120 }, friendCount: number
{ id: "d2", name: "Huawei P40", wechatFriends: 85 }, userCount: number
{ id: "d3", name: "Samsung S21", wechatFriends: 40 },
],
subAccounts: [
{ id: "a1", username: "sales_team1", createdAt: "2023-05-16" },
{ id: "a2", username: "sales_team2", createdAt: "2023-05-16" },
{ id: "a3", username: "marketing_team", createdAt: "2023-05-17" },
{ id: "a4", username: "support_team", createdAt: "2023-05-18" },
{ id: "a5", username: "admin_assistant", createdAt: "2023-05-20" },
],
} }
export default function ProjectDetailPage({ params }: { params: { id: string } }) { export default function ProjectDetailPage({ params }: { params: { id: string } }) {
const router = useRouter()
const [isLoading, setIsLoading] = useState(true)
const [profile, setProfile] = useState<ProjectProfile | null>(null)
const { id } = use(params) const { id } = use(params)
const [activeTab, setActiveTab] = useState("overview") useEffect(() => {
const fetchProjectProfile = async () => {
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])
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 ( return (
<div className="space-y-6"> <div className="space-y-6">
@@ -44,7 +68,7 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
</Link> </Link>
</Button> </Button>
<h1 className="text-2xl font-bold">{projectData.name}</h1> <h1 className="text-2xl font-bold">{profile.name}</h1>
</div> </div>
<Button asChild> <Button asChild>
<Link href={`/dashboard/projects/${id}/edit`}> <Link href={`/dashboard/projects/${id}/edit`}>
@@ -53,7 +77,7 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
</Button> </Button>
</div> </div>
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4"> <Tabs value="overview" className="space-y-4">
<TabsList> <TabsList>
<TabsTrigger value="overview">项目概览</TabsTrigger> <TabsTrigger value="overview">项目概览</TabsTrigger>
<TabsTrigger value="devices">关联设备</TabsTrigger> <TabsTrigger value="devices">关联设备</TabsTrigger>
@@ -69,23 +93,23 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
<dl className="grid grid-cols-1 gap-4 sm:grid-cols-2"> <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div> <div>
<dt className="text-sm font-medium text-muted-foreground">项目名称</dt> <dt className="text-sm font-medium text-muted-foreground">项目名称</dt>
<dd className="text-sm">{projectData.name}</dd> <dd className="text-sm">{profile.name}</dd>
</div> </div>
<div> <div>
<dt className="text-sm font-medium text-muted-foreground">手机号</dt> <dt className="text-sm font-medium text-muted-foreground">手机号</dt>
<dd className="text-sm">{projectData.phone}</dd> <dd className="text-sm">{profile.phone || "未设置"}</dd>
</div> </div>
<div> <div>
<dt className="text-sm font-medium text-muted-foreground">账号</dt> <dt className="text-sm font-medium text-muted-foreground">账号</dt>
<dd className="text-sm">{projectData.account}</dd> <dd className="text-sm">{profile.account}</dd>
</div> </div>
<div> <div>
<dt className="text-sm font-medium text-muted-foreground">创建时间</dt> <dt className="text-sm font-medium text-muted-foreground">创建时间</dt>
<dd className="text-sm">{projectData.createdAt}</dd> <dd className="text-sm">{profile.createTime}</dd>
</div> </div>
<div className="sm:col-span-2"> <div className="sm:col-span-2">
<dt className="text-sm font-medium text-muted-foreground">项目介绍</dt> <dt className="text-sm font-medium text-muted-foreground">项目介绍</dt>
<dd className="text-sm">{projectData.description}</dd> <dd className="text-sm">{profile.memo}</dd>
</div> </div>
</dl> </dl>
</CardContent> </CardContent>
@@ -97,7 +121,7 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
<CardTitle className="text-sm font-medium">关联设备数</CardTitle> <CardTitle className="text-sm font-medium">关联设备数</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold">{projectData.devices.length}</div> <div className="text-2xl font-bold">{profile.deviceCount}</div>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
@@ -105,7 +129,7 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
<CardTitle className="text-sm font-medium">子账号数</CardTitle> <CardTitle className="text-sm font-medium">子账号数</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold">{projectData.subAccounts.length}</div> <div className="text-2xl font-bold">{profile.userCount}</div>
</CardContent> </CardContent>
</Card> </Card>
<Card> <Card>
@@ -113,9 +137,7 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
<CardTitle className="text-sm font-medium">微信好友总数</CardTitle> <CardTitle className="text-sm font-medium">微信好友总数</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold"> <div className="text-2xl font-bold">{profile.friendCount}</div>
{projectData.devices.reduce((sum, device) => sum + device.wechatFriends, 0)}
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@@ -136,12 +158,14 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{projectData.devices.map((device) => ( {/* Assuming devices are fetched from the profile */}
{/* Replace with actual devices data */}
{/* {profile.devices.map((device) => (
<TableRow key={device.id}> <TableRow key={device.id}>
<TableCell className="font-medium">{device.name}</TableCell> <TableCell className="font-medium">{device.name}</TableCell>
<TableCell className="text-right">{device.wechatFriends}</TableCell> <TableCell className="text-right">{device.wechatFriends}</TableCell>
</TableRow> </TableRow>
))} ))} */}
</TableBody> </TableBody>
</Table> </Table>
</CardContent> </CardContent>
@@ -163,12 +187,14 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{projectData.subAccounts.map((account) => ( {/* Assuming subAccounts are fetched from the profile */}
{/* Replace with actual subAccounts data */}
{/* {profile.subAccounts.map((account) => (
<TableRow key={account.id}> <TableRow key={account.id}>
<TableCell className="font-medium">{account.username}</TableCell> <TableCell className="font-medium">{account.username}</TableCell>
<TableCell className="text-right">{account.createdAt}</TableCell> <TableCell className="text-right">{account.createdAt}</TableCell>
</TableRow> </TableRow>
))} ))} */}
</TableBody> </TableBody>
</Table> </Table>
</CardContent> </CardContent>