ccdi/docs/plans/2026-03-12-pull-bank-info-date-limit-frontend-implementation.md

Pull Bank Info Date Limit Frontend Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: Restrict the pull-bank-info date range so users can only select dates up to yesterday and block invalid submissions.

Architecture: Keep the existing dialog and request flow in UploadData.vue. Add one focused source-level regression test that asserts the date picker has an explicit restriction hook, then implement a shared “yesterday” boundary for both Element UI disabledDate behavior and submit-time validation.

Tech Stack: Vue 2, Element UI 2, scoped SFC logic, Node-based source assertions in ruoyi-ui/tests/unit

---

Task 1: Add a regression test for the date restriction hook

Files:

• Create: ruoyi-ui/tests/unit/upload-data-pull-bank-info-date-limit.test.js
• Modify: ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue

Step 1: Write the failing test

Create a source-based test that verifies the pull-bank-info date picker:

• uses picker-options
• binds to a dedicated pullBankInfoDatePickerOptions
• the script contains a helper for calculating the latest allowed date

Step 2: Run test to verify it fails

Run:

node ruoyi-ui/tests/unit/upload-data-pull-bank-info-date-limit.test.js

Expected: FAIL because the current component does not define the new date limit hook yet.

Task 2: Implement date picker restrictions

Files:

• Modify: ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue
• Test: ruoyi-ui/tests/unit/upload-data-pull-bank-info-date-limit.test.js

Step 1: Add the date picker option

Bind the pull-bank-info date range picker to pullBankInfoDatePickerOptions.

Step 2: Add the latest allowed date helper

Add a method or computed-backed helper that returns yesterday based on the browser local date.

Step 3: Disable today and future dates

Implement disabledDate so dates greater than or equal to today 00:00 are disabled.

Step 4: Run the new test

Run:

node ruoyi-ui/tests/unit/upload-data-pull-bank-info-date-limit.test.js

Expected: PASS

Task 3: Add submit-time fallback validation

Files:

• Modify: ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue
• Test: ruoyi-ui/tests/unit/upload-data-pull-bank-info-date-limit.test.js

Step 1: Reuse the same date boundary in submit logic

Before calling pullBankInfo(payload), verify both selected dates are not later than yesterday.

Step 2: Show a clear warning

If validation fails, warn the user with a concise message such as 时间跨度最晚只能选择到昨天.

Step 3: Keep existing validations intact

Retain the current empty-ID-card and incomplete-date-range checks.

Task 4: Run regression verification

Files:

• Modify: ruoyi-ui/src/views/ccdiProject/components/detail/UploadData.vue

Step 1: Run focused tests

Run:

node ruoyi-ui/tests/unit/upload-data-pull-bank-info-date-limit.test.js
node ruoyi-ui/tests/unit/upload-data-pull-bank-info-dialog-layout.test.js
node ruoyi-ui/tests/unit/upload-data-batch-upload.test.js
node ruoyi-ui/tests/unit/upload-data-file-list-settings.test.js

Expected: all tests pass.

Step 2: Run build verification

Run:

npm run build:prod

Workdir: ruoyi-ui

Expected: build succeeds without introducing Vue template or script errors.