44 lines
1.9 KiB
Markdown
44 lines
1.9 KiB
Markdown
|
# 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`
|