Admin:分页每页条数切换后自动刷新 #243

Open
opened 2026-08-15 15:26:37 +08:00 by ila · 3 comments
Owner

基本信息

  • 类型:缺陷
  • 父级大工单:#14
  • 所属 MVP / 版本:#15 Admin 四模块可用闭环
  • 阶段:公共列表分页与交互一致性
  • 依赖:#242

要解决什么

#242 增加了每页 20 / 50 / 100 条下拉框,但当前公共分页使用普通 GET 表单。采购员把下拉框从 20 切换为 50 时只改变了控件值,浏览器不会提交表单,必须额外点击“应用”,与“切换后立即生效”的操作预期不一致。

同时验收检查发现,模块导航状态白名单尚未加入 page_size,因此切换到其他模块再返回时可能丢失已选容量;这属于 #242 已确认状态保留范围的遗漏。

复现步骤:

  1. 打开任一带公共分页的 Admin 列表。
  2. 在右下角把“每页 20 条”改成“每页 50 条”。
  3. 页面不刷新,列表仍显示 20 条;只有再点击“应用”才生效。

做什么 / 不做什么

  • 做:
    • 下拉框选择 20、50、100 后立即提交当前 GET 表单并刷新列���。
    • 自动提交期间给表单 aria-busy,禁用备用按钮并显示“加载中…”,防止重复提交。
    • 保留“应用”按钮作为 JavaScript 不可用时的渐进增强备用入口。
    • 把 page_size 加入各主模块的状态保存白名单,切换模块后能恢复。
    • 保持 #242 的筛选参数、回到第 1 页、后端白名单和批量操作上限规则。
  • 不做:
    • 不改每页可选值、SQL 分页、数据库或 Client 接口。
    • 不自动提交其他搜索筛选控件。
    • 不移除无 JavaScript 时可用的普通 GET 表单。

怎么做

  • 在 admin/templates/partials/footer.html 为分页容量表单、下拉框和备用按钮增加明确的 data-* 标记。
  • 在 admin/static/js/app.js 增加单一 setupPageSizeForms:监听 change,防重复后调用 requestSubmit();旧浏览器降级为 form.submit()。
  • 自动提交前只禁用备用按钮,不禁用下拉框,确保 page_size 仍作为成功控件提交。
  • 在 MODULE_QUERY_KEYS 的蝦皮、PDD、顺运宝、采集采购、客户端、档口入库码和用户模块加入 page_size。
  • 更新公共分页交互测试和 docs/admin/05-ui-specification.md。

验收标准

  • 在任一公共分页列表选择 50 或 100 后,无需点击“应用”即可立即发起 GET 刷新。
  • 自动刷新后的 URL 包含归一化 page_size,列表回到第 1 页且保留当前筛选。
  • 自动提交期间备用按钮禁用并显示“加载中…”,不会因连续 change 重复提交。
  • 键盘选择下拉项同样生效;JavaScript 不可用时仍可点击“应用”提交。
  • 主模块切换后返回可恢复 page_size;不保存勾选、弹窗或临时消息。
  • 固定 Go 1.23.0 下 go test ./... -count=1、go build ./...、go vet ./... 通过。

怎么验证

从 admin/ 执行:

$env:GOTOOLCHAIN="go1.23.0"
go test ./... -count=1
go build ./...
go vet ./...
Remove-Item Env:GOTOOLCHAIN

浏览器打开任一主列表,在 20、50、100 之间切换,检查立即刷新、URL、页码和筛选;再切换模块并返回检查状态恢复。禁用 JavaScript 后检查“应用”按钮仍能提交。

风险和回退

  • 风险:change 事件可能被快速重复触发;使用 aria-busy 门禁并禁用备用按钮。
  • 风险:禁用 select 会导致 page_size 不提交,因此不能在导航前禁用下拉框。
  • 回退:回退本工单提交即可恢复手动点击“应用”;#242 后端分页能力和数据不受影响。
