112 lines
3.4 KiB
Markdown
112 lines
3.4 KiB
Markdown
|
# 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.
|