詳解如何在 NocoBase 低代碼平臺中構建類 Salesforce 的 CRM 銷售漏斗可視化功能，包括線索狀態進度條與階段管理。通過狀態驅動表單顯示變化，實現線索從未達標到完成的全周期可視化跟蹤，提升銷售效率與轉化率。適合需要優化 CRM 銷售流程的企業與開發者。

原文鏈接：https://www.nocobase.com/cn/tutorials/nocobase-crm-sales-pipeline-visualization-lead-status-progress-bar

1. 簡介

1.1 前言

本章是 如何在 NocoBase 中實現 CRM 的線索轉化 系列教程的第二部分。在上一章中，我們已經介紹了線索轉化的基礎知識，包括創建所需的數據集合（Collections）、配置數據管理頁面以及實現線索到公司、聯系人和商機的轉化功能。本章將重點關注線索的跟進流程和狀態管理的實現。

1.2 本章目標

在本章中，我們將一起學習如何在 NocoBase 中實現 CRM 線索轉化。通過線索跟進和狀態管理，您可以提升業務效率，實現更精細的銷售過程控制。

1.3 最終效果預覽

在上一章節中，我們講解了如何關聯管理線索與公司、聯系人以及商機的數據。現在，我們聚焦于線索模塊，主要探討如何進行線索的跟進與狀態管理。請先觀看以下效果示例：

2. 線索 Collection 結構說明

2.1 線索 Collection 介紹

在線索跟進功能中，"狀態"（status）字段扮演著至關重要的角色，不僅反映了線索的當前進展（如未達標、新線索、處理中、跟進中、交易進行中、完成），而且還驅動整個表單的顯示與變化。下面的 table block 展示了線索 collection 的字段結構及其詳細描述：

Field name	字段顯示名稱	Field interface	Description
id	Id	Integer	主鍵
account_id	account_id	Integer	公司表 ACCOUNT 外鍵
contact_id	contact_id	Integer	聯系人表 CONTACT 外鍵
opportunity_id	opportunity_id	Integer	商機表 OPPORTUNITY 外鍵
name	線索名	Single line text	潛在客戶的姓名
company	公司名	Single line text	潛在客戶所在的公司名稱
email	電子郵箱	Email	潛在客戶的電子郵箱地址
phone	聯系電話	Phone	聯系電話
status	狀態	Single select	線索當前狀態, 默認為"未達標"（未達標, 新線索, 處理中, 跟進中, 交易進行中, 完成）
Account	公司	Many to one	關聯到公司
Contact	聯系人	Many to one	關聯到聯系人
Opportunity	商機	Many to one	關聯到商機

3. 創建 Leads 表格區塊（table block）與詳情區塊

3.1 創建說明

首先，我們需要創建一個 "Leads" 的 table block 用于展示必要的字段。同時，在頁面右側配置一個詳情區塊，當您點擊某條記錄時，右側會自動顯示對應的詳細信息。請參見下圖的配置效果：

4. 配置操作按鈕

4.1 按鈕總體說明

為了滿足各種操作需求，我們需要創建共計 10 個按鈕。每個按鈕都依據記錄的狀態（status）采用不同的顯示方式（隱藏、激活或禁用），從而引導用戶按照正確的業務流程操作。

4.2 各功能按鈕詳細配置

按鈕	樣式	操作	聯動規則
編輯按鈕	編輯操作	—	當記錄的 status 為 "Completed"（已完成）時自動禁用，防止不必要的編輯。
未達標 按鈕（激活狀態）	"Unqualified >"	更新記錄的 status 為 "Unqualified"。	默認展示；若 status 為 "Completed"，則按鈕被禁用。
新線索 按鈕（未激活）	更新數據操作，"New >"	將 status 設置為 "New"，更新成功后顯示 "New" 的提示。	如果記錄的 status 不為 "Unqualified" 則隱藏。（即記錄已處于 "New" 或之后狀態，應為激活狀態）
新線索 按鈕（激活狀態）	更新數據操作，"New >"	更新記錄的 status 為 "New"。	當 status 為 "Unqualified" 時隱藏；若 status 為 "Completed"，則按鈕禁用。
處理中 按鈕（未激活）	更新數據操作，"Working >"	將 status 更新為 "Working"，并顯示 "Working" 成功提示。	當記錄的 status 不為 "Unqualified"、"New" 時隱藏。
處理中 按鈕（激活狀態）	更新數據操作，"Working >"	更新記錄的 status 為 "Working"。	當 status 為 "Unqualified"、"New" 時隱藏；若 status 為 "Completed"，則按鈕禁用。
跟進中 按鈕（未激活）	更新數據操作，"Nurturing >"	將 status 設置為 "Nurturing"，并顯示 "Nurturing" 成功提示。	當記錄的 status 不為 "Unqualified"、"New"、"Working" 時隱藏。
跟進中 按鈕（激活狀態）	更新數據操作，"Nurturing >"	更新記錄的 status 為 "Nurturing"。	當 status 為 "Unqualified"、"New"、"Working" 時隱藏；若 status 為 "Completed"，則按鈕禁用。
轉化 按鈕	編輯操作 ，"transfer"，圖標為"√"	彈出轉化表單，表單提交時，更新記錄的 status 為 "Completed"。	當記錄的 status 為 "Completed" 時隱藏，以防重復轉移。
轉化完成 按鈕（激活狀態）	查看操作，"transfered"，圖標為"√"	僅用于展示轉化完成后的信息，不具備編輯功能。	僅在記錄的 status 為 "Completed" 時顯示；其他狀態時隱藏。

