# 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: ```bash 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: ```bash 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: ```bash 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: ```bash npm run build:prod ``` Workdir: `ruoyi-ui` Expected: build succeeds without introducing Vue template or script errors.