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 接口设计

### 新增接口函数

```javascript
// 创建个人客户利率定价流程
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"`：

```javascript
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)

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