小额打款工单：筛选下拉可滚动 + 完成日期改为账单页同款日历 #276

yueyang · 2026-09-27T13:35:28+08:00

yueyang commented

2026-09-27 13:35:28 +08:00

背景

沿用 #271 之后未覆盖的两处交互问题，只改小额打款工单页，不动其他页面。

改动内容

1. 筛选项下拉可滚动

店铺、打款原因原先用 <input list> + <datalist>，下拉面板由浏览器绘制，高度与滚动都不可控（店铺有 271 项，看不全也滑不动）。
改为同风格自绘面板：position:absolute + max-height: min(18rem, 50vh) + overflow:auto，保留输入即过滤、↑↓ 循环、回车选中、Esc / 点外部关闭。

2. 完成日期改为账单页同款日历

与「淘系微信账户」账单页视觉/交互对齐：文本输入框 + 日历按钮 + 中文月历弹层，起止用「至」连接，选中与今天用品牌色 #856632，开一个自动收起另一个。

值只承载日期（YYYY-MM-DD），服务端补成整天半开区间：from 00:00:00 / to 次日 00:00:00，避免分钟级边界丢单；
有值才显示清除按钮；
Esc 监听放在控件容器层，焦点落在日历日期按钮上时也能收起。

账单页用的是 Vue + flatpickr，而 flatpickr 未随 Blade 页面下发（public/js/vendor.js 只有 split chunk），因此这里手写了等价原生日历复刻其视觉，不引入新依赖。

验证

php artisan test --filter=SmallPayment → 16 passed (126 assertions)
真实渲染 HTML + jsdom 交互断言：下拉 39/39、日期控件 38/38
预览环境 18089 实机核对通过；未触碰 18088

影响面

仅 resources/views/business/pages/refunds/small-payment-work-orders.blade.php 与对应 Feature 测试，无后端、无迁移、无配置变更。

## 背景沿用 #271 之后未覆盖的两处交互问题，只改小额打款工单页，不动其他页面。 ## 改动内容 ### 1. 筛选项下拉可滚动店铺、打款原因原先用 `<input list>` + `<datalist>`，下拉面板由浏览器绘制，高度与滚动都不可控（店铺有 271 项，看不全也滑不动）。改为同风格自绘面板：`position:absolute` + `max-height: min(18rem, 50vh)` + `overflow:auto`，保留输入即过滤、↑↓ 循环、回车选中、Esc / 点外部关闭。 ### 2. 完成日期改为账单页同款日历与「淘系微信账户」账单页视觉/交互对齐：文本输入框 + 日历按钮 + 中文月历弹层，起止用「至」连接，选中与今天用品牌色 `#856632`，开一个自动收起另一个。 - 值只承载日期（`YYYY-MM-DD`），服务端补成整天半开区间：`from 00:00:00` / `to 次日 00:00:00`，避免分钟级边界丢单； - 有值才显示清除按钮； - Esc 监听放在控件容器层，焦点落在日历日期按钮上时也能收起。账单页用的是 Vue + flatpickr，而 flatpickr 未随 Blade 页面下发（`public/js/vendor.js` 只有 split chunk），因此这里手写了等价原生日历复刻其视觉，不引入新依赖。 ## 验证 - `php artisan test --filter=SmallPayment` → **16 passed (126 assertions)** - 真实渲染 HTML + jsdom 交互断言：下拉 39/39、日期控件 38/38 - 预览环境 18089 实机核对通过；未触碰 18088 ## 影响面仅 `resources/views/business/pages/refunds/small-payment-work-orders.blade.php` 与对应 Feature 测试，无后端、无迁移、无配置变更。

yueyang added 2 commits 2026-09-27 13:35:28 +08:00

feat(small-payment-work-orders): 筛选下拉改为可滚动选项面板 5ff4cbd758

原生 <datalist> 的面板由浏览器绘制，高度与滚动条无法控制，
店铺有 271 个选项时看不全也滑不动，因此改为自绘面板：

- 面板 max-height: min(18rem, 50vh) + overflow: auto，选项在面板内滚动
- 打字即时过滤、方向键移动、回车选中、Esc 或点击外部关闭
- 选项与切换按钮均为 type=button，点击不会误提交表单
- 输入框保留 name/value，筛选提交行为不变
- 无匹配时显示空提示；样式对齐 .finance-table-field-picker__panel
- 补 Feature 断言锁住可滚动契约，避免被改回 datalist

feat(small-payment-work-orders): 日期筛选改为与账单页一致的日历控件 c1c353d100

- 完成日期筛选由 datetime-local 改为「文本输入 + 日历按钮 + 中文月历弹层」，
  与淘系微信账户账单页视觉/交互保持一致：选中与今天用品牌色 #856632，
  起止区间用「至」连接，单开单收（开一个自动收起另一个）。
- 只承载日期（YYYY-MM-DD），服务端补成整天半开区间：
  from 00:00:00 / to 次日 00:00:00，避免分钟级边界丢单。
- 补充清除按钮（有值才显示）与满月历（42 格、跨年翻月、周日开头）。
- Esc 监听上移到控件容器层，焦点落在日历日期按钮上时也能收起。

测试：php artisan test --filter=SmallPayment 16 passed (126 assertions)

yueyang merged commit 296e528482 into main

2026-09-27 13:45:18 +08:00

yueyang referenced this issue from a commit

2026-09-27 13:45:21 +08:00

小额打款工单：筛选下拉可滚动 + 完成日期改为账单页同款日历 (#276)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: WuYongJie/CaiWuXiTong#276