|
|
@@ -0,0 +1,155 @@
|
|
|
+# Web-Admin 询价单详情「已选商品」独立 Tab 设计
|
|
|
+
|
|
|
+> 日期：2026-08-05
|
|
|
+> 页面：`web-admin` → `#/inquiry/manage`（询价报价管理）
|
|
|
+> 已确认口径：方案 **1**（Hero 固定 + 两 Tab）+ 已选 Tab 用 **表格** + **仅改详情弹窗**
|
|
|
+
|
|
|
+## 1. 背景与问题
|
|
|
+
|
|
|
+### 1.1 现状
|
|
|
+
|
|
|
+- 「询价单详情」弹窗（`web-admin/src/views/system/inquiry-quotation/index.vue`）在基础信息下方展示「已选商品」标签云（`picker-selected` + `el-tag`）。
|
|
|
+- 询价商品较多时，标签云纵向占位大，把下方分类树 / 商品列表挤到更低位置，首屏可读性差。
|
|
|
+- 标签云与下方「商品列表」数据同源（`viewInquiryProductsFlat`），信息有重叠。
|
|
|
+
|
|
|
+### 1.2 目标
|
|
|
+
|
|
|
+- 默认打开详情时，首屏以 **基础信息 + 分类浏览** 为主，不被已选清单撑高。
|
|
|
+- 「已选商品」仍可完整查看，且以 **表格** 形式便于扫读与搜索。
|
|
|
+- 不改后端接口；不改新增/编辑询价单选品体验。
|
|
|
+
|
|
|
+### 1.3 非目标
|
|
|
+
|
|
|
+- 不改造「新增/编辑询价单」弹窗内的已选商品标签区。
|
|
|
+- 不新增 API、不改表结构。
|
|
|
+- 不做分页（本期沿用全量 `viewInquiryProductsFlat`；数据量与现网询价单规模一致）。
|
|
|
+- 不改变概览区卡片/列表切换、分类筛选、双击看商品详情等既有行为。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 2. 已确认决策
|
|
|
+
|
|
|
+| 项 | 选择 |
|
|
|
+|----|------|
|
|
|
+| Tab 结构 | **A**：① 概览（基础信息 + 分类树/商品列表）② 已选商品（表格） |
|
|
|
+| 已选展示 | **B**：表格（对齐概览 list 模式列） |
|
|
|
+| 改动范围 | **A**：仅「询价单详情」弹窗 |
|
|
|
+| 布局方案 | **方案 1**：Hero 固定在 Tabs 上方；默认 Tab = 概览 |
|
|
|
+| 搜索 | 概览搜索与已选 Tab 搜索 **互相独立** |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 3. 方案对比（回顾）
|
|
|
+
|
|
|
+| 方案 | 说明 | 结论 |
|
|
|
+|------|------|------|
|
|
|
+| **1 Hero + 两 Tab** | Hero 固定；概览去掉标签云；已选独立表格 Tab | **采用** |
|
|
|
+| 2 Collapse 折叠标签云 | 改动小，展开后仍占空间 | 不采用 |
|
|
|
+| 3 概览「共 N 个」跳转已选 Tab | 多一层交互，本期不必 | 不采用 |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 4. 界面与行为设计
|
|
|
+
|
|
|
+### 4.1 布局
|
|
|
+
|
|
|
+```
|
|
|
+[询价单详情 Dialog]
|
|
|
+ Hero（标题 / 状态 / 创建时间） ← 始终可见
|
|
|
+ el-tabs（默认 overview）
|
|
|
+ ├─ 概览
|
|
|
+ │ ├─ 基础信息（标题 / 创建时间 / 备注）
|
|
|
+ │ └─ embedded picker：搜索 + 分类树 + 卡片/列表
|
|
|
+ └─ 已选商品
|
|
|
+ ├─ 工具栏：共 N 个 + 名称搜索
|
|
|
+ └─ el-table（固定高度约 400）
|
|
|
+ Footer：关闭
|
|
|
+```
|
|
|
+
|
|
|
+### 4.2 概览 Tab
|
|
|
+
|
|
|
+- 保留现有 Hero、基础信息、`picker-search-row`、分类树、右侧卡片/列表、双击打开 `ProductViewDialog`。
|
|
|
+- **移除** `picker-selected` 标签云区块（仅详情弹窗）。
|
|
|
+- 右侧标题仍可显示「共 N 个」（N = 本单商品总数），语义不变。
|
|
|
+
|
|
|
+### 4.3 已选商品 Tab
|
|
|
+
|
|
|
+- 数据源：`viewInquiryProductsFlat`（打开详情时已加载，无需二次请求）。
|
|
|
+- 工具栏：
|
|
|
+ - 文案：无已生效关键词时显示「共 N 个」；有关键词时显示「共 M / N 个」（M=过滤后数量，N=本单总数）。
|
|
|
+ - 搜索：输入框 +「搜索」按钮；支持回车；按商品名称包含匹配（与概览搜索规则一致：trim 后名称 includes）。
|
|
|
+- 表格列（与概览 list 模式对齐）：
|
|
|
+
|
|
|
+ | 列 | 说明 |
|
|
|
+ |----|------|
|
|
|
+ | 序号 | index + 1 |
|
|
|
+ | 图片 | `imageUrl` / 无图占位 |
|
|
|
+ | 商品名称 | `name`，overflow tooltip |
|
|
|
+ | 分类 | `formatCategoryName(...)` |
|
|
|
+ | 计量 | `formatMeasureCell` |
|
|
|
+ | 单位 | `unitName` |
|
|
|
+ | 规格 | `formatSpecCell` |
|
|
|
+ | 商品描述 | `description`，overflow tooltip |
|
|
|
+
|
|
|
+- 空态：`el-empty`「暂无商品」（过滤为空时同用 empty）。
|
|
|
+- 双击行：调用现有 `openPickerProductView(row)`。
|
|
|
+- 不提供卡片/列表切换（本 Tab 固定表格）。
|
|
|
+
|
|
|
+### 4.4 打开 / 关闭
|
|
|
+
|
|
|
+`openViewInquiry` 时额外重置：
|
|
|
+
|
|
|
+- `viewInquiryDetailTab = 'overview'`
|
|
|
+- 已选 Tab 关键词（输入值与已应用值）清空
|
|
|
+
|
|
|
+关闭弹窗（`destroy-on-close`）后状态随下次打开重建即可。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 5. 实现要点（前端）
|
|
|
+
|
|
|
+### 5.1 文件
|
|
|
+
|
|
|
+- 仅改：`web-admin/src/views/system/inquiry-quotation/index.vue`
|
|
|
+
|
|
|
+### 5.2 新增状态（建议命名）
|
|
|
+
|
|
|
+| 变量 | 类型 | 默认 | 用途 |
|
|
|
+|------|------|------|------|
|
|
|
+| `viewInquiryDetailTab` | `'overview' \| 'selected'` | `'overview'` | 当前 Tab |
|
|
|
+| `viewSelectedTabKeyword` | `string` | `''` | 已选 Tab 输入框 |
|
|
|
+| `viewSelectedTabAppliedKeyword` | `string` | `''` | 已选 Tab 已生效关键词 |
|
|
|
+
|
|
|
+### 5.3 计算属性
|
|
|
+
|
|
|
+- `viewSelectedTabProducts`：对 `viewInquiryProductsFlat` 按 `viewSelectedTabAppliedKeyword` 过滤名称。
|
|
|
+
|
|
|
+### 5.4 样式
|
|
|
+
|
|
|
+- 沿用现有 `inquiry-quotation-dialog` / Fresh Mint 样式。
|
|
|
+- Tabs 仅做必要间距（如 `margin-top`），不引入新视觉体系。
|
|
|
+- 已选表格可复用 `picker-product-table` / `picker-table-thumb` 等现有 class。
|
|
|
+
|
|
|
+### 5.5 明确不改
|
|
|
+
|
|
|
+- 新增/编辑询价单弹窗中的 `picker-selected` 标签区。
|
|
|
+- `fetchInquiryDetail` 及后端任何接口。
|
|
|
+- 报价明细、确认定价等其他弹窗。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 6. 验收标准
|
|
|
+
|
|
|
+1. 打开商品较多的询价单详情，默认停在「概览」，首屏看不到大段已选标签云。
|
|
|
+2. 切换「已选商品」可见完整表格；列信息与概览列表模式一致。
|
|
|
+3. 已选 Tab 内搜索只过滤本 Tab，不影响概览分类/搜索状态；反之亦然。
|
|
|
+4. 双击已选表格行可打开商品详情。
|
|
|
+5. 再次打开详情时回到「概览」，两侧搜索关键词已清空。
|
|
|
+6. 新增/编辑询价单选品交互与改前一致。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 7. 风险与备注
|
|
|
+
|
|
|
+- 极大量商品时全量表格仍可能偏重；本期不引入分页，与现有详情全量加载策略一致。若后续有性能问题，再单独评估虚拟列表或分页。
|
|
|
+- UI 文案保持简体中文（与现网 `web-admin` 一致）：Tab 名「概览」「已选商品」。
|
