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

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

Current Implementation

当前 WorkflowCreateDialog.vue 使用 el-tabs 组件组织表单字段：

<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：

<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 添加适当的外边距，确保分组标题与表单字段之间有清晰的视觉分隔：

.el-divider {
  margin: 16px 0 20px 0;
  font-weight: bold;
}

或使用 <style scoped> 在组件内定义。

Rationale

1. 单一表单布局：所有字段在同一页面可见，用户可以快速浏览和填写
2. 分组标题：使用 el-divider 的 content-position 属性显示分组标题，保持清晰的视觉层次
3. 滚动支持：对话框内容区域可滚动，支持大量字段的显示
4. 保持验证逻辑：不需要修改表单验证逻辑，el-form 的验证机制仍然有效