329 lines
8.1 KiB
Markdown
329 lines
8.1 KiB
Markdown
# Employee Asset Maintenance Frontend Implementation Plan
|
|
|
|
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
|
|
|
**Goal:** Extend the employee maintenance page so users can maintain employee assets inside the add/edit dialog, view all assets in the detail dialog, and import asset data with a dedicated failure-record entry.
|
|
|
|
**Architecture:** Keep the existing employee page and API module in place, and add a nested asset-table editing experience within `ccdiBaseStaff/index.vue`. Reuse the existing async import interaction model, but isolate all asset-import state, storage keys, dialogs, and button copy from the original employee-import flow.
|
|
|
|
**Tech Stack:** Vue 2, Element UI 2, RuoYi request wrapper, scoped SFC styles, Node-based source assertions or existing frontend unit checks
|
|
|
|
---
|
|
|
|
### Task 1: Extend the frontend API layer for asset import
|
|
|
|
**Files:**
|
|
- Modify: `ruoyi-ui/src/api/ccdiBaseStaff.js`
|
|
- Create: `ruoyi-ui/src/api/ccdiAssetInfo.js`
|
|
- Test: `ruoyi-ui/tests/unit/employee-asset-api-contract.test.js`
|
|
|
|
**Step 1: Write the failing test**
|
|
|
|
Add a focused source-based test that asserts:
|
|
|
|
- employee detail save payload can include `assetInfoList`
|
|
- a dedicated asset import API module exists
|
|
- asset import API exposes template, upload, status, and failure methods
|
|
|
|
**Step 2: Run test to verify it fails**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ruoyi-ui/tests/unit/employee-asset-api-contract.test.js
|
|
```
|
|
|
|
Expected: FAIL because the asset API module does not exist yet.
|
|
|
|
**Step 3: Implement the minimal API surface**
|
|
|
|
Create `ccdiAssetInfo.js` with:
|
|
|
|
- `importAssetTemplate`
|
|
- `importAssetData`
|
|
- `getAssetImportStatus`
|
|
- `getAssetImportFailures`
|
|
|
|
Keep `ccdiBaseStaff.js` for employee CRUD.
|
|
|
|
**Step 4: Run the test again**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ruoyi-ui/tests/unit/employee-asset-api-contract.test.js
|
|
```
|
|
|
|
Expected: PASS
|
|
|
|
### Task 2: Add a regression test for the new employee asset UI structure
|
|
|
|
**Files:**
|
|
- Create: `ruoyi-ui/tests/unit/employee-asset-maintenance-layout.test.js`
|
|
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
|
|
|
**Step 1: Write the failing test**
|
|
|
|
Assert the employee page contains:
|
|
|
|
- an “导入资产信息” trigger
|
|
- a “查看员工资产导入失败记录” trigger hook
|
|
- an “资产信息” section inside the add/edit dialog
|
|
- an add-asset action
|
|
- a detail-table section for assets
|
|
|
|
**Step 2: Run test to verify it fails**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ruoyi-ui/tests/unit/employee-asset-maintenance-layout.test.js
|
|
```
|
|
|
|
Expected: FAIL because the current page lacks all asset-maintenance UI.
|
|
|
|
### Task 3: Add the editable asset section to the employee dialog
|
|
|
|
**Files:**
|
|
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
|
- Test: `ruoyi-ui/tests/unit/employee-asset-maintenance-layout.test.js`
|
|
|
|
**Step 1: Add asset form state**
|
|
|
|
Extend `form` defaults with `assetInfoList: []`.
|
|
|
|
**Step 2: Add UI helpers**
|
|
|
|
Add methods for:
|
|
|
|
- create an empty asset row
|
|
- add one asset row
|
|
- remove one asset row
|
|
- normalize empty asset rows before submit
|
|
|
|
**Step 3: Add the asset editing table**
|
|
|
|
Render a section below basic employee info with columns for:
|
|
|
|
- `assetMainType`
|
|
- `assetSubType`
|
|
- `assetName`
|
|
- `ownershipRatio`
|
|
- `purchaseEvalDate`
|
|
- `originalValue`
|
|
- `currentValue`
|
|
- `valuationDate`
|
|
- `assetStatus`
|
|
- `remarks`
|
|
- row delete action
|
|
|
|
**Step 4: Run the layout test**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ruoyi-ui/tests/unit/employee-asset-maintenance-layout.test.js
|
|
```
|
|
|
|
Expected: PASS
|
|
|
|
### Task 4: Add detail dialog asset display
|
|
|
|
**Files:**
|
|
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
|
- Test: `ruoyi-ui/tests/unit/employee-asset-maintenance-layout.test.js`
|
|
|
|
**Step 1: Add an asset table section to the detail dialog**
|
|
|
|
Render employee assets below the existing basic info card.
|
|
|
|
**Step 2: Add an empty state**
|
|
|
|
If `employeeDetail.assetInfoList` is empty, show “暂无资产信息”.
|
|
|
|
**Step 3: Keep existing employee detail fields intact**
|
|
|
|
Do not regress name, staff ID, department, ID card, phone, hire date, or status display.
|
|
|
|
### Task 5: Wire add/edit/detail requests to aggregate employee data
|
|
|
|
**Files:**
|
|
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
|
- Test: `ruoyi-ui/tests/unit/employee-asset-submit-flow.test.js`
|
|
|
|
**Step 1: Write the failing test**
|
|
|
|
Assert that:
|
|
|
|
- `handleAdd` initializes an empty `assetInfoList`
|
|
- `handleUpdate` stores returned `assetInfoList`
|
|
- `submitForm` posts the employee object with `assetInfoList`
|
|
- empty asset rows are filtered before submit
|
|
|
|
**Step 2: Run test to verify it fails**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ruoyi-ui/tests/unit/employee-asset-submit-flow.test.js
|
|
```
|
|
|
|
Expected: FAIL because submit logic does not process asset rows yet.
|
|
|
|
**Step 3: Implement minimal submit behavior**
|
|
|
|
Update:
|
|
|
|
- `reset`
|
|
- `handleAdd`
|
|
- `handleUpdate`
|
|
- `handleDetail`
|
|
- `submitForm`
|
|
|
|
so they all preserve `assetInfoList`.
|
|
|
|
**Step 4: Run the submit-flow test**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ruoyi-ui/tests/unit/employee-asset-submit-flow.test.js
|
|
```
|
|
|
|
Expected: PASS
|
|
|
|
### Task 6: Add dedicated asset import UI state and upload dialog
|
|
|
|
**Files:**
|
|
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
|
- Test: `ruoyi-ui/tests/unit/employee-asset-import-ui.test.js`
|
|
|
|
**Step 1: Write the failing test**
|
|
|
|
Verify the page defines dedicated asset-import state:
|
|
|
|
- independent upload dialog object
|
|
- independent polling timer
|
|
- independent current task ID
|
|
- independent failure dialog state
|
|
- asset-specific localStorage key
|
|
|
|
**Step 2: Run test to verify it fails**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ruoyi-ui/tests/unit/employee-asset-import-ui.test.js
|
|
```
|
|
|
|
Expected: FAIL because only employee import state exists today.
|
|
|
|
**Step 3: Implement the asset import dialog**
|
|
|
|
Add:
|
|
|
|
- “导入资产信息” button
|
|
- asset upload dialog with template download
|
|
- asset-specific upload methods
|
|
- independent polling and completion handlers
|
|
|
|
**Step 4: Distinguish failure record copy**
|
|
|
|
Ensure the failure entry text is exactly `查看员工资产导入失败记录`.
|
|
|
|
**Step 5: Run the import UI test**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ruoyi-ui/tests/unit/employee-asset-import-ui.test.js
|
|
```
|
|
|
|
Expected: PASS
|
|
|
|
### Task 7: Add the asset failure record dialog and isolate storage
|
|
|
|
**Files:**
|
|
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
|
- Test: `ruoyi-ui/tests/unit/employee-asset-import-ui.test.js`
|
|
|
|
**Step 1: Add an asset failure dialog**
|
|
|
|
The dialog title must be `员工资产导入失败记录`.
|
|
|
|
**Step 2: Add asset failure columns**
|
|
|
|
Show:
|
|
|
|
- `personId`
|
|
- `assetMainType`
|
|
- `assetSubType`
|
|
- `assetName`
|
|
- `errorMessage`
|
|
|
|
**Step 3: Use a dedicated localStorage key**
|
|
|
|
Keep employee import history under `employee_import_last_task` and store asset import history under a new asset-specific key.
|
|
|
|
**Step 4: Keep the original employee import flow unchanged**
|
|
|
|
Do not rename or regress the existing employee import controls and methods unless needed for clear separation.
|
|
|
|
### Task 8: Refine styles for the embedded asset table
|
|
|
|
**Files:**
|
|
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
|
- Test: `ruoyi-ui/tests/unit/employee-asset-maintenance-layout.test.js`
|
|
|
|
**Step 1: Add focused scoped styles**
|
|
|
|
Style:
|
|
|
|
- asset section header row
|
|
- editable asset table
|
|
- empty asset state
|
|
- detail asset block
|
|
|
|
**Step 2: Preserve the existing employee dialog layout**
|
|
|
|
Ensure basic info layout remains readable on desktop and mobile widths.
|
|
|
|
### Task 9: Verify the frontend changes end to end
|
|
|
|
**Files:**
|
|
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
|
|
- Modify: `ruoyi-ui/src/api/ccdiAssetInfo.js`
|
|
- Modify: `ruoyi-ui/src/api/ccdiBaseStaff.js`
|
|
|
|
**Step 1: Run focused frontend tests**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
node ruoyi-ui/tests/unit/employee-asset-api-contract.test.js
|
|
node ruoyi-ui/tests/unit/employee-asset-maintenance-layout.test.js
|
|
node ruoyi-ui/tests/unit/employee-asset-submit-flow.test.js
|
|
node ruoyi-ui/tests/unit/employee-asset-import-ui.test.js
|
|
```
|
|
|
|
Expected: all focused tests pass.
|
|
|
|
**Step 2: Run production build verification**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
npm run build:prod
|
|
```
|
|
|
|
Workdir: `ruoyi-ui`
|
|
|
|
Expected: build succeeds without Vue template or script errors.
|
|
|
|
**Step 3: Commit**
|
|
|
|
```bash
|
|
git add ruoyi-ui/src/api/ccdiAssetInfo.js ruoyi-ui/src/api/ccdiBaseStaff.js ruoyi-ui/src/views/ccdiBaseStaff/index.vue ruoyi-ui/tests/unit docs/plans/2026-03-12-employee-asset-maintenance-frontend-implementation.md
|
|
git commit -m "新增员工资产信息前端实施计划"
|
|
```
|