## 基本信息 - 类型:缺陷 - 父级大工单:#14 - 所属 MVP / 版本:#15 Admin 四模块可用闭环 - 阶段:公共列表分页与交互一致性 - 依赖:#242 ## 要解决什么 #242 增加了每页 20 / 50 / 100 条下拉框,但当前公共分页使用普通 GET 表单。采购员把下拉框从 20 切换为 50 时只改变了控件值,浏览器不会提交表单,必须额外点击“应用”,与“切换后立即生效”的操作预期不一致。 同时验收检查发现,模块导航状态白名单尚未加入 `page_size`,因此切换到其他模块再返回时可能丢失已选容量;这属于 #242 已确认状态保留范围的遗漏。 复现步骤: 1. 打开任一带公共分页的 Admin 列表。 2. 在右下角把“每页 20 条”改成“每页 50 条”。 3. 页面不刷新,列表仍显示 20 条;只有再点击“应用”才生效。 ## 做什么 / 不做什么 - 做: - 下拉框选择 20、50、100 后立即提交当前 GET 表单并刷新列���。 - 自动提交期间给表单 `aria-busy`,禁用备用按钮并显示“加载中…”,防止重复提交。 - 保留“应用”按钮作为 JavaScript 不可用时的渐进增强备用入口。 - 把 `page_size` 加入各主模块的状态保存白名单,切换模块后能恢复。 - 保持 #242 的筛选参数、回到第 1 页、后端白名单和批量操作上限规则。 - 不做: - 不改每页可选值、SQL 分页、数据库或 Client 接口。 - 不自动提交其他搜索筛选控件。 - 不移除无 JavaScript 时可用的普通 GET 表单。 ## 怎么做 - 在 `admin/templates/partials/footer.html` 为分页容量表单、下拉框和备用按钮增加明确的 `data-*` 标记。 - 在 `admin/static/js/app.js` 增加单一 `setupPageSizeForms`:监听 `change`,防重复后调用 `requestSubmit()`;旧浏览器降级为 `form.submit()`。 - 自动提交前只禁用备用按钮,不禁用下拉框,确保 `page_size` 仍作为成功控件提交。 - 在 `MODULE_QUERY_KEYS` 的蝦皮、PDD、顺运宝、采集采购、客户端、档口入库码和用户模块加入 `page_size`。 - 更新公共分页交互测试和 `docs/admin/05-ui-specification.md`。 ## 验收标准 - [ ] 在任一公共分页列表选择 50 或 100 后,无需点击“应用”即可立即发起 GET 刷新。 - [ ] 自动刷新后的 URL 包含归一化 `page_size`,列表回到第 1 页且保留当前筛选。 - [ ] 自动提交期间备用按钮禁用并显示“加载中…”,不会因连续 change 重复提交。 - [ ] 键盘选择下拉项同样生效;JavaScript 不可用时仍可点击“应用”提交。 - [ ] 主模块切换后返回可恢复 `page_size`;不保存勾选、弹窗或临时消息。 - [ ] 固定 Go 1.23.0 下 `go test ./... -count=1`、`go build ./...`、`go vet ./...` 通过。 ## 怎么验证 从 `admin/` 执行: ```powershell $env:GOTOOLCHAIN="go1.23.0" go test ./... -count=1 go build ./... go vet ./... Remove-Item Env:GOTOOLCHAIN ``` 浏览器打开任一主列表,在 20、50、100 之间切换,检查立即刷新、URL、页码和筛选;再切换模块并返回检查状态恢复。禁用 JavaScript 后检查“应用”按钮仍能提交。 ## 风险和回退 - 风险:change 事件可能被快速重复触发;使用 `aria-busy` 门禁并禁用备用按钮。 - 风险:禁用 select 会导致 `page_size` 不提交,因此不能在导航前禁用下拉框。 - 回退:回退本工单提交即可恢复手动点击“应用”;#242 后端分页能力和数据不受影响。
Author
Owner

状态:进行中。根因已确认:普通 GET 下拉框没有 change 提交行为;同时发现模块状态白名单遗漏 page_size。开始按已确认的渐进增强方案实施。

状态:进行中。根因已确认:普通 GET 下拉框没有 change 提交行为;同时发现模块状态白名单遗漏 page_size。开始按已确认的渐进增强方案实施。
Author
Owner

实施完成,待验收

状态:待验收

已完成:

  • 选择每页 20 / 50 / 100 条后立即提交 GET 表单并刷新;
  • 提交期间显示“加载中…”并阻止重复提交;
  • 保留“应用”按钮,JavaScript 不可用时仍可手动提交;
  • 将 page_size 补入蝦皮、PDD、顺运宝、采集采购、客户端、档口入库码和用户模块的状态白名单;
  • 更新 UI 规范和回归测试。

验证结果:

$env:GOTOOLCHAIN="go1.23.0"
go test ./... -count=1
go build ./...
go vet ./...
node --check static/js/app.js

以上全部通过,git diff --check 通过。

提交:

  • 8e4239b fix: 分页条数切换后自动刷新 (#243)
  • f315b02 docs: 归档任务 #243

归档:docs/task/243-分页每页条数切换后自动刷新.md

未验证:尚未在登录后的真实浏览器中人工切换容量,也未实际禁用 JavaScript 操作回退按钮;两条路径已有模板和脚本回归检查。工单保持打开,等待用户验收。

## 实施完成,待验收 状态:**待验收** 已完成: - 选择每页 20 / 50 / 100 条后立即提交 GET 表单并刷新; - 提交期间显示“加载中…”并阻止重复提交; - 保留“应用”按钮,JavaScript 不可用时仍可手动提交; - 将 `page_size` 补入蝦皮、PDD、顺运宝、采集采购、客户端、档口入库码和用户模块的状态白名单; - 更新 UI 规范和回归测试。 验证结果: ```powershell $env:GOTOOLCHAIN="go1.23.0" go test ./... -count=1 go build ./... go vet ./... node --check static/js/app.js ``` 以上全部通过,`git diff --check` 通过。 提交: - `8e4239b` fix: 分页条数切换后自动刷新 (#243) - `f315b02` docs: 归档任务 #243 归档:`docs/task/243-分页每页条数切换后自动刷新.md` 未验证:尚未在登录后的真实浏览器中人工切换容量,也未实际禁用 JavaScript 操作回退按钮;两条路径已有模板和脚本回归检查。工单保持打开,等待用户验收。
Author
Owner

用户验收后进一步确认:正常页面不再显示“应用”按钮,公共分页默认值改为 100;同时合并档口入库码批量匹配反馈优化。新增范围由 #244 跟踪,#243 既有自动刷新和模块状态保留实现继续有效。

用户验收后进一步确认:正常页面不再显示“应用”按钮,公共分页默认值改为 100;同时合并档口入库码批量匹配反馈优化。新增范围由 #244 跟踪,#243 既有自动刷新和模块状态保留实现继续有效。
Sign in to join this conversation.
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: chengma/cmautobuy#243