loan-pricing/doc/2026-04-09-shangyu-retail-input-params-frontend-plan.md

# 上虞个人利率测算输入参数前端 Implementation Plan

> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 按 Excel 补齐个人新增弹窗输入项，确保页面提交字段与个人模型入参要求一致。

**Architecture:** 仅修改个人创建弹窗和个人详情页，沿用当前 Element UI 表单结构，不新增页面层级。通过前端源码断言覆盖新增字段、选项和值转换，确保页面输入与现有交互方式保持一致。

**Tech Stack:** Vue 2、Element UI、RuoYi 前端请求封装、Node 源码断言脚本

---

## 文件结构

- 修改: [ruoyi-ui/src/views/loanPricing/workflow/components/PersonalCreateDialog.vue](/Users/wkc/Desktop/loan-pricing/loan-pricing/ruoyi-ui/src/views/loanPricing/workflow/components/PersonalCreateDialog.vue)
  - 补齐 `loanPurpose`、`loanTerm`
  - 修正 `collType` 选项
  - 调整个人开关字段提交值
- 修改: [ruoyi-ui/src/views/loanPricing/workflow/components/PersonalWorkflowDetail.vue](/Users/wkc/Desktop/loan-pricing/loan-pricing/ruoyi-ui/src/views/loanPricing/workflow/components/PersonalWorkflowDetail.vue)
  - 补齐 `loanPurpose` 展示
  - 如有需要，扩展布尔格式化兼容 `0/1`
- 新增: [ruoyi-ui/tests/personal-create-input-params.test.js](/Users/wkc/Desktop/loan-pricing/loan-pricing/ruoyi-ui/tests/personal-create-input-params.test.js)
  - 断言新增弹窗字段、选项和值转换逻辑
- 修改: [ruoyi-ui/package.json](/Users/wkc/Desktop/loan-pricing/loan-pricing/ruoyi-ui/package.json)
  - 新增针对本次改动的测试命令

### Task 1: 为个人新增弹窗补失败断言

**Files:**
- Create: `ruoyi-ui/tests/personal-create-input-params.test.js`
- Modify: `ruoyi-ui/package.json`

- [ ] **Step 1: 编写失败断言脚本**

```js
const requiredFields = ['form.loanPurpose', 'form.loanTerm']
const requiredOptions = ['value="consumer"', 'value="business"', 'label="一类"', 'label="二类"', 'label="三类"']
const requiredConversions = [
  "bizProof: this.form.bizProof ? '1' : '0'",
  "loanLoop: this.form.loanLoop ? '1' : '0'",
  "collThirdParty: this.form.collThirdParty ? '1' : '0'"
]
```

- [ ] **Step 2: 运行断言并确认先失败**

Run: `npm --prefix ruoyi-ui run test:personal-create-input-params`

Expected: FAIL，提示缺少 `loanPurpose` 或 `loanTerm` 或值转换未按 `1/0`

- [ ] **Step 3: 在 `package.json` 注册测试命令**

```json
{
  "scripts": {
    "test:personal-create-input-params": "node tests/personal-create-input-params.test.js"
  }
}
```

- [ ] **Step 4: 再次运行断言并确认仍处于失败态**

Run: `npm --prefix ruoyi-ui run test:personal-create-input-params`

Expected: FAIL，失败原因与新增字段缺失一致

- [ ] **Step 5: 提交**

```bash
git add ruoyi-ui/tests/personal-create-input-params.test.js ruoyi-ui/package.json
git commit -m "新增个人测算输入参数前端断言"
```

### Task 2: 补齐个人新增弹窗字段与选项

**Files:**
- Modify: `ruoyi-ui/src/views/loanPricing/workflow/components/PersonalCreateDialog.vue`

- [ ] **Step 1: 增加 `loanPurpose` 表单项**

```vue
<el-form-item label="贷款用途" prop="loanPurpose">
  <el-select v-model="form.loanPurpose" placeholder="请选择贷款用途" style="width: 100%">
    <el-option label="消费" value="consumer" />
    <el-option label="经营" value="business" />
  </el-select>
</el-form-item>
```

- [ ] **Step 2: 增加 `loanTerm` 固定年限下拉**

