loan-pricing/openspec/changes/extract-workflow-create-dialog/design.md

设计文档：抽离流程创建对话框组件

组件设计

WorkflowCreateDialog.vue 组件

位置：ruoyi-ui/src/views/loanPricing/workflow/components/WorkflowCreateDialog.vue

职责：负责利率定价流程创建表单的展示和交互逻辑

Props

名称	类型	默认值	说明
visible	Boolean	false	对话框显示状态（v-model 绑定）

Events

事件名	参数	说明
update:visible	(value: Boolean)	对话框显示状态变化时触发
success	-	创建成功后触发，父组件可刷新列表

内部状态

data() {
  return {
    activeTab: 'basic',  // 当前激活的标签页
    form: {},            // 表单数据
    rules: {}            // 表单验证规则
  }
}

表单字段结构

保持与现有实现一致，包含以下分组：

1. 基本信息 标签页 (basic)

   • 客户内码 (custIsn) - 必填
   • 客户名称 (custName)
   • 客户类型 (custType) - 必填，下拉选择
   • 证件类型 (idType) - 下拉选择（身份证、统一社会信用代码）

2. 贷款信息 标签页 (loan)

   • 申请金额 (applyAmt) - 必填
   • 贷款利率 (loanRate) - 必填
   • 担保方式 (guarType) - 必填，下拉选择
   • 贷款用途 (loanPurpose) - 下拉选择
   • 抵质押类型 (collType) - 下拉选择
   • 是否有经营佐证 (bizProofActive) - 开关
   • 抵质押物三方所有 (collThirdPartyActive) - 开关

3. 中间业务标识 标签页 (mid)

   • 个人快捷支付 (midPerQuickPayActive) - 开关
   • 个人电费代扣 (midPerEleDdcActive) - 开关
   • 企业电费代扣 (midEntEleDdcActive) - 开关
   • 企业水费代扣 (midEntWaterDdcActive) - 开关

4. 企业标识 标签页 (ent)

   • 净身企业 (isCleanEntActive) - 开关
   • 开立基本结算账户 (hasSettleAcctActive) - 开关
   • 制造业企业 (isManufacturingActive) - 开关
   • 省农担担保贷款 (isAgriGuarActive) - 开关
   • 纳税信用等级A级 (isTaxAActive) - 开关
   • 县级及以上农业龙头企业 (isAgriLeadingActive) - 开关
   • 普惠小微借款人 (isInclusiveFinanceActive) - 开关

方法

方法名	说明
reset()	重置表单到初始状态
cancel()	关闭对话框并重置表单
submitForm()	验证并提交表单

index.vue 修改

移除内容：

• 删除对话框相关的模板代码（第 82-256 行）
• 删除 openCreate、activeTab、form、rules 状态
• 删除 handleAdd()、reset()、cancelCreate()、submitForm() 方法

新增内容：

• 导入 WorkflowCreateDialog 组件
• 注册组件
• 添加 showCreateDialog 状态（替代 openCreate）
• 修改 handleAdd() 方法，设置 showCreateDialog = true
• 添加 handleCreateSuccess() 方法，处理创建成功后刷新列表

组件通信流程

┌─────────────────────────────────────────────────────────────┐
│                        index.vue                             │
│  ┌─────────────┐      ┌─────────────────────────────────┐  │
│  │ handleAdd() │ ───► │ showCreateDialog = true         │  │
│  └─────────────┘      └─────────────────────────────────┘  │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐  │
│  │            showCreateDialog (v-model)                 │  │
│  ├──────────────────────────────────────────────────────┤  │
│  │                                                        │  │
│  ▼                                                        │  │
│  ┌────────────────────────────────────────────────────┐  │  │
│  │     WorkflowCreateDialog.vue                        │  │  │
│  │                                                     │  │  │
│  │  ◄────── visible (prop) ───────┐                   │  │  │
│  │                                │                   │  │  │
│  │  ───────► update:visible ──────┘                   │  │  │
│  │                                                     │  │  │
│  │  submitForm() ──► API 调用 ──► @success 事件 ────────┼──┘
│  │                                                     │
│  └────────────────────────────────────────────────────┘
│                                                              │
│  ┌─────────────────────────────────────────────────────┐    │
│  │    handleCreateSuccess() ──► getList() ──► 刷新列表   │    │
│  └─────────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────────┘

证件类型下拉框实现

<el-form-item label="证件类型" prop="idType">
  <el-select v-model="form.idType" placeholder="请选择证件类型" style="width: 100%">
    <el-option label="身份证" value="身份证" />
    <el-option label="统一社会信用代码" value="统一社会信用代码" />
  </el-select>
</el-form-item>

目录结构

ruoyi-ui/src/views/loanPricing/workflow/
├── components/
│   └── WorkflowCreateDialog.vue    # 新增：创建对话框组件
├── detail.vue                       # 详情页面
└── index.vue                        # 列表页面（修改）

兼容性考虑

• 组件使用 Vue 2.6.12 的 Options API 风格
• 使用 Element UI 2.15.14 组件
• 保持与现有代码风格一致
• 确保表单验证规则和行为不变