/** * 任务流转卡片堆叠视图 — 与移动端 TaskSwipeCards.vue 核心逻辑完全对齐 */ import { memo, useMemo, useState } from "react"; import { GitBranch, ArrowDown, AlertTriangle, Clock, CheckCircle, Flag, FileText, X, Image, } from "lucide-react"; import type { TaskResponse, TaskRecordResponse } from "../../types/api"; import { TASK_STATUS } from "../../types/api"; import { getStatusConfig } from "../../constants/task"; import type { ModalTarget } from "./TaskTreeViewer"; // ============================================================ // 工具函数 // ============================================================ function fmtTime(d: string | null) { if (!d) return ""; const dt = new Date(d); const pad = (n: number) => String(n).padStart(2, "0"); return `${dt.getFullYear()}-${pad(dt.getMonth() + 1)}-${pad(dt.getDate())} ${pad(dt.getHours())}:${pad(dt.getMinutes())}`; } function isMainTask(t: TaskResponse): boolean { return !t.parent_task_id || t.task_type === "TRANSFER" || t.task_type === "RECOVERY" || (!t.task_type && !!t.parent_task_id); } // ============================================================ // 记录图片渲染 // ============================================================ function parseImages(imagesStr: string | null | undefined): string[] { if (!imagesStr) return []; try { return JSON.parse(imagesStr); } catch { return []; } } function imageUrl(url: string) { if (!url) return ""; if (url.startsWith("http")) return url; return import.meta.env.VITE_API_BASE_URL + (url.startsWith("/") ? url : "/" + url); } // ============================================================ // 类型 // ============================================================ interface LevelGroup { depth: number; tasks: TaskResponse[]; } // ============================================================ // 任务树解析 // ============================================================ function flattenLevels(tasks: TaskResponse[], depth: number = 0): LevelGroup[] { const result: LevelGroup[] = []; if (!tasks || tasks.length === 0) return result; result.push({ depth, tasks }); for (const t of tasks) { if (t.child_tasks && t.child_tasks.length > 0) { result.push(...flattenLevels(t.child_tasks, depth + 1)); } } return result; } function groupByDepth(levels: LevelGroup[]): Map { const map = new Map(); for (const lvl of levels) { if (!map.has(lvl.depth)) map.set(lvl.depth, []); const existing = map.get(lvl.depth)!; for (const t of lvl.tasks) { if (!existing.find((e) => e.id === t.id)) existing.push(t); } } return map; } // ============================================================ // 单张任务卡片 // ============================================================ const FlowCard = memo(function FlowCard({ task, isActive, onAction, currentUser, assigneeName, onViewRecords, }: { task: TaskResponse; isActive: boolean; onAction: (target: ModalTarget) => void; currentUser?: { username?: string; role?: string } | null; assigneeName?: string; onViewRecords?: (task: TaskResponse) => void; }) { const cfg = getStatusConfig(task.status); const dwell = calcDwell(task.received_at, task.completed_at, task.status); const isCompleted = task.status?.toUpperCase() === TASK_STATUS.COMPLETED; const isArchived = task.status?.toUpperCase() === TASK_STATUS.ARCHIVED; const isCanceled = task.status?.toUpperCase() === "CANCELED"; const main = isMainTask(task); const isOwner = !!(currentUser?.username && task.assignee_id === currentUser.username); const isManager = currentUser?.role === "SUPER_ADMIN" || currentUser?.role === "SUPERVISOR"; return (
{/* 主线/分支 角标 */}
{main ? "主分支" : "分支"}
{/* 返工/入库 */}
{task.is_rework && 返工} {task.status === "ARCHIVED" && 📦 入库}
{/* 头部 */}
{main ? "主分支" : "分支"} {task.child_tasks.length > 1 && 裂变×{task.child_tasks.length}}
{cfg.label}
{/* 任务名 */}

{task.task_name}

{/* 负责人 */}
👤 负责人 {assigneeName || task.assignee_id || "未分配"}
{/* 备注 */} {task.remark && (

📌 备注

{task.remark}

)} {/* 提交记录 — 可点击 */} {task.records && task.records.length > 0 && (
{ e.stopPropagation(); onViewRecords?.(task); }} className="mt-2 flex cursor-pointer items-center gap-1.5 rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 px-2.5 py-2 transition-colors hover:from-blue-100 hover:to-indigo-100" > 共 {task.records.length} 条提交记录 查看 ›
)} {/* 耗时 */} {dwell && (

{dwell.highlight ? ⏳ 停留: {dwell.text} : 耗时: {dwell.text}}

)} {/* 驳回原因 */} {task.reject_reason &&

驳回原因: {task.reject_reason}

} {/* 状态标记 */}
{task.received_at && 已接收} {task.completed_at && 已完工}
{/* 时间 */}

