超管后台 - 修复React页面报错、调整获取子账号列表的请求方式、列表显示条数、颜色显示状态

This commit is contained in:
柳清爽
2025-04-24 10:52:46 +08:00
parent 16a723bcaf
commit f48c12f1ec
2 changed files with 128 additions and 73 deletions

View File

@@ -11,6 +11,7 @@ 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
@@ -112,15 +113,7 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
if (activeTab === "accounts") {
setIsSubUsersLoading(true)
try {
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/company/subusers`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
companyId: parseInt(id)
})
})
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/company/subusers?companyId=${id}`)
const data = await response.json()
if (data.code === 200) {
@@ -243,32 +236,53 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
) : 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>{device.alive === 1 ? "在线" : "离线"}</TableCell>
<TableCell>{device.wAlive === 1 ? "在线" : device.wAlive === 0 ? "离线" : "未登录微信"}</TableCell>
<TableCell className="text-right">{device.friendCount || 0}</TableCell>
<>
<Table>
<TableHeader>
<TableRow>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead>IMEI</TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead className="text-right"></TableHead>
</TableRow>
))}
</TableBody>
</Table>
</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>
@@ -286,42 +300,51 @@ export default function ProjectDetailPage({ params }: { params: { id: string } }
) : 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>{user.status === 1 ? "登录" : "禁用"}</TableCell>
<TableCell>{user.typeId === 1 ? "操盘手" : "门店顾问"}</TableCell>
<TableCell className="text-right">{user.createTime}</TableCell>
<>
<Table>
<TableHeader>
<TableRow>
<TableHead></TableHead>
<TableHead>ID</TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead className="text-right"></TableHead>
</TableRow>
))}
</TableBody>
</Table>
</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>

View File

@@ -2,6 +2,7 @@
import { useState, useEffect } from "react"
import Link from "next/link"
import { useSearchParams, useRouter, usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
@@ -32,17 +33,39 @@ interface Project {
}
export default function ProjectsPage() {
const searchParams = useSearchParams()
const router = useRouter()
const pathname = usePathname()
const [searchTerm, setSearchTerm] = useState("")
const [projects, setProjects] = useState<Project[]>([])
const [isLoading, setIsLoading] = useState(true)
const [currentPage, setCurrentPage] = useState(1)
const [currentPage, setCurrentPage] = useState(parseInt(searchParams.get("page") || "1"))
const [totalPages, setTotalPages] = useState(1)
const [pageSize, setPageSize] = useState(10)
const [pageSize, setPageSize] = useState(parseInt(searchParams.get("pageSize") || "10"))
const [totalItems, setTotalItems] = useState(0)
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
const [deletingProjectId, setDeletingProjectId] = useState<number | null>(null)
const [isDeleting, setIsDeleting] = useState(false)
// 从URL更新状态
useEffect(() => {
const page = parseInt(searchParams.get("page") || "1")
const size = parseInt(searchParams.get("pageSize") || "10")
setCurrentPage(page)
setPageSize(size)
}, [searchParams])
// 更新URL查询参数
const updateUrlParams = (page: number, size: number) => {
const params = new URLSearchParams()
params.set("page", page.toString())
params.set("pageSize", size.toString())
if (searchTerm) {
params.set("search", searchTerm)
}
router.replace(`${pathname}?${params.toString()}`)
}
// 获取项目列表
useEffect(() => {
const fetchProjects = async () => {
@@ -72,12 +95,21 @@ export default function ProjectsPage() {
}
fetchProjects()
}, [currentPage, pageSize])
// 更新URL参数
updateUrlParams(currentPage, pageSize)
}, [currentPage, pageSize, pathname])
// 处理页面大小变化
const handlePageSizeChange = (newSize: number) => {
setPageSize(newSize)
setCurrentPage(1)
updateUrlParams(1, newSize)
}
// 处理页面变化
const handlePageChange = (newPage: number) => {
setCurrentPage(newPage)
updateUrlParams(newPage, pageSize)
}
const handleDeleteClick = (projectId: number) => {
@@ -237,7 +269,7 @@ export default function ProjectsPage() {
totalPages={totalPages}
pageSize={pageSize}
totalItems={totalItems}
onPageChange={setCurrentPage}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
/>