81 lines
2.8 KiB
Markdown
81 lines
2.8 KiB
Markdown
|
# 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` 的验证机制仍然有效
|