# 设计文档：抽离流程创建对话框组件

## 组件设计

### WorkflowCreateDialog.vue 组件

**位置**：`ruoyi-ui/src/views/loanPricing/workflow/components/WorkflowCreateDialog.vue`

**职责**：负责利率定价流程创建表单的展示和交互逻辑

#### Props

| 名称 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `visible` | `Boolean` | `false` | 对话框显示状态（v-model 绑定） |

#### Events

| 事件名 | 参数 | 说明 |
|--------|------|------|
| `update:visible` | `(value: Boolean)` | 对话框显示状态变化时触发 |
| `success` | - | 创建成功后触发，父组件可刷新列表 |

#### 内部状态

```javascript
data() {
  return {
    activeTab: 'basic',  // 当前激活的标签页
    form: {},            // 表单数据
    rules: {}            // 表单验证规则
  }
}
```

#### 表单字段结构

保持与现有实现一致，包含以下分组：

1. **基本信息** 标签页 (`basic`)
   - 客户内码 (`custIsn`) - 必填
   - 客户名称 (`custName`)
   - 客户类型 (`custType`) - 必填，下拉选择
   - 证件类型 (`idType`) - **下拉选择**（身份证、统一社会信用代码）

2. **贷款信息** 标签页 (`loan`)
   - 申请金额 (`applyAmt`) - 必填
   - 贷款利率 (`loanRate`) - 必填
   - 担保方式 (`guarType`) - 必填，下拉选择
   - 贷款用途 (`loanPurpose`) - 下拉选择
   - 抵质押类型 (`collType`) - 下拉选择
   - 是否有经营佐证 (`bizProofActive`) - 开关
   - 抵质押物三方所有 (`collThirdPartyActive`) - 开关

3. **中间业务标识** 标签页 (`mid`)
   - 个人快捷支付 (`midPerQuickPayActive`) - 开关
   - 个人电费代扣 (`midPerEleDdcActive`) - 开关
   - 企业电费代扣 (`midEntEleDdcActive`) - 开关
   - 企业水费代扣 (`midEntWaterDdcActive`) - 开关

4. **企业标识** 标签页 (`ent`)
   - 净身企业 (`isCleanEntActive`) - 开关
   - 开立基本结算账户 (`hasSettleAcctActive`) - 开关
   - 制造业企业 (`isManufacturingActive`) - 开关
   - 省农担担保贷款 (`isAgriGuarActive`) - 开关
   - 纳税信用等级A级 (`isTaxAActive`) - 开关
   - 县级及以上农业龙头企业 (`isAgriLeadingActive`) - 开关
   - 普惠小微借款人 (`isInclusiveFinanceActive`) - 开关

#### 方法

| 方法名 | 说明 |
|--------|------|
| `reset()` | 重置表单到初始状态 |
| `cancel()` | 关闭对话框并重置表单 |
| `submitForm()` | 验证并提交表单 |

### index.vue 修改

**移除内容**：
- 删除对话框相关的模板代码（第 82-256 行）
- 删除 `openCreate`、`activeTab`、`form`、`rules` 状态
- 删除 `handleAdd()`、`reset()`、`cancelCreate()`、`submitForm()` 方法

**新增内容**：
- 导入 `WorkflowCreateDialog` 组件
- 注册组件
- 添加 `showCreateDialog` 状态（替代 `openCreate`）
- 修改 `handleAdd()` 方法，设置 `showCreateDialog = true`
- 添加 `handleCreateSuccess()` 方法，处理创建成功后刷新列表

## 组件通信流程

```
┌─────────────────────────────────────────────────────────────┐
│                        index.vue                             │
│  ┌─────────────┐      ┌─────────────────────────────────┐  │
│  │ handleAdd() │ ───► │ showCreateDialog = true         │  │
│  └─────────────┘      └─────────────────────────────────┘  │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐  │
│  │            showCreateDialog (v-model)                 │  │
│  ├──────────────────────────────────────────────────────┤  │
│  │                                                        │  │
│  ▼                                                        │  │
│  ┌────────────────────────────────────────────────────┐  │  │
│  │     WorkflowCreateDialog.vue                        │  │  │
│  │                                                     │  │  │
│  │  ◄────── visible (prop) ───────┐                   │  │  │
│  │                                │                   │  │  │
│  │  ───────► update:visible ──────┘                   │  │  │
│  │                                                     │  │  │
│  │  submitForm() ──► API 调用 ──► @success 事件 ────────┼──┘
│  │                                                     │
│  └────────────────────────────────────────────────────┘
│                                                              │
│  ┌─────────────────────────────────────────────────────┐    │
│  │    handleCreateSuccess() ──► getList() ──► 刷新列表   │    │
│  └─────────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────────┘
```

## 证件类型下拉框实现

```vue
<el-form-item label="证件类型" prop="idType">
  <el-select v-model="form.idType" placeholder="请选择证件类型" style="width: 100%">
    <el-option label="身份证" value="身份证" />
    <el-option label="统一社会信用代码" value="统一社会信用代码" />
  </el-select>
</el-form-item>
```

## 目录结构

```
ruoyi-ui/src/views/loanPricing/workflow/
├── components/
│   └── WorkflowCreateDialog.vue    # 新增：创建对话框组件
├── detail.vue                       # 详情页面
└── index.vue                        # 列表页面（修改）
```

## 兼容性考虑

- 组件使用 Vue 2.6.12 的 Options API 风格
- 使用 Element UI 2.15.14 组件
- 保持与现有代码风格一致
- 确保表单验证规则和行为不变