Files

2026-04-10 15:04:56 +08:00

7.1 KiB

Raw Blame History

上虞个人利率测算输入参数前端 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
- 补齐 loanPurpose、loanTerm
- 修正 collType 选项
- 调整个人开关字段提交值
修改: ruoyi-ui/src/views/loanPricing/workflow/components/PersonalWorkflowDetail.vue
- 补齐 loanPurpose 展示
- 如有需要，扩展布尔格式化兼容 0/1
新增: ruoyi-ui/tests/personal-create-input-params.test.js
- 断言新增弹窗字段、选项和值转换逻辑
修改: ruoyi-ui/package.json
- 新增针对本次改动的测试命令

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

Files:

Create: ruoyi-ui/tests/personal-create-input-params.test.js
Modify: ruoyi-ui/package.json
Step 1: 编写失败断言脚本

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 注册测试命令

{
  "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: 提交

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 表单项

<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 固定年限下拉

<el-form-item label="借款期限(年)" prop="loanTerm">
  <el-select v-model="form.loanTerm" placeholder="请选择借款期限" style="width: 100%">
    <el-option v-for="item in ['1', '2', '3', '4', '5', '6']" :key="item" :label="item" :value="item" />
  </el-select>
</el-form-item>

Step 3: 修正 collType 选项为 Excel 定义

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

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

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

Step 5: 提交

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 值

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 展示

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

Step 3: 兼容详情页 0/1 布尔展示

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: 提交

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: 验证结束后停止前端进程并提交

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 "完成个人测算输入参数前端联调"

7.1 KiB Raw Blame History Unescape Escape

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

文件结构

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

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

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

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

7.1 KiB

Raw Blame History