fix(dialogs): F03 证据弹窗同期间重复点击不再停留在加载中

- 第 0 页重复点击当前已选期间直接返回,不清空列表、不重复请求;
  第二页点击当前期间回到第一页并刷新
- 请求失败显示错误并提供“重试”按钮;空结果显示空态行而不是过期数据
- E2E 覆盖:重复点击、快速本期/基期切换、第二页切期间、失败重试、空列表
This commit is contained in:
Jayway Liu
2026-09-26 01:30:05 +08:00
parent 5ebe83afbb
commit 6cf236a811
2 changed files with 122 additions and 28 deletions
+28 -5
View File
@@ -1,5 +1,12 @@
import { useEffect, useRef, useState } from "react";
import { ChevronLeft, ChevronRight, Download, Save, Trash2, X } from "lucide-react";
import {
ChevronLeft,
ChevronRight,
Download,
Save,
Trash2,
X,
} from "lucide-react";
import { api } from "./api";
import {
labels,
@@ -349,7 +356,8 @@ export function EvidenceDialog({
}>(),
[side, setSide] = useState<"current" | "baseline">("current"),
[page, setPage] = useState(0),
[error, setError] = useState("");
[error, setError] = useState(""),
[reloadKey, setReloadKey] = useState(0);
useEffect(() => {
let active = true;
setResult(undefined);
@@ -364,8 +372,14 @@ export function EvidenceDialog({
return () => {
active = false;
};
}, [ds.id, ctx, side, page]);
}, [ds.id, ctx, side, page, reloadKey]);
function selectSide(value: "current" | "baseline") {
if (value === side) {
// 重复点击当前期间:仅在不在第一页时回到第一页触发刷新,
// 同期间同页直接返回,避免清空列表后停在“加载中”。
if (page !== 0) setPage(0);
return;
}
setResult(undefined);
setPage(0);
setSide(value);
@@ -401,7 +415,8 @@ export function EvidenceDialog({
{user.role !== "admin" && <p>客户原始标识不包含在明细中。</p>}
{error && (
<p role="alert" className="error">
{error}
{error}{" "}
<button onClick={() => setReloadKey((n) => n + 1)}>重试</button>
</p>
)}
<div className="table-scroll">
@@ -435,6 +450,11 @@ export function EvidenceDialog({
<td>{String(r.gross ?? "")}</td>
</tr>
))}
{result && result.rows.length === 0 && (
<tr>
<td colSpan={3 + ds.dimensions.length}>本期范围内没有数据</td>
</tr>
)}
</tbody>
</table>
</div>
@@ -776,7 +796,10 @@ export function FormulaExportDialog({
);
setDefinitions((items) =>
[...items.filter((item) => item.id !== saved.id), saved].sort((a, b) =>
String(a.definition.name).localeCompare(String(b.definition.name), "zh-CN"),
String(a.definition.name).localeCompare(
String(b.definition.name),
"zh-CN",
),
),
);
setSelectedDefinition(saved.id);