shanxia2.0/docs/crm-migration/plans/customer-pool/03-frontend-spec.md

公海池模块迁移方案 — 03 前端页面功能规格

UI 规范：docs/crm-migration/ref-ui-standards.md、docs/crm-migration/ref-frontend-diff.md

---

页面 1：公海池客户列表（views/crm/customer/pool/index.vue）

页面功能

展示所有 status='pool' 的客户，支持搜索筛选、领取、分配、查看详情。顶部显示统计信息（总数/今日新增/本周新增/重点客户）。

搜索条件

#	字段	组件类型	对应 API 参数	说明
1	客户名称	el-input	customerName	模糊搜索
2	客户编号	el-input	customerNo	模糊搜索
3	客户级别	el-select	level	字典 crm_customer_level
4	（快速搜索）	el-input（工具栏内）	keyword	客户名称模糊搜索

统计信息栏

统计项	字段	说明
公海池客户总数	poolStatistics.totalCount	status=pool 的客户数
今日新增	poolStatistics.todayCount	今日进入公海的客户数
本周新增	poolStatistics.weekCount	本周进入公海的客户数
重点客户	poolStatistics.keyCount	level=key 的公海客户数

列表字段（完整，含列设置功能）

#	列标题	字段	min-width	格式	列设置可见
1	客户编号	customerNo	150	text	是
2	客户名称	customerName	180	link(点开详情)	是
3	客户简称	shortName	150	text	是
4	客户类型	customerType	150	el-tag	是
5	手机号	mobile	120	text	是
6	固定电话	telephone	120	text	是
7	邮箱	email	160	text	是
8	客户网站	website	180	text	是
9	客户级别	level	100	el-tag	是
10	客户来源	source	100	el-tag	是
11	所属行业	industry	120	el-tag	是
12	所在园区	parkArea	120	el-tag	是
13	企业规模	scale	100	el-tag	是
14	省	province	100	text	是
15	市	city	100	text	是
16	区	district	100	text	是
17	详细地址	address	200	text	是
18	客户状态	status	100	el-tag	是
19	成交状态	dealStatus	100	el-tag	是
20	原负责人	ownerUserName	100	text	是
21	跟进次数	followCount	100	text	是
22	最后跟进时间	lastTime	160	date	是
23	下次联系时间	nextTime	160	date	是
24	成交时间	dealTime	160	date	是
25	成交金额	dealAmount	120	¥xxx	是
26	联系人数量	contactCount	100	text	是
27	商机数量	opportunityCount	100	text	是
28	合同数量	contractCount	100	text	是
29	进入公海时间	intoPoolTime	160	date	是
30	领取时间	claimTime	160	date	是
31	保护到期时间	protectTime	160	date	是
32	创建部门	createDeptName	120	text	是
33	创建人	createByName	100	text	是
34	创建时间	createTime	160	date	是
35	更新人	updateByName	100	text	是
36	更新时间	updateTime	160	date	是
37	备注	remark	200	text	是

操作按钮

#	按钮	位置	权限标识	触发动作
1	领取客户	工具栏	claim	需选中≥1行，打开领取弹窗
2	分配客户	工具栏	assign	需选中≥1行，打开分配弹窗
3	列设置	工具栏	无	打开列设置弹窗

弹窗清单

弹窗	组件文件	触发方式	说明
领取客户	ClaimDialog.vue	点击「领取客户」按钮	批量领取
分配客户	AssignDialog.vue	点击「分配客户」按钮	批量分配给指定负责人
客户详情	CustomerDetailDialog.vue	点击客户名称链接	查看客户详情
列设置	el-dialog（内联）	点击「列设置」按钮	控制表格列显示/隐藏

---

弹窗 1：领取客户（ClaimDialog.vue）

表单字段

#	字段标签	API 字段	组件类型	必填	默认值
1	领取数量	—	el-tag(info)	—	显示 N 个客户
2	领取说明	remark	el-input(textarea)	否	—

交互流程

1. 选中客户 → 点击「领取客户」→ 打开弹窗
2. 调用 fetchClaimCustomer({ ids, remark })
3. 成功 → ElMessage.success + 关闭弹窗 + 刷新列表

---

弹窗 2：分配客户（AssignDialog.vue）

表单字段

#	字段标签	API 字段	组件类型	必填	校验	说明
1	分配数量	—	el-tag(info)	—	—	显示 N 个客户
2	分配给	ownerUserId	el-select(filterable)	是	required	加载系统用户列表
3	分配说明	remark	el-input(textarea)	否	—	—

交互流程

1. 选中客户 → 点击「分配客户」→ 打开弹窗 + 加载用户列表
2. 选择负责人 → 调用 fetchAssignPoolCustomers({ ids, ownerUserId, remark })
3. 成功 → ElMessage.success + 关闭弹窗 + 刷新列表

---

页面 2：公海池规则管理（views/crm/customer/pool/RuleIndex.vue）

原 CRM 无独立前端页面（规则管理入口被隐藏），shanxia2.0 新增此页面以满足管理需求。

搜索条件

#	字段	组件类型	对应 API 参数
1	规则名称	el-input	poolName
2	规则类型	el-select	ruleType
3	状态	el-select	status

列表字段

#	列标题	字段	min-width	格式
1	规则名称	poolName	150	text
2	规则类型	ruleType	120	el-tag(no_follow/no_deal)
3	超时天数	timeoutDays	100	text
4	保护期天数	protectDays	100	text
5	状态	status	100	el-tag(enable/disable)
6	排序号	sort	80	text
7	创建时间	createTime	160	date
8	操作	—	200	编辑/删除/启停

操作按钮

#	按钮	位置	触发动作
1	新增规则	工具栏	打开新增弹窗
2	编辑	操作列	打开编辑弹窗
3	删除	操作列	确认后删除（启用状态禁止删除）
4	启用/禁用	操作列	切换状态

---

前端功能完整性对照表

#	原 CRM 功能	shanxia2.0 对应	状态
1	公海池客户列表（含统计信息）	pool/index.vue	待重写
2	客户名称/编号/级别搜索	筛选区	待重写
3	快速搜索框	工具栏内 el-input	待新增
4	统计信息栏（总数/今日/本周/重点）	el-statistic ×4	待新增
5	领取客户	ClaimDialog.vue	待重写
6	分配客户	AssignDialog.vue	待新增
7	客户详情	CustomerDetailDialog.vue	待确认复用
8	列设置（显示/隐藏列）	el-dialog + checkbox	待新增
9	规则管理（隐藏功能）	RuleIndex.vue	待新增
10	dict-tag 字典展示	el-tag + dictStore	待适配