抽离组件添加下拉框

2026-01-20 23:46:44 +08:00
parent f2448ff97f
commit 39f687881a
12 changed files with 1100 additions and 326 deletions
--- a/openspec/changes/change-view-workflow-to-page/design.md
+++ b/openspec/changes/change-view-workflow-to-page/design.md
@@ -0,0 +1,142 @@
+# 设计文档：流程详情页面
+
+## 架构概述
+
+将流程详情从对话框组件迁移到独立的页面组件，遵循若依框架现有的路由模式。
+
+## 组件设计
+
+### 详情页面组件 (detail.vue)
+
+**位置**：`ruoyi-ui/src/views/loanPricing/workflow/detail.vue`
+
+**页面结构**：
+```
+<template>
+  <div class="app-container">
+    <!-- 页面标题和操作栏 -->
+    <el-page-header @back="goBack" :content="pageTitle" />
+
+    <!-- 详情内容卡片 -->
+    <el-card class="mt-20">
+      <el-descriptions :column="2" border>
+        <!-- 基本信息 -->
+        <!-- 业务信息 -->
+        <!-- 业务标识 -->
+        <!-- 抵质押信息 -->
+        <!-- 其他信息 -->
+      </el-descriptions>
+    </el-card>
+
+    <!-- 返回按钮 -->
+    <el-row class="mt-20">
+      <el-col :span="24">
+        <el-button @click="goBack">返回</el-button>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+```
+
+**数据获取**：
+- 通过 `$route.params.serialNum` 获取业务方流水号
+- 在 `created()` 钩子中调用 API 获取详情数据
+- 处理加载状态和错误状态
+
+**导航逻辑**：
+- 返回按钮：`this.$router.go(-1)` 或跳转到列表页
+- 面包屑导航：高亮"流程列表"菜单项
+
+### 路由配置
+
+**位置**：`ruoyi-ui/src/router/index.js` - `dynamicRoutes` 数组
+
+**配置模式**：参考现有的 `/system/user-auth/role/:userId` 路由
+
+```javascript
+{
+  path: '/loanPricing/workflow-detail',
+  component: Layout,
+  hidden: true,
+  permissions: ['loanPricing:workflow:query'],
+  children: [
+    {
+      path: ':serialNum',
+      component: () => import('@/views/loanPricing/workflow/detail'),
+      name: 'LoanPricingWorkflowDetail',
+      meta: { title: '流程详情', activeMenu: '/loanPricing/workflow' }
+    }
+  ]
+}
+```
+
+**路由参数说明**：
+- `:serialNum`：业务方流水号，用于 API 调用
+- `activeMenu`：保持列表页菜单高亮
+- `permissions`：复用现有权限 `loanPricing:workflow:query`
+
+### 列表页修改
+
+**修改位置**：`ruoyi-ui/src/views/loanPricing/workflow/index.vue`
+
+**变更内容**：
+1. 移除 `openDetail` 状态变量
+2. 移除 `handleView()` 方法中的弹窗逻辑
+3. 修改"查看"按钮的点击事件，从 `@click="handleView(scope.row)"` 改为路由跳转
+
+**新的 `handleView()` 方法**：
+```javascript
+handleView(row) {
+  this.$router.push({
+    name: 'LoanPricingWorkflowDetail',
+    params: { serialNum: row.serialNum }
+  })
+}
+```
+
+**移除内容**：
+- 详情对话框模板（`<el-dialog title="利率定价流程详情"...>`）
+- `detail` 数据对象
+- `openDetail` 状态
+
+## UI/UX 设计
+
+### 详情页面布局
+
+1. **页面标题**：使用 `el-page-header` 组件，显示"流程详情"标题和返回按钮
+2. **内容区域**：使用 `el-card` + `el-descriptions` 展示详情信息，保持与弹窗相同的两列布局
+3. **底部操作**：返回按钮（也可以考虑移除，因为有页面标题的返回按钮）
+
+### 响应式设计
+
+- 移动端：`el-descriptions` 自动调整为单列
+- 内容区域添加适当的内边距和外边距
+
+### 加载状态
+
+- 显示 loading 遮罩层，直到数据加载完成
+- 处理 API 错误，显示错误提示并返回列表页
+
+## 技术约束
+
+1. **框架版本**：Vue Router 3.4.9
+2. **路由模式**：History 模式（去掉 URL 中的 #）
+3. **权限控制**：通过 `permissions` 字段控制路由访问
+4. **组件懒加载**：使用 `() => import()` 动态导入
+
+## 测试策略
+
+### 单元测试
+- 路由跳转逻辑
+- 参数解析
+- API 调用
+
+### 集成测试
+- 从列表页跳转到详情页
+- 详情页返回到列表页
+- 权限控制（无权限用户无法访问）
+
+### UI 测试
+- 详情信息正确显示
+- 面包屑导航正确高亮
+- 返回按钮正常工作
--- a/openspec/changes/change-view-workflow-to-page/proposal.md
+++ b/openspec/changes/change-view-workflow-to-page/proposal.md
@@ -0,0 +1,67 @@
+# 提案：将流程详情查看功能从弹窗改为独立页面
+
+## 概述
+
+将流程列表中的"查看流程"按钮功能从弹窗展示改为跳转到单独的页面展示。
+
+## 动机
+
+当前流程详情通过对话框（Dialog）展示，存在以下问题：
+- 详情信息较多（20+字段），在弹窗中展示需要滚动，用户体验不佳
+- 弹窗宽度固定（800px），长字段显示受限
+- 无法通过 URL 直接分享或访问特定流程的详情页
+- 不利于后续扩展（如添加编辑、审批等操作）
+
+## 目标
+
+1. 创建独立的流程详情页面组件
+2. 修改列表页的"查看"按钮，从弹窗改为路由跳转
+3. 在动态路由中配置详情页路由
+4. 保持现有的 API 接口调用不变
+
+## 影响范围
+
+### 前端文件
+- 修改：[ruoyi-ui/src/views/loanPricing/workflow/index.vue](ruoyi-ui/src/views/loanPricing/workflow/index.vue) - 移除详情对话框，修改查看按钮逻辑
+- 新增：[ruoyi-ui/src/views/loanPricing/workflow/detail.vue](ruoyi-ui/src/views/loanPricing/workflow/detail.vue) - 新的详情页面组件
+- 修改：[ruoyi-ui/src/router/index.js](ruoyi-ui/src/router/index.js) - 添加详情页动态路由
+
+### 后端文件
+- 无需修改，API 接口保持不变
+
+## 相关规格
+
+此变更将修改以下规格：
+- [loan-pricing-workflow-ui](../specs/loan-pricing-workflow-ui/spec.md) - 流程详情查看需求的实现方式变更
+
+## 备选方案
+
+### 方案 A：当前方案（独立页面）
+- 优点：更好的用户体验，可扩展性强，支持 URL 分享
+- 缺点：需要创建新组件和路由配置
+
+### 方案 B：保留弹窗，优化展示
+- 优点：改动较小
+- 缺点：仍然受限于弹窗尺寸，用户体验改善有限
+
+### 方案 C：抽屉（Drawer）式侧边栏
+- 优点：利用垂直空间，可以展示更多信息
+- 缺点：在移动端体验不佳
+
+**选择方案 A**，因为它提供了最佳的用户体验和扩展性。
+
+## 风险与缓解
+
+| 风险 | 影响 | 缓解措施 |
+|------|------|----------|
+| 路由配置错误导致 404 | 高 | 严格遵循现有路由模式，进行充分测试 |
+| 详情页返回逻辑问题 | 中 | 添加面包屑导航和返回按钮 |
+| 样式不一致 | 低 | 复用现有组件和样式 |
+
+## 时间表
+
+此变更预计在批准后立即实施，包含以下步骤：
+1. 创建详情页面组件
+2. 修改列表页查看逻辑
+3. 配置路由
+4. 测试验证
--- a/openspec/changes/change-view-workflow-to-page/specs/loan-pricing-workflow-ui/spec.md
+++ b/openspec/changes/change-view-workflow-to-page/specs/loan-pricing-workflow-ui/spec.md
@@ -0,0 +1,29 @@
+# loan-pricing-workflow-ui 规格变更
+
+此规格定义了利率定价流程管理的前端用户界面需求。
+
+## MODIFIED Requirements
+
+### Requirement: 流程详情查看
+
+系统 SHALL 提供流程详情查看功能，以独立页面的形式展示完整的流程信息。
+
+#### Scenario: 查看流程详情
+- **WHEN** 用户在流程列表页面且具有 `loanPricing:workflow:query` 权限，点击列表中某条记录的"查看"按钮
+- **THEN** 系统跳转至独立的流程详情页面，路径为 `/loanPricing/workflow-detail/{serialNum}`，展示完整的流程信息（基本信息：业务方流水号、机构编码、客户内码、客户名称、证件类型；业务信息：客户类型、担保方式、申请金额、贷款利率、贷款用途；业务标识：中间业务标识、企业标识；抵质押信息：抵质押类型、是否三方所有；其他信息：创建时间、创建者、更新时间、更新者）
+
+#### Scenario: 详情页面导航
+- **WHEN** 用户在流程详情页面
+- **THEN** 系统显示页面标题"流程详情"、返回按钮，面包屑导航高亮"利率定价管理 > 流程列表"，点击返回按钮可返回流程列表页面
+
+#### Scenario: 详情页面路由配置
+- **WHEN** 系统初始化加载路由配置
+- **THEN** 系统在动态路由中注册详情页路由，组件路径为 `@/views/loanPricing/workflow/detail`，路由参数 `serialNum` 用于标识具体流程，访问权限为 `loanPricing:workflow:query`
+
+#### Scenario: URL 直接访问详情页
+- **WHEN** 用户直接在浏览器地址栏输入详情页 URL（如 `/loanPricing/workflow-detail/ABC123`）
+- **THEN** 系统加载详情页面组件，从路由参数中获取 `serialNum`，调用 API 获取对应的流程详情数据并展示
+
+#### Scenario: 详情页面数据加载
+- **WHEN** 用户访问流程详情页面，路由参数包含有效的 `serialNum`
+- **THEN** 系统在页面 created 钩子中调用 `GET /loanPricing/workflow/{serialNum}` 接口获取详情数据，显示 loading 状态，数据加载完成后隐藏 loading 并展示详情信息
--- a/openspec/changes/change-view-workflow-to-page/tasks.md
+++ b/openspec/changes/change-view-workflow-to-page/tasks.md
@@ -0,0 +1,57 @@
+# 任务清单：将流程详情从弹窗改为独立页面
+
+## 前端任务
+
+### 1. 创建详情页面组件
+- [x] 创建 `ruoyi-ui/src/views/loanPricing/workflow/detail.vue`
+- [x] 实现页面模板（el-page-header + el-card + el-descriptions）
+- [x] 实现数据获取逻辑（从 route.params 获取 serialNum）
+- [x] 实现 loading 状态和错误处理
+- [x] 实现返回逻辑（router.go(-1) 或跳转列表页）
+
+### 2. 配置动态路由
+- [x] 在 `ruoyi-ui/src/router/index.js` 的 `dynamicRoutes` 中添加详情页路由
+- [x] 配置路由参数 `:serialNum`
+- [x] 配置权限 `loanPricing:workflow:query`
+- [x] 配置 `activeMenu: '/loanPricing/workflow'` 保持菜单高亮
+
+### 3. 修改列表页组件
+- [x] 修改 `index.vue` 中的 `handleView()` 方法，改为路由跳转
+- [x] 移除 `openDetail` 状态变量
+- [x] 移除 `detail` 数据对象
+- [x] 移除详情对话框模板（`<el-dialog>`）
+- [x] 移除 API 导入中的 `getWorkflow`（如果详情页单独导入）
+
+## 验证任务
+
+### 4. 功能测试
+- [ ] 测试从列表页点击"查看"按钮跳转到详情页
+- [ ] 测试详情页正确显示流程信息
+- [ ] 测试详情页返回按钮正常工作
+- [ ] 测试面包屑导航正确高亮"流程列表"
+- [ ] 测试无权限用户无法访问详情页（403 或跳转登录）
+- [ ] 测试访问无效的 serialNum（显示错误提示）
+
+### 5. UI 测试
+- [ ] 测试详情信息完整显示（所有字段）
+- [ ] 测试长字段（如业务方流水号）正确显示
+- [ ] 测试布尔值字段正确转换为"是/否"
+- [ ] 测试移动端响应式布局（单列显示）
+
+### 6. 回归测试
+- [ ] 确认流程列表页面功能正常（查询、筛选、分页）
+- [ ] 确认新增流程功能正常
+- [ ] 确认其他菜单页面不受影响
+
+## 依赖关系
+
+- 任务 1（创建详情页面）和任务 2（配置路由）可以并行进行
+- 任务 3（修改列表页）依赖任务 2 完成（确保路由存在）
+- 所有验证任务（4-6）依赖任务 1-3 完成
+
+## 估算
+
+- 任务 1：创建详情页面组件（核心任务）- 已完成
+- 任务 2：配置动态路由（简单任务）- 已完成
+- 任务 3：修改列表页组件（简单任务）- 已完成
+- 任务 4-6：测试验证（重要任务）- 待用户进行手动测试
--- 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 并行执行