loan-pricing/doc/workflow-create-ui-design.md

利率定价创建流程前端重构设计文档

设计概述

本文档描述利率定价创建流程的前端重构设计，将原有的单一表单拆分为个人客户和企业客户两个独立的创建流程。

设计日期

2026-02-02

---

一、交互流程

用户操作步骤

1. 点击「新增」按钮 → 弹出「选择客户类型」对话框
2. 选择客户类型 → 打开对应的创建表单对话框
3. 填写表单并提交 → 调用对应的 API 接口
4. 成功/失败处理
   • 成功：关闭对话框，刷新列表，显示成功提示
   • 失败：保留表单数据，显示后端错误信息

---

二、组件结构

文件组织

ruoyi-ui/src/
├── views/loanPricing/workflow/
│   ├── index.vue (修改)
│   └── components/
│       ├── CustomerTypeSelector.vue (新增)
│       ├── WorkflowCreateDialog.vue (删除)
│       ├── PersonalCreateDialog.vue (新增)
│       └── CorporateCreateDialog.vue (新增)
└── api/loanPricing/
    └── workflow.js (修改)

组件职责

组件	职责
CustomerTypeSelector	客户类型选择对话框
PersonalCreateDialog	个人客户创建表单
CorporateCreateDialog	企业客户创建表单

---

三、表单字段设计

个人客户表单字段

分组	字段	类型	必填	说明
基本信息	custIsn	String	是	客户内码
基本信息	custName	String	是	客户名称
基本信息	idType	String	是	证件类型
基本信息	idNum	String	是	证件号码
贷款信息	guarType	String	是	担保方式
贷款信息	applyAmt	String	是	申请金额(元)
贷款信息	bizProof	String	是	是否有经营佐证
贷款信息	loanLoop	String	是	循环功能
抵质押信息	collType	String	是	抵质押类型
抵质押信息	collThirdParty	String	是	抵质押物是否三方所有

企业客户表单字段

分组	字段	类型	必填	说明
基本信息	custIsn	String	是	客户内码
基本信息	custName	String	是	客户名称
基本信息	idType	String	是	证件类型
基本信息	idNum	String	是	证件号码
贷款信息	guarType	String	是	担保方式
贷款信息	applyAmt	String	是	申请金额(元)
贷款信息	loanTerm	String	是	贷款期限（月）
企业标识	isAgriGuar	String	是	省农担担保贷款
企业标识	isGreenLoan	String	是	绿色贷款
企业标识	isTechEnt	String	是	科技型企业
企业标识	isTradeConstruction	String	是	贸易和建筑业企业
抵质押信息	collType	String	是	抵质押类型
抵质押信息	collThirdParty	String	是	抵质押物是否三方所有

---

四、API 接口设计

新增接口函数

// 创建个人客户利率定价流程
export function createPersonalWorkflow(data) {
  return request({
    url: '/loanPricing/workflow/create/personal',
    method: 'post',
    data: data
  })
}

// 创建企业客户利率定价流程
export function createCorporateWorkflow(data) {
  return request({
    url: '/loanPricing/workflow/create/corporate',
    method: 'post',
    data: data
  })
}

数据转换规则

开关字段在提交时需要转换为字符串 "true"/"false"：

bizProof: this.form.bizProof ? 'true' : 'false'

---

五、验证规则

个人客户验证规则

字段	验证规则
custIsn	必填，长度 1-50 字符
custName	必填，长度 1-100 字符
idType	必填
idNum	必填，身份证格式 15/18 位
guarType	必填
applyAmt	必填，正数，最大值 999999999.99
bizProof	必填（开关值，默认 "false"）
loanLoop	必填（开关值，默认 "false"）
collType	必填
collThirdParty	必填（开关值，默认 "false"）

企业客户验证规则

字段	验证规则
custIsn	必填，长度 1-50 字符
custName	必填，长度 1-100 字符
idType	必填
idNum	必填，统一社会信用代码 18 位
guarType	必填
applyAmt	必填，正数，最大值 999999999.99
loanTerm	必填，正整数，范围 1-360
isAgriGuar	必填（开关值，默认 "false"）
isGreenLoan	必填（开关值，默认 "false"）
isTechEnt	必填（开关值，默认 "false"）
isTradeConstruction	必填（开关值，默认 "false"）
collType	必填
collThirdParty	必填（开关值，默认 "false"）

---

六、UI 样式规范

对话框规范

对话框类型	宽度	说明
客户类型选择	500px	居中显示
表单对话框	900px	两列布局

表单布局

• 分组：使用 el-divider 分隔，带标题
• 字段：两列布局（el-col :span="12"）
• 必填标识：红色星号
• 按钮：右下角，「确定」（主按钮）、「取消」

响应式处理

• 当屏幕宽度 < 768px 时，表单字段改为单列布局

---

七、错误处理

场景	处理方式
前端验证失败	阻止提交，高亮错误字段
网络错误	显示网络错误提示，保留表单
后端业务错误	显示后端返回的 msg，保留表单
成功	关闭对话框，刷新列表，显示成功提示

---

八、数据字典

担保方式 (guarType)

值	说明
信用	信用贷款
保证	保证贷款
抵押	抵押贷款
质押	质押贷款

抵质押类型 (collType)

值	说明
一线	一线抵押
一类	一类抵押
二类	二类抵押

证件类型 (idType)

• 个人：身份证
• 企业：统一社会信用代码