260 行
9.8 KiB
TypeScript
260 行
9.8 KiB
TypeScript
import { useState } from "react";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { toast } from "sonner";
|
|
import { mapApiErrorMessage } from "../api/errorMessages";
|
|
import { isApiError } from "../api/types";
|
|
import {
|
|
approveWorkflowTask,
|
|
fetchWorkflowApprovers,
|
|
fetchWorkflowTaskDetail,
|
|
fetchWorkflowTasks,
|
|
rejectWorkflowTask,
|
|
returnWorkflowTask,
|
|
transferWorkflowTask,
|
|
} from "../api/workflow";
|
|
import { PageHeader } from "../components/common/PageHeader";
|
|
import { Button } from "../components/ui/button";
|
|
import { Spinner } from "../components/ui/spinner";
|
|
import { Textarea } from "../components/ui/textarea";
|
|
|
|
type MobileAction = "approve" | "reject" | "return" | "transfer";
|
|
|
|
function entityLabel(entityType: string | undefined) {
|
|
if (entityType === "leave") {
|
|
return "请假";
|
|
}
|
|
if (entityType === "reimbursement") {
|
|
return "报销";
|
|
}
|
|
return entityType || "未知";
|
|
}
|
|
|
|
export function MobileApprovalsPage() {
|
|
const queryClient = useQueryClient();
|
|
const [selectedTaskId, setSelectedTaskId] = useState("");
|
|
const [error, setError] = useState("");
|
|
const [comment, setComment] = useState("");
|
|
const [transferToApproverId, setTransferToApproverId] = useState("");
|
|
const [transferReason, setTransferReason] = useState("");
|
|
|
|
const tasksQuery = useQuery({
|
|
queryKey: ["mobile", "workflow", "tasks"],
|
|
queryFn: () => fetchWorkflowTasks({ status: "pending", page: 1, pageSize: 30 }),
|
|
});
|
|
|
|
const detailQuery = useQuery({
|
|
enabled: Boolean(selectedTaskId),
|
|
queryKey: ["mobile", "workflow", "task-detail", selectedTaskId],
|
|
queryFn: () => fetchWorkflowTaskDetail(selectedTaskId),
|
|
});
|
|
|
|
const approversQuery = useQuery({
|
|
enabled: detailQuery.data?.allowedActions?.includes("transfer") ?? false,
|
|
queryKey: ["mobile", "workflow", "approvers"],
|
|
queryFn: () => fetchWorkflowApprovers({ page: 1, pageSize: 100 }),
|
|
});
|
|
|
|
const actionMutation = useMutation({
|
|
mutationFn: async (action: MobileAction) => {
|
|
if (!selectedTaskId) {
|
|
throw new Error("请选择任务");
|
|
}
|
|
|
|
if (action === "approve") {
|
|
return approveWorkflowTask(selectedTaskId);
|
|
}
|
|
|
|
if (action === "reject") {
|
|
if (!comment.trim()) {
|
|
throw new Error("驳回必须填写意见");
|
|
}
|
|
return rejectWorkflowTask(selectedTaskId, comment.trim());
|
|
}
|
|
|
|
if (action === "return") {
|
|
if (!comment.trim()) {
|
|
throw new Error("退回必须填写意见");
|
|
}
|
|
return returnWorkflowTask(selectedTaskId, comment.trim());
|
|
}
|
|
|
|
if (!transferToApproverId) {
|
|
throw new Error("请选择转审目标审批人");
|
|
}
|
|
if (transferReason.trim().length < 10) {
|
|
throw new Error("转审理由至少 10 个字");
|
|
}
|
|
|
|
return transferWorkflowTask(selectedTaskId, transferToApproverId, transferReason.trim());
|
|
},
|
|
onSuccess: async () => {
|
|
await Promise.all([
|
|
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "tasks"] }),
|
|
queryClient.invalidateQueries({ queryKey: ["mobile", "workflow", "task-detail", selectedTaskId] }),
|
|
]);
|
|
setComment("");
|
|
setTransferReason("");
|
|
setTransferToApproverId("");
|
|
setError("");
|
|
toast.success("操作成功");
|
|
},
|
|
onError: (err) => {
|
|
const msg = isApiError(err) ? `${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}` : err instanceof Error ? err.message : "动作执行失败";
|
|
setError(msg);
|
|
toast.error(msg);
|
|
},
|
|
});
|
|
|
|
const pendingTasks = tasksQuery.data?.items ?? [];
|
|
const selectedTask = detailQuery.data;
|
|
const isLeaveTask = selectedTask?.workflowInstance?.entityType === "leave";
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<PageHeader title="移动审批" subtitle="小屏快速处理待办任务。" />
|
|
|
|
{error ? (
|
|
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
|
|
) : null}
|
|
|
|
<div className="card-std space-y-3 p-4" data-testid="mobile-approvals-list">
|
|
<h3 className="text-base font-semibold text-zinc-900">待办任务</h3>
|
|
|
|
{tasksQuery.isLoading ? <div className="flex items-center gap-2 text-sm text-zinc-500"><Spinner size="sm" />加载中...</div> : null}
|
|
|
|
{!tasksQuery.isLoading && pendingTasks.length === 0 ? (
|
|
<p className="text-sm text-zinc-500">暂无待办任务。</p>
|
|
) : null}
|
|
|
|
<div className="space-y-2">
|
|
{pendingTasks.map((task) => (
|
|
<button
|
|
key={task.id}
|
|
className={`w-full rounded-lg border px-3 py-2 text-left text-sm ${
|
|
selectedTaskId === task.id
|
|
? "border-primary bg-primary-50 text-primary"
|
|
: "border-zinc-200 bg-white text-zinc-800"
|
|
}`}
|
|
data-testid={`mobile-approvals-task-${task.id}`}
|
|
onClick={() => setSelectedTaskId(task.id)}
|
|
type="button"
|
|
>
|
|
<div className="font-medium">{task.stepName}</div>
|
|
<div className="text-xs text-zinc-500">任务ID: {task.id}</div>
|
|
<div className="text-xs text-zinc-500">业务: {entityLabel(task.workflowInstance?.entityType)}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card-std space-y-3 p-4" data-testid="mobile-approvals-detail">
|
|
<h3 className="text-base font-semibold text-zinc-900">任务详情与动作</h3>
|
|
|
|
{!selectedTaskId ? <p className="text-sm text-zinc-500">请先选择任务。</p> : null}
|
|
|
|
{selectedTaskId && detailQuery.isLoading ? (
|
|
<p className="text-sm text-zinc-500">加载任务详情中...</p>
|
|
) : null}
|
|
|
|
{selectedTask && (
|
|
<>
|
|
<div className="rounded-lg border border-zinc-200 p-3 text-sm">
|
|
<div>任务状态：{selectedTask.task.status}</div>
|
|
<div>步骤：{selectedTask.task.stepName}</div>
|
|
<div>对象类型：{entityLabel(selectedTask.workflowInstance?.entityType)}</div>
|
|
{selectedTask.reimbursement ? (
|
|
<>
|
|
<div>报销单号：{selectedTask.reimbursement.formNumber ?? "-"}</div>
|
|
<div>金额：{selectedTask.reimbursement.totalAmount ?? "-"}</div>
|
|
<div>提交人：{selectedTask.reimbursement.submitter?.name ?? "-"}</div>
|
|
</>
|
|
) : null}
|
|
{selectedTask.leaveRequest ? (
|
|
<>
|
|
<div>假期类型：{selectedTask.leaveRequest.leaveType?.name ?? "-"}</div>
|
|
<div>申请人：{selectedTask.leaveRequest.owner?.name ?? "-"}</div>
|
|
<div>请假天数：{selectedTask.leaveRequest.requestedDays}</div>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
|
|
<Textarea
|
|
data-testid="mobile-approvals-comment"
|
|
onChange={(event) => setComment(event.target.value)}
|
|
placeholder="驳回/退回意见"
|
|
rows={3}
|
|
value={comment}
|
|
/>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
data-testid="mobile-approvals-approve"
|
|
disabled={actionMutation.isPending || !selectedTask.allowedActions.includes("approve")}
|
|
onClick={() => actionMutation.mutate("approve")}
|
|
type="button"
|
|
>
|
|
通过
|
|
</Button>
|
|
<Button
|
|
data-testid="mobile-approvals-reject"
|
|
disabled={actionMutation.isPending || !selectedTask.allowedActions.includes("reject")}
|
|
onClick={() => actionMutation.mutate("reject")}
|
|
type="button"
|
|
variant="secondary"
|
|
>
|
|
驳回
|
|
</Button>
|
|
<Button
|
|
data-testid="mobile-approvals-return"
|
|
disabled={actionMutation.isPending || !selectedTask.allowedActions.includes("return")}
|
|
onClick={() => actionMutation.mutate("return")}
|
|
type="button"
|
|
variant="secondary"
|
|
>
|
|
退回
|
|
</Button>
|
|
</div>
|
|
|
|
{!isLeaveTask && selectedTask.allowedActions.includes("transfer") ? (
|
|
<div className="space-y-2 rounded-lg border border-zinc-200 p-3 text-sm">
|
|
<p className="font-medium text-zinc-800">转审</p>
|
|
<select
|
|
className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm"
|
|
data-testid="mobile-approvals-transfer-to"
|
|
onChange={(event) => setTransferToApproverId(event.target.value)}
|
|
value={transferToApproverId}
|
|
>
|
|
<option value="">请选择目标审批人</option>
|
|
{(approversQuery.data?.items ?? []).map((approver) => (
|
|
<option key={approver.id} value={approver.id}>
|
|
{approver.name} ({approver.employeeNo})
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
<Textarea
|
|
data-testid="mobile-approvals-transfer-reason"
|
|
onChange={(event) => setTransferReason(event.target.value)}
|
|
placeholder="转审理由（至少10字）"
|
|
rows={2}
|
|
value={transferReason}
|
|
/>
|
|
|
|
<Button
|
|
data-testid="mobile-approvals-transfer"
|
|
disabled={actionMutation.isPending || !selectedTask.allowedActions.includes("transfer")}
|
|
onClick={() => actionMutation.mutate("transfer")}
|
|
type="button"
|
|
variant="secondary"
|
|
>
|
|
提交转审
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|