ccdi/docs/plans/2026-03-12-employee-asset-maintenance-frontend-implementation.md

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

npm run build:prod

Workdir: ruoyi-ui

Expected: build succeeds without Vue template or script errors.

Step 3: Commit

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 "新增员工资产信息前端实施计划"