前情回顾

在上一讲中，我们完成了员工登录与岗位工作台的开发。至此，系统的"骨架"和"规则"已经搭建完毕。

本节我们将实现跟进管理功能，这是CRM系统的核心功能之一，用于记录销售人员与客户的沟通历史、跟进计划和商机进展。为了最大化提升销售效率，我们将为销售人员提供便捷的跟进录入、跟进提醒和统计分析功能。

本节目标

• 数据模型设计：创建跟进记录所需的数据模型
• 页面布局搭建：使用低代码组件实现跟进管理界面
• 核心功能实现：包括跟进记录的新增、编辑、删除、查询等功能

---

第一步：数据准备

1.1 数据源配置

首先，创建名为FollowUps的数据模型，包含以下核心字段：

字段名称	字段标识	类型	说明
客户	customer_id	关联关系	关联到Customers表
跟进人	follower_id	关联关系	关联到Users表（当前登录用户）
跟进类型	follow_type	枚举	电话/微信/邮件/面谈/其他
跟进内容	content	多行文本	跟进详细内容
跟进结果	result	枚举	有效沟通/无效沟通/有意向/已成交/需再次跟进
下次跟进时间	next_follow_time	日期时间	计划下次跟进时间
下次跟进内容	next_follow_content	多行文本	下次跟进计划
附件	attachments	文件数组	跟进相关附件
创建时间	created_at	日期时间	自动生成
更新时间	updated_at	日期时间	自动更新

在MBA_Customers客户表中，增加以下字段用于记录最新跟进状态：

字段名称	字段标识	数据类型	说明
最后跟进时间	last_contact	日期时间	记录最后一次跟进时间
跟进状态	follow_status	枚举	未跟进/跟进中/已成交/已放弃

---

第二步：页面布局搭建

2.1 页面整体布局

点击创建页面的图标

输入页面的名称跟进管理，布局选择销售布局（因为主要是销售人员使用）

切换到页面布局，选择销售布局，添加平级菜单

添加跟进管理菜单

2.2 数据表格配置

在销售布局的内容插槽下添加布局组件

修改标题，改为跟进管理

在页面布局中添加数据表格组件

数据模型选择跟进表，勾选场景

2.3 配置URL参数

如果是从线索管理跳转过来，我们需要知道是哪一条线索。选中页面组件，创建URL参数

输入lead_id

2.4 配置查询条件

点击筛选器，给表格配置查询条件

添加具体的查询条件：

• 客户名称（模糊搜索）
• 跟进类型（下拉选择）
• 跟进结果（下拉选择）
• 跟进时间范围（日期范围）

2.5 配置排序字段

默认按照创建时间的倒序进行排序，最新的跟进记录显示在最前面

2.6 配置数据筛选

显示表格数据的时候，我们既需要知道跟进人是谁，也需要知道线索是谁，需要配置筛选条件

先配置跟进人等于我们的当前用户对象的数据标识

然后配置客户等于我们的URL参数

---

第三步：录入跟进功能实现

3.1 创建录入跟进弹窗

在跟进管理页面添加一个弹窗组件，用于录入新的跟进记录。

从组件库中拖拽弹窗组件到页面，设置弹窗标题为"录入跟进"

在弹窗中添加表单容器组件，数据模型选择跟进记录表

选择客户字段，选中值设置为URL参数

选择跟进人，选中值设置为用户对象的数据标识

3.2 设置提交事件

在代码区新增一个javascript方法，得到表单里选择的跟进结果，根据跟进结果去更新我们的客户表的对应字段

export default async function submitFollowUp({ event, data }) {
  try {
    // 显示加载中
    $w.utils.showLoading({ title: '保存中...' });
    
    // 1. 从页面参数获取客户ID
    const customerId = $w.page.dataset.params.lead_id;
    if (!customerId) {
      $w.utils.showToast({ title: '客户ID不能为空', icon: 'error' });
      return;
    }
    
    // 2. 获取表单数据
    const follow_result = $w.select8.value;
    
    // 3. 获取当前登录用户信息
    const currentUser = $w.app.dataset.state.currentUser;
    
    
    // 5. 根据跟进结果确定客户跟进状态
    let followStatus = '2';
    switch (follow_result) {
      case '4': // 已成交
        followStatus = '3';
        break;
      case '2': // 无效沟通
        followStatus = '4';
        break;
      default:
        followStatus = '2';
    }
    
    // 6. 更新客户表的跟进相关字段
    await $w.cloud.callDataSource({
      dataSourceName: 'MBA_Customers',
      methodName: 'wedaUpdateV2',
      params: {
        filter: { where: { _id: { $eq: customerId } } },
        data: {
          last_contact: Date.now(),
          follow_status: followStatus,
        }
      }
    });
    $w.table1.refresh();
    $w.modal1.close({});
    
  } catch (error) {
    console.error('保存跟进记录失败:', error);
    $w.utils.showToast({ title: '保存失败，请稍后重试', icon: 'error' });
  } finally {
    $w.utils.hideLoading();
  }
}

给表单提交成功事件后增加调用方法，调用我们的提交方法

3.3 跟进跳转

在我的线索页面，在操作列增加一个跟进记录的按钮

配置点击事件，打开跟进管理页面，传入所在行的数据标识

最终效果

打开我的线索，点击跟进记录

点击新建录入跟进记录

总结

本节我们完成了跟进管理功能的开发，实现了销售人员对客户跟进记录的完整管理：

1. 数据模型设计：

   • 创建了MBA_FollowUps跟进记录表，记录每次跟进的详细信息
   • 扩展了MBA_Customers客户表，增加跟进状态、最后跟进时间等字段，方便快速查看客户跟进情况

2. 跟进录入功能：

   • 在客户详情页添加"录入跟进"按钮，支持快速录入跟进记录
   • 表单包含跟进类型、内容、结果、下次跟进计划等字段
   • 提交时自动同步更新客户表的跟进相关字段

3. 客户跟进状态同步：

   • 根据跟进结果自动更新客户的跟进状态（跟进中/已成交/已放弃）
   • 自动记录最后跟进时间和内容摘要
   • 同步更新下次跟进时间，支持跟进提醒功能

4. 数据关联与展示：

   • 跟进记录与客户信息自动关联
   • 在客户详情页展示历史跟进记录列表
   • 支持按跟进类型、结果、时间等条件筛选

通过本讲的实现，销售人员可以方便地记录每次与客户的沟通情况，系统会自动更新客户的跟进状态，形成完整的客户跟进历史，帮助销售团队更好地管理客户关系，提高销售转化率。

下一步，我们将继续完善销售管理功能，实现客户分配、销售报表等模块，构建完整的CRM销售管理体系。