loan-pricing/openspec/changes/extract-workflow-create-dialog/tasks.md

实施任务清单

任务列表

1. 创建组件目录结构

• 创建 ruoyi-ui/src/views/loanPricing/workflow/components/ 目录
• 验证: 目录创建成功，使用 ls 或 dir 确认

2. 创建 WorkflowCreateDialog.vue 组件

• 创建组件文件，包含完整的对话框模板
• 实现 props：visible（对话框显示状态）
• 实现 emits：update:visible、success
• 实现表单数据结构（保持与原实现一致）
• 实现表单验证规则
• 实现四个标签页的表单字段
• 将证件类型改为 el-select 下拉框，选项为"身份证"和"统一社会信用代码"
• 实现 reset() 方法：重置表单到初始状态
• 实现 cancel() 方法：关闭对话框并重置表单
• 实现 submitForm() 方法：验证并提交表单
• 导入 createWorkflow API 函数
• 验证: 组件文件创建成功，无 ESLint 错误

3. 修改 index.vue 引入新组件

• 在 index.vue 顶部导入 WorkflowCreateDialog 组件
• 在 components 选项中注册组件
• 验证: 导入和注册语法正确

4. 修改 index.vue 模板

• 删除原有的对话框模板代码（第 82-256 行）
• 添加 <workflow-create-dialog> 组件标签
• 绑定 v-model:visible="showCreateDialog"
• 监听 @success 事件调用 handleCreateSuccess
• 验证: 模板语法正确，组件标签正确使用

5. 修改 index.vue 数据和逻辑

• 移除 openCreate 状态，替换为 showCreateDialog
• 移除 activeTab 状态
• 移除 form 状态
• 移除 rules 状态
• 修改 handleAdd() 方法：设置 showCreateDialog = true
• 添加 handleCreateSuccess() 方法：显示成功消息并调用 getList()
• 删除 reset() 方法
• 删除 cancelCreate() 方法
• 删除 submitForm() 方法
• 删除 createWorkflow 导入（已移至组件内）
• 验证: 修改后的代码无语法错误

6. 手动功能测试

• 启动前端开发服务器 (npm run dev)
• 登录系统 (admin/admin123)
• 导航至"利率定价管理 > 流程列表"
• 点击"新增"按钮，验证对话框正常弹出
• 切换各个标签页，验证表单字段正确显示
• 点击证件类型下拉框，验证选项为"身份证"和"统一社会信用代码"
• 测试表单验证：不填必填项提交，验证错误提示
• 填写完整表单并提交，验证创建成功
• 验证创建成功后列表自动刷新
• 测试取消按钮，验证对话框关闭且不保存
• 验证: 所有功能正常工作

7. 代码质量检查

• 检查组件命名和文件命名符合项目规范
• 检查代码格式符合项目 ESLint 配置
• 检查注释完整，关键逻辑有说明
• 验证: 代码符合项目规范

任务依赖关系

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 并行执行