duxingchen/track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 任务全景默认按设备分组+全展开+全部展开/折叠按钮(与产品管理一致)

Browse Source
This commit is contained in:
duxingchen
2026-08-10 11:47:03 +08:00
parent 34724e478c
commit 5d6e2135c0
1 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/pages/admin/AdminTasksPage.tsx
View File

@ -39,7 +39,7 @@ export default function AdminTasksPage() {
// 搜索 & 筛选
const [keyword, setKeyword] = useState("");
const [statusFilter, setStatusFilter] = useState("");
const [groupBy, setGroupBy] = useState<"order" | "device">("order"); // 🔧 分组维度
const [groupBy, setGroupBy] = useState<"order" | "device">("device");
const [products, setProducts] = useState<ProductResponse[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
@ -76,7 +76,6 @@ export default function AdminTasksPage() {
function handleSearch(e?: React.FormEvent) {
e?.preventDefault();
setExpandedOrders(new Set());
setExpandedProducts(new Set());
setTaskTrees({});
loadProducts(keyword);
@ -107,6 +106,11 @@ export default function AdminTasksPage() {
}));
}, [products, statusFilter, groupBy]);
// 🔧 默认全部展开
useEffect(() => {
setExpandedOrders(new Set(orderGroups.map(g => g.orderNo)));
}, [orderGroups]);
// ---- 手风琴切换 ----
function toggleOrder(orderNo: string) {
setExpandedOrders((prev) => {
@ -231,14 +235,22 @@ export default function AdminTasksPage() {
{/* ---- 搜索 + 筛选 ---- */}
<div className="mb-6 rounded-xl bg-white p-4 shadow-sm">
<div className="mb-3 flex items-center gap-2">
<span className="text-xs text-gray-400">分组:</span>
{(["order", "device"] as const).map(m => (
<button key={m} onClick={() => setGroupBy(m)}
className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${groupBy === m ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-500 hover:bg-gray-200"}`}>
{m === "order" ? "按订单" : "按设备"}
</button>
))}
<div className="mb-3 flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="text-xs text-gray-400">分组:</span>
{(["order", "device"] as const).map(m => (
<button key={m} onClick={() => setGroupBy(m)}
className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${groupBy === m ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-500 hover:bg-gray-200"}`}>
{m === "order" ? "按订单" : "按设备"}
</button>
))}
</div>
<div className="flex gap-1">
<button onClick={() => setExpandedOrders(new Set(orderGroups.map(g => g.orderNo)))}
className="rounded px-2 py-1 text-[11px] text-blue-600 hover:bg-blue-50">全部展开</button>
<button onClick={() => setExpandedOrders(new Set())}
className="rounded px-2 py-1 text-[11px] text-gray-400 hover:bg-gray-100">全部折叠</button>
</div>
</div>
<form onSubmit={handleSearch} className="flex items-center gap-2">
<div className="relative flex-1 max-w-xl">