feat(P11-P12): 落地治理开关与移动端MVP（G0-G6/H1/M1-M4）
- 新增 Feature Flag 模型、评估服务与管理 API（erp_sync/invoice_verification）\n- 完成 ERP 与验真灰度收口（路由/服务/作业统一判定）\n- 补齐 pay 与手动 sync 的 department_id 灰度上下文\n- 增加管理后台开关页、PWA 基础设施与移动拍照/审批页面\n- 增加回归脚本、安全基线与压测脚本，更新文档与执行合同\n\nIssue: G0,G1,G2,G3,G4,G5,G6,H1,M1,M2,M3,M4
这个提交包含在：
@@ -0,0 +1,351 @@
|
||||
import { useMemo, useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { fetchDepartments } from "../api/departments";
|
||||
import {
|
||||
fetchFeatureFlags,
|
||||
updateFeatureFlag,
|
||||
type FeatureFlagItem,
|
||||
type FeatureFlagOverrideMode,
|
||||
type FeatureFlagRolloutType,
|
||||
} from "../api/featureFlags";
|
||||
import { mapApiErrorMessage } from "../api/errorMessages";
|
||||
import { isApiError } from "../api/types";
|
||||
import { PageHeader } from "../components/common/PageHeader";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card } from "../components/ui/card";
|
||||
import { Label } from "../components/ui/label";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
|
||||
|
||||
const OVERRIDE_MODE_OPTIONS: Array<{ value: FeatureFlagOverrideMode; label: string }> = [
|
||||
{ value: "force_off", label: "强制关闭" },
|
||||
{ value: "inherit", label: "继承Env" },
|
||||
{ value: "force_on", label: "强制开启" },
|
||||
];
|
||||
|
||||
const ROLLOUT_TYPE_OPTIONS: Array<{ value: FeatureFlagRolloutType; label: string }> = [
|
||||
{ value: "global", label: "全量" },
|
||||
{ value: "department_allowlist", label: "部门白名单" },
|
||||
];
|
||||
|
||||
function toDisplayName(flagKey: string) {
|
||||
if (flagKey === "erp_sync") return "ERP 同步";
|
||||
if (flagKey === "invoice_verification") return "发票验真";
|
||||
return flagKey;
|
||||
}
|
||||
|
||||
function dedupeIds(items: string[]) {
|
||||
return Array.from(new Set(items.filter(Boolean)));
|
||||
}
|
||||
|
||||
type DraftState = {
|
||||
overrideMode: FeatureFlagOverrideMode;
|
||||
rolloutType: FeatureFlagRolloutType;
|
||||
departmentIds: string[];
|
||||
note: string;
|
||||
version: number;
|
||||
};
|
||||
|
||||
function buildDraft(item: FeatureFlagItem): DraftState {
|
||||
return {
|
||||
overrideMode: item.overrideMode,
|
||||
rolloutType: item.rolloutType,
|
||||
departmentIds: item.departmentIds,
|
||||
note: item.note ?? "",
|
||||
version: item.version,
|
||||
};
|
||||
}
|
||||
|
||||
export function FeatureFlagsPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [error, setError] = useState("");
|
||||
const [drafts, setDrafts] = useState<Record<string, DraftState>>({});
|
||||
|
||||
const flagsQuery = useQuery({
|
||||
queryKey: ["feature-flags"],
|
||||
queryFn: () => fetchFeatureFlags(),
|
||||
});
|
||||
|
||||
const departmentsQuery = useQuery({
|
||||
queryKey: ["departments", "feature-flags", "active"],
|
||||
queryFn: () => fetchDepartments({ includeArchived: false }),
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: async (flagKey: string) => {
|
||||
const draft = drafts[flagKey];
|
||||
if (!draft) {
|
||||
throw new Error("未找到待提交草稿");
|
||||
}
|
||||
|
||||
return updateFeatureFlag(flagKey as "erp_sync" | "invoice_verification", {
|
||||
overrideMode: draft.overrideMode,
|
||||
rolloutType: draft.rolloutType,
|
||||
departmentIds:
|
||||
draft.rolloutType === "department_allowlist" ? dedupeIds(draft.departmentIds) : [],
|
||||
note: draft.note.trim(),
|
||||
expectedVersion: draft.version,
|
||||
});
|
||||
},
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ["feature-flags"] });
|
||||
setError("");
|
||||
},
|
||||
onError: (err) => {
|
||||
if (isApiError(err)) {
|
||||
setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
|
||||
return;
|
||||
}
|
||||
setError(err instanceof Error ? err.message : "更新开关失败");
|
||||
},
|
||||
});
|
||||
|
||||
const departmentsById = useMemo(() => {
|
||||
const map = new Map<string, string>();
|
||||
for (const item of departmentsQuery.data?.items ?? []) {
|
||||
map.set(item.id, item.name);
|
||||
}
|
||||
return map;
|
||||
}, [departmentsQuery.data?.items]);
|
||||
|
||||
const items = flagsQuery.data?.items ?? [];
|
||||
|
||||
const ensureDraft = (item: FeatureFlagItem) => {
|
||||
if (drafts[item.flagKey]) {
|
||||
return drafts[item.flagKey];
|
||||
}
|
||||
return buildDraft(item);
|
||||
};
|
||||
|
||||
const patchDraft = (flagKey: string, updater: (prev: DraftState) => DraftState) => {
|
||||
setDrafts((prev) => {
|
||||
const base = prev[flagKey];
|
||||
const next = updater(base ?? buildDraft(items.find((item) => item.flagKey === flagKey)!));
|
||||
return {
|
||||
...prev,
|
||||
[flagKey]: next,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="功能开关"
|
||||
subtitle="统一治理 ERP 与验真灰度。Env 仍是硬闸，在线开关用于部门级灰度。"
|
||||
/>
|
||||
|
||||
{error ? (
|
||||
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
|
||||
) : null}
|
||||
|
||||
<Card className="space-y-4 p-6">
|
||||
<h3 className="text-base font-semibold text-slate-900">开关列表</h3>
|
||||
|
||||
{flagsQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
|
||||
|
||||
{flagsQuery.isError ? (
|
||||
<p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
|
||||
{isApiError(flagsQuery.error)
|
||||
? `${flagsQuery.error.code}: ${mapApiErrorMessage(
|
||||
flagsQuery.error.code,
|
||||
flagsQuery.error.details,
|
||||
flagsQuery.error.message,
|
||||
)}`
|
||||
: "加载功能开关失败"}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{!flagsQuery.isLoading && !flagsQuery.isError ? (
|
||||
<div className="rounded-lg border border-slate-200">
|
||||
<Table data-testid="feature-flags-table">
|
||||
<TableHeader>
|
||||
<tr>
|
||||
<TableHead>功能</TableHead>
|
||||
<TableHead>当前状态</TableHead>
|
||||
<TableHead>覆盖策略</TableHead>
|
||||
<TableHead>灰度范围</TableHead>
|
||||
<TableHead>备注</TableHead>
|
||||
<TableHead className="w-40">操作</TableHead>
|
||||
</tr>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{items.map((item) => {
|
||||
const draft = ensureDraft(item);
|
||||
const isPending = updateMutation.isPending && updateMutation.variables === item.flagKey;
|
||||
|
||||
return (
|
||||
<TableRow key={item.flagKey} data-testid={`feature-flag-row-${item.flagKey}`}>
|
||||
<TableCell>
|
||||
<div className="font-medium text-slate-900">{toDisplayName(item.flagKey)}</div>
|
||||
<div className="font-mono text-xs text-slate-500">{item.flagKey}</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell className="text-sm">
|
||||
<div>
|
||||
Env：
|
||||
<span className={item.envEnabled ? "text-emerald-600" : "text-red-600"}>
|
||||
{item.envEnabled ? "ON" : "OFF"}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
Effective：
|
||||
<span className={item.effectiveEnabled ? "text-emerald-600" : "text-red-600"}>
|
||||
{item.effectiveEnabled ? "ON" : "OFF"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500">reason: {item.effectiveReason}</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell className="space-y-2 text-sm">
|
||||
<div>
|
||||
<Label className="mb-1 block text-xs text-slate-500">override</Label>
|
||||
<select
|
||||
className="h-10 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
|
||||
value={draft.overrideMode}
|
||||
onChange={(event) =>
|
||||
patchDraft(item.flagKey, (prev) => ({
|
||||
...prev,
|
||||
overrideMode: event.target.value as FeatureFlagOverrideMode,
|
||||
}))
|
||||
}
|
||||
>
|
||||
{OVERRIDE_MODE_OPTIONS.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="mb-1 block text-xs text-slate-500">rollout</Label>
|
||||
<select
|
||||
className="h-10 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
|
||||
value={draft.rolloutType}
|
||||
onChange={(event) =>
|
||||
patchDraft(item.flagKey, (prev) => ({
|
||||
...prev,
|
||||
rolloutType: event.target.value as FeatureFlagRolloutType,
|
||||
departmentIds:
|
||||
event.target.value === "department_allowlist"
|
||||
? prev.departmentIds
|
||||
: [],
|
||||
}))
|
||||
}
|
||||
>
|
||||
{ROLLOUT_TYPE_OPTIONS.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell className="text-sm">
|
||||
{draft.rolloutType === "department_allowlist" ? (
|
||||
<div className="space-y-2">
|
||||
<select
|
||||
className="h-10 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
|
||||
value=""
|
||||
onChange={(event) => {
|
||||
const selected = event.target.value;
|
||||
if (!selected) return;
|
||||
patchDraft(item.flagKey, (prev) => ({
|
||||
...prev,
|
||||
departmentIds: dedupeIds([...prev.departmentIds, selected]),
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<option value="">添加部门</option>
|
||||
{(departmentsQuery.data?.items ?? []).map((department) => (
|
||||
<option key={department.id} value={department.id}>
|
||||
{department.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<div className="max-h-24 overflow-auto rounded border border-slate-200 p-2 text-xs">
|
||||
{draft.departmentIds.length ? (
|
||||
draft.departmentIds.map((departmentId) => (
|
||||
<div
|
||||
key={departmentId}
|
||||
className="mb-1 flex items-center justify-between rounded bg-slate-50 px-2 py-1"
|
||||
>
|
||||
<span>{departmentsById.get(departmentId) ?? departmentId}</span>
|
||||
<button
|
||||
className="text-red-600"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
patchDraft(item.flagKey, (prev) => ({
|
||||
...prev,
|
||||
departmentIds: prev.departmentIds.filter((id) => id !== departmentId),
|
||||
}))
|
||||
}
|
||||
>
|
||||
移除
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="text-slate-500">暂无白名单部门</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-slate-500">全量</span>
|
||||
)}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<textarea
|
||||
className="min-h-24 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
|
||||
placeholder="填写本次变更说明"
|
||||
value={draft.note}
|
||||
onChange={(event) =>
|
||||
patchDraft(item.flagKey, (prev) => ({
|
||||
...prev,
|
||||
note: event.target.value,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-slate-500">version: {draft.version}</p>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="space-y-2">
|
||||
<Button
|
||||
data-testid={`feature-flag-save-${item.flagKey}`}
|
||||
disabled={isPending}
|
||||
onClick={() => updateMutation.mutate(item.flagKey)}
|
||||
type="button"
|
||||
>
|
||||
{isPending ? "保存中..." : "保存"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
data-testid={`feature-flag-reset-${item.flagKey}`}
|
||||
variant="secondary"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setDrafts((prev) => ({
|
||||
...prev,
|
||||
[item.flagKey]: buildDraft(item),
|
||||
}))
|
||||
}
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
) : null}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,235 @@
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
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 { Card } from "../components/ui/card";
|
||||
import { Textarea } from "../components/ui/textarea";
|
||||
|
||||
type MobileAction = "approve" | "reject" | "return" | "transfer";
|
||||
|
||||
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("");
|
||||
},
|
||||
onError: (err) => {
|
||||
if (isApiError(err)) {
|
||||
setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
|
||||
return;
|
||||
}
|
||||
|
||||
setError(err instanceof Error ? err.message : "动作执行失败");
|
||||
},
|
||||
});
|
||||
|
||||
const pendingTasks = tasksQuery.data?.items ?? [];
|
||||
const selectedTask = detailQuery.data;
|
||||
|
||||
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}
|
||||
|
||||
<Card className="space-y-3 p-4" data-testid="mobile-approvals-list">
|
||||
<h3 className="text-base font-semibold text-slate-900">待办任务</h3>
|
||||
|
||||
{tasksQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
|
||||
|
||||
{!tasksQuery.isLoading && pendingTasks.length === 0 ? (
|
||||
<p className="text-sm text-slate-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-slate-200 bg-white text-slate-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-slate-500">任务ID: {task.id}</div>
|
||||
<div className="text-xs text-slate-500">状态: {task.status}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="space-y-3 p-4" data-testid="mobile-approvals-detail">
|
||||
<h3 className="text-base font-semibold text-slate-900">任务详情与动作</h3>
|
||||
|
||||
{!selectedTaskId ? <p className="text-sm text-slate-500">请先选择任务。</p> : null}
|
||||
|
||||
{selectedTaskId && detailQuery.isLoading ? (
|
||||
<p className="text-sm text-slate-500">加载任务详情中...</p>
|
||||
) : null}
|
||||
|
||||
{selectedTask && (
|
||||
<>
|
||||
<div className="rounded-lg border border-slate-200 p-3 text-sm">
|
||||
<div>任务状态：{selectedTask.task.status}</div>
|
||||
<div>步骤：{selectedTask.task.stepName}</div>
|
||||
<div>报销单号：{selectedTask.reimbursement?.formNumber ?? "-"}</div>
|
||||
<div>金额：{selectedTask.reimbursement?.totalAmount ?? "-"}</div>
|
||||
<div>提交人：{selectedTask.reimbursement?.submitter?.name ?? "-"}</div>
|
||||
</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>
|
||||
|
||||
<div className="space-y-2 rounded-lg border border-slate-200 p-3 text-sm">
|
||||
<p className="font-medium text-slate-800">转审</p>
|
||||
<select
|
||||
className="h-10 w-full rounded-lg border border-slate-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>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,242 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { uploadInvoice } from "../api/invoicePool";
|
||||
import { mapApiErrorMessage } from "../api/errorMessages";
|
||||
import { isApiError } from "../api/types";
|
||||
import { PageHeader } from "../components/common/PageHeader";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card } from "../components/ui/card";
|
||||
import {
|
||||
enqueueInvoiceUpload,
|
||||
listQueuedInvoiceUploads,
|
||||
queuedItemToFile,
|
||||
removeQueuedInvoiceUpload,
|
||||
type MobileUploadQueueItem,
|
||||
} from "../mobile/uploadQueue";
|
||||
|
||||
function formatTime(value: string) {
|
||||
try {
|
||||
return new Date(value).toLocaleString("zh-CN");
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
function isLikelyNetworkError(error: unknown) {
|
||||
if (isApiError(error)) {
|
||||
return error.status >= 500;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export function MobileCapturePage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [error, setError] = useState("");
|
||||
const [message, setMessage] = useState("");
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
||||
const [isOnline, setIsOnline] = useState<boolean>(navigator.onLine);
|
||||
|
||||
const queueQuery = useQuery({
|
||||
queryKey: ["mobile", "invoice-upload-queue"],
|
||||
queryFn: () => listQueuedInvoiceUploads(),
|
||||
});
|
||||
|
||||
const uploadMutation = useMutation({
|
||||
mutationFn: async (file: File) => uploadInvoice(file, "vat"),
|
||||
onSuccess: () => {
|
||||
setSelectedFile(null);
|
||||
setError("");
|
||||
setMessage("上传成功");
|
||||
},
|
||||
onError: (err) => {
|
||||
if (isApiError(err)) {
|
||||
setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
|
||||
return;
|
||||
}
|
||||
|
||||
setError(err instanceof Error ? err.message : "上传失败");
|
||||
},
|
||||
});
|
||||
|
||||
const syncMutation = useMutation({
|
||||
mutationFn: async (items: MobileUploadQueueItem[]) => {
|
||||
let succeeded = 0;
|
||||
let failed = 0;
|
||||
|
||||
for (const item of items) {
|
||||
try {
|
||||
const file = queuedItemToFile(item);
|
||||
await uploadInvoice(file, "vat");
|
||||
await removeQueuedInvoiceUpload(item.id);
|
||||
succeeded += 1;
|
||||
} catch {
|
||||
failed += 1;
|
||||
}
|
||||
}
|
||||
|
||||
return { succeeded, failed };
|
||||
},
|
||||
onSuccess: async (result) => {
|
||||
await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
|
||||
setError("");
|
||||
setMessage(`队列同步完成：成功 ${result.succeeded}，失败 ${result.failed}`);
|
||||
},
|
||||
onError: (err) => {
|
||||
setError(err instanceof Error ? err.message : "队列同步失败");
|
||||
},
|
||||
});
|
||||
|
||||
const queuedItems = queueQuery.data ?? [];
|
||||
|
||||
const queuedCountLabel = useMemo(() => {
|
||||
if (!queuedItems.length) return "无待上传项";
|
||||
return `待上传 ${queuedItems.length} 项`;
|
||||
}, [queuedItems.length]);
|
||||
|
||||
useEffect(() => {
|
||||
const onOnline = () => {
|
||||
setIsOnline(true);
|
||||
if (queuedItems.length) {
|
||||
syncMutation.mutate(queuedItems);
|
||||
}
|
||||
};
|
||||
|
||||
const onOffline = () => {
|
||||
setIsOnline(false);
|
||||
};
|
||||
|
||||
window.addEventListener("online", onOnline);
|
||||
window.addEventListener("offline", onOffline);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("online", onOnline);
|
||||
window.removeEventListener("offline", onOffline);
|
||||
};
|
||||
}, [queuedItems, syncMutation]);
|
||||
|
||||
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}
|
||||
|
||||
{message ? (
|
||||
<p className="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">{message}</p>
|
||||
) : null}
|
||||
|
||||
<Card className="space-y-3 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-base font-semibold text-slate-900">拍照/选择文件</h3>
|
||||
<span className={isOnline ? "text-emerald-600" : "text-orange-600"}>
|
||||
{isOnline ? "在线" : "离线"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<input
|
||||
accept="image/*,application/pdf"
|
||||
capture="environment"
|
||||
className="w-full text-sm"
|
||||
data-testid="mobile-capture-file"
|
||||
onChange={(event) => {
|
||||
const file = event.target.files?.[0] ?? null;
|
||||
setSelectedFile(file);
|
||||
}}
|
||||
type="file"
|
||||
/>
|
||||
|
||||
<div className="text-sm text-slate-600">
|
||||
当前文件：{selectedFile ? `${selectedFile.name} (${Math.ceil(selectedFile.size / 1024)} KB)` : "未选择"}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
data-testid="mobile-capture-upload"
|
||||
disabled={uploadMutation.isPending || !selectedFile}
|
||||
onClick={async () => {
|
||||
if (!selectedFile) return;
|
||||
|
||||
setMessage("");
|
||||
setError("");
|
||||
|
||||
if (!isOnline) {
|
||||
await enqueueInvoiceUpload(selectedFile);
|
||||
await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
|
||||
setSelectedFile(null);
|
||||
setMessage("当前离线，已加入待上传队列");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await uploadMutation.mutateAsync(selectedFile);
|
||||
} catch (err) {
|
||||
if (isLikelyNetworkError(err)) {
|
||||
await enqueueInvoiceUpload(selectedFile);
|
||||
await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
|
||||
setSelectedFile(null);
|
||||
setError("");
|
||||
setMessage("上传失败，已加入离线队列等待重试");
|
||||
return;
|
||||
}
|
||||
|
||||
throw err;
|
||||
}
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
{uploadMutation.isPending ? "上传中..." : "立即上传"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
data-testid="mobile-capture-sync-queue"
|
||||
disabled={!queuedItems.length || syncMutation.isPending || !isOnline}
|
||||
onClick={() => syncMutation.mutate(queuedItems)}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
>
|
||||
{syncMutation.isPending ? "同步中..." : "同步队列"}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="space-y-3 p-4" data-testid="mobile-capture-queue">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-base font-semibold text-slate-900">离线上传队列</h3>
|
||||
<span className="text-sm text-slate-500">{queuedCountLabel}</span>
|
||||
</div>
|
||||
|
||||
{queueQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
|
||||
|
||||
{!queueQuery.isLoading && queuedItems.length === 0 ? (
|
||||
<p className="text-sm text-slate-500">暂无待上传文件。</p>
|
||||
) : null}
|
||||
|
||||
{queuedItems.map((item) => (
|
||||
<div key={item.id} className="rounded-lg border border-slate-200 px-3 py-2 text-sm">
|
||||
<div className="font-medium text-slate-800">{item.fileName}</div>
|
||||
<div className="text-slate-500">创建时间：{formatTime(item.createdAt)}</div>
|
||||
<div className="mt-2">
|
||||
<Button
|
||||
data-testid={`mobile-capture-remove-${item.id}`}
|
||||
onClick={async () => {
|
||||
await removeQueuedInvoiceUpload(item.id);
|
||||
await queryClient.invalidateQueries({ queryKey: ["mobile", "invoice-upload-queue"] });
|
||||
}}
|
||||
size="sm"
|
||||
type="button"
|
||||
variant="secondary"
|
||||
>
|
||||
移除
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
在新工单中引用
屏蔽一个用户