超管后台 - 客户池筛选重置、处理列表重复key报错
This commit is contained in:
柳清爽
@@ -27,7 +27,7 @@ class TrafficPool extends Controller
|
||||
->join('wechat_account wa', 'tp.wechatId = wa.wechatId', 'LEFT')
|
||||
->join('wechat_tag wt', 'wa.wechatId = wt.wechatId')
|
||||
->field([
|
||||
'tp.id',
|
||||
'ts.id',
|
||||
'tp.wechatId',
|
||||
'tp.createTime as addTime',
|
||||
'ts.fromd as source',
|
||||
|
||||
@@ -13,7 +13,7 @@ import {
|
||||
DropdownMenuSeparator,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Search, MoreHorizontal, Eye, UserPlus, Filter, ChevronLeft, ChevronRight } from "lucide-react"
|
||||
import { Search, MoreHorizontal, Eye, UserPlus, Filter, ChevronLeft, ChevronRight, RefreshCw } from "lucide-react"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { getTrafficPoolList } from "@/lib/traffic-pool-api"
|
||||
@@ -126,6 +126,15 @@ export default function CustomersPage() {
|
||||
const [pageSize, setPageSize] = useState(30)
|
||||
const [jumpToPage, setJumpToPage] = useState("")
|
||||
|
||||
// 添加重置函数
|
||||
const handleReset = () => {
|
||||
setSearchTerm("")
|
||||
setSelectedRegion("")
|
||||
setSelectedGender("")
|
||||
setSelectedSource("")
|
||||
setSelectedProject("")
|
||||
}
|
||||
|
||||
// 获取客户列表数据
|
||||
useEffect(() => {
|
||||
const fetchCustomers = async () => {
|
||||
@@ -201,102 +210,105 @@ export default function CustomersPage() {
|
||||
const projects = [...new Set(customers.map((c) => c.projectName))]
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between">
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="shrink-0 flex justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold">客户池</h1>
|
||||
<Button>
|
||||
<UserPlus className="mr-2 h-4 w-4" /> 批量分发
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="搜索客户名称或微信ID..."
|
||||
className="pl-8"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<Filter className="mr-2 h-4 w-4" /> 筛选
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-[200px]">
|
||||
<div className="p-2">
|
||||
<p className="mb-2 text-sm font-medium">地区</p>
|
||||
<Select value={selectedRegion} onValueChange={setSelectedRegion}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="所有地区" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有地区</SelectItem>
|
||||
{regions.map((region) => (
|
||||
<SelectItem key={region} value={region}>
|
||||
{region}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<DropdownMenuSeparator />
|
||||
<div className="p-2">
|
||||
<p className="mb-2 text-sm font-medium">性别</p>
|
||||
<Select value={selectedGender} onValueChange={setSelectedGender}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="所有性别" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有性别</SelectItem>
|
||||
<SelectItem value="男">男</SelectItem>
|
||||
<SelectItem value="女">女</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<DropdownMenuSeparator />
|
||||
<div className="p-2">
|
||||
<p className="mb-2 text-sm font-medium">来源</p>
|
||||
<Select value={selectedSource} onValueChange={setSelectedSource}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="所有来源" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有来源</SelectItem>
|
||||
{sources.map((source) => (
|
||||
<SelectItem key={source} value={source}>
|
||||
{source}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<DropdownMenuSeparator />
|
||||
<div className="p-2">
|
||||
<p className="mb-2 text-sm font-medium">所属项目</p>
|
||||
<Select value={selectedProject} onValueChange={setSelectedProject}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="所有项目" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有项目</SelectItem>
|
||||
{projects.map((project) => (
|
||||
<SelectItem key={project} value={project}>
|
||||
{project}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<div className="shrink-0 flex items-center gap-2 mb-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="搜索客户名称或微信ID..."
|
||||
className="pl-8"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<Filter className="mr-2 h-4 w-4" /> 筛选
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-[200px]">
|
||||
<div className="p-2">
|
||||
<p className="mb-2 text-sm font-medium">地区</p>
|
||||
<Select value={selectedRegion} onValueChange={setSelectedRegion}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="所有地区" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有地区</SelectItem>
|
||||
{regions.map((region) => (
|
||||
<SelectItem key={region} value={region}>
|
||||
{region}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<DropdownMenuSeparator />
|
||||
<div className="p-2">
|
||||
<p className="mb-2 text-sm font-medium">性别</p>
|
||||
<Select value={selectedGender} onValueChange={setSelectedGender}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="所有性别" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有性别</SelectItem>
|
||||
<SelectItem value="男">男</SelectItem>
|
||||
<SelectItem value="女">女</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<DropdownMenuSeparator />
|
||||
<div className="p-2">
|
||||
<p className="mb-2 text-sm font-medium">来源</p>
|
||||
<Select value={selectedSource} onValueChange={setSelectedSource}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="所有来源" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有来源</SelectItem>
|
||||
{sources.map((source) => (
|
||||
<SelectItem key={source} value={source}>
|
||||
{source}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<DropdownMenuSeparator />
|
||||
<div className="p-2">
|
||||
<p className="mb-2 text-sm font-medium">所属项目</p>
|
||||
<Select value={selectedProject} onValueChange={setSelectedProject}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="所有项目" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有项目</SelectItem>
|
||||
{projects.map((project) => (
|
||||
<SelectItem key={project} value={project}>
|
||||
{project}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<Button variant="outline" onClick={handleReset}>
|
||||
<RefreshCw className="mr-2 h-4 w-4" /> 重置
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border">
|
||||
<div className="flex-1 min-h-0">
|
||||
<div className="h-full overflow-auto rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
@@ -396,10 +408,12 @@ export default function CustomersPage() {
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 分页控件 */}
|
||||
{!isLoading && !error && customers.length > 0 && (
|
||||
<div className="flex items-center justify-between px-2">
|
||||
</div>
|
||||
|
||||
{/* 固定在底部的分页控件 */}
|
||||
{!isLoading && !error && customers.length > 0 && (
|
||||
<div className="shrink-0 border-t py-4 px-4 bg-background">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
共 {totalItems} 条记录，当前第 {currentPage}/{totalPages} 页
|
||||
@@ -432,14 +446,12 @@ export default function CustomersPage() {
|
||||
|
||||
{/* 数字分页按钮 */}
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => {
|
||||
// 显示当前页码前后2页，以及第一页和最后一页
|
||||
const shouldShow =
|
||||
page === 1 ||
|
||||
page === totalPages ||
|
||||
(page >= currentPage - 2 && page <= currentPage + 2);
|
||||
|
||||
if (!shouldShow) {
|
||||
// 显示省略号
|
||||
if (page === currentPage - 3 || page === currentPage + 3) {
|
||||
return (
|
||||
<span key={page} className="px-2">
|
||||
@@ -496,8 +508,8 @@ export default function CustomersPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user