输入表单布局

openspec/changes/remove-tabs-from-workflow-create-dialog/design.md

@@ -0,0 +1,80 @@
+# Design: 移除流程创建弹窗的 Tab 栏布局
+
+## Current Implementation
+
+当前 `WorkflowCreateDialog.vue` 使用 `el-tabs` 组件组织表单字段：
+
+```vue
+<el-tabs v-model="activeTab">
+  <el-tab-pane label="基本信息" name="basic">
+    <!-- 客户内码、客户名称、客户类型、证件类型 -->
+  </el-tab-pane>
+  <el-tab-pane label="贷款信息" name="loan">
+    <!-- 申请金额、贷款利率、担保方式、贷款用途、抵质押类型、是否有经营佐证、抵质押物三方所有 -->
+  </el-tab-pane>
+  <el-tab-pane label="中间业务标识" name="mid">
+    <!-- 个人快捷支付、个人电费代扣、企业电费代扣、企业水费代扣 -->
+  </el-tab-pane>
+  <el-tab-pane label="企业标识" name="ent">
+    <!-- 净身企业、开立基本结算账户、制造业企业、省农担担保贷款、纳税信用等级A级、县级及以上农业龙头企业、普惠小微借款人 -->
+  </el-tab-pane>
+</el-tabs>
+```
+
+## Proposed Implementation
+
+使用 Element UI 的 `el-divider` 组件作为分组标题，移除 `el-tabs` 和 `el-tab-pane`：
+
+```vue
+<el-form ref="form" :model="form" :rules="rules" label-width="140px">
+  <!-- 基本信息 -->
+  <el-divider content-position="left">基本信息</el-divider>
+  <el-row>
+    <el-col :span="12">
+      <el-form-item label="客户内码" prop="custIsn">
+        <el-input v-model="form.custIsn" placeholder="请输入客户内码" />
+      </el-form-item>
+    </el-col>
+    <el-col :span="12">
+      <el-form-item label="客户名称" prop="custName">
+        <el-input v-model="form.custName" placeholder="请输入客户名称" />
+      </el-form-item>
+    </el-col>
+  </el-row>
+  <!-- ... 其他基本信息字段 ... -->
+
+  <!-- 贷款信息 -->
+  <el-divider content-position="left">贷款信息</el-divider>
+  <!-- ... 贷款信息字段 ... -->
+
+  <!-- 中间业务标识 -->
+  <el-divider content-position="left">中间业务标识</el-divider>
+  <!-- ... 中间业务标识字段 ... -->
+
+  <!-- 企业标识 -->
+  <el-divider content-position="left">企业标识</el-divider>
+  <!-- ... 企业标识字段 ... -->
+</el-form>
+```
+
+同时需要移除 `data()` 中的 `activeTab` 属性。
+
+## CSS Styling
+
+为 `el-divider` 添加适当的外边距，确保分组标题与表单字段之间有清晰的视觉分隔：
+
+```css
+.el-divider {
+  margin: 16px 0 20px 0;
+  font-weight: bold;
+}
+```
+
+或使用 `<style scoped>` 在组件内定义。
+
+## Rationale
+
+1. **单一表单布局**：所有字段在同一页面可见，用户可以快速浏览和填写
+2. **分组标题**：使用 `el-divider` 的 `content-position` 属性显示分组标题，保持清晰的视觉层次
+3. **滚动支持**：对话框内容区域可滚动，支持大量字段的显示
+4. **保持验证逻辑**：不需要修改表单验证逻辑，`el-form` 的验证机制仍然有效

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

@@ -0,0 +1,43 @@
+# 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`

openspec/changes/remove-tabs-from-workflow-create-dialog/specs/loan-pricing-workflow-ui/spec.md

@@ -0,0 +1,36 @@
+# loan-pricing-workflow-ui Spec Delta
+
+## MODIFIED Requirements
+
+### Requirement: 流程创建
+
+系统 SHALL 提供创建新利率定价流程的功能，通过表单对话框收集必要信息。
+
+#### Scenario: 打开创建表单
+- **WHEN** 用户在流程列表页面且具有 `loanPricing:workflow:create` 权限，点击"新增"按钮
+- **THEN** 系统弹出创建流程表单对话框，在单一表单页面中垂直显示所有必填和可选字段，使用分组标题区分不同的字段区域
+
+#### Scenario: 表单字段显示
+- **WHEN** 用户打开创建流程表单对话框
+- **THEN** 系统在单一表单中显示以下字段分组，使用分隔符或分组标题区分：
+  - **基本信息**分组：客户内码（必填）、客户名称、客户类型（必填，下拉选择：个人/企业）、证件类型
+  - **贷款信息**分组：申请金额（必填）、贷款利率（必填）、担保方式（必填，下拉选择：信用/保证/抵押/质押）、贷款用途（下拉选择：consumer/business）、抵质押类型（下拉选择：一线/一类/二类）、是否有经营佐证（开关）、抵质押物三方所有（开关）
+  - **中间业务标识**分组：个人快捷支付（开关）、个人电费代扣（开关）、企业电费代扣（开关）、企业水费代扣（开关）
+  - **企业标识**分组：净身企业（开关）、开立基本结算账户（开关）、制造业企业（开关）、省农担担保贷款（开关）、纳税信用等级A级（开关）、县级及以上农业龙头企业（开关）、普惠小微借款人（开关）
+  - **固定字段**：机构编码（隐藏，固定值931000）、运行模式（隐藏，固定值1）
+
+#### Scenario: 表单验证
+- **WHEN** 用户填写表单并点击确定按钮
+- **THEN** 系统在同一表单页面中验证必填字段：客户内码、客户类型、担保方式、申请金额、贷款利率，如有缺失则在对应字段位置显示错误提示
+
+#### Scenario: 提交创建成功
+- **WHEN** 用户填写完必填字段并点击确定按钮，后端返回成功响应
+- **THEN** 系统关闭对话框，显示成功提示消息，刷新列表数据
+
+#### Scenario: 取消创建
+- **WHEN** 用户点击取消按钮或对话框关闭按钮
+- **THEN** 系统关闭对话框，不保存数据，不刷新列表
+
+#### Scenario: 新增按钮权限控制
+- **WHEN** 用户不具有 `loanPricing:workflow:create` 权限
+- **THEN** 系统不显示"新增"按钮

openspec/changes/remove-tabs-from-workflow-create-dialog/tasks.md

@@ -0,0 +1,21 @@
+# Tasks
+
+1. **修改 WorkflowCreateDialog.vue 组件布局**
+   - 移除 `el-tabs` 和 `el-tab-pane` 组件
+   - 添加分组标题/分隔符来区分字段区域
+   - 保持所有表单字段和验证规则不变
+   - 验证表单提交功能正常工作
+
+2. **测试验证**
+   - 测试所有必填字段的验证是否正常
+   - 测试表单提交功能
+   - 测试取消和关闭对话框功能
+   - 确认在不同屏幕尺寸下的显示效果
+
+## Validation Criteria
+
+- [x] 移除 tab 栏，所有字段在单一表单中可见
+- [x] 使用分组标题/分隔符清晰区分字段区域
+- [x] 表单验证功能正常
+- [x] 表单提交功能正常
+- [x] 取消和关闭功能正常