# 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` 的验证机制仍然有效