96 lines
3.1 KiB
Markdown
96 lines
3.1 KiB
Markdown
# 线索管理模块迁移方案 — 03 前端页面规格
|
||
|
||
> 来源：`shanxia/crm/web/src/views/crm/clue/` + README.md
|
||
> UI 权威：`docs/web-admin-ui-spec-fresh-mint.md`；列表参照 `/#/demo/order`，表单弹窗参照 `ProtocolFormDialog` / `/#/demo/user`
|
||
|
||
---
|
||
|
||
## 页面 1：线索列表 `index.vue`
|
||
|
||
### 结构
|
||
|
||
1. `panel-top` 单标题「线索列表」+ 竖条
|
||
2. `panel-tabs`：我的线索 / 全部线索 / 待跟进 / 今日新增 / 已转化
|
||
3. `filter-block` + `filter-extra`（禁止筛选区内横线）
|
||
4. `list-toolbar`：已选 N 项 → 新增（唯一 primary）→ 分配 / 导出 / 导入 等描边
|
||
5. `list-body` + `el-table`（`stripe`，无 `border`）+ 分页 `list-pager-bar`
|
||
6. 内嵌弹窗组件：`form`、`followForm`、`convertForm`、`assignForm`、`invalidForm`（保持原 CRM 结构，不强行拆路由）
|
||
|
||
### 主要字段（筛选）
|
||
|
||
线索姓名、公司、手机、来源、等级、状态、行业、负责人、创建时间范围等（与原 CRM 一致）。
|
||
|
||
### 表格列（示例）
|
||
|
||
线索姓名（链接进详情）、公司、手机、来源/等级/状态（`el-tag`）、负责人、下次联系时间、跟进次数、创建时间、操作列 `fixed="right"` min-width ≥ 260。
|
||
|
||
### 操作与权限
|
||
|
||
| 操作 | v-auth / 权限 |
|
||
|------|----------------|
|
||
| 新增 | add |
|
||
| 导出 | export |
|
||
| 导入 | import |
|
||
| 查看 | query（跳详情） |
|
||
| 编辑 | edit |
|
||
| 跟进 | follow |
|
||
| 分配 | assign |
|
||
| 转化 | convert |
|
||
| 标无效 | invalid |
|
||
| 删除 | remove |
|
||
|
||
### API 调用（适配后）
|
||
|
||
见 `04-api-spec.md`；全部改为 `request.post('/web/crm/clue/...')` + 驼峰 body。
|
||
|
||
---
|
||
|
||
## 页面 2：线索详情 `detail.vue`
|
||
|
||
### 结构
|
||
|
||
- 左：基本信息 + 线索信息 + 需求描述
|
||
- 右：跟进统计 + 快捷按钮（转化、添加跟进）
|
||
- 下方：跟进记录表格 + 分页
|
||
- 子组件：`form`、`followForm`、`convertForm`
|
||
|
||
### 路由
|
||
|
||
- 原 CRM：`/crm/clue/detail?id=`
|
||
- 门户：`/#/crm/clue/detail/:id`（`hideInMenu` + `menuCode: crm:clue:query`）
|
||
|
||
### UI 适配要点
|
||
|
||
- 状态/等级/来源用 `el-tag` + 字典 `tagType`
|
||
- 按钮带 `<el-icon>` + 6px 间距
|
||
- 删除「转化」等主操作是否符合 Fresh Mint 色阶（避免滥用 danger 当主按钮）
|
||
|
||
---
|
||
|
||
## 页面 3~7：弹窗组件
|
||
|
||
| 文件 | 适配要点 |
|
||
|------|----------|
|
||
| `form.vue` | `dialog-form-layout`、`label-position="top"`、`form-grid-2`、长字段跨列 |
|
||
| `followForm.vue` | 附件走 `attachment-upload-field` 或门户统一上传组件 |
|
||
| `convertForm.vue` | 展示线索摘要 + 转化原因校验（≥20 字以 Java 为准） |
|
||
| `assignForm.vue` | 用户下拉 `fetchUserOptions` / `fetchUserList`（**禁止** `@/api/system/user`） |
|
||
| `invalidForm.vue` | 原因必填 |
|
||
|
||
---
|
||
|
||
## 页面 8：统计 `statistics/index.vue`（Phase B）
|
||
|
||
依赖 5 个 statistics API；后端就绪后再适配 ECharts。
|
||
|
||
---
|
||
|
||
## 前端适配检查表（每页完成后勾选）
|
||
|
||
- [ ] 无 `backdrop-filter` 模糊
|
||
- [ ] 工具栏非 `space-between` 甩按钮
|
||
- [ ] 表格列 `min-width`
|
||
- [ ] 弹窗 `align-center` + `scroll-to-error`
|
||
- [ ] 按钮均有图标
|
||
- [ ] 树/字典：标签语义色符合规范
|