```vue
<el-form-item label="借款期限(年)" prop="loanTerm">
  <el-select v-model="form.loanTerm" placeholder="请选择借款期限" style="width: 100%">
    <el-option v-for="item in loanTermOptions" :key="item" :label="item" :value="item" />
  </el-select>
</el-form-item>
```

- [ ] **Step 3: 修正 `collType` 选项为 Excel 定义**

```vue
<el-option label="一类" value="一类" />
<el-option label="二类" value="二类" />
<el-option label="三类" value="三类" />
```

- [ ] **Step 4: 为新增字段补表单状态与校验**

```js
form: {
  loanPurpose: undefined,
  loanTerm: undefined
},
rules: {
  loanPurpose: [{ required: true, message: '请选择贷款用途', trigger: 'change' }],
  loanTerm: [{ required: true, message: '请选择借款期限', trigger: 'change' }]
}
```

- [ ] **Step 5: 提交**

```bash
git add ruoyi-ui/src/views/loanPricing/workflow/components/PersonalCreateDialog.vue
git commit -m "补齐个人新增弹窗输入字段"
```

### Task 3: 调整前端提交值与详情展示

**Files:**
- Modify: `ruoyi-ui/src/views/loanPricing/workflow/components/PersonalCreateDialog.vue`
- Modify: `ruoyi-ui/src/views/loanPricing/workflow/components/PersonalWorkflowDetail.vue`

- [ ] **Step 1: 在提交逻辑中改为 `1/0` 值**

```js
const data = {
  ...this.form,
  bizProof: this.form.bizProof ? '1' : '0',
  loanLoop: this.form.loanLoop ? '1' : '0',
  collThirdParty: this.form.collThirdParty ? '1' : '0'
}
```

- [ ] **Step 2: 在详情页补齐 `loanPurpose` 展示**

```vue
<el-descriptions-item label="贷款用途">{{ detailData.loanPurpose || '-' }}</el-descriptions-item>
```

- [ ] **Step 3: 兼容详情页 `0/1` 布尔展示**

```js
if (value === 'true' || value === true || value === '1' || value === 1) return '是'
if (value === 'false' || value === false || value === '0' || value === 0) return '否'
```

- [ ] **Step 4: 运行前端源码断言并确认通过**

Run: `npm --prefix ruoyi-ui run test:personal-create-input-params`

Expected: PASS，输出断言通过信息

- [ ] **Step 5: 提交**

```bash
git add ruoyi-ui/src/views/loanPricing/workflow/components/PersonalCreateDialog.vue ruoyi-ui/src/views/loanPricing/workflow/components/PersonalWorkflowDetail.vue
git commit -m "调整个人测算前端提交与展示"
```

### Task 4: 页面联调与回归验证

**Files:**
- Verify: `ruoyi-ui/src/views/loanPricing/workflow/components/PersonalCreateDialog.vue`
- Verify: `ruoyi-ui/src/views/loanPricing/workflow/components/PersonalWorkflowDetail.vue`

- [ ] **Step 1: 启动前端开发服务**

Run: `npm --prefix ruoyi-ui run dev`

Expected: 成功启动并输出本地访问地址

- [ ] **Step 2: 打开流程页面验证新增弹窗**

Run: 在浏览器中进入 `/loanPricing/workflow`

Expected:
- 出现 `贷款用途`
- 出现 `借款期限(年)` 固定下拉
- `抵质押类型` 选项为 `一类/二类/三类`

- [ ] **Step 3: 结合后端联调创建个人流程**

Run: 在页面中填写完整参数并提交

Expected: 创建成功，不出现参数缺失报错

- [ ] **Step 4: 打开详情页验证回显**

Run: 打开刚创建的个人流程详情

Expected:
- 页面展示 `贷款用途`
- 页面展示 `借款期限`
- 开关字段显示为“是/否”

- [ ] **Step 5: 验证结束后停止前端进程并提交**

```bash
git add ruoyi-ui/src/views/loanPricing/workflow/components/PersonalCreateDialog.vue ruoyi-ui/src/views/loanPricing/workflow/components/PersonalWorkflowDetail.vue ruoyi-ui/tests/personal-create-input-params.test.js ruoyi-ui/package.json
git commit -m "完成个人测算输入参数前端联调"
```