• 聯動規則示例：
  處理中 (未激活)
  
  處理中 (激活)
  
• 轉化表單：
  轉化按鈕（未激活）
  
  轉化按鈕（激活）
  
• 轉化提交時彈出提示：
  

4.3 按鈕配置總結

• 每項功能均提供未激活和激活狀態下的不同按鈕樣式。
• 利用聯動規則，根據記錄的 status 動態控制按鈕的顯示（隱藏或禁用），從而引導銷售人員按照正確的工作流程進行操作。

5. 表單聯動規則設置

5.1 規則 1：僅展示名稱

• 當記錄未確認時，只展示名稱。
  
  

5.2 規則 2："新線索" 狀態下的顯示優化

• 在 status 為 "新線索" 時，頁面將隱藏公司名，并展示聯系方式。
  

6. 頁面 Markdown 規則與 Handlebars 語法

6.1 動態文案展示

在頁面中，我們使用 Handlebars 語法根據記錄的狀態動態展示不同的提示信息。以下是各狀態下的示例代碼：

當狀態為 "未達標" 時：

{{#if (eq $nRecord.status "未達標")}}
**跟蹤你那些不合格線索的相關信息。**  
如果你的線索對產品不感興趣或已離開相關公司，則可能是不合格的。  
- 記錄經驗教訓以供今后參考  
- 保存外聯細節和聯系方式  
{{/if}}

當狀態為 "新線索" 時：

{{#if (eq $nRecord.status "新線索")}}
**收集更多關于這條線索的信息。**  
- 了解潛在客戶的需求和興趣點
- 收集基礎聯系資料和公司背景
- 確定后續跟進的優先級和方式
{{/if}}

當狀態為 "處理中" 時：

{{#if (eq $nRecord.status "處理中")}}
**主動聯系線索并初步評估需求。**  
- 通過電話/郵件與潛在客戶建立聯系
- 了解客戶面臨的問題和挑戰
- 初步判斷客戶的需求與公司產品/服務的匹配度
{{/if}}

當狀態為 "跟進中" 時：

{{#if (eq $nRecord.status "跟進中")}}
**深入挖掘客戶需求，進行線索培育。**  
- 提供相關產品資料或解決方案建議
- 回答客戶的問題，消除顧慮
- 評估線索的轉化可能性
{{/if}}

當狀態為 "轉化完成" 時：

{{#if (eq $nRecord.status "轉化完成")}}
**線索已成功轉化為客戶。**  
- 確認已創建相關的公司和聯系人記錄
- 創建商機記錄，設置跟進計劃
- 將相關資料和溝通記錄傳遞給負責的銷售人員
{{/if}}

7. 展示轉化完成后的關聯對象及跳轉鏈接

7.1 關聯對象說明

在轉化完成后，我們希望展示相關的關聯對象（公司、聯系人、商機），并能夠直接跳轉至詳情頁面。
這個時候隨便找一個詳情彈窗，比如公司，然后復制鏈接。

注意：在其他彈窗或頁面中，詳情鏈接格式的最后部分（filterbytk 后的數字）代表當前對象的 id，例如：

{Base URL}/admin/w3yyu23uro0/popups/ki0wcnfruj6/filterbytk/{id}

7.2 使用 Handlebars 生成關聯鏈接

公司：

{{#if (eq $nRecord.status "已完成")}}
**公司:**
[{{$nRecord.account.name}}](w3yyu23uro0/popups/ki0wcnfruj6/filterbytk/{{$nRecord.account_id}})
{{/if}}

聯系人：

{{#if (eq $nRecord.status "已完成")}}
**聯系人:**
[{{$nRecord.contact.name}}](1oqybfwrocb/popups/8bbsqy5bbpl/filterbytk/{{$nRecord.contact_id}})
{{/if}}

商機：

{{#if (eq $nRecord.status "已完成")}}
**商機:**
[{{$nRecord.opportunity.name}}](si0io9rt6q6/popups/yyx8uflsowr/filterbytk/{{$nRecord.opportunity_id}})
{{/if}}

8. 隱藏關聯對象但保留值

為確保在轉化完成后正常展示關聯信息，需要將 "公司"、 "聯系人" 和 "商機" 的狀態設置為 "隱藏（保留值）"。這樣，盡管這些字段不在表單中顯示，但其值依然會被記錄和傳遞。

9. 防止轉化完成后狀態修改

為了防止轉化完成后意外更改狀態，我們為所有按鈕添加了一個判斷條件：在狀態為 "已完成" 時，所有按鈕將被禁用。

10. 結束語

完成以上所有步驟后，您的線索跟進轉化功能就大功告成啦！通過本章的分步講解，希望您能更清晰地理解 NocoBase 中狀態表單變化聯動的實現方式。祝您操作順利，使用愉快！