953 lines
30 KiB
TypeScript
953 lines
30 KiB
TypeScript
|
import { useState, useCallback } from "react";
|
|||
|
|
import {
|
|||
|
|
Search,
|
|||
|
|
Loader2,
|
|||
|
|
AlertCircle,
|
|||
|
|
GitBranch,
|
|||
|
|
RefreshCw,
|
|||
|
|
X,
|
|||
|
|
Plus,
|
|||
|
|
Warehouse,
|
|||
|
|
UserPlus,
|
|||
|
|
} from "lucide-react";
|
|||
|
|
import {
|
|||
|
|
getTaskTree,
|
|||
|
|
receiveTask,
|
|||
|
|
rejectTask,
|
|||
|
|
transferTask,
|
|||
|
|
} from "../../services/taskApi";
|
|||
|
|
import { useToast } from "../ui/Toast";
|
|||
|
|
import type { ProductScanResponse, TaskResponse, TaskStatus } from "../../types/api";
|
|||
|
|
import { TASK_STATUS } from "../../types/api";
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 状态 → 颜色/标签映射
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
const STATUS_CONFIG: Record<
|
|||
|
|
string,
|
|||
|
|
{ bg: string; text: string; ring: string; label: string }
|
|||
|
|
> = {
|
|||
|
|
[TASK_STATUS.PENDING]: {
|
|||
|
|
bg: "bg-yellow-50",
|
|||
|
|
text: "text-yellow-700",
|
|||
|
|
ring: "ring-yellow-400",
|
|||
|
|
label: "待接收",
|
|||
|
|
},
|
|||
|
|
[TASK_STATUS.WIP]: {
|
|||
|
|
bg: "bg-blue-50",
|
|||
|
|
text: "text-blue-700",
|
|||
|
|
ring: "ring-blue-400",
|
|||
|
|
label: "进行中",
|
|||
|
|
},
|
|||
|
|
[TASK_STATUS.COMPLETED]: {
|
|||
|
|
bg: "bg-green-50",
|
|||
|
|
text: "text-green-700",
|
|||
|
|
ring: "ring-green-400",
|
|||
|
|
label: "已完成",
|
|||
|
|
},
|
|||
|
|
[TASK_STATUS.REJECTED]: {
|
|||
|
|
bg: "bg-red-50",
|
|||
|
|
text: "text-red-700",
|
|||
|
|
ring: "ring-red-400",
|
|||
|
|
label: "已驳回",
|
|||
|
|
},
|
|||
|
|
[TASK_STATUS.ARCHIVED]: {
|
|||
|
|
bg: "bg-gray-50",
|
|||
|
|
text: "text-gray-600",
|
|||
|
|
ring: "ring-gray-300",
|
|||
|
|
label: "已入库",
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function getStatusConfig(status: string) {
|
|||
|
|
return (
|
|||
|
|
STATUS_CONFIG[status] ?? {
|
|||
|
|
bg: "bg-gray-50",
|
|||
|
|
text: "text-gray-600",
|
|||
|
|
ring: "ring-gray-300",
|
|||
|
|
label: status,
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 通用 Modal 容器
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
function Modal({
|
|||
|
|
open,
|
|||
|
|
onClose,
|
|||
|
|
title,
|
|||
|
|
children,
|
|||
|
|
}: {
|
|||
|
|
open: boolean;
|
|||
|
|
onClose: () => void;
|
|||
|
|
title: string;
|
|||
|
|
children: React.ReactNode;
|
|||
|
|
}) {
|
|||
|
|
if (!open) return null;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|||
|
|
{/* 遮罩 */}
|
|||
|
|
<div
|
|||
|
|
className="absolute inset-0 bg-black/40 backdrop-blur-sm"
|
|||
|
|
onClick={onClose}
|
|||
|
|
/>
|
|||
|
|
{/* 弹窗 */}
|
|||
|
|
<div className="relative z-10 mx-4 w-full max-w-md rounded-xl bg-white p-6 shadow-2xl">
|
|||
|
|
<div className="mb-4 flex items-center justify-between">
|
|||
|
|
<h3 className="text-base font-bold text-gray-800">{title}</h3>
|
|||
|
|
<button
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="rounded-lg p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
|
|||
|
|
>
|
|||
|
|
<X className="h-4 w-4" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
{children}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 确认接收弹窗
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
function ReceiveConfirmModal({
|
|||
|
|
open,
|
|||
|
|
task,
|
|||
|
|
submitting,
|
|||
|
|
onClose,
|
|||
|
|
onConfirm,
|
|||
|
|
}: {
|
|||
|
|
open: boolean;
|
|||
|
|
task: TaskResponse | null;
|
|||
|
|
submitting: boolean;
|
|||
|
|
onClose: () => void;
|
|||
|
|
onConfirm: () => void;
|
|||
|
|
}) {
|
|||
|
|
if (!task) return null;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Modal open={open} onClose={onClose} title="确认接收任务">
|
|||
|
|
<div className="mb-6 rounded-lg bg-blue-50 px-3 py-2.5 text-sm text-blue-700">
|
|||
|
|
<p className="font-medium">{task.task_name}</p>
|
|||
|
|
<p className="mt-0.5 text-xs text-blue-500">
|
|||
|
|
当前状态: {getStatusConfig(task.status).label}
|
|||
|
|
{" → "}
|
|||
|
|
<span className="font-semibold">进行中 (WIP)</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<p className="mb-6 text-sm text-gray-500">
|
|||
|
|
确认接收后，该任务将标记为"进行中"，系统将记录接收时间。
|
|||
|
|
</p>
|
|||
|
|
<div className="flex justify-end gap-2">
|
|||
|
|
<button
|
|||
|
|
onClick={onClose}
|
|||
|
|
disabled={submitting}
|
|||
|
|
className="rounded-lg border border-gray-200 px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
取消
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={onConfirm}
|
|||
|
|
disabled={submitting}
|
|||
|
|
className="flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{submitting && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
|
|||
|
|
确认接收
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</Modal>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 品质驳回弹窗
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
function RejectModal({
|
|||
|
|
open,
|
|||
|
|
task,
|
|||
|
|
submitting,
|
|||
|
|
onClose,
|
|||
|
|
onSubmit,
|
|||
|
|
}: {
|
|||
|
|
open: boolean;
|
|||
|
|
task: TaskResponse | null;
|
|||
|
|
submitting: boolean;
|
|||
|
|
onClose: () => void;
|
|||
|
|
onSubmit: (reason: string) => void;
|
|||
|
|
}) {
|
|||
|
|
const [reason, setReason] = useState("");
|
|||
|
|
|
|||
|
|
if (!task) return null;
|
|||
|
|
|
|||
|
|
function handleSubmit(e: React.FormEvent) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
const trimmed = reason.trim();
|
|||
|
|
if (!trimmed) return;
|
|||
|
|
onSubmit(trimmed);
|
|||
|
|
setReason("");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleClose() {
|
|||
|
|
setReason("");
|
|||
|
|
onClose();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Modal open={open} onClose={handleClose} title="品质驳回">
|
|||
|
|
<div className="mb-4 rounded-lg bg-red-50 px-3 py-2.5 text-sm text-red-700">
|
|||
|
|
<p className="font-medium">{task.task_name}</p>
|
|||
|
|
<p className="mt-0.5 text-xs text-red-500">
|
|||
|
|
⚠ 驳回后将自动生成返工任务，分配给上一道工序负责人
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<form onSubmit={handleSubmit}>
|
|||
|
|
<label className="mb-1 block text-sm font-medium text-gray-700">
|
|||
|
|
驳回原因 <span className="text-red-500">*</span>
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
value={reason}
|
|||
|
|
onChange={(e) => setReason(e.target.value)}
|
|||
|
|
placeholder="请详细说明品质驳回的原因（必填）"
|
|||
|
|
rows={3}
|
|||
|
|
maxLength={500}
|
|||
|
|
className="mb-4 w-full resize-none rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-red-400 focus:outline-none focus:ring-2 focus:ring-red-100"
|
|||
|
|
autoFocus
|
|||
|
|
/>
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<span className="text-xs text-gray-400">{reason.length}/500</span>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleClose}
|
|||
|
|
disabled={submitting}
|
|||
|
|
className="rounded-lg border border-gray-200 px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
取消
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
disabled={submitting || !reason.trim()}
|
|||
|
|
className="flex items-center gap-1.5 rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{submitting && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
|
|||
|
|
确认驳回
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</Modal>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 完工裂变转交弹窗
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
function TransferModal({
|
|||
|
|
open,
|
|||
|
|
task,
|
|||
|
|
submitting,
|
|||
|
|
onClose,
|
|||
|
|
onSubmit,
|
|||
|
|
}: {
|
|||
|
|
open: boolean;
|
|||
|
|
task: TaskResponse | null;
|
|||
|
|
submitting: boolean;
|
|||
|
|
onClose: () => void;
|
|||
|
|
onSubmit: (nextTaskName: string, assignees: string[], note: string) => void;
|
|||
|
|
}) {
|
|||
|
|
const [nextTaskName, setNextTaskName] = useState("");
|
|||
|
|
const [assigneeInput, setAssigneeInput] = useState("");
|
|||
|
|
const [assignees, setAssignees] = useState<string[]>([]);
|
|||
|
|
const [useWarehouse, setUseWarehouse] = useState(false);
|
|||
|
|
const [note, setNote] = useState("");
|
|||
|
|
|
|||
|
|
if (!task) return null;
|
|||
|
|
|
|||
|
|
function handleAddAssignee() {
|
|||
|
|
const trimmed = assigneeInput.trim();
|
|||
|
|
if (!trimmed) return;
|
|||
|
|
if (assignees.includes(trimmed)) {
|
|||
|
|
setAssigneeInput("");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setAssignees((prev) => [...prev, trimmed]);
|
|||
|
|
setAssigneeInput("");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleRemoveAssignee(id: string) {
|
|||
|
|
setAssignees((prev) => prev.filter((a) => a !== id));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleAssigneeKeyDown(e: React.KeyboardEvent) {
|
|||
|
|
if (e.key === "Enter") {
|
|||
|
|
e.preventDefault();
|
|||
|
|
handleAddAssignee();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleSubmit(e: React.FormEvent) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
const name = nextTaskName.trim();
|
|||
|
|
if (!name) return;
|
|||
|
|
|
|||
|
|
const finalAssignees = [...assignees];
|
|||
|
|
if (useWarehouse) {
|
|||
|
|
finalAssignees.push("virtual_warehouse");
|
|||
|
|
}
|
|||
|
|
if (finalAssignees.length === 0) return;
|
|||
|
|
|
|||
|
|
onSubmit(name, finalAssignees, note.trim());
|
|||
|
|
// 重置表单
|
|||
|
|
setNextTaskName("");
|
|||
|
|
setAssignees([]);
|
|||
|
|
setAssigneeInput("");
|
|||
|
|
setUseWarehouse(false);
|
|||
|
|
setNote("");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleClose() {
|
|||
|
|
setNextTaskName("");
|
|||
|
|
setAssignees([]);
|
|||
|
|
setAssigneeInput("");
|
|||
|
|
setUseWarehouse(false);
|
|||
|
|
setNote("");
|
|||
|
|
onClose();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const allAssignees = [
|
|||
|
|
...assignees,
|
|||
|
|
...(useWarehouse ? ["virtual_warehouse"] : []),
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Modal open={open} onClose={handleClose} title="完工转交 — 裂变到下道工序">
|
|||
|
|
<div className="mb-4 rounded-lg bg-green-50 px-3 py-2.5 text-sm text-green-700">
|
|||
|
|
<p className="font-medium">{task.task_name}</p>
|
|||
|
|
<p className="mt-0.5 text-xs text-green-500">
|
|||
|
|
完成任务并批量创建下一道工序任务，支持多路裂变分支
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|||
|
|
{/* 下道工序名称 */}
|
|||
|
|
<div>
|
|||
|
|
<label className="mb-1 block text-sm font-medium text-gray-700">
|
|||
|
|
下一道工序名称 <span className="text-red-500">*</span>
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={nextTaskName}
|
|||
|
|
onChange={(e) => setNextTaskName(e.target.value)}
|
|||
|
|
placeholder="如：组装、质检、包装"
|
|||
|
|
maxLength={200}
|
|||
|
|
className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-100"
|
|||
|
|
autoFocus
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 接收人（多选） */}
|
|||
|
|
<div>
|
|||
|
|
<label className="mb-1 flex items-center gap-1 text-sm font-medium text-gray-700">
|
|||
|
|
<UserPlus className="h-3.5 w-3.5" />
|
|||
|
|
下一道工序接收人 <span className="text-red-500">*</span>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
{/* 已添加的接收人标签 */}
|
|||
|
|
{allAssignees.length > 0 && (
|
|||
|
|
<div className="mb-2 flex flex-wrap gap-1.5">
|
|||
|
|
{allAssignees.map((a) => (
|
|||
|
|
<span
|
|||
|
|
key={a}
|
|||
|
|
className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium ${
|
|||
|
|
a === "virtual_warehouse"
|
|||
|
|
? "bg-purple-100 text-purple-700"
|
|||
|
|
: "bg-blue-100 text-blue-700"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{a === "virtual_warehouse" ? (
|
|||
|
|
<Warehouse className="h-3 w-3" />
|
|||
|
|
) : null}
|
|||
|
|
{a === "virtual_warehouse" ? "仓库" : a}
|
|||
|
|
{a !== "virtual_warehouse" && (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => handleRemoveAssignee(a)}
|
|||
|
|
className="ml-0.5 rounded-full p-0.5 hover:bg-blue-200"
|
|||
|
|
>
|
|||
|
|
<X className="h-2.5 w-2.5" />
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</span>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 输入 + 添加按钮 */}
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={assigneeInput}
|
|||
|
|
onChange={(e) => setAssigneeInput(e.target.value)}
|
|||
|
|
onKeyDown={handleAssigneeKeyDown}
|
|||
|
|
placeholder="输入接收人 ID，按 Enter 添加"
|
|||
|
|
maxLength={64}
|
|||
|
|
className="flex-1 rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-100"
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleAddAssignee}
|
|||
|
|
disabled={!assigneeInput.trim()}
|
|||
|
|
className="flex items-center gap-1 rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 disabled:opacity-40"
|
|||
|
|
>
|
|||
|
|
<Plus className="h-3.5 w-3.5" />
|
|||
|
|
添加
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 虚拟入库 */}
|
|||
|
|
<label className="flex items-center gap-2 cursor-pointer select-none">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
checked={useWarehouse}
|
|||
|
|
onChange={(e) => setUseWarehouse(e.target.checked)}
|
|||
|
|
className="h-4 w-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
|
|||
|
|
/>
|
|||
|
|
<Warehouse className="h-4 w-4 text-purple-500" />
|
|||
|
|
<span className="text-sm text-gray-700">
|
|||
|
|
同时入库（产品 current_location → virtual_warehouse）
|
|||
|
|
</span>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
{/* 备注 */}
|
|||
|
|
<div>
|
|||
|
|
<label className="mb-1 block text-sm font-medium text-gray-700">
|
|||
|
|
交接备注 <span className="text-gray-400 font-normal">(可选)</span>
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
value={note}
|
|||
|
|
onChange={(e) => setNote(e.target.value)}
|
|||
|
|
placeholder="转交附言、注意事项等"
|
|||
|
|
rows={2}
|
|||
|
|
className="w-full resize-none rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-100"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 预览 */}
|
|||
|
|
{allAssignees.length > 0 && nextTaskName.trim() && (
|
|||
|
|
<div className="rounded-lg bg-gray-50 px-3 py-2.5 text-xs text-gray-500">
|
|||
|
|
<p className="font-medium text-gray-600">裂变预览：</p>
|
|||
|
|
<p className="mt-1">
|
|||
|
|
将创建 <span className="font-semibold text-gray-700">
|
|||
|
|
{allAssignees.length}
|
|||
|
|
</span>{" "}
|
|||
|
|
个「
|
|||
|
|
<span className="font-semibold text-gray-700">
|
|||
|
|
{nextTaskName.trim()}
|
|||
|
|
</span>
|
|||
|
|
」任务
|
|||
|
|
{allAssignees.length > 1 && (
|
|||
|
|
<span className="text-purple-600">
|
|||
|
|
{" "}
|
|||
|
|
— 触发裂变，父任务为当前任务
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</p>
|
|||
|
|
<p className="mt-0.5">
|
|||
|
|
接收人:{" "}
|
|||
|
|
{allAssignees
|
|||
|
|
.map((a) => (a === "virtual_warehouse" ? "仓库" : a))
|
|||
|
|
.join(", ")}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 按钮 */}
|
|||
|
|
<div className="flex justify-end gap-2 pt-2">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleClose}
|
|||
|
|
disabled={submitting}
|
|||
|
|
className="rounded-lg border border-gray-200 px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
取消
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
disabled={
|
|||
|
|
submitting ||
|
|||
|
|
!nextTaskName.trim() ||
|
|||
|
|
allAssignees.length === 0
|
|||
|
|
}
|
|||
|
|
className="flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{submitting && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
|
|||
|
|
确认转交
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</Modal>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 单个任务节点卡片
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
interface ModalTarget {
|
|||
|
|
task: TaskResponse;
|
|||
|
|
action: "receive" | "reject" | "transfer";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function TaskNodeCard({
|
|||
|
|
task,
|
|||
|
|
isLast,
|
|||
|
|
onAction,
|
|||
|
|
}: {
|
|||
|
|
task: TaskResponse;
|
|||
|
|
isLast: boolean;
|
|||
|
|
onAction: (target: ModalTarget) => void;
|
|||
|
|
}) {
|
|||
|
|
const { bg, text, ring, label } = getStatusConfig(task.status);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="relative">
|
|||
|
|
{/* 树形连接线 */}
|
|||
|
|
{task.child_tasks.length > 0 && (
|
|||
|
|
<>
|
|||
|
|
<div
|
|||
|
|
className="absolute left-4 top-full z-0 w-px bg-gray-200"
|
|||
|
|
style={{ height: "calc(100% - 2rem)" }}
|
|||
|
|
/>
|
|||
|
|
{task.child_tasks.length > 1 && (
|
|||
|
|
<div
|
|||
|
|
className="absolute left-4 z-0 h-px bg-gray-200"
|
|||
|
|
style={{
|
|||
|
|
top: "calc(100% + 1rem)",
|
|||
|
|
width: "calc(50% - 1rem)",
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 卡片本体 */}
|
|||
|
|
<div
|
|||
|
|
className={`relative z-10 mb-1 rounded-lg border bg-white px-3 py-2.5 shadow-sm transition-shadow hover:shadow-md ${ring} ${
|
|||
|
|
task.is_rework ? "ring-2 ring-red-500" : ""
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<div className="flex items-start justify-between gap-2">
|
|||
|
|
{/* 左侧：任务名 + 标签 */}
|
|||
|
|
<div className="min-w-0 flex-1">
|
|||
|
|
<div className="flex items-center gap-1.5 flex-wrap">
|
|||
|
|
{task.is_rework && (
|
|||
|
|
<span className="inline-flex shrink-0 items-center gap-0.5 rounded bg-red-600 px-1.5 py-0.5 text-[10px] font-bold text-white animate-pulse">
|
|||
|
|
⚠ 返工
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
{task.child_tasks.length > 1 && (
|
|||
|
|
<span className="inline-flex shrink-0 items-center gap-0.5 rounded bg-purple-100 px-1.5 py-0.5 text-[10px] font-medium text-purple-700">
|
|||
|
|
<GitBranch className="h-2.5 w-2.5" />
|
|||
|
|
裂变×{task.child_tasks.length}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
<span className="truncate text-sm font-semibold text-gray-800">
|
|||
|
|
{task.task_name}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="mt-1 flex items-center gap-2 text-[11px] text-gray-400">
|
|||
|
|
{task.assignee_id && <span>负责人: {task.assignee_id}</span>}
|
|||
|
|
{task.received_at && (
|
|||
|
|
<span>
|
|||
|
|
接收: {new Date(task.received_at).toLocaleDateString("zh-CN")}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
{task.completed_at && (
|
|||
|
|
<span>
|
|||
|
|
完成:{" "}
|
|||
|
|
{new Date(task.completed_at).toLocaleDateString("zh-CN")}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{task.reject_reason && (
|
|||
|
|
<p className="mt-1 text-[11px] text-red-500">
|
|||
|
|
驳回原因: {task.reject_reason}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 右侧：状态标签 + 操作按钮 */}
|
|||
|
|
<div className="flex shrink-0 flex-col items-end gap-1">
|
|||
|
|
<span
|
|||
|
|
className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium ${bg} ${text}`}
|
|||
|
|
>
|
|||
|
|
{label}
|
|||
|
|
</span>
|
|||
|
|
|
|||
|
|
{/* 操作按钮 */}
|
|||
|
|
{task.status === TASK_STATUS.PENDING && (
|
|||
|
|
<div className="flex gap-1">
|
|||
|
|
<button
|
|||
|
|
className="rounded border border-blue-200 px-1.5 py-0.5 text-[10px] font-medium text-blue-600 hover:bg-blue-50 transition-colors"
|
|||
|
|
onClick={() => onAction({ task, action: "receive" })}
|
|||
|
|
>
|
|||
|
|
接收
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className="rounded border border-red-200 px-1.5 py-0.5 text-[10px] font-medium text-red-500 hover:bg-red-50 transition-colors"
|
|||
|
|
onClick={() => onAction({ task, action: "reject" })}
|
|||
|
|
>
|
|||
|
|
驳回
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className="rounded border border-green-200 px-1.5 py-0.5 text-[10px] font-medium text-green-600 hover:bg-green-50 transition-colors"
|
|||
|
|
onClick={() => onAction({ task, action: "transfer" })}
|
|||
|
|
>
|
|||
|
|
转交
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{task.status === TASK_STATUS.WIP && (
|
|||
|
|
<div className="flex gap-1">
|
|||
|
|
<button
|
|||
|
|
className="rounded border border-red-200 px-1.5 py-0.5 text-[10px] font-medium text-red-500 hover:bg-red-50 transition-colors"
|
|||
|
|
onClick={() => onAction({ task, action: "reject" })}
|
|||
|
|
>
|
|||
|
|
驳回
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className="rounded border border-green-200 px-1.5 py-0.5 text-[10px] font-medium text-green-600 hover:bg-green-50 transition-colors"
|
|||
|
|
onClick={() => onAction({ task, action: "transfer" })}
|
|||
|
|
>
|
|||
|
|
转交
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 递归渲染子任务 */}
|
|||
|
|
{task.child_tasks.length > 0 && (
|
|||
|
|
<div className="ml-8 border-l-2 border-gray-100 pl-4 pt-1">
|
|||
|
|
{task.child_tasks.map((child, idx) => (
|
|||
|
|
<TaskNodeCard
|
|||
|
|
key={child.id}
|
|||
|
|
task={child}
|
|||
|
|
isLast={idx === task.child_tasks.length - 1}
|
|||
|
|
onAction={onAction}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 主容器组件
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
export default function TaskTreeViewer() {
|
|||
|
|
const { toast } = useToast();
|
|||
|
|
|
|||
|
|
// 搜索状态
|
|||
|
|
const [serial, setSerial] = useState("");
|
|||
|
|
const [product, setProduct] = useState<ProductScanResponse | null>(null);
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [error, setError] = useState<string | null>(null);
|
|||
|
|
|
|||
|
|
// 弹窗状态
|
|||
|
|
const [modalTarget, setModalTarget] = useState<ModalTarget | null>(null);
|
|||
|
|
const [submitting, setSubmitting] = useState(false);
|
|||
|
|
|
|||
|
|
// ---- 数据刷新 ----
|
|||
|
|
const refresh = useCallback(async () => {
|
|||
|
|
const trimmed = serial.trim();
|
|||
|
|
if (trimmed.length !== 16) return;
|
|||
|
|
try {
|
|||
|
|
const result = await getTaskTree(trimmed);
|
|||
|
|
setProduct(result);
|
|||
|
|
} catch {
|
|||
|
|
// 静默失败 — 不影响当前展示
|
|||
|
|
}
|
|||
|
|
}, [serial]);
|
|||
|
|
|
|||
|
|
async function handleSearch(e?: React.FormEvent) {
|
|||
|
|
e?.preventDefault();
|
|||
|
|
const trimmed = serial.trim();
|
|||
|
|
if (trimmed.length !== 16) {
|
|||
|
|
setError("请输入 16 位产品序列号");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setLoading(true);
|
|||
|
|
setError(null);
|
|||
|
|
setProduct(null);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const result = await getTaskTree(trimmed);
|
|||
|
|
setProduct(result);
|
|||
|
|
} catch (err: any) {
|
|||
|
|
const msg =
|
|||
|
|
err?.response?.status === 404
|
|||
|
|
? `未找到序列号 ${trimmed} 对应的产品`
|
|||
|
|
: err?.response?.data?.detail ??
|
|||
|
|
err?.message ??
|
|||
|
|
"查询失败，请检查后端服务";
|
|||
|
|
setError(msg);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ---- 操作处理 ----
|
|||
|
|
|
|||
|
|
async function handleReceive() {
|
|||
|
|
if (!modalTarget) return;
|
|||
|
|
setSubmitting(true);
|
|||
|
|
try {
|
|||
|
|
await receiveTask(modalTarget.task.id);
|
|||
|
|
toast("任务已接收 (PENDING → WIP)", "success");
|
|||
|
|
setModalTarget(null);
|
|||
|
|
await refresh();
|
|||
|
|
} catch (err: any) {
|
|||
|
|
toast(
|
|||
|
|
err?.response?.data?.detail ?? err?.message ?? "接收失败",
|
|||
|
|
"error"
|
|||
|
|
);
|
|||
|
|
} finally {
|
|||
|
|
setSubmitting(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleReject(reason: string) {
|
|||
|
|
if (!modalTarget) return;
|
|||
|
|
setSubmitting(true);
|
|||
|
|
try {
|
|||
|
|
await rejectTask(modalTarget.task.id, reason);
|
|||
|
|
toast("任务已驳回，已自动创建返工任务", "success");
|
|||
|
|
setModalTarget(null);
|
|||
|
|
await refresh();
|
|||
|
|
} catch (err: any) {
|
|||
|
|
toast(
|
|||
|
|
err?.response?.data?.detail ?? err?.message ?? "驳回失败",
|
|||
|
|
"error"
|
|||
|
|
);
|
|||
|
|
} finally {
|
|||
|
|
setSubmitting(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleTransfer(
|
|||
|
|
nextTaskName: string,
|
|||
|
|
assignees: string[],
|
|||
|
|
note: string
|
|||
|
|
) {
|
|||
|
|
if (!modalTarget) return;
|
|||
|
|
setSubmitting(true);
|
|||
|
|
try {
|
|||
|
|
const result = await transferTask(
|
|||
|
|
modalTarget.task.id,
|
|||
|
|
assignees,
|
|||
|
|
nextTaskName,
|
|||
|
|
note || undefined
|
|||
|
|
);
|
|||
|
|
toast(result.message, "success");
|
|||
|
|
setModalTarget(null);
|
|||
|
|
await refresh();
|
|||
|
|
} catch (err: any) {
|
|||
|
|
toast(
|
|||
|
|
err?.response?.data?.detail ?? err?.message ?? "转交失败",
|
|||
|
|
"error"
|
|||
|
|
);
|
|||
|
|
} finally {
|
|||
|
|
setSubmitting(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ---- 渲染 ----
|
|||
|
|
|
|||
|
|
const modalTask = modalTarget?.task ?? null;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
{/* ---- 搜索栏 ---- */}
|
|||
|
|
<div className="mb-6">
|
|||
|
|
<h2 className="text-xl font-bold text-gray-800">任务全景树</h2>
|
|||
|
|
<p className="mt-1 text-sm text-gray-500">
|
|||
|
|
输入 16 位产品序列号，查看完整任务流转十字矩阵树状图
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<form onSubmit={handleSearch} className="mt-4 flex items-center gap-2">
|
|||
|
|
<div className="relative flex-1 max-w-md">
|
|||
|
|
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={serial}
|
|||
|
|
onChange={(e) => setSerial(e.target.value)}
|
|||
|
|
placeholder="输入 16 位序列号，如 X20260801000001"
|
|||
|
|
maxLength={16}
|
|||
|
|
className="w-full rounded-lg border border-gray-200 py-2.5 pl-9 pr-3 font-mono text-sm tracking-widest placeholder:tracking-normal placeholder:font-sans focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-100"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
disabled={loading}
|
|||
|
|
className="flex items-center gap-1.5 rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
{loading ? (
|
|||
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|||
|
|
) : (
|
|||
|
|
<Search className="h-4 w-4" />
|
|||
|
|
)}
|
|||
|
|
查询
|
|||
|
|
</button>
|
|||
|
|
{product && (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => handleSearch()}
|
|||
|
|
className="flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm text-gray-500 transition-colors hover:bg-gray-50"
|
|||
|
|
title="刷新"
|
|||
|
|
>
|
|||
|
|
<RefreshCw
|
|||
|
|
className={`h-4 w-4 ${loading ? "animate-spin" : ""}`}
|
|||
|
|
/>
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* ---- 错误 ---- */}
|
|||
|
|
{error && (
|
|||
|
|
<div className="mb-4 flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
|||
|
|
<AlertCircle className="h-4 w-4 shrink-0" />
|
|||
|
|
{error}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* ---- 加载中 ---- */}
|
|||
|
|
{loading && (
|
|||
|
|
<div className="flex items-center justify-center py-20">
|
|||
|
|
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* ---- 产品信息摘要 ---- */}
|
|||
|
|
{product && !loading && (
|
|||
|
|
<div className="mb-6">
|
|||
|
|
<div className="flex flex-wrap items-center gap-3 rounded-xl bg-white p-4 shadow-sm">
|
|||
|
|
<div>
|
|||
|
|
<span className="text-xs text-gray-400">产品序列号</span>
|
|||
|
|
<p className="font-mono text-base font-bold tracking-widest text-gray-800">
|
|||
|
|
{product.serial_number}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="hidden h-8 w-px bg-gray-200 sm:block" />
|
|||
|
|
<div>
|
|||
|
|
<span className="text-xs text-gray-400">订单编号</span>
|
|||
|
|
<p className="text-sm font-medium text-gray-600">
|
|||
|
|
{product.order_no || "—"}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="hidden h-8 w-px bg-gray-200 sm:block" />
|
|||
|
|
<div>
|
|||
|
|
<span className="text-xs text-gray-400">当前位置</span>
|
|||
|
|
<p className="text-sm font-medium text-gray-600">
|
|||
|
|
{product.current_location_id === "virtual_warehouse" ? (
|
|||
|
|
<span className="inline-flex items-center gap-1 rounded bg-purple-50 px-1.5 py-0.5 text-xs font-medium text-purple-600">
|
|||
|
|
🏭 仓库
|
|||
|
|
</span>
|
|||
|
|
) : (
|
|||
|
|
product.current_location_id ?? "—"
|
|||
|
|
)}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="hidden h-8 w-px bg-gray-200 sm:block" />
|
|||
|
|
<div>
|
|||
|
|
<span className="text-xs text-gray-400">任务总数</span>
|
|||
|
|
<p className="text-sm font-semibold text-gray-800">
|
|||
|
|
{product.top_level_tasks?.length ?? 0} 顶层
|
|||
|
|
{product.task_tree?.length
|
|||
|
|
? ` · ${countAllTasks(product.task_tree)} 总计`
|
|||
|
|
: ""}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* ---- 任务树 ---- */}
|
|||
|
|
{product && !loading && (
|
|||
|
|
<>
|
|||
|
|
{product.task_tree && product.task_tree.length > 0 ? (
|
|||
|
|
<div className="rounded-xl bg-white p-6 shadow-sm">
|
|||
|
|
<h3 className="mb-4 flex items-center gap-2 text-sm font-semibold text-gray-500">
|
|||
|
|
<GitBranch className="h-4 w-4" />
|
|||
|
|
任务流转树状图
|
|||
|
|
</h3>
|
|||
|
|
<div className="space-y-1">
|
|||
|
|
{product.task_tree.map((task, idx) => (
|
|||
|
|
<TaskNodeCard
|
|||
|
|
key={task.id}
|
|||
|
|
task={task}
|
|||
|
|
isLast={idx === product.task_tree!.length - 1}
|
|||
|
|
onAction={setModalTarget}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="flex flex-col items-center justify-center rounded-xl bg-white py-16 text-gray-400 shadow-sm">
|
|||
|
|
<GitBranch className="mb-3 h-10 w-10" />
|
|||
|
|
<p className="text-sm">该产品暂无关联任务</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* ---- 弹窗 ---- */}
|
|||
|
|
<ReceiveConfirmModal
|
|||
|
|
open={modalTarget?.action === "receive"}
|
|||
|
|
task={modalTask}
|
|||
|
|
submitting={submitting}
|
|||
|
|
onClose={() => setModalTarget(null)}
|
|||
|
|
onConfirm={handleReceive}
|
|||
|
|
/>
|
|||
|
|
<RejectModal
|
|||
|
|
open={modalTarget?.action === "reject"}
|
|||
|
|
task={modalTask}
|
|||
|
|
submitting={submitting}
|
|||
|
|
onClose={() => setModalTarget(null)}
|
|||
|
|
onSubmit={handleReject}
|
|||
|
|
/>
|
|||
|
|
<TransferModal
|
|||
|
|
open={modalTarget?.action === "transfer"}
|
|||
|
|
task={modalTask}
|
|||
|
|
submitting={submitting}
|
|||
|
|
onClose={() => setModalTarget(null)}
|
|||
|
|
onSubmit={handleTransfer}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 工具函数：递归统计任务总数
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
function countAllTasks(tasks: TaskResponse[]): number {
|
|||
|
|
return tasks.reduce((sum, t) => sum + 1 + countAllTasks(t.child_tasks), 0);
|
|||
|
|
}
|