150 lines
6.8 KiB
Markdown
150 lines
6.8 KiB
Markdown
|
# 设计文档：抽离流程创建对话框组件
|
|||
|
|
|
|||
|
|
## 组件设计
|
|||
|
|
|
|||
|
|
### 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 组件
|
|||
|
|
- 保持与现有代码风格一致
|
|||
|
|
- 确保表单验证规则和行为不变
|