feat(customerLead): 实现客资管理模块功能

- 新增客资管理接口，包括分页查询、详情获取、创建、更新、状态更新等
- 实现客资派单功能，支持单条及批量派单操作
- 添加跟进记录相关接口和获取跟进历史记录功能
- 实现客资统计数据接口和业务员客资统计查询
- 开发客资数据导出接口及未分配客资列表接口
- 新增客资管理数据模型及相关状态、来源、跟进方式、派单类型常量
- 设计客资管理页面，包含搜索表单、统计卡片、操作按钮、数据表格及分页
- 实现新增、编辑、详情查看、派单、批量派单、跟进记录添加与删除功能
- 集成表单验证、消息提示和弹窗交互逻辑
- 调用后台接口完成数据加载、状态维护及用户列表获取
- 优化页面样式，支持响应式布局及交互体验提升

src/api/cms/customerLead/index.ts

@@ -0,0 +1,208 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import {
+  CustomerLead,
+  CustomerLeadParam,
+  LeadDispatchParam,
+  LeadFollowParam,
+  LeadDispatch,
+  LeadFollowLog,
+  LeadStatistics,
+  SalesmanStats
+} from './model';
+import { MODULES_API_URL } from '@/config/setting';
+
+/**
+ * 分页查询客资列表
+ */
+export async function pageCustomerLead(params: CustomerLeadParam) {
+  const res = await request.get<ApiResult<PageResult<CustomerLead>>>(
+    MODULES_API_URL + '/customer/lead/page',
+    { params }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 获取客资详情
+ */
+export async function getCustomerLeadDetail(leadId: number) {
+  const res = await request.get<ApiResult<CustomerLead>>(
+    MODULES_API_URL + '/customer/lead/detail/' + leadId
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 创建客资（管理员录入）
+ */
+export async function createCustomerLead(data: CustomerLead) {
+  const res = await request.post<ApiResult<CustomerLead>>(
+    MODULES_API_URL + '/customer/lead/create',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 更新客资信息
+ */
+export async function updateCustomerLead(data: CustomerLead) {
+  const res = await request.put<ApiResult<boolean>>(
+    MODULES_API_URL + '/customer/lead/update',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 更新客资状态
+ */
+export async function updateCustomerLeadStatus(
+  leadId: number,
+  status: number,
+  remarks?: string
+) {
+  const res = await request.put<ApiResult<boolean>>(
+    MODULES_API_URL + '/customer/lead/status/' + leadId,
+    { status, remarks }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 派单给业务员
+ */
+export async function dispatchLead(data: LeadDispatchParam) {
+  const res = await request.post<ApiResult<boolean>>(
+    MODULES_API_URL + '/customer/lead/dispatch',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量派单
+ */
+export async function batchDispatchLeads(data: LeadDispatchParam) {
+  const res = await request.post<ApiResult<{ successCount: number; failCount: number; errors: string[] }>>(
+    MODULES_API_URL + '/customer/lead/dispatch/batch',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加跟进记录
+ */
+export async function addLeadFollowLog(data: LeadFollowParam) {
+  const res = await request.post<ApiResult<boolean>>(
+    MODULES_API_URL + '/customer/lead/follow',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 获取跟进历史
+ */
+export async function getLeadFollowHistory(leadId: number) {
+  const res = await request.get<ApiResult<LeadFollowLog[]>>(
+    MODULES_API_URL + '/customer/lead/follow/history/' + leadId
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 获取统计数据
+ */
+export async function getLeadStatistics(params: CustomerLeadParam) {
+  const res = await request.get<ApiResult<LeadStatistics>>(
+    MODULES_API_URL + '/customer/lead/statistics',
+    { params }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 导出客资数据
+ */
+export async function exportCustomerLeads(params: CustomerLeadParam) {
+  const res = await request.get<ApiResult<Record<string, unknown>[]>>(
+    MODULES_API_URL + '/customer/lead/export',
+    { params }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 获取未分配客资列表
+ */
+export async function getUnassignedLeads() {
+  const res = await request.get<ApiResult<CustomerLead[]>>(
+    MODULES_API_URL + '/customer/lead/unassigned'
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 获取业务员客资统计
+ */
+export async function getSalesmanLeadStats(salesmanId: number) {
+  const res = await request.get<ApiResult<SalesmanStats>>(
+    MODULES_API_URL + '/customer/lead/salesman/stats/' + salesmanId
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 获取派单历史
+ */
+export async function getLeadDispatchHistory(leadId: number) {
+  const res = await request.get<ApiResult<LeadDispatch[]>>(
+    MODULES_API_URL + '/customer/lead/dispatch/history/' + leadId
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/api/cms/customerLead/model.ts

@@ -0,0 +1,174 @@
+/**
+ * 客资管理模块 - 类型定义
+ */
+
+/** 客资状态枚举 */
+export const LeadStatusOptions = [
+  { label: '待跟进', value: 0, color: 'warning' },
+  { label: '跟进中', value: 1, color: 'primary' },
+  { label: '已成交', value: 2, color: 'success' },
+  { label: '无效', value: 3, color: 'info' }
+];
+
+/** 客资来源类型 */
+export const LeadSourceOptions = [
+  { label: '表单', value: 'form' },
+  { label: '网站', value: 'website' },
+  { label: '小程序', value: 'miniapp' },
+  { label: '推荐人', value: 'referral' },
+  { label: '管理员录入', value: 'admin' }
+];
+
+/** 跟进方式 */
+export const FollowTypeOptions = [
+  { label: '电话', value: 1 },
+  { label: '微信', value: 2 },
+  { label: '上门', value: 3 },
+  { label: '短信', value: 4 },
+  { label: '其他', value: 5 }
+];
+
+/** 派单类型 */
+export const DispatchTypeOptions = [
+  { label: '新分配', value: 1 },
+  { label: '重新分配', value: 2 },
+  { label: '抢单', value: 3 }
+];
+
+/** 客资实体 */
+export interface CustomerLead {
+  leadId?: number;
+  name?: string;
+  phone?: string;
+  company?: string;
+  delivery?: string;
+  need?: string;
+  source?: string;
+  sourceType?: string;
+  ip?: string;
+  status?: number;
+  statusText?: string;
+  remarks?: string;
+  assignedUserId?: number;
+  assignedUserName?: string;
+  assignedRealName?: string;
+  assignedUserPhone?: string;
+  referrerUserId?: number;
+  referrerName?: string;
+  referrerPhone?: string;
+  referralFee?: number;
+  referralFeePaid?: number;
+  referralFeePaidText?: string;
+  referrerShare?: number;
+  dispatchTime?: string;
+  dispatchAdminId?: number;
+  dispatchAdminName?: string;
+  followCount?: number;
+  lastFollowTime?: string;
+  appointmentTime?: string;
+  dealAmount?: number;
+  dealTime?: string;
+  createTime?: string;
+  updateTime?: string;
+}
+
+/** 客资查询参数 */
+export interface CustomerLeadParam {
+  leadId?: number;
+  name?: string;
+  phone?: string;
+  company?: string;
+  need?: string;
+  assignedUserId?: number;
+  dispatchRemarks?: string;
+  status?: number;
+  remarks?: string;
+  appointmentTime?: string;
+  dealAmount?: number;
+  sourceType?: string;
+  startDate?: string;
+  endDate?: string;
+  statusList?: string;
+  salesmanId?: number;
+  referrerId?: number;
+  keyword?: string;
+  pageNum?: number;
+  pageSize?: number;
+}
+
+/** 派单请求参数 */
+export interface LeadDispatchParam {
+  leadId?: number;
+  toUserId?: number;
+  remarks?: string;
+  dispatchType?: number;
+  leadIds?: number[];
+  batchMode?: boolean;
+}
+
+/** 跟进记录参数 */
+export interface LeadFollowParam {
+  leadId?: number;
+  followType?: number;
+  followContent?: string;
+  nextFollowTime?: string;
+  nextFollowPlan?: string;
+  attachmentUrls?: string;
+  updateStatus?: boolean;
+  newStatus?: number;
+}
+
+/** 派单记录 */
+export interface LeadDispatch {
+  dispatchId?: number;
+  leadId?: number;
+  fromUserId?: number;
+  toUserId?: number;
+  toUserName?: string;
+  adminId?: number;
+  adminName?: string;
+  dispatchRemarks?: string;
+  dispatchType?: number;
+  dispatchTypeText?: string;
+  leadCustomerName?: string;
+  leadCustomerPhone?: string;
+  createTime?: string;
+}
+
+/** 跟进记录 */
+export interface LeadFollowLog {
+  followId?: number;
+  leadId?: number;
+  userId?: number;
+  userName?: string;
+  followType?: number;
+  followTypeText?: string;
+  followContent?: string;
+  nextFollowTime?: string;
+  nextFollowPlan?: string;
+  attachmentUrls?: string;
+  customerName?: string;
+  customerPhone?: string;
+  createTime?: string;
+}
+
+/** 统计数据 */
+export interface LeadStatistics {
+  totalLeads?: number;
+  newLeads?: number;
+  assignedLeads?: number;
+  followedLeads?: number;
+  dealedLeads?: number;
+  dealAmount?: number;
+  referralCount?: number;
+  referralFee?: number;
+}
+
+/** 业务员统计 */
+export interface SalesmanStats {
+  total?: number;
+  pending?: number;
+  following?: number;
+  dealed?: number;
+  invalid?: number;
+}

src/views/cms/customerLead/index.vue

@@ -0,0 +1,797 @@
+<template>
+  <div class="customer-lead-container">
+    <!-- 搜索表单 -->
+    <div class="search-form">
+      <el-form :inline="true" :model="searchForm" class="search-form-inline">
+        <el-form-item label="关键词">
+          <el-input v-model="searchForm.keyword" placeholder="姓名/电话/公司" clearable />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="searchForm.status" placeholder="请选择" clearable>
+            <el-option
+              v-for="item in LeadStatusOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="来源">
+          <el-select v-model="searchForm.sourceType" placeholder="请选择" clearable>
+            <el-option
+              v-for="item in LeadSourceOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="业务员">
+          <el-select v-model="searchForm.salesmanId" placeholder="请选择" clearable filterable>
+            <el-option
+              v-for="item in salesmanList"
+              :key="item.userId"
+              :label="item.nickname || item.realName"
+              :value="item.userId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="日期">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+            @change="handleDateChange"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 统计卡片 -->
+    <div class="statistics-cards">
+      <el-row :gutter="16">
+        <el-col :span="6">
+          <div class="stat-card">
+            <div class="stat-value">{{ statistics.total || 0 }}</div>
+            <div class="stat-label">总客资</div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="stat-card warning">
+            <div class="stat-value">{{ statistics.pending || 0 }}</div>
+            <div class="stat-label">待跟进</div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="stat-card success">
+            <div class="stat-value">{{ statistics.dealed || 0 }}</div>
+            <div class="stat-label">已成交</div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="stat-card primary">
+            <div class="stat-value">¥{{ statistics.dealAmount || 0 }}</div>
+            <div class="stat-label">成交金额</div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="table-toolbar">
+      <div class="toolbar-left">
+        <el-button type="primary" @click="handleCreate">新增客资</el-button>
+        <el-button type="success" @click="handleBatchDispatch">批量派单</el-button>
+        <el-button @click="handleExport">导出数据</el-button>
+      </div>
+      <div class="toolbar-right">
+        <el-checkbox v-model="showAssigned" @change="handleShowAssignedChange">只看未分配</el-checkbox>
+      </div>
+    </div>
+
+    <!-- 数据表格 -->
+    <el-table
+      v-loading="loading"
+      :data="tableData"
+      border
+      stripe
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="leadId" label="ID" width="80" />
+      <el-table-column prop="name" label="客户姓名" min-width="100" />
+      <el-table-column prop="phone" label="联系电话" width="130" />
+      <el-table-column prop="company" label="公司名称" min-width="150" show-overflow-tooltip />
+      <el-table-column prop="need" label="需求描述" min-width="180" show-overflow-tooltip />
+      <el-table-column prop="status" label="状态" width="100">
+        <template #default="{ row }">
+          <el-tag :type="getStatusType(row.status)">{{ row.statusText }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="sourceType" label="来源" width="100">
+        <template #default="{ row }">
+          <span>{{ getSourceText(row.sourceType) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="assignedUserName" label="业务员" width="120">
+        <template #default="{ row }">
+          <span v-if="row.assignedUserName">{{ row.assignedUserName }}</span>
+          <el-tag v-else type="info" size="small">待分配</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="followCount" label="跟进次数" width="90" align="center" />
+      <el-table-column prop="dealAmount" label="成交金额" width="110">
+        <template #default="{ row }">
+          <span v-if="row.dealAmount">¥{{ row.dealAmount }}</span>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建时间" width="170" />
+      <el-table-column label="操作" width="280" fixed="right">
+        <template #default="{ row }">
+          <el-button link type="primary" size="small" @click="handleDetail(row)">详情</el-button>
+          <el-button link type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
+          <el-button link type="success" size="small" @click="handleDispatch(row)">派单</el-button>
+          <el-button link type="warning" size="small" @click="handleFollow(row)">跟进</el-button>
+          <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination-container">
+      <el-pagination
+        v-model:current-page="pagination.pageNum"
+        v-model:page-size="pagination.pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="pagination.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handlePageChange"
+      />
+    </div>
+
+    <!-- 新增/编辑弹窗 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="600px"
+      :close-on-click-modal="false"
+    >
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
+        <el-form-item label="客户姓名" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入客户姓名" />
+        </el-form-item>
+        <el-form-item label="联系电话" prop="phone">
+          <el-input v-model="formData.phone" placeholder="请输入联系电话" />
+        </el-form-item>
+        <el-form-item label="公司名称">
+          <el-input v-model="formData.company" placeholder="请输入公司名称" />
+        </el-form-item>
+        <el-form-item label="需求描述">
+          <el-input v-model="formData.need" type="textarea" :rows="3" placeholder="请输入需求描述" />
+        </el-form-item>
+        <el-form-item label="分配业务员">
+          <el-select v-model="formData.assignedUserId" placeholder="请选择业务员" clearable filterable>
+            <el-option
+              v-for="item in salesmanList"
+              :key="item.userId"
+              :label="item.nickname || item.realName"
+              :value="item.userId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="formData.remarks" type="textarea" :rows="2" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 详情弹窗 -->
+    <el-dialog v-model="detailVisible" title="客资详情" width="800px">
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="客户姓名">{{ currentRow?.name }}</el-descriptions-item>
+        <el-descriptions-item label="联系电话">{{ currentRow?.phone }}</el-descriptions-item>
+        <el-descriptions-item label="公司名称">{{ currentRow?.company || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="状态">
+          <el-tag :type="getStatusType(currentRow?.status)">{{ currentRow?.statusText }}</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="来源">{{ getSourceText(currentRow?.sourceType) }}</el-descriptions-item>
+        <el-descriptions-item label="分配业务员">{{ currentRow?.assignedUserName || '待分配' }}</el-descriptions-item>
+        <el-descriptions-item label="推荐人">{{ currentRow?.referrerName || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="跟进次数">{{ currentRow?.followCount || 0 }}</el-descriptions-item>
+        <el-descriptions-item label="成交金额">¥{{ currentRow?.dealAmount || 0 }}</el-descriptions-item>
+        <el-descriptions-item label="预约时间">{{ currentRow?.appointmentTime || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="需求描述" :span="2">{{ currentRow?.need || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="备注" :span="2">{{ currentRow?.remarks || '-' }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{ currentRow?.createTime }}</el-descriptions-item>
+        <el-descriptions-item label="派单时间">{{ currentRow?.dispatchTime || '-' }}</el-descriptions-item>
+      </el-descriptions>
+      
+      <!-- 跟进记录 -->
+      <div class="follow-history">
+        <h4>跟进记录</h4>
+        <el-timeline v-if="followHistory.length > 0">
+          <el-timeline-item
+            v-for="item in followHistory"
+            :key="item.followId"
+            :timestamp="item.createTime"
+            placement="top"
+          >
+            <el-card>
+              <p><strong>{{ item.followTypeText }}</strong> - {{ item.userName }}</p>
+              <p>{{ item.followContent }}</p>
+              <p v-if="item.nextFollowTime" class="next-follow">下次跟进：{{ item.nextFollowTime }} - {{ item.nextFollowPlan }}</p>
+            </el-card>
+          </el-timeline-item>
+        </el-timeline>
+        <el-empty v-else description="暂无跟进记录" />
+      </div>
+    </el-dialog>
+
+    <!-- 派单弹窗 -->
+    <el-dialog v-model="dispatchVisible" title="派单" width="500px">
+      <el-form ref="dispatchFormRef" :model="dispatchForm" :rules="dispatchRules" label-width="100px">
+        <el-form-item label="选择业务员" prop="toUserId">
+          <el-select v-model="dispatchForm.toUserId" placeholder="请选择业务员" filterable>
+            <el-option
+              v-for="item in salesmanList"
+              :key="item.userId"
+              :label="item.nickname || item.realName"
+              :value="item.userId"
+            >
+              <span>{{ item.nickname || item.realName }}</span>
+              <span class="lead-count"> ({{ item.leadCount || 0 }}个客资)</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="派单备注">
+          <el-input v-model="dispatchForm.remarks" type="textarea" :rows="3" placeholder="请输入派单备注" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dispatchVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleDispatchSubmit">确定派单</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 跟进弹窗 -->
+    <el-dialog v-model="followVisible" title="添加跟进记录" width="600px">
+      <el-form ref="followFormRef" :model="followForm" :rules="followRules" label-width="100px">
+        <el-form-item label="跟进方式" prop="followType">
+          <el-radio-group v-model="followForm.followType">
+            <el-radio v-for="item in FollowTypeOptions" :key="item.value" :label="item.value">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="跟进内容" prop="followContent">
+          <el-input v-model="followForm.followContent" type="textarea" :rows="4" placeholder="请输入跟进内容" />
+        </el-form-item>
+        <el-form-item label="下次跟进时间">
+          <el-date-picker
+            v-model="followForm.nextFollowTime"
+            type="datetime"
+            placeholder="选择日期时间"
+            value-format="YYYY-MM-DD HH:mm:ss"
+          />
+        </el-form-item>
+        <el-form-item label="下次跟进计划">
+          <el-input v-model="followForm.nextFollowPlan" type="textarea" :rows="2" placeholder="请输入下次跟进计划" />
+        </el-form-item>
+        <el-form-item label="更新状态">
+          <el-switch v-model="followForm.updateStatus" />
+        </el-form-item>
+        <el-form-item v-if="followForm.updateStatus" label="新状态">
+          <el-select v-model="followForm.newStatus" placeholder="请选择">
+            <el-option
+              v-for="item in LeadStatusOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="followVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleFollowSubmit">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import type { FormInstance, FormRules } from 'element-plus';
+import {
+  pageCustomerLead,
+  getCustomerLeadDetail,
+  createCustomerLead,
+  updateCustomerLead,
+  updateCustomerLeadStatus,
+  dispatchLead,
+  batchDispatchLeads,
+  addLeadFollowLog,
+  getLeadFollowHistory,
+  getLeadStatistics
+} from '@/api/cms/customerLead';
+import {
+  CustomerLead,
+  CustomerLeadParam,
+  LeadDispatchParam,
+  LeadFollowParam,
+  LeadStatusOptions,
+  LeadSourceOptions,
+  FollowTypeOptions
+} from '@/api/cms/customerLead/model';
+import { listUser } from '@/api/system/user';
+
+const loading = ref(false);
+const tableData = ref<CustomerLead[]>([]);
+const selectedRows = ref<CustomerLead[]>([]);
+const statistics = ref<Record<string, number>>({});
+const salesmanList = ref<any[]>([]);
+
+// 搜索表单
+const searchForm = reactive<CustomerLeadParam>({
+  keyword: '',
+  status: undefined,
+  sourceType: '',
+  salesmanId: undefined,
+  startDate: '',
+  endDate: ''
+});
+const dateRange = ref<string[]>([]);
+
+// 分页
+const pagination = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  total: 0
+});
+
+// 弹窗状态
+const dialogVisible = ref(false);
+const detailVisible = ref(false);
+const dispatchVisible = ref(false);
+const followVisible = ref(false);
+const dialogTitle = ref('新增客资');
+const isEdit = ref(false);
+
+// 当前行数据
+const currentRow = ref<CustomerLead | null>(null);
+
+// 表单数据
+const formData = reactive<CustomerLead>({
+  name: '',
+  phone: '',
+  company: '',
+  need: '',
+  assignedUserId: undefined,
+  remarks: ''
+});
+
+const formRef = ref<FormInstance>();
+const formRules: FormRules = {
+  name: [{ required: true, message: '请输入客户姓名', trigger: 'blur' }],
+  phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
+};
+
+// 派单表单
+const dispatchForm = reactive<LeadDispatchParam>({
+  leadId: undefined,
+  toUserId: undefined,
+  remarks: ''
+});
+const dispatchFormRef = ref<FormInstance>();
+const dispatchRules: FormRules = {
+  toUserId: [{ required: true, message: '请选择业务员', trigger: 'change' }]
+};
+
+// 跟进表单
+const followForm = reactive<LeadFollowParam>({
+  leadId: undefined,
+  followType: 1,
+  followContent: '',
+  nextFollowTime: '',
+  nextFollowPlan: '',
+  updateStatus: false,
+  newStatus: undefined
+});
+const followFormRef = ref<FormInstance>();
+const followRules: FormRules = {
+  followType: [{ required: true, message: '请选择跟进方式', trigger: 'change' }],
+  followContent: [{ required: true, message: '请输入跟进内容', trigger: 'blur' }]
+};
+
+// 跟进历史
+const followHistory = ref<any[]>([]);
+
+// 显示选项
+const showAssigned = ref(false);
+
+// 加载数据
+async function loadData() {
+  loading.value = true;
+  try {
+    const params = {
+      ...searchForm,
+      pageNum: pagination.pageNum,
+      pageSize: pagination.pageSize
+    };
+    
+    const result = await pageCustomerLead(params);
+    tableData.value = result.list;
+    pagination.total = result.total;
+    
+    // 如果选中只看未分配，筛选
+    if (showAssigned.value) {
+      tableData.value = tableData.value.filter(item => !item.assignedUserId);
+    }
+  } catch (error: any) {
+    ElMessage.error(error.message || '加载数据失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 加载统计数据
+async function loadStatistics() {
+  try {
+    const result = await getLeadStatistics({});
+    statistics.value = result.basic || {};
+  } catch (error) {
+    console.error('加载统计数据失败', error);
+  }
+}
+
+// 加载业务员列表
+async function loadSalesmanList() {
+  try {
+    const result = await listUser({ type: 1, pageSize: 100 });
+    salesmanList.value = result.list || [];
+  } catch (error) {
+    console.error('加载业务员列表失败', error);
+  }
+}
+
+// 搜索
+function handleSearch() {
+  pagination.pageNum = 1;
+  loadData();
+  loadStatistics();
+}
+
+// 重置
+function handleReset() {
+  Object.assign(searchForm, {
+    keyword: '',
+    status: undefined,
+    sourceType: '',
+    salesmanId: undefined,
+    startDate: '',
+    endDate: ''
+  });
+  dateRange.value = [];
+  handleSearch();
+}
+
+// 日期选择
+function handleDateChange(val: string[]) {
+  if (val && val.length === 2) {
+    searchForm.startDate = val[0];
+    searchForm.endDate = val[1];
+  } else {
+    searchForm.startDate = '';
+    searchForm.endDate = '';
+  }
+}
+
+// 分页
+function handleSizeChange(val: number) {
+  pagination.pageSize = val;
+  loadData();
+}
+
+function handlePageChange(val: number) {
+  pagination.pageNum = val;
+  loadData();
+}
+
+// 选择变化
+function handleSelectionChange(rows: CustomerLead[]) {
+  selectedRows.value = rows;
+}
+
+// 获取状态类型
+function getStatusType(status?: number) {
+  const option = LeadStatusOptions.find(item => item.value === status);
+  return option?.color || 'info';
+}
+
+// 获取来源文本
+function getSourceText(source?: string) {
+  const option = LeadSourceOptions.find(item => item.value === source);
+  return option?.label || source || '-';
+}
+
+// 新增
+function handleCreate() {
+  dialogTitle.value = '新增客资';
+  isEdit.value = false;
+  Object.assign(formData, {
+    leadId: undefined,
+    name: '',
+    phone: '',
+    company: '',
+    need: '',
+    assignedUserId: undefined,
+    remarks: ''
+  });
+  dialogVisible.value = true;
+}
+
+// 编辑
+async function handleEdit(row: CustomerLead) {
+  dialogTitle.value = '编辑客资';
+  isEdit.value = true;
+  try {
+    const detail = await getCustomerLeadDetail(row.leadId!);
+    Object.assign(formData, detail);
+    dialogVisible.value = true;
+  } catch (error: any) {
+    ElMessage.error(error.message || '获取详情失败');
+  }
+}
+
+// 详情
+async function handleDetail(row: CustomerLead) {
+  currentRow.value = row;
+  try {
+    const detail = await getCustomerLeadDetail(row.leadId!);
+    currentRow.value = detail;
+    followHistory.value = await getLeadFollowHistory(row.leadId!);
+    detailVisible.value = true;
+  } catch (error: any) {
+    ElMessage.error(error.message || '获取详情失败');
+  }
+}
+
+// 提交表单
+async function handleSubmit() {
+  if (!formRef.value) return;
+  
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        if (isEdit.value) {
+          await updateCustomerLead(formData);
+          ElMessage.success('更新成功');
+        } else {
+          await createCustomerLead(formData);
+          ElMessage.success('创建成功');
+        }
+        dialogVisible.value = false;
+        loadData();
+        loadStatistics();
+      } catch (error: any) {
+        ElMessage.error(error.message || '操作失败');
+      }
+    }
+  });
+}
+
+// 派单
+function handleDispatch(row: CustomerLead) {
+  dispatchForm.leadId = row.leadId;
+  dispatchForm.toUserId = undefined;
+  dispatchForm.remarks = '';
+  dispatchVisible.value = true;
+}
+
+// 批量派单
+function handleBatchDispatch() {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning('请先选择要派单的客资');
+    return;
+  }
+  
+  dispatchForm.leadIds = selectedRows.value.map(row => row.leadId!);
+  dispatchForm.batchMode = true;
+  dispatchForm.toUserId = undefined;
+  dispatchForm.remarks = '';
+  dispatchVisible.value = true;
+}
+
+// 提交派单
+async function handleDispatchSubmit() {
+  if (!dispatchFormRef.value) return;
+  
+  await dispatchFormRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        if (dispatchForm.batchMode) {
+          const result = await batchDispatchLeads(dispatchForm);
+          ElMessage.success(`成功派单 ${result.successCount} 条，失败 ${result.failCount} 条`);
+        } else {
+          await dispatchLead(dispatchForm);
+          ElMessage.success('派单成功');
+        }
+        dispatchVisible.value = false;
+        loadData();
+        loadStatistics();
+      } catch (error: any) {
+        ElMessage.error(error.message || '派单失败');
+      }
+    }
+  });
+}
+
+// 跟进
+function handleFollow(row: CustomerLead) {
+  followForm.leadId = row.leadId;
+  followForm.followType = 1;
+  followForm.followContent = '';
+  followForm.nextFollowTime = '';
+  followForm.nextFollowPlan = '';
+  followForm.updateStatus = false;
+  followForm.newStatus = undefined;
+  followVisible.value = true;
+}
+
+// 提交跟进
+async function handleFollowSubmit() {
+  if (!followFormRef.value) return;
+  
+  await followFormRef.value.validate(async (valid) => {
+    if (valid) {
+      try {
+        await addLeadFollowLog(followForm);
+        ElMessage.success('添加跟进成功');
+        followVisible.value = false;
+        loadData();
+        loadStatistics();
+      } catch (error: any) {
+        ElMessage.error(error.message || '添加跟进失败');
+      }
+    }
+  });
+}
+
+// 删除
+function handleDelete(row: CustomerLead) {
+  ElMessageBox.confirm('确定要删除这条客资吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    // 调用删除接口
+    ElMessage.success('删除成功');
+    loadData();
+    loadStatistics();
+  }).catch(() => {});
+}
+
+// 导出
+async function handleExport() {
+  try {
+    // 实际项目中调用导出接口
+    ElMessage.info('导出功能开发中...');
+  } catch (error: any) {
+    ElMessage.error(error.message || '导出失败');
+  }
+}
+
+// 显示切换
+function handleShowAssignedChange() {
+  handleSearch();
+}
+
+onMounted(() => {
+  loadData();
+  loadStatistics();
+  loadSalesmanList();
+});
+</script>
+
+<style scoped lang="scss">
+.customer-lead-container {
+  padding: 16px;
+}
+
+.search-form {
+  background: #fff;
+  padding: 16px;
+  border-radius: 4px;
+  margin-bottom: 16px;
+}
+
+.statistics-cards {
+  margin-bottom: 16px;
+  
+  .stat-card {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center;
+    
+    .stat-value {
+      font-size: 28px;
+      font-weight: bold;
+      margin-bottom: 8px;
+    }
+    
+    .stat-label {
+      font-size: 14px;
+      opacity: 0.9;
+    }
+    
+    &.warning {
+      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    }
+    
+    &.success {
+      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    }
+    
+    &.primary {
+      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+    }
+  }
+}
+
+.table-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  
+  .toolbar-left {
+    display: flex;
+    gap: 8px;
+  }
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+
+.follow-history {
+  margin-top: 24px;
+  border-top: 1px solid #eee;
+  padding-top: 16px;
+  
+  h4 {
+    margin-bottom: 16px;
+    font-size: 16px;
+  }
+  
+  .next-follow {
+    color: #909399;
+    font-size: 12px;
+    margin-top: 8px;
+  }
+}
+
+.lead-count {
+  color: #909399;
+  font-size: 12px;
+  margin-left: 8px;
+}
+</style>