diff --git a/frontend/src/pages/admin/AdminTasksPage.tsx b/frontend/src/pages/admin/AdminTasksPage.tsx index a0ba437..d7d5a92 100644 --- a/frontend/src/pages/admin/AdminTasksPage.tsx +++ b/frontend/src/pages/admin/AdminTasksPage.tsx @@ -3,7 +3,7 @@ import { useState, useEffect, useMemo, useCallback } from "react"; import { useSearchParams } from "react-router-dom"; import { Search, Loader2, Package, ChevronDown, ChevronRight, - Warehouse, GitBranch, X, ArrowUp, ArrowDown, ArrowUpDown, Filter, + Warehouse, GitBranch, X, ArrowUp, ArrowDown, ArrowUpDown, Filter, Columns, } from "lucide-react"; import { Tooltip, Popover, Checkbox, Input } from "antd"; import api from "../../services/api"; @@ -185,8 +185,6 @@ export default function AdminTasksPage() { }, ]; - const TOTAL_SPAN = columns.reduce((s, c) => s + c.colSpan, 0); - // ---- 列顺序 / 行排序 / 列筛选状态 ---- const [columnOrder, setColumnOrder] = useState(() => columns.map((c) => c.key)); const [sort, setSort] = useState<{ key: string; order: SortOrder } | null>(null); @@ -194,6 +192,8 @@ export default function AdminTasksPage() { const [enumFilters, setEnumFilters] = useState>>({}); const [dragCol, setDragCol] = useState(null); const [dragOverCol, setDragOverCol] = useState(null); + // 🔧 列显隐:默认全部显示,勾选取消的列从表格中去掉(操作列始终显示) + const [hiddenColumns, setHiddenColumns] = useState>(new Set()); // 从看板跳转: ?sn=xxx → 自动搜索 + 自动展开流转树 const autoSn = searchParams.get("sn") || ""; @@ -308,6 +308,15 @@ export default function AdminTasksPage() { }); } + // ---- 列显隐:勾选=显示,取消=隐藏(操作列始终显示) ---- + function toggleColumnVisible(key: string) { + setHiddenColumns((prev) => { + const next = new Set(prev); + if (next.has(key)) next.delete(key); else next.add(key); + return next; + }); + } + // ---- 枚举列多选筛选 ---- function toggleEnumFilter(key: string, value: string) { setEnumFilters((prev) => { @@ -450,6 +459,29 @@ export default function AdminTasksPage() { .map((key) => columns.find((c) => c.key === key)) .filter((c): c is ColumnDef => !!c); + // 🔧 实际显示的列(排除被隐藏的)+ 动态总跨度 + const visibleColumns = orderedColumns.filter((c) => !hiddenColumns.has(c.key)); + const visibleSpan = visibleColumns.reduce((s, c) => s + c.colSpan, 0); + + // 列设置面板内容(列显隐) + function renderColumnPanel() { + const toggleable = columns.filter((c) => c.key !== "actions"); + return ( +
+ {toggleable.map((col) => ( + + ))} +
+ + 操作列固定 +
+
+ ); + } + // 列筛选面板内容 function renderFilterPanel(col: ColumnDef) { if (col.filterType === "text") { @@ -505,7 +537,12 @@ export default function AdminTasksPage() { ))} -
+
+ + +