177 lines
7.3 KiB
Markdown
177 lines
7.3 KiB
Markdown
# 公海池模块迁移方案 — 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 | 待适配 |
|