创建: {fmtTime(task.created_at)}

{task.received_at &&

接收: {fmtTime(task.received_at)}

} {task.completed_at &&

完工: {fmtTime(task.completed_at)}

}
{/* 🔧 BugFix #1: 权限严格互斥 */} {/* 本人：正常操作按钮 */} {isActive && isOwner && (
{task.status?.toUpperCase() === TASK_STATUS.PENDING && ( <> )} {task.status?.toUpperCase() === TASK_STATUS.WIP && ( <> )}
)} {/* 管理员看别人：仅干预按钮 */} {isActive && !isOwner && isManager && (

⚠ 运维干预模式

)} {/* 普通人看别人：什么按钮都没有 */} {isActive && !isOwner && !isManager && (

非当前任务责任人，无法操作

)}
); }); // ============================================================ // 记录查看弹窗 — 与移动端 records 页面样式对齐 // ============================================================ export const RecordsModal = memo(function RecordsModal({ open, task, onClose, }: { open: boolean; task: TaskResponse | null; onClose: () => void; }) { if (!open || !task) return null; const records = task.records || []; return (

提交记录

{task.task_name}

{records.length === 0 ? (
📭

暂无历史记录

) : (
{[...records].reverse().map((rec, i) => (
{/* 时间轴竖线 */}
{i < records.length - 1 &&
}
{/* 内容卡片 */}

{fmtTime(rec.created_at)}

{rec.note &&

{rec.note}

} {rec.remark &&

{rec.remark}

} {/* 图片 */} {(() => { const imgs = parseImages((rec as any).images); if (!imgs.length) return null; return (
{imgs.map((img, j) => ( window.open(imageUrl(img), "_blank")} /> ))}
); })()}
))}
)}
); }); // ============================================================ // 停留耗时 // ============================================================ function calcDwell(receivedAt: string | null, completedAt: string | null, status: string): { text: string; highlight: boolean } | null { if (!receivedAt) return null; const start = new Date(receivedAt).getTime(); const end = completedAt ? new Date(completedAt).getTime() : Date.now(); const diffMs = end - start; if (diffMs < 0) return null; const totalMin = Math.floor(diffMs / 60000); if (totalMin < 1) return { text: "< 1分钟", highlight: status === "WIP" }; if (totalMin < 60) return { text: `${totalMin}分钟`, highlight: status === "WIP" }; const hours = Math.floor(totalMin / 60); const remainMin = totalMin % 60; if (hours < 24) return { text: `${hours}小时${remainMin > 0 ? remainMin + "分钟" : ""}`, highlight: status === "WIP" }; const days = Math.floor(hours / 24); const remainHr = hours % 24; return { text: `${days}天${remainHr > 0 ? remainHr + "小时" : ""}`, highlight: status === "WIP" }; } // ============================================================ // 主视图 // ============================================================ interface TaskFlowViewProps { tasks: TaskResponse[]; onAction: (target: ModalTarget) => void; currentUser?: { username?: string; role?: string } | null; assigneeNames?: Record; } export const TaskFlowView = memo(function TaskFlowView({ tasks, onAction, currentUser, assigneeNames }: TaskFlowViewProps) { const [recordsTask, setRecordsTask] = useState(null); const depthMap = useMemo(() => { if (!tasks || tasks.length === 0) return new Map(); return groupByDepth(flattenLevels(tasks)); }, [tasks]); const depths = Array.from(depthMap.keys()).sort((a, b) => a - b); if (depths.length === 0) return null; return ( <>
{depths.map((depth) => { const levelTasks = depthMap.get(depth) || []; return (
{depth === 0 ? "顶层任务" : `第 ${depth} 层子任务`}
{levelTasks.map((task) => { const isActive = task.status?.toUpperCase() === TASK_STATUS.PENDING || task.status?.toUpperCase() === TASK_STATUS.WIP; return (
); })}
{depth < depths.length - 1 && (
)}
); })}
setRecordsTask(null)} /> ); }); export default TaskFlowView;