抽离组件添加下拉框

2026-01-20 23:46:44 +08:00
parent f2448ff97f
commit 39f687881a
12 changed files with 1100 additions and 326 deletions
--- a/openspec/changes/extract-workflow-create-dialog/design.md
+++ b/openspec/changes/extract-workflow-create-dialog/design.md
@@ -0,0 +1,149 @@
+# 设计文档：抽离流程创建对话框组件
+
+## 组件设计
+
+### 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 组件
+- 保持与现有代码风格一致
+- 确保表单验证规则和行为不变
--- a/openspec/changes/extract-workflow-create-dialog/proposal.md
+++ b/openspec/changes/extract-workflow-create-dialog/proposal.md
@@ -0,0 +1,39 @@
+# 提案：抽离流程创建对话框为独立组件并修改证件类型字段
+
+## 概述
+
+将利率定价流程创建对话框从列表页面组件中抽离为独立的可复用组件，同时将证件类型字段从输入框改为下拉框（选项：身份证、统一社会信用代码）。
+
+## 背景
+
+当前流程列表页面 ([`index.vue`](ruoyi-ui/src/views/loanPricing/workflow/index.vue)) 中，创建流程对话框的代码直接嵌入在列表组件中，导致单个文件超过 400 行。这不利于代码维护和复用。同时，证件类型字段使用输入框，用户需要手动输入，容易出错。
+
+## 目标
+
+1. **组件化**：将创建流程对话框抽离为独立组件 `WorkflowCreateDialog.vue`，放置在 `ruoyi-ui/src/views/loanPricing/workflow/components/` 目录
+2. **改进用户体验**：将证件类型改为下拉框，提供固定选项（身份证、统一社会信用代码）
+3. **保持功能一致**：确保抽离后功能与现有实现完全一致
+
+## 影响范围
+
+- **新增文件**：`ruoyi-ui/src/views/loanPricing/workflow/components/WorkflowCreateDialog.vue`
+- **修改文件**：`ruoyi-ui/src/views/loanPricing/workflow/index.vue`
+- **修改规格**：`loan-pricing-workflow-ui` 规格中的"流程创建"需求
+
+## 涉及能力
+
+- **loan-pricing-workflow-ui**：前端用户界面规格
+
+## 实施计划
+
+1. 创建 `WorkflowCreateDialog.vue` 组件，包含所有表单逻辑
+2. 修改 `index.vue`，引入并使用新组件
+3. 更新 `loan-pricing-workflow-ui` 规格，修改证件类型字段描述
+4. 测试验证功能完整性
+
+## 验收标准
+
+- [ ] 创建对话框组件独立存在，可正常导入使用
+- [ ] 证件类型为下拉框，选项为"身份证"和"统一社会信用代码"
+- [ ] 所有表单验证、提交逻辑正常工作
+- [ ] 列表页面功能无退化
--- a/openspec/changes/extract-workflow-create-dialog/specs/loan-pricing-workflow-ui/spec.md
+++ b/openspec/changes/extract-workflow-create-dialog/specs/loan-pricing-workflow-ui/spec.md
@@ -0,0 +1,58 @@
+# loan-pricing-workflow-ui 规格变更
+
+## MODIFIED Requirements
+
+### Requirement: 流程创建
+
+系统 SHALL 提供创建新利率定价流程的功能，通过独立的对话框组件收集必要信息。
+
+#### Scenario: 打开创建表单
+- **WHEN** 用户在流程列表页面且具有 `loanPricing:workflow:create` 权限，点击"新增"按钮
+- **THEN** 系统通过 `WorkflowCreateDialog` 组件弹出创建流程表单对话框，显示所有必填和可选字段
+
+#### Scenario: 表单字段显示
+- **WHEN** 用户打开创建流程表单对话框
+- **THEN** 系统显示以下字段分组：
+  - 基本信息：客户内码（必填）、客户名称、客户类型（必填，下拉选择：个人/企业）、**证件类型（下拉选择：身份证/统一社会信用代码）**
+  - 贷款信息：申请金额（必填）、贷款利率（必填）、担保方式（必填，下拉选择：信用/保证/抵押/质押）、贷款用途（下拉选择：consumer/business）
+  - 中间业务标识（个人）：个人快捷支付（开关）、个人电费代扣（开关）
+  - 中间业务标识（企业）：企业电费代扣（开关）、企业水费代扣（开关）
+  - 企业标识：净身企业（开关）、开立基本结算账户（开关）、制造业企业（开关）、省农担担保贷款（开关）、纳税信用等级A级（开关）、县级及以上农业龙头企业（开关）、普惠小微借款人（开关）
+  - 抵质押信息：抵质押类型（下拉选择：一线/一类/二类）、抵质押物三方所有（开关）、是否有经营佐证（开关）
+  - 固定字段：机构编码（隐藏，固定值931000）、运行模式（隐藏，固定值1）
+
+#### Scenario: 选择证件类型
+- **WHEN** 用户在创建流程表单中点击证件类型下拉框
+- **THEN** 系统显示两个选项："身份证"和"统一社会信用代码"，用户选择其中一个
+
+#### Scenario: 表单验证
+- **WHEN** 用户填写表单并点击确定按钮
+- **THEN** 系统验证必填字段：客户内码、客户类型、担保方式、申请金额、贷款利率，如有缺失则显示错误提示
+
+#### Scenario: 提交创建成功
+- **WHEN** 用户填写完必填字段并点击确定按钮，后端返回成功响应
+- **THEN** 对话框组件触发 `success` 事件，父组件关闭对话框，显示成功提示消息，刷新列表数据
+
+#### Scenario: 取消创建
+- **WHEN** 用户点击取消按钮或对话框关闭按钮
+- **THEN** 对话框组件触发 `update:visible` 事件，父组件关闭对话框，不保存数据，不刷新列表
+
+#### Scenario: 新增按钮权限控制
+- **WHEN** 用户不具有 `loanPricing:workflow:create` 权限
+- **THEN** 系统不显示"新增"按钮
+
+### Requirement: 创建对话框组件架构
+
+系统 SHALL 将创建流程对话框实现为独立的 Vue 组件，支持复用和维护。
+
+#### Scenario: 组件导入和注册
+- **WHEN** 开发者在 `index.vue` 中需要使用创建对话框功能
+- **THEN** 系统从 `@/views/loanPricing/workflow/components/WorkflowCreateDialog` 导入组件并注册
+
+#### Scenario: 组件属性绑定
+- **WHEN** 父组件使用 `WorkflowCreateDialog` 组件
+- **THEN** 系统支持通过 `v-model:visible` 或 `visible` prop + `update:visible` 事件控制对话框显示状态
+
+#### Scenario: 组件事件处理
+- **WHEN** 用户成功创建流程
+- **THEN** 组件触发 `success` 事件，父组件可监听该事件执行列表刷新等操作
--- a/openspec/changes/extract-workflow-create-dialog/tasks.md
+++ b/openspec/changes/extract-workflow-create-dialog/tasks.md
@@ -0,0 +1,96 @@
+# 实施任务清单
+
+## 任务列表
+
+### 1. 创建组件目录结构
+- [x] 创建 `ruoyi-ui/src/views/loanPricing/workflow/components/` 目录
+- **验证**: 目录创建成功，使用 `ls` 或 `dir` 确认
+
+### 2. 创建 WorkflowCreateDialog.vue 组件
+- [x] 创建组件文件，包含完整的对话框模板
+- [x] 实现 props：`visible`（对话框显示状态）
+- [x] 实现 emits：`update:visible`、`success`
+- [x] 实现表单数据结构（保持与原实现一致）
+- [x] 实现表单验证规则
+- [x] 实现四个标签页的表单字段
+- [x] **将证件类型改为 el-select 下拉框**，选项为"身份证"和"统一社会信用代码"
+- [x] 实现 `reset()` 方法：重置表单到初始状态
+- [x] 实现 `cancel()` 方法：关闭对话框并重置表单
+- [x] 实现 `submitForm()` 方法：验证并提交表单
+- [x] 导入 `createWorkflow` API 函数
+- **验证**: 组件文件创建成功，无 ESLint 错误
+
+### 3. 修改 index.vue 引入新组件
+- [x] 在 `index.vue` 顶部导入 `WorkflowCreateDialog` 组件
+- [x] 在 components 选项中注册组件
+- **验证**: 导入和注册语法正确
+
+### 4. 修改 index.vue 模板
+- [x] 删除原有的对话框模板代码（第 82-256 行）
+- [x] 添加 `<workflow-create-dialog>` 组件标签
+- [x] 绑定 `v-model:visible="showCreateDialog"`
+- [x] 监听 `@success` 事件调用 `handleCreateSuccess`
+- **验证**: 模板语法正确，组件标签正确使用
+
+### 5. 修改 index.vue 数据和逻辑
+- [x] 移除 `openCreate` 状态，替换为 `showCreateDialog`
+- [x] 移除 `activeTab` 状态
+- [x] 移除 `form` 状态
+- [x] 移除 `rules` 状态
+- [x] 修改 `handleAdd()` 方法：设置 `showCreateDialog = true`
+- [x] 添加 `handleCreateSuccess()` 方法：显示成功消息并调用 `getList()`
+- [x] 删除 `reset()` 方法
+- [x] 删除 `cancelCreate()` 方法
+- [x] 删除 `submitForm()` 方法
+- [x] 删除 `createWorkflow` 导入（已移至组件内）
+- **验证**: 修改后的代码无语法错误
+
+### 6. 手动功能测试
+- [ ] 启动前端开发服务器 (`npm run dev`)
+- [ ] 登录系统 (admin/admin123)
+- [ ] 导航至"利率定价管理 > 流程列表"
+- [ ] 点击"新增"按钮，验证对话框正常弹出
+- [ ] 切换各个标签页，验证表单字段正确显示
+- [ ] **点击证件类型下拉框，验证选项为"身份证"和"统一社会信用代码"**
+- [ ] 测试表单验证：不填必填项提交，验证错误提示
+- [ ] 填写完整表单并提交，验证创建成功
+- [ ] 验证创建成功后列表自动刷新
+- [ ] 测试取消按钮，验证对话框关闭且不保存
+- **验证**: 所有功能正常工作
+
+### 7. 代码质量检查
+- [x] 检查组件命名和文件命名符合项目规范
+- [x] 检查代码格式符合项目 ESLint 配置
+- [x] 检查注释完整，关键逻辑有说明
+- **验证**: 代码符合项目规范
+
+## 任务依赖关系
+
+```
+1. 创建组件目录结构
+  │
+  ├──► 2. 创建 WorkflowCreateDialog.vue 组件
+  │         │
+  │         ├──► 3. 修改 index.vue 引入新组件
+  │         │         │
+  │         │         ├──► 4. 修改 index.vue 模板
+  │         │         │         │
+  │         │         │         ├──► 5. 修改 index.vue 数据和逻辑
+  │         │         │         │         │
+  │         │         │         │         └──► 6. 手动功能测试
+  │         │         │         │                   │
+  │         │         │         │                   └──► 7. 代码质量检查
+  │         │         │         │
+  │         │         │         └──► (并行) 6. 手动功能测试
+  │         │         │
+  │         │         └──► (并行) 6. 手动功能测试
+  │         │
+  │         └──► (并行) 6. 手动功能测试
+  │
+  └──► (并行) 6. 手动功能测试
+```
+
+## 可并行任务
+
+- 任务 3、4、5 可以在任务 2 完成后并行执行
+- 任务 7 可与任务 6 并行执行