530 行
21 KiB
TypeScript
530 行
21 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { useMemo, useState } from "react";
|
|
import { Link, Navigate, useNavigate, useParams } from "react-router-dom";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { isApiError } from "../api/types";
|
|
import { mapApiErrorMessage } from "../api/errorMessages";
|
|
import {
|
|
approveWorkflowTask,
|
|
fetchWorkflowApprovers,
|
|
fetchWorkflowTaskDetail,
|
|
rejectWorkflowTask,
|
|
returnWorkflowTask,
|
|
transferWorkflowTask,
|
|
} from "../api/workflow";
|
|
import { toast } from "sonner";
|
|
import { useAuth } from "../auth/AuthContext";
|
|
import { hasPermission } from "../auth/permissions";
|
|
import { buildMobileApprovalsPath, shouldPreferMobileApprovalExperience } from "../pwa";
|
|
import { CardSkeleton } from "../components/common/CardSkeleton";
|
|
import { ConfirmDialog } from "../components/common/ConfirmDialog";
|
|
import { StatusBadge } from "../components/common/StatusBadge";
|
|
import { DetailSideMeta } from "../components/patterns/DetailSideMeta";
|
|
import { EntityOverviewHero } from "../components/patterns/EntityOverviewHero";
|
|
import { StatStrip } from "../components/patterns/ListWorkspace";
|
|
import { MetricCard } from "../components/patterns/MetricCard";
|
|
import { PageScaffold } from "../components/patterns/PageScaffold";
|
|
import { SectionPanel } from "../components/patterns/SectionPanel";
|
|
import { Button } from "../components/ui/button";
|
|
import { Textarea } from "../components/ui/textarea";
|
|
import { resolvePurchaseDisplayCode } from "../lib/approvalDisplay";
|
|
import { getWorkflowConfirmCopy, type WorkflowConfirmAction } from "../lib/workflowActionConfirm";
|
|
|
|
function entityTitle(entityType: string | undefined) {
|
|
if (entityType === "leave") {
|
|
return "请假申请";
|
|
}
|
|
if (entityType === "reimbursement") {
|
|
return "报销单";
|
|
}
|
|
if (entityType === "purchase_request") {
|
|
return "采购申请";
|
|
}
|
|
if (entityType === "travel_request") {
|
|
return "差旅申请";
|
|
}
|
|
return entityType || "业务单据";
|
|
}
|
|
|
|
function formatDateTime(value: string | null | undefined) {
|
|
if (!value) {
|
|
return "-";
|
|
}
|
|
return value.slice(0, 19).replace("T", " ");
|
|
}
|
|
|
|
function workflowInstanceStatusLabel(status: string | undefined | null) {
|
|
if (!status) {
|
|
return "-";
|
|
}
|
|
|
|
const labels: Record<string, string> = {
|
|
pending: "审批中",
|
|
active: "审批中",
|
|
approved: "已通过",
|
|
rejected: "已驳回",
|
|
terminated: "已终止",
|
|
cancelled: "已取消",
|
|
completed: "已完成",
|
|
};
|
|
|
|
return labels[status] ?? status;
|
|
}
|
|
|
|
function workflowActionLabel(action: string | undefined | null) {
|
|
if (!action) {
|
|
return "-";
|
|
}
|
|
|
|
const labels: Record<string, string> = {
|
|
submit: "提交",
|
|
approve: "通过",
|
|
reject: "驳回",
|
|
return: "退回",
|
|
transfer: "转审",
|
|
withdraw: "撤回",
|
|
remind: "催办",
|
|
overdue_remind: "超时提醒",
|
|
cancel: "取消",
|
|
skip: "跳过",
|
|
};
|
|
|
|
return labels[action] ?? action;
|
|
}
|
|
|
|
function DetailField({ label, value }: { label: string; value: ReactNode }) {
|
|
return (
|
|
<div className="rounded-lg border border-zinc-200 bg-white px-4 py-3 text-sm">
|
|
<dt className="text-xs font-medium text-zinc-500">{label}</dt>
|
|
<dd className="mt-1 break-words font-medium text-zinc-900">{value || "-"}</dd>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function isAlreadyProcessedTaskError(error: unknown) {
|
|
return isApiError(error) && error.details?.task === "already_processed";
|
|
}
|
|
|
|
export function WorkflowTaskDetailPage() {
|
|
const { taskId = "" } = useParams();
|
|
const navigate = useNavigate();
|
|
const queryClient = useQueryClient();
|
|
const { permissions } = useAuth();
|
|
|
|
const [rejectComment, setRejectComment] = useState("请补充必要说明后重提");
|
|
const [returnComment, setReturnComment] = useState("请补充必要信息并修正后重新提交");
|
|
const [transferReason, setTransferReason] = useState("当前事项需转交对应审批人处理，请尽快处理。");
|
|
const [selectedApprover, setSelectedApprover] = useState("");
|
|
const [actionError, setActionError] = useState("");
|
|
const [confirmAction, setConfirmAction] = useState<WorkflowConfirmAction | null>(null);
|
|
|
|
const detailQuery = useQuery({
|
|
enabled: Boolean(taskId),
|
|
queryKey: ["workflow", "task", taskId],
|
|
queryFn: () => fetchWorkflowTaskDetail(taskId),
|
|
});
|
|
|
|
const approverQuery = useQuery({
|
|
enabled: hasPermission(permissions, "expense.transfer"),
|
|
queryKey: ["workflow", "approvers"],
|
|
queryFn: () => fetchWorkflowApprovers({ page: 1, pageSize: 50 }),
|
|
});
|
|
|
|
const allowedActions = useMemo(() => {
|
|
return new Set(detailQuery.data?.allowedActions ?? []);
|
|
}, [detailQuery.data?.allowedActions]);
|
|
|
|
const mutation = useMutation({
|
|
mutationFn: async (action: "approve" | "reject" | "return" | "transfer") => {
|
|
if (!taskId) {
|
|
throw new Error("missing taskId");
|
|
}
|
|
|
|
if (action === "approve") {
|
|
return approveWorkflowTask(taskId);
|
|
}
|
|
|
|
if (action === "reject") {
|
|
return rejectWorkflowTask(taskId, rejectComment.trim());
|
|
}
|
|
|
|
if (action === "return") {
|
|
return returnWorkflowTask(taskId, returnComment.trim());
|
|
}
|
|
|
|
if (!selectedApprover) {
|
|
throw new Error("请选择转审目标");
|
|
}
|
|
|
|
return transferWorkflowTask(taskId, selectedApprover, transferReason.trim());
|
|
},
|
|
onSuccess: async (_data, action) => {
|
|
await Promise.all([
|
|
queryClient.invalidateQueries({ queryKey: ["workflow", "tasks"] }),
|
|
queryClient.invalidateQueries({ queryKey: ["workflow", "task", taskId] }),
|
|
]);
|
|
setActionError("");
|
|
const messages: Record<string, string> = { approve: "已通过", reject: "已驳回", return: "已退回", transfer: "已转审" };
|
|
toast.success(messages[action] ?? "操作成功");
|
|
},
|
|
onError: (error) => {
|
|
if (isAlreadyProcessedTaskError(error)) {
|
|
void Promise.all([
|
|
queryClient.invalidateQueries({ queryKey: ["workflow", "tasks"] }),
|
|
queryClient.invalidateQueries({ queryKey: ["workflow", "task", taskId] }),
|
|
]);
|
|
}
|
|
let msg: string;
|
|
if (error instanceof Error && !isApiError(error)) {
|
|
msg = error.message;
|
|
} else if (isApiError(error)) {
|
|
msg = `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
|
|
} else {
|
|
msg = "动作执行失败，请稍后重试";
|
|
}
|
|
setActionError(msg);
|
|
toast.error(msg);
|
|
},
|
|
});
|
|
|
|
const confirmCopy = confirmAction ? getWorkflowConfirmCopy(confirmAction) : null;
|
|
|
|
function requestWorkflowAction(action: WorkflowConfirmAction) {
|
|
if (action === "reject" && rejectComment.trim().length < 1) {
|
|
setActionError("驳回必须填写意见");
|
|
return;
|
|
}
|
|
|
|
if (action === "return" && returnComment.trim().length < 1) {
|
|
setActionError("退回必须填写意见");
|
|
return;
|
|
}
|
|
|
|
setActionError("");
|
|
setConfirmAction(action);
|
|
}
|
|
|
|
if (!taskId) {
|
|
return (
|
|
<div className="card-std p-6">
|
|
<p className="text-sm text-red-600">缺少 taskId 参数。</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (shouldPreferMobileApprovalExperience()) {
|
|
return <Navigate replace to={buildMobileApprovalsPath(taskId)} />;
|
|
}
|
|
|
|
if (detailQuery.isLoading) {
|
|
return <CardSkeleton lines={8} />;
|
|
}
|
|
|
|
if (detailQuery.isError || !detailQuery.data) {
|
|
const message = isApiError(detailQuery.error)
|
|
? `${detailQuery.error.code}: ${mapApiErrorMessage(
|
|
detailQuery.error.code,
|
|
detailQuery.error.details,
|
|
detailQuery.error.message,
|
|
)}`
|
|
: "加载失败，请返回列表重试";
|
|
|
|
return (
|
|
<div className="card-std space-y-3 p-6">
|
|
<p className="text-sm text-red-600">{message}</p>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => navigate("/workflow/tasks")}
|
|
type="button"
|
|
>
|
|
返回待办列表
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const detail = detailQuery.data;
|
|
const canTransfer = allowedActions.has("transfer");
|
|
const allowedActionLabels = detail.allowedActions.map(workflowActionLabel).join(" / ");
|
|
const businessStatusLabel = workflowInstanceStatusLabel(detail.workflowInstance?.currentStatus);
|
|
|
|
return (
|
|
<>
|
|
<PageScaffold>
|
|
<EntityOverviewHero
|
|
title={`任务详情 ${detail.task.stepName}`}
|
|
subtitle="查看摘要并处理。"
|
|
meta={(
|
|
<>
|
|
<StatusBadge status={detail.task.status} />
|
|
<span className="info-chip">业务状态：{businessStatusLabel}</span>
|
|
</>
|
|
)}
|
|
actions={(
|
|
<Button asChild variant="secondary" data-testid="workflow-task-back">
|
|
<Link to="/workflow/tasks">返回待办列表</Link>
|
|
</Button>
|
|
)}
|
|
/>
|
|
|
|
<div className="detail-shell-grid">
|
|
<div className="space-y-6">
|
|
<SectionPanel title="审批对象摘要">
|
|
<div className="space-y-4" data-testid="workflow-task-overview">
|
|
<StatStrip columns={4}>
|
|
<MetricCard title="当前节点" value={<span className="text-base">{detail.task.stepName}</span>} />
|
|
<MetricCard title="业务类型" value={<span className="text-base">{entityTitle(detail.workflowInstance?.entityType)}</span>} />
|
|
<MetricCard title="可执行动作" value={<span className="text-base">{allowedActionLabels || "-"}</span>} />
|
|
<MetricCard title="创建时间" value={<span className="text-base">{formatDateTime(detail.task.createdAt)}</span>} />
|
|
</StatStrip>
|
|
|
|
<dl className="grid gap-3 md:grid-cols-2" data-testid="workflow-task-summary">
|
|
{detail.reimbursement ? (
|
|
<>
|
|
<DetailField label="报销单号" value={detail.reimbursement.formNumber ?? "-"} />
|
|
<DetailField label="报销金额" value={detail.reimbursement.totalAmount ?? "-"} />
|
|
<DetailField label="提交人" value={detail.reimbursement.submitter?.name ?? "-"} />
|
|
<DetailField label="报销人" value={detail.reimbursement.owner?.name ?? "-"} />
|
|
</>
|
|
) : null}
|
|
{detail.leaveRequest ? (
|
|
<>
|
|
<DetailField label="假期类型" value={detail.leaveRequest.leaveType?.name ?? "-"} />
|
|
<DetailField label="申请人" value={detail.leaveRequest.owner?.name ?? "-"} />
|
|
<DetailField
|
|
label="时间段"
|
|
value={
|
|
<>
|
|
{detail.leaveRequest.startDate ?? "-"} {detail.leaveRequest.startSession === "am" ? "上午" : "下午"}
|
|
{" → "}
|
|
{detail.leaveRequest.endDate ?? "-"} {detail.leaveRequest.endSession === "am" ? "上午" : "下午"}
|
|
</>
|
|
}
|
|
/>
|
|
<DetailField label="请假天数" value={detail.leaveRequest.requestedDays} />
|
|
<DetailField label="说明" value={detail.leaveRequest.reason ?? "-"} />
|
|
<DetailField label="附件" value={detail.leaveRequest.attachment?.originalName ?? "-"} />
|
|
</>
|
|
) : null}
|
|
{detail.purchaseRequest ? (
|
|
<>
|
|
<DetailField label="采购单号" value={resolvePurchaseDisplayCode(detail.purchaseRequest)} />
|
|
<DetailField label="标题" value={detail.purchaseRequest.title || "-"} />
|
|
<DetailField label="申请人" value={detail.purchaseRequest.applicant?.name ?? "-"} />
|
|
<DetailField label="供应商" value={detail.purchaseRequest.supplier?.name ?? "-"} />
|
|
<DetailField label="法体" value={detail.purchaseRequest.legalEntity?.name ?? "-"} />
|
|
<DetailField label="成本中心" value={detail.purchaseRequest.costCenter?.name ?? "-"} />
|
|
<DetailField label="单据分类" value={detail.purchaseRequest.documentCategory?.name ?? "-"} />
|
|
<DetailField label="金额" value={`${detail.purchaseRequest.totalAmount ?? "-"} ${detail.purchaseRequest.currencyCode}`} />
|
|
<DetailField label="预计到货" value={detail.purchaseRequest.expectedDeliveryDate ?? "-"} />
|
|
<DetailField label="说明" value={detail.purchaseRequest.reason ?? "-"} />
|
|
</>
|
|
) : null}
|
|
{detail.travelRequest ? (
|
|
<>
|
|
<DetailField label="差旅单号" value={detail.travelRequest.requestNo ?? "暂未生成"} />
|
|
<DetailField label="申请人" value={detail.travelRequest.applicant?.name ?? "-"} />
|
|
<DetailField label="出差类型" value={detail.travelRequest.tripType === "international" ? "国际" : "国内"} />
|
|
<DetailField label="法体" value={detail.travelRequest.legalEntity?.name ?? "-"} />
|
|
<DetailField label="成本中心" value={detail.travelRequest.costCenter?.name ?? "-"} />
|
|
<DetailField label="起止日期" value={`${detail.travelRequest.startDate ?? "-"} → ${detail.travelRequest.endDate ?? "-"}`} />
|
|
<DetailField label="预估金额" value={detail.travelRequest.estimatedAmount ?? "-"} />
|
|
<DetailField label="出差目的" value={detail.travelRequest.purpose || "-"} />
|
|
<DetailField
|
|
label="行程段"
|
|
value={
|
|
detail.travelRequest.segments.length
|
|
? detail.travelRequest.segments
|
|
.map((item) => `${item.fromCity}→${item.toCity}(${item.segmentRole})`)
|
|
.join("；")
|
|
: "-"
|
|
}
|
|
/>
|
|
</>
|
|
) : null}
|
|
</dl>
|
|
</div>
|
|
</SectionPanel>
|
|
|
|
{detail.workflowInstance?.entityType === "reimbursement" &&
|
|
detail.workflowInstance.contextData.standardViolations.length ? (
|
|
<SectionPanel title="费用标准提示">
|
|
<div className="space-y-2">
|
|
{detail.workflowInstance.contextData.standardViolations.map((item) => (
|
|
<div
|
|
key={`${item.itemId}-${item.standardId}`}
|
|
className={
|
|
item.controlMode === "block"
|
|
? "rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700"
|
|
: "rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-700"
|
|
}
|
|
>
|
|
<div className="font-medium text-zinc-900">{item.expenseTypeName}</div>
|
|
<div>
|
|
当前 ¥{item.amount} / 标准 ¥{item.maxAmount}/{item.perUnit}
|
|
</div>
|
|
<div>超出 ¥{item.exceededAmount} · {item.standardName}</div>
|
|
<div>管控模式：{item.controlMode === "block" ? "阻断" : "预警"}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</SectionPanel>
|
|
) : null}
|
|
|
|
<SectionPanel title="审批动作">
|
|
<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={() => requestWorkflowAction("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={() => requestWorkflowAction("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={() => requestWorkflowAction("return")}
|
|
type="button"
|
|
>
|
|
提交退回
|
|
</Button>
|
|
</div>
|
|
|
|
{canTransfer ? (
|
|
<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="处理历史">
|
|
<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">
|
|
{workflowActionLabel(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="任务摘要">
|
|
<div>节点：{detail.task.stepName}</div>
|
|
<div>实例状态：{workflowInstanceStatusLabel(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>
|
|
</PageScaffold>
|
|
<ConfirmDialog
|
|
open={Boolean(confirmCopy)}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setConfirmAction(null);
|
|
}
|
|
}}
|
|
title={confirmCopy?.title ?? ""}
|
|
description={confirmCopy?.description}
|
|
confirmLabel={confirmCopy?.confirmLabel}
|
|
variant={confirmCopy?.variant}
|
|
testId="workflow-action-confirm-dialog"
|
|
confirmTestId="workflow-action-confirm-submit"
|
|
cancelTestId="workflow-action-confirm-cancel"
|
|
onConfirm={async () => {
|
|
if (!confirmAction) {
|
|
return;
|
|
}
|
|
await mutation.mutateAsync(confirmAction);
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|