7.1 KiB
上虞个人利率测算输入参数前端 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 loanTermOptions" :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 "完成个人测算输入参数前端联调"