R31-1 R31-4: 收口详情页工作台化与 E2E 契约
这个提交包含在：
@@ -16,8 +16,11 @@ import { useAuth } from "../auth/AuthContext";
|
||||
import { hasPermission } from "../auth/permissions";
|
||||
import { buildMobileApprovalsPath, shouldPreferMobileApprovalExperience } from "../pwa";
|
||||
import { CardSkeleton } from "../components/common/CardSkeleton";
|
||||
import { PageHeader } from "../components/common/PageHeader";
|
||||
import { StatusBadge } from "../components/common/StatusBadge";
|
||||
import { DetailSideMeta } from "../components/patterns/DetailSideMeta";
|
||||
import { EntityOverviewHero } from "../components/patterns/EntityOverviewHero";
|
||||
import { PageScaffold } from "../components/patterns/PageScaffold";
|
||||
import { SectionPanel } from "../components/patterns/SectionPanel";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Textarea } from "../components/ui/textarea";
|
||||
|
||||
@@ -37,6 +40,29 @@ function entityTitle(entityType: string | undefined) {
|
||||
return entityType || "业务单据";
|
||||
}
|
||||
|
||||
function formatDateTime(value: string | null | undefined) {
|
||||
if (!value) {
|
||||
return "-";
|
||||
}
|
||||
return value.slice(0, 19).replace("T", " ");
|
||||
}
|
||||
|
||||
function workflowStatusLabel(status: string | undefined) {
|
||||
if (!status) {
|
||||
return "-";
|
||||
}
|
||||
|
||||
const labels: Record<string, string> = {
|
||||
pending: "待派发",
|
||||
completed: "已完成",
|
||||
rejected: "已驳回",
|
||||
cancelled: "已取消",
|
||||
skipped: "已跳过",
|
||||
};
|
||||
|
||||
return labels[status] ?? status;
|
||||
}
|
||||
|
||||
export function WorkflowTaskDetailPage() {
|
||||
const { taskId = "" } = useParams();
|
||||
const navigate = useNavigate();
|
||||
@@ -156,199 +182,244 @@ export function WorkflowTaskDetailPage() {
|
||||
const canTransfer = allowedActions.has("transfer") && detail.workflowInstance?.entityType === "reimbursement";
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
<PageScaffold>
|
||||
<EntityOverviewHero
|
||||
title={`任务详情 ${detail.task.stepName}`}
|
||||
subtitle={`任务ID: ${detail.task.id}`}
|
||||
actions={
|
||||
subtitle="在同一工作台内查看审批对象摘要、处理动作和历史留痕。"
|
||||
meta={(
|
||||
<>
|
||||
<StatusBadge status={detail.task.status} />
|
||||
<span className="info-chip">任务ID：{detail.task.id}</span>
|
||||
<span className="info-chip">对象类型：{entityTitle(detail.workflowInstance?.entityType)}</span>
|
||||
<span className="info-chip">实例：{detail.workflowInstance?.id ?? "-"}</span>
|
||||
</>
|
||||
)}
|
||||
actions={(
|
||||
<Button asChild variant="secondary" data-testid="workflow-task-back">
|
||||
<Link to="/workflow/tasks">返回待办列表</Link>
|
||||
</Button>
|
||||
}
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="card-std space-y-2 p-6 text-sm" data-testid="workflow-task-summary">
|
||||
<div>状态：<StatusBadge status={detail.task.status} /></div>
|
||||
<div>实例：{detail.workflowInstance?.id ?? "-"}</div>
|
||||
<div>对象类型：{entityTitle(detail.workflowInstance?.entityType)}</div>
|
||||
{detail.reimbursement ? (
|
||||
<>
|
||||
<div>报销单号：{detail.reimbursement.formNumber ?? "-"}</div>
|
||||
<div>报销金额：{detail.reimbursement.totalAmount ?? "-"}</div>
|
||||
<div>提交人：{detail.reimbursement.submitter?.name ?? "-"}</div>
|
||||
<div>报销人：{detail.reimbursement.owner?.name ?? "-"}</div>
|
||||
</>
|
||||
) : null}
|
||||
{detail.leaveRequest ? (
|
||||
<>
|
||||
<div>假期类型：{detail.leaveRequest.leaveType?.name ?? "-"}</div>
|
||||
<div>申请人：{detail.leaveRequest.owner?.name ?? "-"}</div>
|
||||
<div>
|
||||
时间段：
|
||||
{detail.leaveRequest.startDate ?? "-"} {detail.leaveRequest.startSession === "am" ? "上午" : "下午"}
|
||||
{" → "}
|
||||
{detail.leaveRequest.endDate ?? "-"} {detail.leaveRequest.endSession === "am" ? "上午" : "下午"}
|
||||
</div>
|
||||
<div>请假天数：{detail.leaveRequest.requestedDays}</div>
|
||||
<div>说明：{detail.leaveRequest.reason ?? "-"}</div>
|
||||
<div>附件：{detail.leaveRequest.attachment?.originalName ?? "-"}</div>
|
||||
</>
|
||||
) : null}
|
||||
{detail.purchaseRequest ? (
|
||||
<>
|
||||
<div>采购单号：{detail.purchaseRequest.requestNo ?? detail.purchaseRequest.id}</div>
|
||||
<div>标题：{detail.purchaseRequest.title || "-"}</div>
|
||||
<div>申请人：{detail.purchaseRequest.applicant?.name ?? "-"}</div>
|
||||
<div>供应商：{detail.purchaseRequest.supplier?.name ?? "-"}</div>
|
||||
<div>法体：{detail.purchaseRequest.legalEntity?.name ?? "-"}</div>
|
||||
<div>成本中心：{detail.purchaseRequest.costCenter?.name ?? "-"}</div>
|
||||
<div>单据分类：{detail.purchaseRequest.documentCategory?.name ?? "-"}</div>
|
||||
<div>金额：{detail.purchaseRequest.totalAmount ?? "-"} {detail.purchaseRequest.currencyCode}</div>
|
||||
<div>预计到货：{detail.purchaseRequest.expectedDeliveryDate ?? "-"}</div>
|
||||
<div>说明：{detail.purchaseRequest.reason ?? "-"}</div>
|
||||
</>
|
||||
) : null}
|
||||
{detail.travelRequest ? (
|
||||
<>
|
||||
<div>差旅单号：{detail.travelRequest.requestNo ?? detail.travelRequest.id}</div>
|
||||
<div>申请人：{detail.travelRequest.applicant?.name ?? "-"}</div>
|
||||
<div>出差类型：{detail.travelRequest.tripType === "international" ? "国际" : "国内"}</div>
|
||||
<div>法体：{detail.travelRequest.legalEntity?.name ?? "-"}</div>
|
||||
<div>成本中心：{detail.travelRequest.costCenter?.name ?? "-"}</div>
|
||||
<div>起止日期：{detail.travelRequest.startDate ?? "-"} → {detail.travelRequest.endDate ?? "-"}</div>
|
||||
<div>预估金额：{detail.travelRequest.estimatedAmount ?? "-"}</div>
|
||||
<div>出差目的：{detail.travelRequest.purpose || "-"}</div>
|
||||
<div>
|
||||
行程段：
|
||||
{detail.travelRequest.segments.length
|
||||
? detail.travelRequest.segments
|
||||
.map((item) => `${item.fromCity}→${item.toCity}(${item.segmentRole})`)
|
||||
.join("；")
|
||||
: "-"}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="card-std space-y-4 p-6">
|
||||
<h3 className="text-base font-semibold text-zinc-900">审批动作</h3>
|
||||
|
||||
{actionError ? (
|
||||
<p
|
||||
className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600"
|
||||
data-testid="workflow-task-action-error"
|
||||
>
|
||||
{actionError}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
data-testid="workflow-task-approve"
|
||||
disabled={!allowedActions.has("approve") || mutation.isPending}
|
||||
onClick={() => mutation.mutate("approve")}
|
||||
type="button"
|
||||
>
|
||||
通过
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 rounded-lg border border-zinc-200 p-4">
|
||||
<p className="text-sm font-medium text-zinc-800">驳回</p>
|
||||
<Textarea
|
||||
data-testid="workflow-task-reject-comment"
|
||||
onChange={(event) => setRejectComment(event.target.value)}
|
||||
rows={2}
|
||||
value={rejectComment}
|
||||
/>
|
||||
<Button
|
||||
data-testid="workflow-task-reject"
|
||||
variant="secondary"
|
||||
disabled={!allowedActions.has("reject") || mutation.isPending || rejectComment.trim().length < 1}
|
||||
onClick={() => mutation.mutate("reject")}
|
||||
type="button"
|
||||
>
|
||||
提交驳回
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 rounded-lg border border-zinc-200 p-4">
|
||||
<p className="text-sm font-medium text-zinc-800">退回</p>
|
||||
<Textarea
|
||||
data-testid="workflow-task-return-comment"
|
||||
onChange={(event) => setReturnComment(event.target.value)}
|
||||
rows={2}
|
||||
value={returnComment}
|
||||
/>
|
||||
<Button
|
||||
data-testid="workflow-task-return"
|
||||
variant="secondary"
|
||||
disabled={!allowedActions.has("return") || mutation.isPending || returnComment.trim().length < 1}
|
||||
onClick={() => mutation.mutate("return")}
|
||||
type="button"
|
||||
>
|
||||
提交退回
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{canTransfer && !isLeaveTask ? (
|
||||
<div className="space-y-2 rounded-lg border border-zinc-200 p-4">
|
||||
<p className="text-sm font-medium text-zinc-800">转审</p>
|
||||
<select
|
||||
className="select-std"
|
||||
data-testid="workflow-task-transfer-to-approver"
|
||||
onChange={(event) => setSelectedApprover(event.target.value)}
|
||||
value={selectedApprover}
|
||||
>
|
||||
<option value="">请选择目标审批人</option>
|
||||
{(approverQuery.data?.items ?? []).map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{item.name} ({item.employeeNo})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Textarea
|
||||
data-testid="workflow-task-transfer-reason"
|
||||
onChange={(event) => setTransferReason(event.target.value)}
|
||||
rows={2}
|
||||
value={transferReason}
|
||||
/>
|
||||
<Button
|
||||
data-testid="workflow-task-transfer"
|
||||
variant="secondary"
|
||||
disabled={
|
||||
!allowedActions.has("transfer") ||
|
||||
mutation.isPending ||
|
||||
!selectedApprover ||
|
||||
transferReason.trim().length < 10
|
||||
}
|
||||
onClick={() => mutation.mutate("transfer")}
|
||||
type="button"
|
||||
>
|
||||
提交转审
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="card-std space-y-3 p-6">
|
||||
<h3 className="text-base font-semibold text-zinc-900">处理历史</h3>
|
||||
<div className="space-y-2">
|
||||
{detail.history.length ? (
|
||||
detail.history.map((item) => (
|
||||
<div className="rounded-lg border border-zinc-200 px-3 py-2 text-sm" key={item.id}>
|
||||
<div className="font-medium text-zinc-900">
|
||||
{item.action} · {item.actorName || item.actorId}
|
||||
<div className="detail-shell-grid">
|
||||
<div className="space-y-6">
|
||||
<SectionPanel title="审批对象摘要" description="先看对象主信息，再决定通过、驳回、退回或转审。">
|
||||
<div className="space-y-4" data-testid="workflow-task-overview">
|
||||
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
|
||||
<div className="rounded-lg border border-zinc-200 px-4 py-3 text-sm">
|
||||
<div className="text-zinc-500">当前状态</div>
|
||||
<div className="mt-2"><StatusBadge status={detail.task.status} /></div>
|
||||
</div>
|
||||
<div className="rounded-lg border border-zinc-200 px-4 py-3 text-sm">
|
||||
<div className="text-zinc-500">当前节点</div>
|
||||
<div className="mt-2 font-medium text-zinc-900">{detail.task.stepName}</div>
|
||||
</div>
|
||||
<div className="rounded-lg border border-zinc-200 px-4 py-3 text-sm">
|
||||
<div className="text-zinc-500">对象类型</div>
|
||||
<div className="mt-2 font-medium text-zinc-900">{entityTitle(detail.workflowInstance?.entityType)}</div>
|
||||
</div>
|
||||
<div className="rounded-lg border border-zinc-200 px-4 py-3 text-sm">
|
||||
<div className="text-zinc-500">可执行动作</div>
|
||||
<div className="mt-2 font-medium text-zinc-900">{detail.allowedActions.length ? detail.allowedActions.join(" / ") : "-"}</div>
|
||||
</div>
|
||||
<div className="text-zinc-600">{item.comment || "-"}</div>
|
||||
<div className="text-xs text-zinc-500">{item.createdAt || "-"}</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="text-sm text-zinc-500">暂无历史记录</p>
|
||||
)}
|
||||
|
||||
<div className="rounded-lg border border-zinc-200 p-4 text-sm" data-testid="workflow-task-summary">
|
||||
<div>状态：{workflowStatusLabel(detail.task.status)}</div>
|
||||
<div>实例：{detail.workflowInstance?.id ?? "-"}</div>
|
||||
<div>对象类型：{entityTitle(detail.workflowInstance?.entityType)}</div>
|
||||
{detail.reimbursement ? (
|
||||
<>
|
||||
<div>报销单号：{detail.reimbursement.formNumber ?? "-"}</div>
|
||||
<div>报销金额：{detail.reimbursement.totalAmount ?? "-"}</div>
|
||||
<div>提交人：{detail.reimbursement.submitter?.name ?? "-"}</div>
|
||||
<div>报销人：{detail.reimbursement.owner?.name ?? "-"}</div>
|
||||
</>
|
||||
) : null}
|
||||
{detail.leaveRequest ? (
|
||||
<>
|
||||
<div>假期类型：{detail.leaveRequest.leaveType?.name ?? "-"}</div>
|
||||
<div>申请人：{detail.leaveRequest.owner?.name ?? "-"}</div>
|
||||
<div>
|
||||
时间段：
|
||||
{detail.leaveRequest.startDate ?? "-"} {detail.leaveRequest.startSession === "am" ? "上午" : "下午"}
|
||||
{" → "}
|
||||
{detail.leaveRequest.endDate ?? "-"} {detail.leaveRequest.endSession === "am" ? "上午" : "下午"}
|
||||
</div>
|
||||
<div>请假天数：{detail.leaveRequest.requestedDays}</div>
|
||||
<div>说明：{detail.leaveRequest.reason ?? "-"}</div>
|
||||
<div>附件：{detail.leaveRequest.attachment?.originalName ?? "-"}</div>
|
||||
</>
|
||||
) : null}
|
||||
{detail.purchaseRequest ? (
|
||||
<>
|
||||
<div>采购单号：{detail.purchaseRequest.requestNo ?? detail.purchaseRequest.id}</div>
|
||||
<div>标题：{detail.purchaseRequest.title || "-"}</div>
|
||||
<div>申请人：{detail.purchaseRequest.applicant?.name ?? "-"}</div>
|
||||
<div>供应商：{detail.purchaseRequest.supplier?.name ?? "-"}</div>
|
||||
<div>法体：{detail.purchaseRequest.legalEntity?.name ?? "-"}</div>
|
||||
<div>成本中心：{detail.purchaseRequest.costCenter?.name ?? "-"}</div>
|
||||
<div>单据分类：{detail.purchaseRequest.documentCategory?.name ?? "-"}</div>
|
||||
<div>金额：{detail.purchaseRequest.totalAmount ?? "-"} {detail.purchaseRequest.currencyCode}</div>
|
||||
<div>预计到货：{detail.purchaseRequest.expectedDeliveryDate ?? "-"}</div>
|
||||
<div>说明：{detail.purchaseRequest.reason ?? "-"}</div>
|
||||
</>
|
||||
) : null}
|
||||
{detail.travelRequest ? (
|
||||
<>
|
||||
<div>差旅单号：{detail.travelRequest.requestNo ?? detail.travelRequest.id}</div>
|
||||
<div>申请人：{detail.travelRequest.applicant?.name ?? "-"}</div>
|
||||
<div>出差类型：{detail.travelRequest.tripType === "international" ? "国际" : "国内"}</div>
|
||||
<div>法体：{detail.travelRequest.legalEntity?.name ?? "-"}</div>
|
||||
<div>成本中心：{detail.travelRequest.costCenter?.name ?? "-"}</div>
|
||||
<div>起止日期：{detail.travelRequest.startDate ?? "-"} → {detail.travelRequest.endDate ?? "-"}</div>
|
||||
<div>预估金额：{detail.travelRequest.estimatedAmount ?? "-"}</div>
|
||||
<div>出差目的：{detail.travelRequest.purpose || "-"}</div>
|
||||
<div>
|
||||
行程段：
|
||||
{detail.travelRequest.segments.length
|
||||
? detail.travelRequest.segments
|
||||
.map((item) => `${item.fromCity}→${item.toCity}(${item.segmentRole})`)
|
||||
.join("；")
|
||||
: "-"}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</SectionPanel>
|
||||
|
||||
<SectionPanel title="审批动作" description="把通过、驳回、退回和转审统一收口在同一块操作区。">
|
||||
<div className="space-y-4">
|
||||
{actionError ? (
|
||||
<p
|
||||
className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600"
|
||||
data-testid="workflow-task-action-error"
|
||||
>
|
||||
{actionError}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
data-testid="workflow-task-approve"
|
||||
disabled={!allowedActions.has("approve") || mutation.isPending}
|
||||
onClick={() => mutation.mutate("approve")}
|
||||
type="button"
|
||||
>
|
||||
通过
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 rounded-lg border border-zinc-200 p-4">
|
||||
<p className="text-sm font-medium text-zinc-800">驳回</p>
|
||||
<Textarea
|
||||
data-testid="workflow-task-reject-comment"
|
||||
onChange={(event) => setRejectComment(event.target.value)}
|
||||
rows={2}
|
||||
value={rejectComment}
|
||||
/>
|
||||
<Button
|
||||
data-testid="workflow-task-reject"
|
||||
variant="secondary"
|
||||
disabled={!allowedActions.has("reject") || mutation.isPending || rejectComment.trim().length < 1}
|
||||
onClick={() => mutation.mutate("reject")}
|
||||
type="button"
|
||||
>
|
||||
提交驳回
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 rounded-lg border border-zinc-200 p-4">
|
||||
<p className="text-sm font-medium text-zinc-800">退回</p>
|
||||
<Textarea
|
||||
data-testid="workflow-task-return-comment"
|
||||
onChange={(event) => setReturnComment(event.target.value)}
|
||||
rows={2}
|
||||
value={returnComment}
|
||||
/>
|
||||
<Button
|
||||
data-testid="workflow-task-return"
|
||||
variant="secondary"
|
||||
disabled={!allowedActions.has("return") || mutation.isPending || returnComment.trim().length < 1}
|
||||
onClick={() => mutation.mutate("return")}
|
||||
type="button"
|
||||
>
|
||||
提交退回
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{canTransfer && !isLeaveTask ? (
|
||||
<div className="space-y-2 rounded-lg border border-zinc-200 p-4">
|
||||
<p className="text-sm font-medium text-zinc-800">转审</p>
|
||||
<select
|
||||
className="select-std"
|
||||
data-testid="workflow-task-transfer-approver"
|
||||
onChange={(event) => setSelectedApprover(event.target.value)}
|
||||
value={selectedApprover}
|
||||
>
|
||||
<option value="">请选择目标审批人</option>
|
||||
{(approverQuery.data?.items ?? []).map((item) => (
|
||||
<option key={item.id} value={item.id}>
|
||||
{item.name} ({item.employeeNo})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Textarea
|
||||
data-testid="workflow-task-transfer-reason"
|
||||
onChange={(event) => setTransferReason(event.target.value)}
|
||||
rows={2}
|
||||
value={transferReason}
|
||||
/>
|
||||
<Button
|
||||
data-testid="workflow-task-transfer"
|
||||
variant="secondary"
|
||||
disabled={
|
||||
!allowedActions.has("transfer") ||
|
||||
mutation.isPending ||
|
||||
!selectedApprover ||
|
||||
transferReason.trim().length < 10
|
||||
}
|
||||
onClick={() => mutation.mutate("transfer")}
|
||||
type="button"
|
||||
>
|
||||
提交转审
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</SectionPanel>
|
||||
|
||||
<SectionPanel title="处理历史" description="所有审批动作、意见和处理人统一留痕。">
|
||||
<div className="space-y-2">
|
||||
{detail.history.length ? (
|
||||
detail.history.map((item) => (
|
||||
<div className="rounded-lg border border-zinc-200 px-3 py-2 text-sm" key={item.id}>
|
||||
<div className="font-medium text-zinc-900">
|
||||
{item.action} · {item.actorName || item.actorId}
|
||||
</div>
|
||||
<div className="text-zinc-600">{item.comment || "-"}</div>
|
||||
<div className="text-xs text-zinc-500">{item.createdAt || "-"}</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="text-sm text-zinc-500">暂无历史记录</p>
|
||||
)}
|
||||
</div>
|
||||
</SectionPanel>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<DetailSideMeta title="任务摘要" description="帮助审批人先判断节点、对象和时间，再决定处理动作。">
|
||||
<div>节点：{detail.task.stepName}</div>
|
||||
<div>实例状态：{detail.workflowInstance?.currentStatus ?? "-"}</div>
|
||||
<div>当前审批角色：{detail.task.assigneeRole ?? "-"}</div>
|
||||
<div>创建时间：{formatDateTime(detail.task.createdAt)}</div>
|
||||
<div>完成时间：{formatDateTime(detail.task.completedAt)}</div>
|
||||
<div>发起时间：{formatDateTime(detail.workflowInstance?.startedAt)}</div>
|
||||
</DetailSideMeta>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageScaffold>
|
||||
);
|
||||
}
|
||||
|
||||
在新工单中引用
屏蔽一个用户