ccdi/openspec/changes/sync-intermediary-frontend-with-detailed-fields/tasks.md

Tasks: 同步前端以支持中介黑名单详细字段和类型化模板导入

任务列表

阶段 1：API 接口层扩展

• 1.1 在 ruoyi-ui/src/api/dpcIntermediary.js 中添加 importPersonTemplate 函数

  • 调用 POST /dpc/intermediary/importPersonTemplate
  • 返回个人中介模板文件

• 1.2 在 ruoyi-ui/src/api/dpcIntermediary.js 中添加 importEntityTemplate 函数

  • 调用 POST /dpc/intermediary/importEntityTemplate
  • 返回机构中介模板文件

• 1.3 在 ruoyi-ui/src/api/dpcIntermediary.js 中添加 importPersonData 函数

  • 调用 POST /dpc/intermediary/importPersonData
  • 支持传递 updateSupport 参数

• 1.4 在 ruoyi-ui/src/api/dpcIntermediary.js 中添加 importEntityData 函数

  • 调用 POST /dpc/intermediary/importEntityData
  • 支持传递 updateSupport 参数

阶段 2：详情对话框实现

• 2.1 在 ruoyi-ui/src/views/dpcIntermediary/index.vue 的 data 中添加详情相关属性

  • 添加 detailOpen: false
  • 添加 detailData: {}

• 2.2 在 ruoyi-ui/src/views/dpcIntermediary/index.vue 的 template 中添加详情对话框

  • 使用 el-descriptions 组件展示字段
  • 根据中介类型条件渲染个人/机构专属字段

• 2.3 实现 handleDetail 方法

  • 调用 getIntermediary 接口获取详情
  • 将数据存储到 detailData
  • 打开详情对话框

• 2.4 在列表操作列添加"详情"按钮

  • 使用 el-icon-view 图标
  • 绑定 handleDetail 方法
  • 调整操作列宽度为 240px

阶段 3：新增/编辑对话框增强

• 3.1 在 ruoyi-ui/src/views/dpcIntermediary/index.vue 的 data 中添加 activeTab 属性

  • 默认值为 'basic'

• 3.2 在表单中添加 el-tabs 组件

  • 添加"基本信息"标签页（name="basic"）
  • 添加"个人信息"标签页（name="person"）
  • 添加"机构信息"标签页（name="entity"）

• 3.3 实现"个人信息"标签页内容

  • 添加人员类型、人员子类型、性别、证件类型字段
  • 添加手机号码、微信号、联系地址字段
  • 添加所在公司、职位、关联人员ID、关联关系字段
  • 使用两列响应式布局

• 3.4 实现"机构信息"标签页内容

  • 添加统一社会信用代码、主体类型、企业性质字段
  • 添加行业分类、所属行业、成立日期、注册地址字段
  • 添加法定代表人及其证件信息字段
  • 添加股东1-5字段，使用分隔线分组

• 3.5 更新 reset 方法

  • 添加所有个人字段的初始化
  • 添加所有机构字段的初始化
  • 重置 activeTab 为 'basic'

• 3.6 实现 handleTypeChange 方法

  • 监听中介类型变化
  • 自动切换到对应的标签页

• 3.7 调整对话框宽度

  • 将宽度从 600px 调整为 900px
  • 适应更多字段的展示

阶段 4：导入对话框改造

• 4.1 在导入对话框中添加类型选择单选框组

  • 选项：个人中介（person）、机构中介（entity）
  • 默认选择"个人中介"

• 4.2 在 upload 数据中添加 importType 属性

  • 默认值为 'person'

• 4.3 修改 downloadImportTemplate 方法

  • 根据 upload.importType 调用对应的模板下载接口
  • 个人类型调用 importPersonTemplate
  • 机构类型调用 importEntityTemplate

• 4.4 修改 submitFileForm 方法

  • 根据 upload.importType 动态设置 upload.url
  • 个人类型使用 /dpc/intermediary/importPersonData
  • 机构类型使用 /dpc/intermediary/importEntityData
  • 添加 updateSupport 参数到 URL

• 4.5 调整导入对话框宽度

  • 从 400px 调整为 450px
  • 适应新增的类型选择区域

阶段 5：测试验证

• 5.1 测试详情对话框功能

  • 测试个人类型详情显示
  • 测试机构类型详情显示
  • 测试旧数据详情显示（字段为空）

• 5.2 测试新增/编辑功能

  • 测试新增个人类型中介
  • 测试新增机构类型中介
  • 测试编辑个人类型中介
  • 测试编辑机构类型中介
  • 测试类型切换时标签页自动跳转

• 5.3 测试导入功能

  • 测试个人类型模板下载
  • 测试机构类型模板下载
  • 测试个人类型数据导入
  • 测试机构类型数据导入
  • 测试更新支持选项

• 5.4 测试兼容性

  • 测试现有列表查询功能
  • 测试现有删除功能
  • 测试现有导出功能

依赖关系

• 阶段 1 必须首先完成，为后续阶段提供 API 接口
• 阶段 2、3、4 可以并行开发
• 阶段 5 必须在所有开发阶段完成后进行

验收标准

每个任务完成后应满足：

• 代码符合 Vue 2.x 和 Element UI 规范
• 功能与设计文档描述一致
• 不影响现有功能的正常运行