loan-pricing/openspec/changes/remove-tabs-from-workflow-create-dialog/proposal.md

Proposal: 移除流程创建弹窗的 Tab 栏布局

Summary

修改 WorkflowCreateDialog.vue 组件，将当前使用 el-tabs 分组的多 tab 栏布局改为单一表单的垂直布局，使用分组标题（如 Element UI 的 el-divider 或自定义标题）来区分不同的字段区域。

Motivation

当前实现使用 el-tabs 将表单字段分为四个标签页（基本信息、贷款信息、中间业务标识、企业标识），存在以下问题：

1. 用户体验不佳：用户需要在多个 tab 之间切换才能完成表单填写，增加了操作步骤
2. 表单可见性差：用户无法一次性看到所有需要填写的字段，可能遗漏某些选项
3. 确认验证困难：点击"确定"时，用户可能看不到其他 tab 中必填字段的验证提示

Proposed Solution

移除 el-tabs 组件，改用单一表单布局，使用视觉分隔符或分组标题来组织字段：

• 基本信息：使用 el-divider 或分组标题
• 贷款信息：使用 el-divider 或分组标题
• 中间业务标识：使用 el-divider 或分组标题
• 企业标识：使用 el-divider 或分组标题
• 抵质押信息：整合到"贷款信息"分组下或单独分组

所有字段垂直排列，用户可以滚动查看和填写。

Alternatives Considered

1. 保持 tab 栏但优化布局：不解决用户体验问题
2. 使用手风琴折叠面板：仍需要展开/收起操作，不如单一表单直观
3. 使用分步表单（Steps）：增加了操作步骤，不适合简单的表单填写场景

Impact

• Scope: 仅影响 WorkflowCreateDialog.vue 组件的 UI 布局
• Breaking Changes: 无（UI 改进，功能不变）
• Dependencies: 无新增依赖

Related Changes

• Modifies: loan-pricing-workflow-ui spec (Requirement: 流程创建)
• Related Files:
  • ruoyi-ui/src/views/loanPricing/workflow/components/WorkflowCreateDialog.vue